• Home

Items filtered by date: December 2014

Sunday, 10 November 2024 13:33

My Bitwarden Notes

This collection of notes makes using Bitwarden easier.

 

Some thoughts (I might changemy mind)

  • You should not store your TOTP codes in Bitwarden
    • Bitwarden = Username and Passwords
    • 2FAS = TOTP codes
    • Protect your devices (i.e. mobile phone) with your fingerprint, Yubikey or PIN.
  • Enable 2FA on your Bitwarden vault with an external App (i.e. 2FA)
    • This makes everything 2FA (sort off)
    • Stops password guessing
    • Print your TOTP codes for Bitwarden

Settings

  • Domain Matching Issue
    • Using URIs | Bitwarden Help Center - Find out more about how URI match detection works in the Bitwarden password manager.
      • "browser extension --> Settings --> Options --> General --> Default URI match detection: Host"
    • You can set the match detection to “Host” on all your logins.
      • They will only be suggested when the host fully matches (subdomain and port included) the page you’re on.
    • Lastpass password manager had the ability to specify which mapping to perform for the example.com domain.
      • In Bitwarden Manager, the mapping happens either GLOBALLY or at the individual password / host / URL level. It is not comfortable.
  • Not Autofilling in passwords
  • How to add a custom field easily
    • Autofill Custom Fields | Bitwarden Help Center - Bitwarden can do more than just autofill your usernames and passwords! Bitwarden browser extensions can autofill custom fields to simplify filling in security questions, PINS, and more using the unique Tab view.
  • Bitwarden keeps timing out
  • Lock or Lockout
    • Vault Timeout Options | Bitwarden Help Center - Learn how to set a Vault timeout timer and behavior for your Bitwarden password manager.
    • Best Practices - Log Out or Lock? - Password Manager - Bitwarden Community Forums
      • It’s pretty simple:
        • Logging in retrieves a copy of your encrypted vault data from the cloud, stores the encrypted data file (data.json) in persistent storage on your device (e.g., on your hard drive), and automatically proceeds to unlock your vault.
        • Unlocking reads the data.json file, decrypts its contents, and stores the decrypted vault data in the memory of your device.
        • Locking clears the (decrypted) vault data from the memory of your device, but leaves the encrypted data.json file in persistent storage on your device.
        • Logging out clears the memory of your device (same as locking), but also purges the encrypted contents of the data.json file. Thus, your device no longer contains any vault data, either encrypted or decrypted, neither in memory nor on disk.
      • The majority of users stay logged in all the time, and just lock their vaults when not in use.
      • = lock
  • Floating Window
    • On the app click on the square with the arrow and resize as required
    • This floating window can stay open

Tutorials

 

Import / Export Data

2FA

  • I need some clarification on 2FA
    • Q:
      • Obviously if I just add an authenticator 2FA to my account and then I loose the tokens and my recovery codes I cannot access my account.
      • My question is, if I also add an alternative email for 2FA, will this be available and work even if I do not have my TOTP tokens and recovery codes?
    • A:
  • Two-step Login Methods | Bitwarden Help Center
    • The Bitwarden password manager supports multiple two-step login methods, also know as 2FA and two-factor authentication, such as through an authenticator app or email. Learn how to set up and use each method.
    • TOTP + email can be used for free
  • Two-step Login via Authenticator | Bitwarden Help Center - This article explains how you can add an extra layer of protection to your Bitwarden Vault by setting up two-step login with an authenticator app like Authy.
  • How To Set Up and Use 2FA on Bitwarden | Nerds Chalk - Let’s take a look at how to set up 2FA on Bitwarden and then how to use it. 
  • Integrated Authenticator | Bitwarden Help Center - Password Manager integrated authentication is an alternative to dedicated authentication apps which you can use to verify your identity for websites and apps that use two-step login and offers greater convenience.
  • Using Bitwarden for both passwords and TOTP (i.e both 2FA factors)
    • Benefits of using the Bitwarden Authenticator - Securing your GitHub Account with Bitwarden | Bitwarden Blog
      • With two-factor authentication built into Bitwarden, you can rest assured that you always have it handy and ready to go. Of course some people ask what is the point of having the two-factor authentication within Bitwarden and doesn’t this negate the value of two-factor?
    • Using the Bitwarden Authenticator with external accounts - Basics of two-factor authentication with Bitwarden | Bitwarden Blog
      • Of course, some may ask what is the point of having your username, email, and your two-step login code all stored within the same application — namely Bitwarden? Doesn’t that negate the value of two-step login?
      • The answer depends. Let’s break it down.
        1. Your Bitwarden Vault hopefully already has two-step login using some other method. (ie. do not use the Bitwarden Authenticator to protect your Bitwarden account.) Therefore it is currently protected with a high level of security and, in fact, two-step login.
        2. Having two-step login enabled for websites and applications is always better than not having it enabled. A tighter bundling of two-step login makes it easier to use more frequently, which promotes better security hygiene as a practice.
        3. If you need to share an item, you can share it with two-step login enabled, which, again, is better security practice. This is a collaboration and two-step login power move.
        4. You do not need to remember which authentication app you used, since it is built in.
        5. You can always choose, on an individual basis, which login you want to authenticate internally within the Bitwarden app, or externally using a separate Authenticator app.
      • Bitwarden users find that the integrated Authenticator functionality provides faster workflows with better security and dexterity for collaboration. Users also note that they apply different policies to different types of accounts. Primary financial institutions may be authenticated externally using a separate Authenticator app, while all of their ecommerce logins are authenticated internally within Bitwarden.
    • Security risks of using Bitwarden as authenticator and password manager - Password Manager - Bitwarden Community Forums
      • This is  great discussion about this topic and should be read in full.
      • Q:
        • I’d appreciate the opinions and inputs of others with more expertise in security. My concern of using Bitwarden as both authenticator and password manager is that it seems to defeat the whole purpose of two-factor authentication.
        • If someone were to hack into my Bitwarden account, they’d basically have access to everything, including the one-time passwords. Having the password manager separated from the authenticator by device and account seems to be a much more secure approach. For this reason, I’m currently not using Bitwarden as authenticator, only password manager. However, in principle I think this should be disabled completely for every users’ security. Again, I’m totally open to others’ thoughts.
      • A:
        • hwsamuel
          • Your Bitwarden Vault hopefully already has two-step login using some other method. (ie. do not use the Bitwarden Authenticator to protect your Bitwarden account.) Therefore it is currently protected with a high level of security and, in fact, two-step login.
        • Pulsar
          • I’ve thought about that long time ago and I came to conclusion that if you have 2FA on bitwarden you are just moving the 2FA from directly authenticating to authenticating on 2FA with bitwarden.
          • There is a higher probability of hacking any of your other accounts than bitwarden itself. Although you are theoretically increasing attack surface, as a hacker I would rather attack your direct account rather than bitwarden.
        • B0UNC3R
          • I would store the less sensitive OTP in Bitwarden (e.g., Amazon, random webshops) and use hardware security keys for the more sensitive stuff (e.g., email, banking).
        • slavdok
          • There are 2 concepts:
            • Two-Factor Authentication (2FA)
            • Two-Step Authentication (2SA)
          • A lot of times these are used interchangeably. They both offer increased security, but they are not the same. Having your 3rd-party account TOTP seeds stored in Bitwarden, unlocked by the same method as your 3rd-party account password (i.e. unlocked by single master password) downgrades them from 2FA to 2SA. A different factor would be something different than your master password. That’s why it’s called 2-factor.
          • A factor is not “another password”. A factor is one of:
            • Something you know (a password, a TOTP seed)
            • Something you have (a security key, a phone/device with TOTP seeds)
            • Something you are (biometrics)
          • You see above how storing 3rd-party passwords and 3rd-party TOTP seeds together (in password manager) makes it “same factor”, unlocked by the same method: something you know, i.e. the 1st-party master password. [But what about 1st-party 2FA? I will get to that later]
          • But is it a bad thing? Not always. That depends on your threat profile.
        • slavdok
          • But, what if you had Fingerprint (something you are) or PIN (something you know) on BW app? Well, that’s a 2nd factor. So now, if someone steals your phone (something you have), which would give them access to unlocked Authy, or SMS TOTP codes, for that matter, they still don’t have your BW MP (something you know) or PIN (something you know) or Fingerprint (something you are). They can steal the phone, marvel at the TOTP codes changing on the screen all day long, and they still cannot access your vault without the 2nd factor.
        • Ben86
          • I think we can all agree that using a separate TOTP app on a separate device is more secure.
          • The purpose of TOTP isn’t to protect against these Hollywood fantasy attacks, it’s to compensate for weak passwords or buy time for password leaks, not your computer getting hacked. Storing TOTP in BW still delivers on this.
        • Carlos
          • I use an external app as a 2FA for my bitwarden account so even if someone managed to steal my bitwarden credentials, they would still need a 2FA to gain access.
        • icefyre
          • If you have a secondary authentication app that requires biometrics for access which is different than Bitwarden (and maybe even on a different device, for example an app on your phone rather than on your PC) you will have introduced yet another layer of security and difficulty for the attacker to access those particularly sensitive accounts.
          • The main argument I would say in favor of storing TOTP code in Bitwarden is convenience.
          • If you are less likely to use MFA due to the inconvenience of using authenticator apps and Bitwarden would make you use it more then you should probably use this feature (e.g. people with lower risk tolerance or family members with less technical proclivities).
          • Otherwise, separating the authenticator app from the password manager would add an extra layer of security and it probably the right way to go.
    • Where do you store your 2FA backup codes? | Reddit
      • Q:
        • Imagine this scenario: Your house burns down and you lose your phone and the printed backup codes with it, locking you out of your account.  
        • Should i store my backup codes elsewhere or is there any other approach for this? Or am i just overthinking this?
      • A:
        • atoponce
          • Key points
            1. You should not use Bitwarden for your 2FA. Use a mobile app that supports backups (Aegis, andOTP, etc (not Google Authenticator)).
            2. 2FA TOTP backup codes should be stored in a separate password manager, like KeePass, etc..
            3. Your TOTP app (Aegis, etc) and TOTP backup codes (KeePass, etc) should be backed up to at least two locations.
          • Keeping TOTP out of Bitwarden prevents a single point of failure with compromises. If your Bitwarden vault is compromised, you don't want your accounts where 2FA is enabled to be compromised also. Keep TOTP away from your main password manager.
          • The backup codes service providers give you when you enable 2FA should be saved, in case you lose your device where you're managing TOTP. Again, don't put them in Bitwarden. Put them in a second password manager like KeePass or KeePassXC, for the same reason. That means you have:
            • Bitwarden: Managing account passwords
            • Aegis/andOTP: Managing TOTP codes
            • KeePass: Managing 2FA backup code
          • All of these support backups. So take advantage of that! Export your Bitwarden vault, export your Aegis/andOTP entries, and copy your KeePass vault. A backup is not a backup if you only have one copy! So put them in multiple places.
          • ........and more.....
    • What do you do to keep from being locked out because of 2FA? | Reddit
      • I’m curious what everyone does so that they don’t lose access to their 2FA and/or account? For example, you lost everything due to a fire and the firefighter drags your unconscious body out how would you get back in your account? (A little dramatic but you get my point).
      • Second Bitwarden account.
    • Should Secure Notes be used to store 2FA backup codes? | Reddit
      • Q:
        • Just wondering what the use case for Secure Notes is and realized one thing I never know how to store are 2FA backup codes.
      • A:
        • The way I see it: If you use BW´s 2fa feature, you might as well save the backup codes of the respective services within BW. Because after all, the only way for me to get to your backup codes is to get full on access to your BW vault, where I also had the 2FA for the stored services so I wouldn´t even need the backup.
        • As for the actual location within the vault: I also used the secure notes at first. But I quickly came to realize that it is more logical to store them in a "hidden" field within the actual entry for the respective service.
    • Not Bitwardern
      • Best way to store 2FA backup codes | Reddit
        • Q:
          • When I enable 2-factor authentication, some websites (like Google, Github, etc.) offer a few backup codes which I can use to login in case I lose access to my phone/2FA app.
          • Earlier I used to store these in my password manager itself. However, I just realised that having the backup codes along with my passwords defeats the purpose of 2FA as anyone having access to my password manager now also has my 2FA codes.
          • So just wanted to know what strategy other people use or what is the best way to store these codes.
        • A:
          • There are a number of methods, each have its Pros and Cons.
            1. Storing it in the cloud
            2. Storing in a second 2FA service
            3. Storing it offline in a thumb drive
            4. Add a second device (ie 2 x YubiKeys)
            5. Paper
          • I know the OP is talking about backup codes! However, for 2FA codes themselves I like the Yubico Authenticator - Yubikey as I get the ease of access of an Authenticator but the codes are stored on the Yubikey so nothing in the app until I refresh the nfc!
      • Should you store your 2FA/TOTP tokens in your password manager? | James Cridland - radio futurologist - Wouldn’t storing your two-step verification codes in the same place as your passwords be the stupidest thing imaginable?

 

 

 

 

 

 

Misc

Published in Web Security
Read more...
Sunday, 03 November 2024 15:26

My Visual Studio Code Notes

These are my notes on setting up VSCode for my programming platform for now and the future. This software is always being improved and is used by so many developers and with a vast array of extensions I cannot see this changing any time soon.

  • Visual Studio Code is not just a text editor anymore, it is now an IDE because of of it's extensive extension ecosystem.
  • The terms Folder, Root Folder, Project Folder and Workspace are all interchangeable and just mean the root folder of your project. It does not mean you can only have one folder with only files in it.
  • Use the term Workspace when referring to folder your project is in, most people will understand what you mean.

Websites

General

  • Overview
    • Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favourite platform - Linux, macOS, and Windows.
    • A standalone source code editor that runs on Windows, macOS, and Linux. The top pick for JavaScript and web developers, with extensions to support just about any programming language.
    • Microsoft Visual Studio Code is a free, powerful, lightweight code editor for Windows, macOS and Linux. Based on open source, it is highly customizable with over 25,000 extensions, for every developer and every programming language.
    • Although VSCode is classed as a text editor, it is now more like an IDE but requires you to install extension for functionality you need.
  • All the names for Visual Studio Code
    • Visual Studio Code
    • VSCode
    • VS Code
    • vscode
  • Features of note
    • Integrates with Docker Desktop
    • Copilot built in
    • 25,000+ extensions
    • VSCode can be run in the cloud
  • Visual Studio vs Visual Studio Code
    • Visual Studio 2022 Community Edition – Download Latest Free Version
      • Try our free, fully-featured, and extensible IDE for creating modern developer apps for Windows, Android, & iOS. Download Community for free today!
      • The download is a Stub-Installer, not a full offline package.
    • Visual Studio Code vs Visual Studio - YouTube
      • Deciding on Visual Studio or Visual Studio Code is not just a personal decision but based on the best option for the operating system and application type you are building.
      • There is a community editions or Visual Studio.
      • VSCode is a text editor which can be extended by plugins.
    • Visual Studio Ide vs Code: What's the difference between visual studio and vs code? - DEV Community
      • Visual Studio is a full IDE (integrated development environment) primarily used for .NET development. Debugger, refactor-er, compile, create packages, and more. The full version that supports .NET and .NET Core is not cross-platform. It is only on Windows. It also is used for other languages, but primarily for .NET C#/F#/etc development for and on Windows machines/servers. Working with .NET 4.x, WCF, WebAPI, building DLLs? Use Visual Studio probably. I do not use Visual Studio, but I am not a Windows/.NET dev.
      • Visual Studio Code is a text editor with lots of optional plugins -- it is more akin to Atom, SublimeText, and BBEdit. It has some features of Visual Studio, like syntax highlighting, some code sense, and other neat features. It is cross-platform and can be used for writing pretty any language. I use it on Mac and Linux for PHP, Python, HTML5, JavaScript, NodeJS, and more.
  • IntelliSense
  • Linting
    • Tells you of bugs or errors while you type your code
    • These errors can be highlighted by using a squiggly line under the faulty code.
  • Snippets
    • Visual Studio Code Snippets – the Definitive VS Code Snippet Guide for Beginners | freeCodeCamp.org - By Rob O'Leary Snippets can add a touch of magic to your editor. It's like an incantation. Utter a short phrase (type a prefix), wave your wand (press Enter or Tab), and presto! A wonderful event unfolds in front of you. Most code editors support snippets out of the box. The code editor I will use to showcase snippets is Visual Studio Code (VS Code), the most popular editor of the day.
    • Make your own Code Snippets in VS Code | Maurice Brg - I’ve been writing a lot in VS Code over the last weeks to prepare a Python course for work.After the 1000th time creating a Python code block in Markdown, I thought: There must be an easier way to do this - and there is: VS Code Snippets.In this article I teach you how to configure your own.
  • Command Palette
    • Search content, issue commands and do other things.
    • Very powerful
  • Language Server Protocol (LSP)
    • VSCode `Language Packs` use this protocol as their standard.
    • Official page for Language Server Protocol
      • Language Server Protocol documentation and specification page.
      • The Language Server Protocol (LSP) defines the protocol used between an editor or IDE and a language server that provides language features like auto complete, go to definition, find all references etc. The goal of the Language Server Index Format (LSIF, pronounced like "else if") is to support rich code navigation in development tools or a Web UI without needing a local copy of the source code.
  • GitHub Codespaces
    • Is a cloud-based development environment that allows developers to create, configure, and manage their coding projects directly from a web browser or Visual Studio Code.
    • provides a fully integrated development environment (IDE) hosted in the cloud. This allows developers to work on their projects without needing to set up a local development environment.
    • Codespaces documentation - GitHub Docs - Create a codespace to start developing in a secure, configurable, and dedicated development environment that works how and where you want it to.
    • What are GitHub Codespaces? - GitHub Docs - Learn about what GitHub Codespaces are.
    • GitHub Codespaces · GitHub - GitHub Codespaces gets you up and coding faster with fully configured, secure cloud development environments native to GitHub.
      • Has an intro video
    • GitHub Codespaces - Visual Studio Marketplace
      • GitHub Codespaces provides cloud-hosted development environments for any activity - whether it's a long-term project, or a short-term task like reviewing a pull request. You can connect to Codespaces from Visual Studio Code or a browser-based editor that's accessible anywhere.
      • Additionally, GitHub Codespaces brings many of the benefits of DevOps, which have typically been reserved for production workloads, like repeatability and reliability, to development environments. GitHub Codespaces is also personalizable to allow developers to leverage the tools, processes and configurations that they have come to love and rely on - truly the best of both worlds!
    • A beginner's guide to learning to code with GitHub Codespaces - The GitHub Blog - When you’re new to coding, it’s easy to get stuck completing endless tutorials. You can apply what you’ve learned (and learn even more) through GitHub Codespaces. The best part is you don’t need a powerful computer to get started.
  • TODO / FIXME

Questions

  • Should I install Visual Studio Code normally or use the Windows Store?
    • My Decision
      • I am going to stick with the normal installer.
      • I am not convinced why I should use the store one and also the store one might be insatalled for a single user.
    • Research
      • Why Download Visual Studio/VS Code from Microsoft Store? | Visual Studio Magazine - Is there any advantage to installing them through the Windows Store rather than normally?
      • VSCode on Windows: .EXE vs .MSI vs Microsoft Store, any real difference? | Reddit - Before posting this I tried to look around the internet but didn't find a precise answer to this question nor something that was decently recent.
      • Difference between User and System Installer of Visual Studio Code | Stack Overflow
        • User setup for windows
          • Reference: https://code.visualstudio.com/updates/v1_26#_user-setup-for-windows
          • Announced last release, the user setup package for Windows is now available on stable. Installing the user setup does not require Administrator privileges as the location will be under your user Local AppData (LOCALAPPDATA) folder. User setup also provides a smoother background update experience.
          • If you are a current user of the system-wide Windows setup, you will be prompted to install user setup, which we recommend using from now on. Don't worry, all your settings and extensions will be kept during the transition. During installation, you will also be prompted to uninstall the system-wide setup.
        • FixMaestro
          • I installed the user version side-by-side with the system version with no problems. The basic differences between the two is that the system version installs on the file system like every other app. The user install is basically a click-once (or web installer) version that installs in the User folder of the machine.
          • The settings made to VS Code in the system version save for Everybody on the computer and the user version the settings are only for the user. I find that the behavior of the user version is a bit annoying for me because I have reasons to want to open multiple copies of VS Code at the same time and the user version only allows one instance. Otherwise, there's not really anything different between the two as far as I can tell.
  • In VSCode settings is \n the same as LF, and \r the same as CR, so why display both?
    • Yes they are the same.
    • You can only select \n or \r when selecting `Files: Eol`. LF and CR are displayed for information purposes.
    • LF and CR are used as the options in Prettier.

Tutorials

A collection of tutorials on various topics.

Getting Started / Courses

  • Setting up Visual Studio Code | Visual Studio Code - Get Visual Studio Code up and running.
  • you NEED to use VS Code RIGHT NOW!! - YouTube | NetworkChuck
    • Everyone I know uses VS Code (Visual Studio Code). It doesn’t matter what you’re doing, hacking, coding, managing servers, VS Code is the defacto tool for IT admins and engineers. In this video, I (NetworkChuck) will show you how to get started with VS Code and how to use it to change the way you do everything! I’ll also take a few moments to show you how I use VS Code.
    • When on any GitHub repo, if you press the period "." then it will change the page to an online VSCode editor.
    • VSCode can be installed in the cloud.
    • The music on the video is annoying.
  • Getting started with Visual Studio Code - Official Docs - In this tutorial, we walk you through setting up Visual Studio Code and give an overview of the basic features.
  • Visual Studio Code Crash Course - YouTube | freeCodeCamp.org
    • Visual Studio Code (VS Code) is a free code editor made by Microsoft. In this course you will learn how to use this popular code editor. You will also learn tips and tricks to make it even easier to use.
    • 4 Years old
  • Visual Studio Code Full Course - VS Code for Beginners - YouTube | freeCodeCamp.org
    • Master Visual Studio Code (VS Code) and increase your programming productivity. You will learn the basics of VS Code along with tips and tricks to become a super user. You will also learn how to install and use common extensions for JavaScript, Python, and PHP.
    • 3 Years old
    • Keyboard shortcuts.
  • Visual Studio Code Tutorial for Beginners - Introduction - YouTube | Academind - Are you looking for a free, cross-platform and highly customizable code editor? Learn VS Code!
  • How to get started with VS Code - YouTube | Kevin Powell
    • When we first get started with VS Code, it can feel a little overwhelming, so in this video I take a look at the basics, starting off with a fresh install of VS Code and I explore the very basics of opening folders vs. files, how the tabs work, and a few basic settings.
    • Getting started with VSCode for Web Development
    • Extensions: Emmet
    • Theme: Atom Dark One
  • VSCode Power User | Learn Visual Studio Code | Video Course
    • After 10 years with Sublime Text, I switched to VSCode — the new open source cross-platform editor everyone's talking about. I've spent over a thousand hours perfecting my setup to help you switch today and bring all your custom settings and the power user workflows for HTML/CSS, GitHub/Git & Open Source, supercharged Markdown, and everything from JavaScript to PHP, Go, Python, C++, C#, ROR & 50+ Extensions. → I'm sharing it all in five hours — 65 videos online course.
    • VSCode, JavaScript, PHP, Docker, Debugging and more.
    • Watch the intro video for a better Idea.
    • I have not purchased or used this cource.

Web / HTML

TypeScript

Python

TOML

  • Python and TOML: New Best Friends – Real Python
    • TOML is a configuration file format that's becoming increasingly popular in the Python community. In this tutorial, you'll learn the syntax of TOML and explore how you can work with TOML files in your own projects.
    • TOML stands for Tom’s Obvious Minimal Language.
    • Its human-readable syntax makes TOML convenient to parse into data structures across various programming languages.
    • In Python, you can use the built-in tomllib module to work with TOML files.
    • TOML plays an essential role in the Python ecosystem.
    • Many of your favorite tools rely on TOML for configuration, and you’ll use pyproject.toml when you build and distribute your own packages.

C++

Joomla

A collection of Joomla related links.

Extension Development

 

Source Control (Git / GitHub)

  • The Source Control icon looks a little like a `USB symbol` or a `Vertical Share Icon`. Either way, 3 balls and 2 lines.
  • You need to install Git for Windows to use Git in VSCode.

Documentation

  • Using Git source control in VS Code (Source Control \ Overview) - Visual Studio Code source control management with integrated Git support.
    • Working in a Git repository
    • Cloning a repository
    • Initialize a repository
    • Commit
    • Git blame information
    • Review uncommitted code changes with AI
    • Branches and Tags
    • Remotes
    • Source control graph
    • Git Status Bar actions
    • Gutter indicators
    • Merge conflicts
    • Viewing diffs
    • Timeline view
    • Git output window
    • VS Code as Git editor
    • Working with GitHub Pull Requests and Issues
  • Introduction to Git in VS Code (Source Control \ Introduction to Git) - Our beginner's guide covers everything you need to know, from setting up a repository to committing changes and collaborating with others. Learn Git today and streamline your development workflow.
    • Set up Git in VS Code
    • Open a Git repository
      • Clone a repository locally
      • Initialize a repository in a local folder
      • Open a GitHub repository in a codespace
      • Open a GitHub repository remotely
    • Staging and committing code changes
    • Pushing and pulling remote changes
    • Using branches
    • Using Git in the built-in terminal
  • Working with GitHub in VS Code (Source Control / Collaborate on GitHub) - Working with GitHub Pull Requests and Issues in Visual Studio Code
    • Getting started with GitHub Pull Requests and Issues
    • Setting up a repository
      • Cloning a repository
      • Authenticating with an existing repository
    • Editor integration
    • Pull requests
    • Issues
    • GitHub Repositories extension

Tutorials

Git for Windows

You need `Git for Windows` to use Git in VSCode.

File Locations

  • Configuration: 
    C:\Program Files\Git\etc\gitconfig

Download

From any of these locations as they all point to the same files.

Installation

These settings used below are well thought out and allow for a fully professional and granular configurable projects.

I have also made it so the default EOL is LF, however you can override the EOL on a per-repository. If you want CRLF as the default EOL then you should modify the steps as required. - might move to line endings

Follow all of the steps.

Installer Steps
  1. Select Destination Location
    • "C:\Program Files\Git" (this is the default option)
  2. Select Components
    Leave as default, unless specified below:
    1. Check daily for Git for Windows updates = Tick
      • Notes
        1. Keeping your software up to date is a normal thing to do and good for security.
    2. Add a Git Bash Profile to Windows Terminal = Tick
    3. Scalar (Git add-on to manage large-scale repositories) = Untick
      • Notes
        • I don't have any mammoth projects that would benefit from this caching technology.
      • Research
        1. GitHub - microsoft/scalar - Scalar: A set of tools and extensions for Git to allow very large monorepos to run on Git without a virtualization layer.
  3. Select Start Menu Folder:
    • Git (this is the default option)
  4. Choosing the default editor used by Git:
  5. Adjusting the name of the initial branch in new repositories:
  6. Adjusting your PATH environment:
    • Git from the command line and also from 3rd-party software (this is the default option)
  7. Choosing the SSH executable:
    • Use bundled OpenSSH
  8. Choosing HTTPS transport backend:
    • Use the native Windows Secure Channel library (this is the default option)
    • Notes
      • If you are using Windows you might as well take advantage of it's features.
      • Using the windows store has it's benefits such as adding in your own Root CA certificates for your corporate servers and getting regular certificates updates from Microsoft.
      • If you are just using GitHub, GitLab or some other public Git provider then both options will work for you.
      • If you work in an Active Directory environment, you may need to switch to Windows Store certificates.
    • Research
  9. Configuring the line ending conversions:
    • Checkout as-is, commit as-is
    • Notes
  10. Configuring the terminal emulator to use with Git Bash:
    • MinTTY (this is the default option)
  11. Choose the default behavior of `git pull`:
    • Fast-forward or merge (this is the default option)
  12. Choose a credential helper:
    • Git Credential Manager (this is the default option)
    • Research
  13. Configuring extra options:
    1. Enable file system caching: Ticked (this is the default option)
    2. Enable symbolic links: Unticked (this is the default option)
Windows Configuration
  1. Enable long file paths in Windows 10/11
Git Configuration
  1. Enable long paths in your local Git 
    git config core.longpaths true

Tutorials

Notes

  • Long File Path / Long Filenames
    • I get errors trying to check out files with long path names. - FAQ | Git for Windows - Windows file paths are by default limited to 260 characters. Some repositories may have committed files which contain paths longer than the limit. By default, Git for Windows does not support long paths, and will print errors when trying to perform any operation on a long file name. Set the configuration property core.longpaths to true to allow certain Git operations to properly handle these files. See this wiki page for more information.
    • Git cannot create a file or directory with a long path - FAQ | Git for Windows
      • Windows does not properly support files and directories longer than 260 characters. This applies to Windows Explorer, cmd.exe and many other applications (including many IDEs as well as bash, perl and tcl that come with Git for Windows).#
      • How to enable long paths support 
        git config core.longpaths true

Moving Git Repositories / Update Local Git Repository [remote "origin"] URL

  • Authentication for GitHub is handled by the GitHub Pull Request extension.
  • The .git/config does specify the user so I have to assume this is used.
  • The [remote "origin"] value simply tells your local Git repo “When I push/pull to origin, use this URL.”
  • VScode does not have GUI support for most Git commands and settings.

So you are here because you have setup your local workspace, have connected your GitHub repository, but now you (or someone else) has moved or renamed the remote GitHub/Git repository and it needs to be reconnected.

The instructions below:

  • will edit the [remote "origin"] value in the .git/config file which is in your Project Folder.
  • assumes no permissions need to be changed because your GitHub username has permissions in both locations.

Instructions

  • Open the relevant project folder (Workspace) in VSCode
    • This is required for VSCode to select the right settings etc..
  • View the current Git Repository URLs
    • It is useful to check the values before you start so you know if they are updated later.
    • Open the terminal in VSCode with Ctrl + '
    • Run the command 
      git remote -v
      • This command will now show both the (fetch) and (push) URLs which is good so you can make sure the connection is setup correct at both ends.
  • Update the [remote "origin"] URL (pick a method):
    1. Directly edit the .git/config file
      • Open your .git/config file directly in VSCode and then this run the command from the palette (do not prefix with >)
        .git/config
      • In the opened .git/config file, look for this section: 
        [remote "origin"]
    url = https://github.com/old-user/old-repo.git
      • Change the url to your new GitHub repo URL: 
        [remote "origin"]
    url = https://github.com/your-username/new-repo.git
      • Save the File
    2. Use Git commands
      • Open the terminal in VSCode with Ctrl + '
      • Replace the URL with the new location of your GitHub repository and run this command: 
        git remote set-url origin https://github.com/your-username/new-repo-name.git
      • Or if you're using SSH, run this command: 
        git remote set-url origin git@github.com:your-username/new-repo-name.git
  • Verify the Git repository URLs have been updated
    • Open the terminal in VSCode with Ctrl + ' and run the command: 
      git remote -v
  • Now your Git operations via the Source Control GUI (commit, push, pull, fetch, etc.) will work with the new remote repository.

Notes

  • You can open your Git Config file with Windows Explorer. Navigate to, and open this file: 
    `.../YourProjectFolder/.git/config`
  • The **/.git files are hidden from the explorer panel
    • There is no simple toggle to show these.
    • You can still directly access them through the command palette.
    • I would leave these files hidden, but if you must unhide them you can do it in a couple of ways:
      1. Directly
        • Go to your User/Workspace settings (settings.json)
        • Add this line to allow hidden folders: 
          "files.exclude": {
  "**/.git": true
}
      2. Via the GUI
        • Settings --> (User / Workspace) --> Text Editor --> Files --> Exclude
        • Edit as required
  • Git: how to change the remote repository of a project • SomeDevTips - This article explains how you to change the remote repository of your git project if the git server has been renamed or changed.

Node.js for Windows

Node.js (a.k.a NodeJS) is a prerequisite for a lot of VSCode extension , so if you want to get the most out of VSCode, Node.js is a must. The journey to getting the right setup can be tricky especially if this is the first time you have looked at Node.js. These instructions will guide you through getting VSCode working with 2 of the most popular VSCode extensions (ESLint and Prettier) with explanations so you understand why.

Install Node.js

  • Only perform these actions in this section once per system/computer.
  • These instructions assumes you have not already tried to install Node.js before.
  • This will install the Node.js runtime and the npm package manager

Follow these instruction on how to install and Configure your Node.js Environment for VSCode.

  • Download the installer for Node.JS
  • Run the installer
    • Leave everything as default and click next, except:
      • (This is optional) On the Tools for Native Modules I ticked Automatically install the necessary tools just to future proof me but I am not sure if I needed them.
        • NB: I had the same issue, but after 20 minutes, the indicator was still blinking, so I clicked on the terminal window again, and pressed ENTER. This allowed the script to finish.
        • The packages that were installed with this option are: 
           - chocolatey-compatibility.extension v1.0.0
 - chocolatey-core.extension v1.4.0
 - chocolatey-dotnetfx.extension v1.0.1
 - chocolatey-visualstudio.extension v1.11.1
 - chocolatey-windowsupdate.extension v1.0.5
 - dotnetfx v4.8.0.20220524
 - KB2919355 v1.0.20160915
 - KB2919442 v1.0.20160915
 - KB2999226 v1.0.20181019
 - KB3033929 v1.0.5
 - KB3035131 v1.0.3
 - python v3.13.4
 - python3 v3.13.4
 - python313 v3.13.4
 - vcredist140 v14.44.35208
 - vcredist2015 v14.0.24215.20170201
 - visualstudio2019buildtools v16.11.47
 - visualstudio2019-workload-vctools v1.0.1
 - visualstudio-installer v2.0.3

Create a new Node.js Project

  • Node.js being installed is a prerequisite.
  • You need to initialise npm on every project where you want to use Node.js and it's related packages.

Open a VSCode Workspace

  • Create or open your VSCode project folder.

Initialise NPM

  • This will generate a package.json file
    • This file can hold npm plugin configurations.
    • Can be edited manually after creation.
  • Run this command in the terminal  
    npm init

or

npm init -y
    • The -y flag when passed to NPM commands tells the generator to use the defaults instead of asking the usual questions. Use this flag if you are going to edit the package.json file manually later.
    • When run, you will be prompted with a series of questions used to gather information about your project, pressing enter will use the displayed defaults.
    • The values in this config file can be changed later.
    • The npm init command is used to create a new Node.js project by generating a package.json file in the project directory. This file contains metadata about the project, such as its name, version, description, main file, scripts, author, license, and dependencies.
    • npm init is only required to be run in the local project folder, it is never needed to do anything globally.

Install Plugins (VSCode/npm)

  • An npm initialised project is a prerequisite for installing any packages locally. You can check this by the presense of a package.json .
  • All of these commands should be run from terminal in your project folder.
  • Some npm packages can be installed globally but it is always recommended for you to install them locally where possible which is what we are going to do here.
  • Installing locally allows you to specify package versions and the ability to share these configurations to you colleagues via the projects package.json .

ESLint

  • You can add ESLint configurations directly to your package.json file.
  • ESLint should not be installed globally, it is pointless with the new Flat Config system
  • ESLint is intended to be used on a per project basis, not globally.
  • Install the VSCode extension
  • Install the NPM package
    • Run this command in the terminal 
      npm install --save-dev eslint

or

npm i -D eslint
    • This installs the actual software that does the work.
  • Initialise ESLint
    • Run this command in the terminal, and answer the questions so the Linter can configure itself (you can always re-run this if you make a mistake). 
      npx eslint --init
      • Need to install the following packages:
        Need to install the following packages:
eslint@9.28.0
Ok to proceed? (y)
        • = Yes
      • What do you want to lint?
        • Pick the languages you want to lint.
        • Use the space bar and arrow keys to select your required languages.
      • How would you like to use ESLint?
        • = `To check syntax and find problems`
      • What type of modules does your project use?
      • Which framework does your project use?
        • = `None of these`
      • Does your project use TypeScript?
        • = `no`
        • When you need typescript, you can probaly figure out how to add this.
      • Where does your code run?
        • = `Browser`
        • If you are developing JavaScript then it it will be run in the browser.
      • What flavor of Markdown do you want to lint?
        • = `GitHub Flavoured Markdown`
        • GitHub uses a slightly modified Markdown but I am going to use this ebcasue I will be using GitHub for all of my repositories.
        • This option only appears if you have selected Mardown as a language to install above.
      • Would you like to install them now? 
        The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals, @eslint/json, @eslint/markdown, @eslint/css
        • = `Yes`
        • Without these packages, ESLint will not work
        • These files will be installed in to the folder /node_modules/ in your project folder. If it does not exist, it will be created.
        • This will re-install the eslint core files you have just installed. In fact you do not need to re-install this package but it is going to be as part of this wizard but it will not harm or change anything.
        • The reason you are prompted with this is because:
          • Makes it easier to install.
          • ESLint should be installed locally to work properly.
          • The Flat Config cannot handle globals and tehrefore ESLint needs all of the packages it references local when using this new config method.
          • ESLint has made a shift to only supporting local installs as this is a better programming paradigm.
          • This prompt is also to encourage and make it easier for users to start using locally instead of global. Some user will still have ESLint installed globally so they can use eslint --init whereas they should be using npx eslint --init which does not need the eslint package to be installed globally.
      • Which package manager do you want to use?
        • = `npm`
        • This is what we used to install ESLint, so this question is present to handle alternative install routes.
  • Config file created
    • This has now created the eslint.config.mjs file in your project root using the answers just given above.
  • Restart VSCode
    • This should not be needed, but for the purpose of this tutorial it will not harm.
  • Test ESLint is working.
    • You can test this by creating a testme.js file in your project and typing some errors into it.
    • ESLint errors are shown in the `PROBLEMS` tab in the `Panel`.
    • The `OUTPUT`will show system commands to and from the ESLint Server including starting up notifications.
      • Make sure you select `ESLint` from the drop down to see these messages.

html-eslint (ESlint Plugin)

 

  • Run the following terminal command to install the npm package 
    npm install --save-dev @html-eslint/parser @html-eslint/eslint-plugin
  • Edit the eslint.config.mjs
    • Add this import statement (just above import { defineConfig } from "eslint/config"); 
      import html from "@html-eslint/eslint-plugin";
    • Add a files: declaration at the end of the others. Pick one from below as they both do the same (see their comments) 
      // This matches the other rule's format for easy of use.
{ files: ["**/*.html"], plugins: { html }, language: "html/html", extends: [html.configs["flat/recommended"]] },

or

// This version is the same as above with the addtion of an example rule override and a different layout to make adding more rule overrides easier.
{
  files: ["**/*.html"],
  plugins: { html, },
  language: "html/html",
  extends: [html.configs["flat/recommended"]],
  rules: {
    "html/no-duplicate-class": "error",
  }
},
  • VSCode Settings
    • This HTML language plugin requires no further settings for it to be enabled. This can't be said for all ESLint plugins. Upon examining the defaultSettings.json I found the following setting which shows what languages VSCode and the ESLint extension will automatically lint by default. For reference I do not see CSS, so either this is an oversite and needs adding or is not required for activation. 
      // An array of language ids for which the extension should probe if support is installed.
"eslint.probe": [
    "astro",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "mdx",
    "vue",
    "markdown",
    "json",
    "jsonc"
]
  • Restart VSCode
    • Done

eslint-plugin-html (ESlint Plugin)

 

  • ESlint installed and configured correctly is a prerequisite.
  • eslint-plugin-html - npm - A ESLint plugin to lint and fix inline scripts contained in HTML files.
  • Run the following terminal command to install the npm package 
    npm install --save-dev eslint-plugin-html
  • Edit the eslint.config.mjs
    • Add this import statement (just above import { defineConfig } from "eslint/config"); 
      import html from "eslint-plugin-html";
    • Add a files: declaration at the end of the others. Pick one from below as they both do the same (see their comments) 
      // This matches the other rule's format for easy of use.
{ files: ["**/*.html"], plugins: { htmlscripts } },

or

// This version is the same as above with the addtion of an example setting/override.
{
  files: ["**/*.html"],
  plugins: { htmlscripts, },
  settings: {
    "html/report-bad-indent": "error", // warn if encounter a problematic indentation
  }
},
  • VSCode Settings
    • This HTML language plugin requires no further settings for it to be enabled. This can't be said for all ESLint plugins.
  • Restart VSCode
    • Done

ESLint Flat Config example (ESLint v9.00+ with extends)

Using the plugins above, I have included this here because there are no examples that I could find on the internet for VSCode, ESLint and ESLint-HTML.

This is the default config file created with npx eslint --init (all languages, not TypeScript enabled) with the the addtion of HTML ESLINT plugin.

Pay particular notice to the extends: [html.configs["flat/recommended"]] statement as this was derived from ...html.configs["flat/recommended"] to get it working in my Flat Config rules

Alter and use as required.

import js from "@eslint/js";
import globals from "globals";
import json from "@eslint/json";
import markdown from "@eslint/markdown";
import css from "@eslint/css";
import html from "@html-eslint/eslint-plugin";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs}"], languageOptions: { globals: globals.browser } },
  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
  { files: ["**/*.json5"], plugins: { json }, language: "json/json5", extends: ["json/recommended"] },
  { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
  { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: [html.configs["flat/recommended"]] },
]);

Prettier

  • You can add Prettier configurations directly to your package.json file.
  • It is optional, but recommended, to install the prettier npm package when using the VSCode extension.
  • You can install prettier globally. This is useful for small projects, there is just you, and where you do not need to share your Prettier version between colleagues.
  • Install the VSCode extension
    • Prettier - Code formatter - Visual Studio Marketplace
      • This is not the actual software, but just an extension so it can be used in VSCode.
      • This extension will use prettier from your project's local dependencies (recommended).
      • When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules.
      • Should prettier not be installed locally with your project's dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.
  • Install the NPM package
    • Run this command in the terminal 
      npm install prettier --save-dev --save-exact
      • This installs the actual software that does the work.
      • It is recommend to install prettier locally in your project and pin its version.
  • Configure Prettier and ESLint to work together (only needed if both extensions are installed)
    • Run this command in the terminal 
      npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  • Intitialise Prettier
    • Create a blank file in the root of your project called .prettierrc if you want to specify rule overrides.
    • There is nothing else to do.

Automatically Apply Fixes (VSCode)

This section is a work in progress.

Now that you have your extensions setup and working you can go one step further and make them clean up your code automatically upon save or a click of a button.

  • VS Code Settings 
    {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true
}
    • editor.formatOnSave: Automatically formats your code when you save a file.
    • editor.defaultFormatter: Sets Prettier as the default formatter.
    • prettier.requireConfig: Ensures that Prettier only formats files if a configuration file is present.
  • Automate Your Coding Style: Set Up ESLint Auto-Formatting in VSCode - YouTube
    • Maintaining a consistent code style is crucial for any development project, and ESLint is a powerful tool that helps achieve this goal. But did you know you can automate the process directly within Visual Studio Code?
    • In this video, we'll guide you through setting up your VSCode environment to automatically format your files using ESLint every time you save, ensuring your code is always clean, readable, and adhering to your project's style guidelines.

Notes

Websites

  •  Node.js — Run JavaScript Everywhere
    • Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
    • A free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
  • npm | Home
    • All NPM packages are downloaded from here (e.g. eslint - npm)
    • GitHub runs the npm Registry and npm CLI.
  • npm trends: Compare NPM package downloads - Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner.

General

  • Local vs Global installation of npm package
    • TL;DR
      • Using local for package installations is preferred because:
      • Some packages are per project based (e.g. ESLint)
      • You can share you dev environment with other colleagues
      • You can specify particular version numbers for each project.
      • This seems to be the common paradigm that programmers use.
      • Some packages such as HTMLhint can run fine globally becasue they are single packages without external rule and plugin packages to handle. ESLint could fix this but I beleive this is intentional rather than a limitation of npm.
      • Installing globally should be reserved for commands (CLI tools) and packages that are to be used as tools rather than dependencies. There are exceptions such as ESLint which is a tool but has to be installed locally becasue of it's the use of the Flat Config system.
    • Downloading and installing packages globally | npm Docs - Installing a package globally allows you to use the code in the package as a set of tools on your local computer.
    • Downloading and installing packages locally | npm Docs - You can install a package locally if you want to depend on the package from your own module, using something like Node.js require. This is npm install's default behavior.
    • Understanding Local and Global npm Packages | by Lewistech | Medium - In this article, we will explore the concepts of local and global npm packages, highlighting their differences, installation locations, and when it is appropriate to install a package locally versus globally.
    • whats the difference between installing a package locally vs globally on npm ? | Reddit
      • If you install a package locally you are only able to use the keywords/commands in the directory you installed them.
      • For example if you instal a package in /Users/projects/currentProject you have to cd into that folder to call the package commands if you installed it in that directory.
      • But if you install it globally you don’t have to be in any specific folder to use it, you can just type the commands into bash or power shell from any dir.
      • Also while working on a nodejs project you have the pleasure of installing with the flag -D that will add the package dependency for only development.
      • The main advantage btw is that you can use different version of the same package per project if you install the package locally, but if you install globally you must use just one version.
      • Most of the time if you need a package specifically for your project, you install it locally. But some packages can be used externally and in this case they are installed globally. For example recently I needed AWS Amplify to host my front-end application. I installed its npm package globally and thanks to that, I can use it on Windows CMD using the “amplify” command.
    • npm global or local packages | Flavio Copes - When is a package best installed globally? Why?
    • [Prettier] Install globally vs. locally (on a project basis)? | Reddit
      • Q:
        • What's the difference between using/installing Prettier globally vs. on a project basis? I googled this but all the entries show up as simply "ways to install prettier". Curious on how one would decide which to use and for best practices. How would you update/maintain it if you're working with other people?
      • A:
        • Well, if you want the same version of Prettier to apply to all of the projects that it's a dependency of, then you can install it globally. If you want to use some version-specific (for example deprecated) features on a given projects without affecting the rest, you can install it per project.
        • What editor are you using? VSCode's Prettier extension essentially works like a global install without the need to use it per project.
        • I would recommend getting into the habit of installing everything locally. Unless you really do mean to use the package only as your personal CLI tool. Reason being, anybody working on these projects need access to the same tools (and versions) used for those projects.
    • Why you should stop installing npm packages globally | by Sebastien Dubois | JavaScript in Plain English
      • There is almost no use in installing npm packages globally
      • A few years back when I started using npm, I didn’t mind installing many packages globally. Nowadays, I see almost no use in installing npm packages globally.
    • Executing local NPM packages | by Jair Reina | Medium
      • There’s a recurring question I get asked about how to run NPM modules that are installed locally in your project without the need to install them globally.
      • In this article, I am going to list the options we have for achieving this (from what I know, of course).
    • How to avoid errors installing npm packages globally in Visual Studio Code – Cameron Dwyer
      • A common issue I hit is when installing npm packages globally; I get errors trying to do it from the Integrated Terminal Window.
      • This is because when you install npm packages globally they go into the nodesjs\node_modules directory in program files (rather than in the project folder where you are writing your code). Writing to folders under Program Files requires elevated privileges.
      • To get around this using the Integrated Terminal window in Visual Studio Code just make sure when you start Visual Studio Code that you run as an Administrator.
  • What is the difference between Node.js and JavaScript?
  • Can you have a npm package (eg ESLint) installed both locally and globally at the same time?
    • Yes, you can have both a local and global version of ESLint installed at the same time.
    • You can install an npm package both locally and globally in a single command, by using npm install twice, or running them as separate commands in the background. 
      npm install eslint --save-dev & npm install -g eslint
    • If both versions exist, the local version usually takes precedence when running ESLint in a project.
      • You can check which version is being used by running: 
        eslint --version
      • If you need to use the global version explicitly, you can run: 
        $(npm root -g)/eslint --version
  • Is the  --save-dev flag valid when installing globally?
    • No, the --save-dev flag is only valid for local installations, not for global ones.
    • When installing a package globally using: 
      npm install -g eslint
      • the package is not added to your project's package.json, so there’s no need for --save-dev. The -g flag already ensures it's available system-wide.
    • However, when installing locally with: 
      npm install eslint --save-dev
      • it gets added under "devDependencies" in your package.json, meaning it’s needed for development but not for production.
  • Can all npm packages be installed globally such as eslint-html?
    • Not all npm packages are meant to be installed globally — it depends on the purpose and how the package is designed.
    • Packages you can install globally:
      • You can install globally packages that expose a CLI (Command Line Interface) — these are tools you use from the command line.
      • CLI tools are usualy fine to install globally because of their nature they need to be in your system's PATH.
    • Packages not meant to be installed globally:
      • Some packages are libraries used in code, not command-line tools. These should be installed locally (inside a project).
    • Exceptions:
      • ESlint can be installed globally and locally, but it is designed to be run locally and now with the introduction of the `Flat Config` system, local scope is a must.
  • Does npm install --save-dev save files into my project folder?
    • Yes, npm install --save-dev does save files into your project folder, but here's how it works:
      • The package is downloaded from the npm registry.
      • It’s placed in the node_modules/ folder within your project directory.
      • A reference is added to devDependencies in your package.json file e.g. 
        "devDependencies": {
  "eslint": "^8.0.0"
}
    • Files added or modified
      • node_modules/ folder: Contains the actual installed package files and dependencies.
      • package-lock.json: Updated to reflect the exact version installed and its dependency tree.
      • package.json: Updated with the new dev dependency under devDependencies.
    • Important notes
      • node_modules/ can become very large, but it's not typically committed to version control (add it to .gitignore).
      • If someone else clones your project, they just need to run npm install, and all dependencies—including devDependencies—will be installed.

Use a single /node_modules/ instance between Projects?

I am managing many small projects, how can I use just one set of /node_modules/? I will add a collection of my notes here. I have not tested or done this, it is just theory.

This is so when you are using a package can only be used locally, has a large footprint and you need to use it for many different projects.

Monorepo / Multi-root Workspaces 
  • Create one root project folder
  • In this folder create single folder for each repo
  • Utilise VSCode Multi-root Workspaces configurations
  • Install the node modules into the root project folder only
  • Example structure: 
    /my-projects
  /node_modules ← shared
  /project-a
    /src
  /project-b
    /src
  /project-c
    /src
Symlinks

Tutorials  (do some of these need moving)

  • The Right Way to Share npm Dependencies / Copy npm project settings and modules.
    • Instead of copying node_modules, do this:
      • In the original project, make sure you have a clean package.json and package-lock.json. (clean means these 2 files are in sync with each other)
      • Copy these 2 files over to the new project.
      • Then run the following command to install them to the new project 
        npm install
    • This way:
      • You get the exact same dependencies
      • Your project is reproducible and portable
      • You avoid any platform-specific breakage
    • Links
  • Node.js
    • Node.js tutorial in Visual Studio Code - The Visual Studio Code editor has great support for writing and debugging Node.js applications. This tutorial takes you from Hello World to a full Express web application.
  • Using ESLint and Prettier
    • Prettier & ESLint in Visual Studio Code: The Ultimate Guide - YouTube
      • Learn how to set up Prettier and ESLint in Visual Studio Code to keep your code looking sharp and error-free!
      • Prettier and ESLint each have their own role: Prettier ensures your code style is clean and consistent, while ESLint catches errors and enforces JavaScript best practices. However, they don’t always work seamlessly together. In this video, we'll show you how to configure Prettier and ESLint to play nicely and how to optimize Visual Studio Code to get the best out of both tools.
      • Prerequisites: Node.js, VSCode, ESLint (VScode/NPM), Prettier (VSCode/NPM)
    • Using ESLint and Prettier in Visual Studio Code - YouTube | Microsoft Visual Studio - Josh shows how you can use ESLint to set rules for your JavaScript/TypeScript code and how you can easily format it. He uses VS Code here, but you can do the same things in Visual Studio. 
  • Using ESLint
    • Use ESLint to Validate Your JavaScript in Visual Studio Code - Carl de Souza
      • In this post, we will look at how to set up ESLint in Visual Studio Code, in order to check JavaScript files for errors.
      • With NPM installed, you have access to thousands of packages.
    • How to Set Up ESLint in 2025! (Beginner's Guide) - YouTube | The Common Coder
      • Let's learn how to install and configure ESLint!
      • ESLint is a powerful tool designed to help you catch errors and enforce coding standards in your JavaScript projects. In this video, we'll guide you through the process of installing ESLint and configuring it to ensure your code is clean, consistent, and free of common mistakes. Whether you’re a complete beginner or you've used ESLint before, understanding how to set up ESLint effectively will help improve your code quality and overall development workflow.
      • Prerequisites: Node.js, VSCode, understand JavaScript
    • ESLint and Visual Studio Code: The Ultimate Setup Guide! - YouTube | The Common Coder
      • In this video we'll learn the most effective way to use ESLint with Visual Studio Code!
      • ESLint is an essential tool for developers wanting to write clean and error-free JavaScript code. In this video, we'll learn how to bring ESLint's features into Visual Studio Code by installing the official ESLint extension. We'll cover the prerequisites for using the ESLint extension, how to install it into VS Code, and explore its powerful features like real-time feedback, enabling and disabling rules, and automatically fixing certain types of errors. If you're looking to get the most out of ESLint, the ESLint Extension for Visual Studio Code is a must-have tool in your developer toolbox.
      • Prerequisites: Node.js, VSCode, ESLint installed in a project
    • VSCode and ESLint Setup - YouTube
      • Combine ESLint and VSCode for some helpful code style/quality highlighting, learn what ESLint is, and how to configure ESLint and VSCode.
      • This video is geared towards developing a NPM package rather than a global install for VSCode.
      • Make a NPM project by running the command: 
        npm init -y
        • This transform the directory into an npm package by creating a package.json file.
      • Installing ESLint locally as a Development Dependency 
        npm i eslint --save-dev
        • We want to install eslint as a development dependency becasue it is used while developoing a project, it is not needed for the program to run out in production.
      • Create an ESlint configuration file by using the command 
        npm init @eslint/config
        • This will start a wizard with questions that will allow the writing of the a ESLint config file eslint.config.mjs
    • How to Setup ESLint .eslintrc Config – Duncan Leung - covers a lot of different areas of ESLint such as plugins.
    • Run ESlint manually 
      # Checking only
npx eslint "**/*.html"

# with autofix:
npx eslint "**/*.html" --fix
    • ESLint Getting Started: A Comprehensive Guide - Toxigon - ESLint Getting Started: A Comprehensive Guide to improving your JavaScript code quality with ESLint. Learn installation, configuration, best practices.
    • A Comprehensive Guide to ESLint: From Basics to Advanced | by DhineshKumar Thirupathi | Medium - This guide will walk you through the basics of ESLint and lead you to more advanced configurations and customizations.
    • ESLint Documentation | Pasith Senevirathna - This document provides a comprehensive guide to setting up and use ESLint in your projects. It covers ESLint installation, configuration, rules, and best practices.
    • How to Use the ESLint Command (with Examples) - An awesome guide for the most useful CLI commands
    • The ESLint CLI: A Deep Dive for JavaScript Developers - The Command Line Interface (CLI) is how you interact with ESLint from your terminal. It provides a set of commands and options to configure and run ESLint checks on your JavaScript files.
  • Install Tutorials
    • Install Node on Windows - Carl de Souza - Simple to follow instructions
    • How to Install NPM and Node.js on Windows and Mac Devices? - Learn what is NPM, how to install Node.js and NPM on Mac and Windows, Node.js installation with Homebrew and NVM and few points to consider while installing Node.js and NPM.
    • [VS Code] - How to completely remove npm from your system - | SheCodes - Learn how to completely remove npm from your system using the command prompt or terminal in this step-by-step guide. Back up your packages before proceeding.
    • VSCode ESLint, Prettier & Airbnb Style Guide Setup - YouTube | Traversy Media - In this video we will setup linting with the Airbnb style guide for clean and consitent JavaScript code in VSCode
      • Create a package.json 
        npm init -y
      • Install ESlint and Prettier 
        npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
        • i = install
        • -D = dev dependency (save as --save-dev)
    • How to Install ESLint in VS Code - YouTube | Code Wizard - Learn how to install ESLint in vs code. We will install ESLint, install the ESLint VS Code extension, setup the config file, and give a basic demonstration on how to use ESLint.
    • ESLint Setup in Node.js: A Detailed Guide - Maxim Orlov - Unlock the power of ESLint in Node.js! Dive into this beginner-friendly guide for seamless integration and smarter coding.
    • Setting up ESLint and Prettier with VS Code | jeffyang.io - Setting up ESLint and Prettier with VS Code
      • Install ESLint and Prettier 
        # install eslint globally
npm install -g eslint

# install prettier globally
npm install -g prettier
      • Install ESLint & Prettier Plugins for VS Code
      • Configuring ESLint and Prettier 
        npm install --save-dev eslint-config-prettier eslint-plugin-prettier
        • As I mentioned earlier, ESLint and Prettier will conflict with each other if not set up with care. Fortunately, because this is such a widely recognized problem, there are packages that are made to solve exactly this problem.
          • eslint-config-prettier
          • eslint-plugin-prettier
        • This way, you won’t have two different rules that conflict with each other.
        • Curious what the --save-dev flag does?
          • By intalling with --save-dev flag, npm installs the packages eslint-config-prettier and eslint-plugin-prettier as devDependencies. This differs from the default behavior of npm install which installs it as a dependency to run the application, and places the downloaded files in node_modules.
      • initialize ESLint within our project. 
        eslint --init
        • Follow the wizard and answer the questions.
        • Once the setup is successful, you should see a file eslintrc.{js/json/yaml} based on the format you chose your configuration file to be in.
      • set up Prettier locally 
        # install prettier as local devDependency
npm install --save-dev prettier
        • That should have installed Prettier as a local devDependency.
      • Now, we need to create a configuration file for Prettier, and tell it how to format our code. 
        # in your project root directory
touch .prettierrc
        • The file format .prettierrc might be out of date.
    • Configure VSCode settings as required
      • Such as format on save..
  • Install Node.js and NPM
    • Downloading and installing Node.js and npm | npm Docs
      • To publish and install packages to and from the public npm registry or a private npm registry, you must install Node.js and the npm command line interface using either a Node version manager or a Node installer.
      • We strongly recommend using a Node version manager like nvm to install Node.js and npm.
      • We do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.
  • Install Node.js and NPM, vscode, ESLint, Prettier videos
  • Install Prettier
    • Setting Up Prettier with VS Code: A Step-by-Step Guide for Better Code Formatting - Toxigon
      • Learn how to set up Prettier with VS Code for consistent code formatting. This step-by-step guide covers installation, configuration, integration with ESLint, and troubleshooting tips.
      • Install Prettier via npm 
        npm install --save-dev --save-exact prettier
        • The --save-dev flag adds Prettier to your devDependencies, and --save-exact ensures that the exact version is installed.
      • Configure VS Code Settings 
        {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true
}
        • editor.formatOnSave: Automatically formats your code when you save a file.
        • editor.defaultFormatter: Sets Prettier as the default formatter.
        • prettier.requireConfig: Ensures that Prettier only formats files if a configuration file is present.
      • Using Prettier with ESLint
        • If you're using ESLint for linting your JavaScript/TypeScript code, you might run into conflicts with Prettier. Luckily, there's a way to make them play nicely together.
        • The install command 
          npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
          • eslint: The linter itself.
          • eslint-config-prettier: Disables ESLint rules that conflict with Prettier.
          • eslint-plugin-prettier: Runs Prettier as an ESLint rule.
    • Install · Prettier.io - This give instructions on how to install the npm package.
      • Installing locally command: 
        npm install --save-dev --save-exact prettier
      • If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

Commands

  • npm Uninstall – How to Remove a Package - The Node Package Manager (NPM) provides various commands that let you work with packages. In this article, I will show you how to uninstall a regular package, a global package, and a dev dependency.
  • How to Uninstall and Update any Dependencies through NPM ? - GeeksforGeeks - This article will guide you through the process of uninstalling and updating dependencies using NPM.
  • What is the difference between npm remove and npm uninstall? - Stack Overflow - remove is just an alias for the npm uninstall command:
  • Run NPM commands/scripts within Visual Studio Code | bobbyhadz - A step-by-step illustrated guide on how to run NPM commands or scripts from within Visual Studio Code.
  • Restart ESLint
    • Command Palette 
      > ESLint: Restart ESLint Server
    • or restart VSCode
  • List Node, npm Packages and their Versions
    # View the current version of NodeJS
node -v


# List global packages
npm list -g

# List local packages
npm list


# This prints the version of npm itself:
npm -v <package-name>

# This prints a cryptic error:
npm version <package-name>

# This prints the package version on the registry (i.e., the latest version available):
npm view <package-name> version

# shows the latest in npm with extra information
npm show <package-name>
  • Add the package as a development dependency 
    npm install eslint --save-dev
npm i eslint -D
    • The commands above are the same.
    • Install as a  development dependency when the package is only needed during the development and not in production.
    • This switch will only work on local installs, it is not applicable to the global scope.
    • What is the difference between --save and --save-dev? - Stack Overflow
      • --save-dev (only used in the development, not in production)
      • --save (production dependencies)
      • --global or -g (used globally i.e can be used anywhere on the local system, similiar to install for `All Users` paradigm in Windows)
  • npm
    • About npm | npm Docs
      • npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.
    • An Absolute Beginner's Guide to Using npm
      • Beginning with npm can seem a bit daunting - give yourself a kickstart with our absolute beginner's guide to npm, and you'll be off your feet in no time.
      • install commands 
        npm install <module> # Where <module> is the name of the module you want to install
npm i <module> # Where <module> is the name of the module you want to install - using the i alias for installation
npm install <module> --save # Where <module> is the name of the module you want to install as a dependency
npm install <module> --save-dev # Where <module> is the name of the module you want to install as a Devloper dependency
npm install <module> --global # Where <module> is the name of the module you want to install globally
npm install <module> -g # Where <module> is the name of the module you want to install globally, using the -g alias
    •  Node.js — An introduction to the npm package manager | NodeJS - npm is the standard package manager for Node.js.
  •  npx
    • npx allows you to run package binaries from the commandline in the correct context (i.e. local/global) without having to worry about their locations. This command remove the need to have packages installed gloablly (eg ESLint) and as a consequence those packages binaries in the system PATH.
    • After that, you can run ESLint on any file or directory like this: 
      npx eslint yourfile.js
  • nvm
    • NVM (Node Version Manager) is a tool that allows you to manage multiple versions of Node.js and npm on a single machine. When you install Node.js using NVM, npm is automatically installed along with it. This ensures that the npm version is always compatible with the specific version of Node.js you are using.
    • How to Install and Use NVM (Node Version Manager) | Linode Docs - Learn to use NVM to install Node.js on your computer. This guide shows you how to install and use NVM and how to install the LTS version of Node.js.
    • How to Install NPM Through NVM? - GeeksforGeeks
      • NVM is a popular tool that allows you to manage multiple versions of Node.js and npm on a single machine.
      • With NVM you can easily switch between different versions of Node.js making it convenient for working on multiple projects that may require different Node.js environments.
      • Installing npm through NVM ensures that the npm version is always compatible with the specific version of Node.js you're using.
    • Difference between NPM and NVM | Stack Overflow
      •  Nvm is nodejs version manager while npm is nodejs package manager. Benefits: Nvm can be used to install and manage multiple node versions on your PC. Ease of installation and usage.
  • --save-exact
    • What is the purpose of using --save-exact
      • When you delete your node_modules folder and you run npm install, the versions of the installed packages could get updated when higher ones are available and that can potentially break your application.
      • This flag explicitly sets the version number of the package.
      • Without the flag 
        "devDependencies": {
    "webpack": "^5.1.3",
}
      • With the flag - notice that the character ^ is not present. 
        "devDependencies": {
    "webpack": "5.1.3",
}

 

 Troubleshooting

Using VSCode

I will cover more relevant settings and configurations to get you started with VSCode. If you have watched some of the starter videos (if not, you should) the information here will be a lot more relevant and easier to follow.

Commands

Keyboard Shortcuts / Bindings

  • Command key on the Mac = Ctrl key on the PC
  • Command Palette
    • F1
    • Ctrl + Shift +P
    • In the search box at the top, type >
  • Execute your code
    • F5 or use the `Run` button.
  • Refactoring
  • Online
    • When on any GitHub repo, if you press the period "." then it will change the page to an online VSCode editor.
  • Open Developer Mode (Ctrl + Shift + I) does not work, Co-Pilot opens instead

Links

General

Settings

  • Default settings
    • Default settings reference | Visual Studio Code - Reference of default settings in Visual Studio Code.
    • Default tab size is 4 spaces.
    • Access them by the command palette
    • You can also view the default values in the Settings editor or see a read-only version of the defaultSettings.json via the Preferences: Open Default Settings (JSON) command in the Command Palette (Ctrl+Shift+P).
    • Stored in defaultSetttings.json
    • Extensions can add their own settings into this file.

General

As I find useful settings I will add them here. Not everything is available in the GUI.

  • The VSCode User settings file is located 
    c:\Users\<yourusername>\AppDataRoaming\Code\User\settings.json
    • Settings will not appear in this file if they are default.
  • VSCode will create the settings.json and recommendations.json when they are needed (i.e. tehre are settings that need to go in them).
  • User and workspace settings | Visual Studio Code - How to modify Visual Studio Code User and Workspace Settings.
    • You can configure Visual Studio Code to your liking through its various settings. Nearly every part of VS Code's editor, user interface, and functional behavior has options you can modify.
    • VS Code provides different scopes for settings:
      • User settings - Settings that apply globally to any instance of VS Code you open.
      • Workspace settings - Settings stored inside your workspace and only apply when the workspace is opened.
    • VS Code stores setting values in a settings JSON file. You can change settings values either by editing the settings JSON file or by using the Settings editor, which provides a graphical interface to manage settings.
    • User settings
      • User settings are your personal settings for customizing VS Code. These settings apply globally to any instance of VS Code you open. For example, if you set the editor font size to 14 in your user settings, it will be 14 in all instances of VS Code on your computer.
    • Workspace settings
      • VS Code stores workspace settings at the root of the project in a .vscode folder. This makes it easy to share settings with others in a version-controlled (for example, Git) project.
      • Not all user settings are available as workspace settings. For example, application-wide settings related to updates and security can not be overridden by Workspace settings.
    • Settings file locations
    • Settings precedence
  • What is the .vscode folder and should you Commit it to Git | bobbyhadz
    • The .vscode folder is used to store project-specific settings, debug configuration, shared tasks and build commands.
    • In other words, the .vscode folder is used to store workspace-specific settings.
    • Workspace settings are specific to a project and can be shared with other developers on your team.
    • The settings and configuration in your .vscode folder override the global user settings.
    • Should you commit your .vscode directory to source control
      • Depends on whether you share configuration and settings with other team member.
  • How to open settings.json in VS Code [6 Ways] | bobbyhadz - A step-by-step illustrated guide showing different ways of how to open settings.json in VS Code in 6 different ways.
  • Customize your editor · Visual Studio Code - The Essentials - One of the strengths of VS Code is its ability to be customized and fully adapted to your needs. Thus, you can change the appearance of the editor, add extensions, change or create your own keyboard shortcuts, and much more.
  • Understanding settings.json in Visual Studio Code - Ivan Lim Web & Database Services - Learn how to use the settings.json file in Visual Studio Code to customize your coding environment. Our guide provides detailed instructions and examples to help you get started. Visit our website to learn more!
  • Locating and Modifying VSCode settings.json | GeeksforGeeks - In this article, we will learn about the VSCode settings.json file and customize it for our specific needs.

Themes

I think the workbench is schemed by the theme, so you can almost say they are the same thing.

Exclude Files and Folders

There are different aspects of VSCode to which you can apply path exclusions to so yo9u can hide files and folders. currently there are settings for search and the Explorer.

These settings use Glob Patterns to match files, folders and paths.

Explorer
  • Settings --> Text Editor --> Files --> Exclude 
    "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true
},
    • The File Explorer decides which files and folders to show or hide based on this setting.
  • Settings --> Features --> Explorer --> Exclude Git Ignore 
    "explorer.excludeGitIgnore": false
    • Controls whether entries in .gitignore should be parsed and excluded from the Explorer. Similar to `files.exclude`.
Search
  • Settings --> Features --> Search --> Exclude 
    "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
},
    • Excluding files and folders in fulltext searches and file search in quick open.
    • Inherits all glob patterns from the `files.exclude` setting.
  • Settings --> Features --> Search --> Use Global Ignore Files 
    "search.useIgnoreFiles": true
    • Controls whether to use `.gitignore` and `.ignore` files when searching for files.
    • The default option of enabled means that from the start VSCode will not search in files specified in your .gitignore which is great.

Workspaces

  • A Workspace is a collection of one or more folders that are open in a VSCode instance.
    • Most of the time you'll only have one folder open which means you are using a Single Folder workspace.
    • A Multi-root Workspace is when you have nore than one root folder open.
  • The terms Root Folder and Project Folder are all interchangeable and just mean the root folder of your project.
  • You can use the term Workspace when referring to your Project Folder, as most people will understand what you mean even though it is not strictly correct.

Extensively this is your project's folder for both source files and config files.

  • General
  • Optimising
  • Setting Up
    • How to Configure VS Code Workspace Settings: A Step-by-Step Guide
      • Master VS Code workspace settings for tailored development and enhanced productivity.
      • Save changes: Your modifications are saved automatically in the .vscode/settings.json file within your project folder. For advanced configurations, you can directly edit the JSON file related to VS Code workspace settings.
      • User vs. Workspace Settings: Key Differences
  • Customise your VSCode setup
  • Using extensions only for specific Workspaces / Profiles
  • Export VSCode extension list
  • Sync VSCode Settings (inbuilt)
    • This is just for your user, not for sharing settings between teams, colleagues and collaborators.
    • Settings Sync | Visual Studio Code
      • Synchronize your user settings across all your Visual Studio Code instances.
      • Settings Sync lets you share your Visual Studio Code configurations such as settings, keyboard shortcuts, and installed extensions across your machines so you are always working with your favorite setup.
  • Shared Settings / Recommended Extensions
  • Workspaces / Root Folder / Project folder
    • Workspaces in Visual Studio Code - Official Docs
      • You may see the terms "folder" and "workspace" used interchangeably in VS Code documentation, issues, and community discussions.
      • Think of a workspace as the root of a project that has extra VS Code knowledge and capabilities.
      • Single-folder workspaces: You don't have to do anything for a folder to become a VS Code workspace other than open the folder with VS Code. Once you open a folder, VS Code automatically keeps track of configuration, such as your open files or editor layout. When you reopen that folder in VS Code, the editor will be as you left it previously.
      • A "workspace" is just your project's single root folder.
    • What is a VS Code workspace? | Visual Studio Code - A Visual Studio Code workspace is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened as the workspace. However, depending on your development workflow, you can include more than one folder, using an advanced configuration called Multi-root workspaces.
  • Multi-root Workspaces  / .code-workspace
    • Supercharge Your Workflow: VS Code Multi-Root Workspaces - YouTube | Jeremy Shanks
      • Join me today as I dive into the versatile world of Visual Studio Code's multi-root workspaces. I'll show you how to manage multiple projects efficiently within a single editor instance, enhancing your workflow and productivity.
      • A Workspace is a collection of one or more folders that are open in a VSCode instance.
        • Most of the time you'll only have one folder open which means you are using a Single Folder workspace.
        • A Multi-root Workspace is when you have nore than one root folder open.
    • Multi-root workspaces are an advanced capability of VS Code that allows you to configure multiple distinct folders to be part of the same workspace. Instead of opening a folder as workspace, you open a <name>.code-workspace JSON file that lists all folders of the workspace. 
    • A .code-workspace file in Visual Studio Code is used to define a multi-root workspace. This file allows you to manage multiple project folders within a single workspace, making it easier to work on related projects simultaneously. The .code-workspace file contains an array of folders and workspace settings, which can be shared with others in a version-controlled project. To open a .code-workspace file, you can go to the menu and select File → Open Workspace.
    • Multi-root Workspaces | Visual Studio Code
      • You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
      • Unless you are explicitly creating a multi-root workspace, a "workspace" is just your project's single root folder.
      • A Visual Studio Code (VS Code) workspace is a collection of one or more folders that are opened in a VS Code window. This concept allows developers to manage settings, tasks, and configurations specific to their projects. Workspaces can be single-folder or multi-root, depending on the development workflow.
      • Single-folder Workspaces: In a single-folder workspace, you simply open a folder in VS Code, and it automatically tracks configurations such as open files and editor layout. This setup is straightforward and ideal for most projects. You can also add folder-specific configurations like workspace-specific settings, task definitions, and debugging launch files.
      • Multi-root Workspaces: Multi-root workspaces allow you to work with multiple distinct folders in the same workspace. This is useful when working on related projects simultaneously. You can create a multi-root workspace by opening a .code-workspace JSON file that lists all the folders in the workspace.
    • Multi-root Workspaces | Visual Studio code - You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
    • Multi-root workspaces - VS Code extension | Biome - simple explanation and a diagram.
    • Multi-root Workspaces in Visual Studio Code (2025)
    • Working with Multiple Projects in VS Code - YouTube | DigitalOcean - We'll go through the different tools that help work with multiple projects in VS Code. These are ways to quickly switch between projects and to also differentiate between multiple VS Code windows.
  • Multi-root Workspaces (Working with ESLint)
  • VSCode Config File / Config Folder
    • The config file for single folder workspace is located at .vscode/settings.json
    • The config file for the multi-root workspace is: .code-workspace
    • .vscode vs .code-workspace · microsoft/vscode-discussions · Discussion #2498 · GitHub
      • Put .vscode/settings.json in .gitignore, so any changes made by the user won't be pushed to the repository
      • Use Language-specific user settings, but this depends on the extension setting itself support that so, which may not work 100%.
      • About the .code-workspace file, it is designed to Multi-root workspaces scenarios, and the obvious answer is indeed the right one. Anything you define there will be / can be overwritten by the folder setting. Either way, there is no way to give users the ability to change these settings without commiting the changes.
    • Best practices in handling .code-workspace files · Issue #3264 · microsoft/vscode-docs · GitHub
      • Semantically a workspace is hierarchically above the folder concept, i.e. a workspace contains (zero or more) folders. This being the case, it makes sense for a .code-workspace file to be outside it's root folders/repositories, even when it's a single folder workspace, like so:
      • So how do you keep .code-workspace files source controlled and how do you share them with your team?
      • I would love to know how you guys solve this problem and if there's a good solution, I think this would be a very important piece of information that should be added to the documentation.
  • Tutorials

Monorepo

  • These are not Workspaces.
  • A monorepo is a single sourcecode repository that contains many oftern unrelated projects.
    • These project will most likely be in their own sub-folder and are just projects in folders, but they could be a VSCode Workspace depending on how you have things setup.

Profiles

These can have different settings and extensions for different scenarios

  • VSCode profiles allow you to create and manage personalized setups for different coding environments, making it easy to switch between configurations tailored to specific projects.
  • What are VSCode Profiles?
    • VSCode profiles are a feature that enables you to save and switch between different sets of preferences, configurations, and extensions. This is particularly useful if you work on various projects that require distinct setups, such as web development, Python programming, or other specialized tasks. Profiles help you maintain organization and efficiency by allowing you to quickly adapt your development environment without manually changing settings each time.
  • Profiles in Visual Studio Code | Visual Studio Code - Expand your development workflow with task integration in Visual Studio Code.
  • VSCode Profiles: Optimize Your Coding Environment - DEV Community
    • You may often work on multiple projects that require different settings, extensions, and configurations. Keeping track of all these customizations can be time-consuming and frustrating. Especially if you switch between projects.
    • This is where VS Code profiles come in.
  • Profile Templates - Profiles in Visual Studio Code | Visual Studio Code - VS Code comes with a predefined set of profile templates that you can use to customize VS Code for your specific workflow. To create a new profile based on a template, select a Profile Template when going through the Create Profile flow.

Tutorials

Troubleshooting / Errors / Problems

  • Everytime I click on a line a username and date is displayed?
    • This is a Git Blame which is essentially a reference to who commited this line to the repo.
    • HAving the Git Blame information pop up everytime you click a different line is so annoying but usually this can be turned off.
    • Many extensions can add Git blame information into the code display such as: GitLens, Git Blame, Git History Diff
  • Why when I open text files created in Windows and then save them, VSCode is changing the EOL from CRL to LF?
    • It isn't. Here are some explanations
      1. An extension is performing the change.
      2. The file does not have any EOL due to it having 1 or less lines where an EOL is not needed.
      3. The line type in the status bar depends on there being some EOL characters in the file, if there are none then this status bar icon just shows the default EOL as defined in files.eol
  • The `PROBLEMS` tab is not showing column headings
    • To the right of the Filter icon, there is a list/details toggle button, press this.

Setup your Project (Cheatsheet)

This assumes you have VSCode installed with the relevant extensions, that you have GitHub account and that all of your User settings are set as required (i.e. EOL)

VSCode User Settings (optional)

These are your preferences and are not nessary for the Workspace configuration but it makes sense for me to put these here as a reference might move this section to settings.

  • .vscode/settings.json 
    {
    /* General Settings */

    "files.eol": "\n",                           // Default Line Ending
    "editor.fontFamily": "Fira Code",            // Set `Fira Code` as my editor font
    "editor.renderWhitespace": "trailing",       // Show unwanted whitespace (none|boundary|selection|trailing|all)
    
    /* Render Line Endings || code-eol */
    
    //"code-eol.newlineCharacter": "↓",
    //"code-eol.returnCharacter": "←",
    //"code-eol.crlfCharacter": "↵"
    "code-eol.highlightNonDefault": true,
    "code-eol.highlightExtraWhitespace": true
}

Default Repo Config Files

  • Use .editorconfig whenever possible because not everyone has VSCode.
  • Remember that .editorconfig support varies between editors, so some editors will have no, partial or full support.
  • Change the settings below to make CRLF default when your project or setup requires it.
  • Prequsites:
    • ESLint
    • Prettier
    • EditorConfig for VS Code
    • NPM and NodeJS to be installed (for ESLint)
    • Correct triggers for Prettier and ESLint need to be enables in VSCode settings (either through the GUI or the settings file)

These can be used as a good starting point for your repository. These rules sef LF as the default line ending which you can override at any point. There are also some specific rules to allow the correct functioning of some Windows files.

  • .vscode/settings.json 
    {
    /* General Settings */

    "files.eol": "\n",                                        // Default Line Ending  
    "editor.formatOnSave": false,                             // Format on save (needed for Prettier)  
    //"editor.defaultFormatter": "esbenp.prettier-vscode",    // Default Formatter  
    "editor.codeActionsOnSave": {                             // Run these commands on save

        // When should ESLint run
        // true       = Automatically applies all ESLint autofixable rules every time you save a file.
        // "explicit" = Only applies ESLint fixes on save if you explicitly configured ESLint to run on save in your project (via Flat Config or legacy .eslintrc),  
        //              or if there's a specific ESLint comment (/* eslint-env */, etc.) in the file. 
        // "always"   = Triggers ESLint fixes on both manual and auto-saves.
        // "never"    = Disables ESLint auto-fix on save.   
        "source.fixAll.eslint": "never"

    },  

    /* Prettier */

    //"prettier.useTabs": false,               // Indent Style  
    //"prettier.tabWidth": 4,                  // Spaces per indentation

    /* ESLint */

    // Settings: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options

    "eslint.enable": false,                    // Enable ESLint - Disabled here to prevent accidental use until configured as required  
    "eslint.useFlatConfig": true,              // Use the Flat Config system (for ESLint v8.57+ to v10.00)  
    "eslint.workingDirectories": ["./src"],    // Control ESLint working directories  
    "eslint.format.enable": false,             // Format using ESLint (if formatting is configured in the rules)

}
  • .vscode/extensions.json (Recommended Extensions) 
    {   
    "recommendations": [ 
        "EditorConfig.EditorConfig",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
    ]
}
  • .editorconfig 
    # EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Default settings (fallback)
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_style = space
indent_size = 4

[*.{mjs,js,json,scss,css,yml,vue}]
indent_style = space
indent_size = 2

# Force batch scripts to always use CRLF line endings so that if a repo is accessed
# in Windows via a file share from Linux, the scripts will work.
[*.{[bB][aA][tT],[cC][mM][dD]}]
end_of_line = crlf

# Force bash scripts to always use LF line endings so that if a repo is accessed
# in Unix via a file share from Windows, the scripts will work.
[*.sh]
end_of_line = lf

# Exclude Files and Folders (Paths)
[/{localonly,vendor}/**]
generated_code = true
indent_style = unset
indent_size = unset
tab_width = unset
end_of_line = unset
charset = unset
trim_trailing_whitespace = unset
insert_final_newline = unset
    • General
      • A user should be aware that not all .editorconfig values might be supported in a specific extension or plugin. 
      • EditorConfig.org
        • EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.
        • The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.
      • EditorConfig Specification | EditorConfig - The latest official specification.
    • Why should i add a new line?
      • What's the point in adding a new line to the end of a file? - Unix & Linux Stack Exchange
        • It's not about adding an extra newline at the end of a file, it's about not removing the newline that should be there.
        • There are/were some C compilers that cannot parse the last line if it does not end with a newline. The C standard specifies that a C file should end with a newline (C11, 5.1.1.2, 2.) and that a last line without a newline yields undefined behavior (C11, J.2, 2nd item). Perhaps for historic reasons, because some vendor of such a compiler was part of the committee when the first standard was written. Thus the warning by GCC.
        • diff programs (like used by git diff, github etc.) show line by line differences between files. They usually print a message when only one file ends with a newline because else you would not see this difference. For example if the only difference between two files is the presence of the last newline character, without the hint it would look like the both files were the same, when diff and cmp return an exit-code unequal success and the checksums of the files (e.g. via md5sum) don't match.
        • So for that last line to be recognised as an actual "line" it should have a terminating new line character.
      • Hidden Files
        • The VS Code EditorConfig extension ignores hidden files and folders (e.g. those that are marked as hidden by the OS on Windows or Unix-like systems) and I would assume any paths that are hidden by VSCode.
    • Configuration
      • Parts of an EditorConfig file | EditorConfig Specification
        • Section Name: the string between the beginning [ and the ending ].
        • This means the regex parser ignors the wrapping [].
      • Supported Pairs (Properties / Declarations / Options) | EditorConfig Specification - The full list of supported settings for EditorConfig.
      • Alternative section name files using curley braces (not tested) 
        [*.{b,B}{a,A}{t,T}, *.{c,C}{m,M}{d,D}],
      • Glob Expressions | EditorConfig Specification
        • Section names in EditorConfig files are filepath globs, similar to the format accepted by .gitignore.
        • They support pattern matching through Unix shell-style wildcards.
        • These are the rules on building a matching pattern.
      • File Format | EditorConfig
        • EditorConfig files use an INI format that is compatible with the format used by Python ConfigParser Library, but [ and ] are allowed in the section names.
        • The section names are filepath globs, similar to the format accepted by gitignore.
        • Forward slashes (/) are used as path separators and semicolons (;) or octothorpes (#) are used for comments.
        • Comments should go individual lines. EditorConfig files should be UTF-8 encoded, with either CRLF or LF line separators.
        • Filename globs containing path separators (/) match filepaths in the same way as the filename globs used by .gitignore files. Backslashes (\) are not allowed as path separators.
        • A semicolon character (;) starts a line comment that terminates at the end of the line. Line comments and blank lines are ignored when parsing.
        • Comments may be added to the ends of non-empty lines.
        • An octothorpe character (#) may be used instead of a semicolon to denote the start of a comment.
      • MarkdownTrailing space issue
        • Why is this code needed (or not)? 
          [*.md]
trim_trailing_whitespace = false
        • In Markdown, trailing whitespace at the end of a line can have specific formatting effects:
          • Two spaces at the end of a line create a line break (<br> in HTML).
          • If this is unintentional, it can lead to unexpected layout issues in rendered documents.
        • TIL That two trailing spaces indicates a line break in Markdown — David Winterbottom
          • Markdown supports hard linebreaks by ending a line with two spaces. Don’t strip trailing whitespace in yourMarkdown editor pre-save hooks.
        • Trailing whitespace - Markdown style guide | styleguide
          • Don’t use trailing whitespace. Use a trailing backslash to break lines.
          • The CommonMark spec decrees that two spaces at the end of a line should insert a <br /> tag. However, many directories have a presubmit check for trailing whitespace, and many IDEs will clean it up anyway.
          • Use a trailing backslash, sparingly:
          • Best practice is to avoid the need for a <br /> altogether. A pair of newlines will create a paragraph tag; get used to that.
        • The Dead Simple Markdown Guide to Line Breaks | HackerNoon - Learn how to create line breaks in Markdown using trailing whitespace, HTML tags, and other techniques.
        • Line Breaks - Basic Syntax | Markdown Guide
          • To create a line break or new line (<br>), end a line with two or more spaces, and then type return.
          • You can use two or more spaces (commonly referred to as “trailing whitespace”) for line breaks in nearly every Markdown application, but it’s controversial.
          • If your Markdown application supports HTML, you can use the <br> HTML tag.
          • For compatibility, use trailing white space or the <br> HTML tag at the end of the line.
          • CommonMark and a few other lightweight markup languages let you type a backslash (\) at the end of the line, but not all Markdown applications support this.
        • Trim Trailing Whitespace Breaks Markdown · Issue #1679 · microsoft/vscode · GitHub
          • Successfully disabled files.trimTrailingWhitespace for Markdown using language specific settings. Snippet from my settings.json: 
            "files.trimTrailingWhitespace": true,
"[markdown]": {
    "files.trimTrailingWhitespace": false
},
      • Exclude Files and Folders (Paths)
        • There are a couple of ways to exlude paths from your .editorconfig
          1. generated_code 
            [/vendor/**]
generated_code = true
          2. unset 
            [/vendor/**]
indent_style = unset
indent_size = unset
tab_width = unset
end_of_line = unset
charset = unset
trim_trailing_whitespace = unset
insert_final_newline = unset
            • [/vendor/**] matches all files and folders recursively inside the `vendor` folder.
          3. Empty root .editorconfig file 
            # This file prevents parsing of this folder and it's children by EditorConfig - Do NOT delete
root = true
            • This is more of a workaround.
            • This file is defined as a root .editorconfig file and as such no futher .editorconfig files will be looked for preventing settings being pulled from additional config files.
            • There are no "path actionable" settings defined in this file so this file prevents any alterations to the files in this folder or any of it's children.
    • Tutorials
    • Tools
    • Misc
      • If I use the `Generate .editorconfig` options in VSCode (via the right click context menu) I get the following file: 
        # EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
      • ChatGPT - I asked this AI model:
        • Q: Are there any websites that give spaces/tabs/indentation recommendations for various files and formats?
        • A: Yes, there are several websites that offer indentation, tab/space, and general formatting style recommendations for various file types and programming languages. Here are some of the most reliable ones:
          File Type Language / Format Indent Type Indent Size Notes / Style Guide
          .py Python Spaces 4 PEP 8
          .js, .ts JavaScript / TypeScript Spaces 2 Airbnb Style, Prettier
          .json JSON Spaces 2 Common readability standard
          .html, .css HTML / CSS Spaces 2 W3C, Prettier
          .scss, .less Sass / Less Spaces 2 Follows CSS conventions
          .java Java Spaces 4 Google Java Style
          .c, .cpp, .h C / C++ Spaces 2 or 4 Google: 2, LLVM: 2, Linux Kernel: Tabs
          .go Go Tabs N/A gofmt
          .rb Ruby Spaces 2 Ruby Style Guide
          .php PHP Spaces 4 PSR-12
          .xml, .yml, .yaml XML / YAML Spaces 2 YAML requires spaces
          .md Markdown Spaces 2 or 4 Depends on processor
          .cs C# Spaces 4 Microsoft Style
          .swift Swift Spaces 4 Raywenderlich Swift Guide
          Makefile Make Tabs N/A Tabs required in Makefiles
          .sh, .bash Shell Scripts Spaces 2 or 4 Flexible, depends on team preference
          .rs Rust Spaces 4 rustfmt
      • Q: Can you take the rules in this table and make an .editorconfig file?
      • A: Yes, here you go: 
        # top-most EditorConfig file
root = true

# Default settings (fallback)
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Python
[*.py]
indent_style = space
indent_size = 4

# JavaScript / TypeScript / JSON
[*.js]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 2

[*.json]
indent_style = space
indent_size = 2

# HTML / CSS / SCSS / Less
[*.html]
indent_style = space
indent_size = 2

[*.css]
indent_style = space
indent_size = 2

[*.scss]
indent_style = space
indent_size = 2

[*.less]
indent_style = space
indent_size = 2

# YAML
[*.{yml,yaml}]
indent_style = space
indent_size = 2

# Markdown
[*.md]
trim_trailing_whitespace = false
indent_style = space
indent_size = 2

# Shell scripts
[*.sh]
indent_style = space
indent_size = 2

# C, C++, Header files
[*.{c,cpp,h,hpp}]
indent_style = space
indent_size = 4

# Java
[*.java]
indent_style = space
indent_size = 4

# C#
[*.cs]
indent_style = space
indent_size = 4

# PHP
[*.php]
indent_style = space
indent_size = 4

# Ruby
[*.rb]
indent_style = space
indent_size = 2

# Go (tabs required)
[*.go]
indent_style = tab

# Makefiles (tabs required)
[Makefile]
indent_style = tab

# Rust
[*.rs]
indent_style = space
indent_size = 4
      • The empty last line is intentional as it was added by ChatGPT, but the file will operate fine without it.
  • .prettierrc (only needed if using Prettier) 
    {
    // Defaults
    "useTabs": true,
    "tabWidth": 4,
    "endOfLine": "lf",
    "options.editorconfig": true,  // Use .editorconfig - This setting might of been deprecated.

    // File Specific Overrides
    "overrides": [

        // Languages
        {
            "files": ["*.php"],
            "options": {
                "useTabs": false,
                "tabWidth": 4
            }
        },
        {
            "files": ["*.{mjs,js,json,scss,css,yml,vue}"],
            "options": {
            "useTabs": false,
            "tabWidth": 2
            }
        },

        // Force batch scripts to always use CRLF line endings
        {
            "files": ["*.[bB][aA][tT]","*.[cC][mM][dD]"],
            "options": {
            "endOfLine": "crlf"
            }
        },

        // Force bash scripts to always use LF line endings
        {
            "files": "*.sh",
            "options": {
            "endOfLine": "lf"
            }
        }
    ]
}
    • General
      • Prettier uses micromatch under the hood for files, which supports glob patterns but not full regular expressions or case-insensitive matching out of the box.
      • Braces - micromatch/micromatch | GitHub - Brace patterns can be used to match specific ranges or sets of characters.
      • Micromatch is case-sensitive by default, but when you use character classes like [bB], you're explicitly accounting for both cases.
      • Documentation · Prettier
    • Configuration
      • Configuration File · Prettier
        • You can configure Prettier via (in order of precedence) = This gives a list of the priority order of the different Prettier config files.
        • The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.
        • Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.
        • Overrides let you have different configuration for certain file extensions, folders and specific files.
        • EditorConfig - Configuration File · Prettier
          • If a .editorconfig file is in your project, Prettier will parse it and convert its properties to the corresponding Prettier configuration. This configuration will be overridden by .prettierrc, etc.
      • Alternative files line using braces. 
        "files": ["*.{b,B}{a,A}{t,T}", "*.{c,C}{m,M}{d,D}"],
      • prettier config set line endings by filename - Bing Search
        • overrides: Specifies custom settings for specific file patterns
        • Ensure your Prettier version supports the overrides property (introduced in Prettier 1.15).
      • Are "files" declarations in .prettierrc case-sensitive?
        • Yes, they are case-sensitive on case-sensitive file systems (like ext4 on Linux). However, on case-insensitive file systems (like NTFS on Windows or APFS on macOS by default), the matching behaves as case-insensitive in practice — because the filesystem itself doesn't distinguish between *.BAT and *.bat.
          • But Prettier itself does not support case-insensitive glob matching directly in its config, meaning:
            • If you write "files": ["*.bat"], it will not match MYFILE.BAT on a case-sensitive file system.
            • On Windows, you might not notice the issue due to NTFS's case insensitivity.
          • So: yes, files is case-sensitive in Prettier.
      • .editorconfig
    • Tutorials
  • .eslint.config.js (only needed if using ESLint) 
    // A decent starter config for ESLint V9.0.0+ (From quantumwarp.com)

// CSS, and HTML plugins need installing, edit as required.

import { defineConfig } from "eslint/config";
import css from "eslint-plugin-css";
import html from "@html-eslint/eslint-plugin";
import js from "@eslint/js";

export default defineConfig([
  // Default Line Ending
  {
    files: ["**/*.*"],
    rules: {
      "linebreak-style": ["error", "unix"],
    },
  },

  // CSS rules
  {
    files: ["**/*.css"],
    plugins: {
      css,                                          // Shorthand for `css: css`            
      //css: cssPlugin,                             // key: name used in rules, value: actual plugin object (eg: `cssPlugin` is from: `import cssPlugin from "eslint-plugin-css";`)
    },
    //language: "css/css",                          // Only needed if your plugin doesn’t automatically register a parser, or you want to be explicit. This is needed when not extending a premade ruleset.
    extends: ["plugin:css/recommended"],            // (optional) Extends and uses, the exisiting `recommended` ruleset from the imported `css` config with the rules below.
    rules: {                                        // Custom rules, these are just examples.
      //"css/no-duplicate-properties": "error",       // Throw an error if duplicate CSS properties within the same ruleset are detected.
      //"css/no-invalid-hex": "error",                // throw an error if invalid hexadecimal color values are detected.
    },
  },

  // HTML rules
  {
    files: ["**/*.html"],
    plugins: {
      html,                                         // Shorthand for `html: html`
      //html: htmlPlugin,                           // key: name used in rules, value: actual plugin object (eg: `htmlPlugin` is from: `import htmlPlugin from "@html-eslint/eslint-plugin";`)
    },
    //language: "html/html",                        // Only needed if your plugin doesn’t automatically register a parser, or you want to be explicit.   
    extends: ["plugin:@html-eslint/recommended"],   // (optional) Extends and uses, the exisiting `recommended` ruleset from the imported `html` config with the rules below. This is needed when not extending a premade ruleset.
    rules: {                                        // Custom rules, these are just examples.
      //"@html-eslint/indent": "error",               // Throw an error when inconsistent indentation is detected
      //"@html-eslint/no-duplicate-id": "error",      // Throw an error when a duplicate ID is detected.
    },
  },

  // JavaScript rules
  {
    files: ["**/*.js"],
    plugins: {
      js,                                           // Shorthand for `js: js`
      //js: jsPlugin,                               // key: name used in rules, value: actual plugin object (eg: `jsPlugin` is from: `import jsPlugin from "@eslint/js";`)
    },
    //language: "js/js",                            // I don't think this is ever needed as JavaScript support is builtin natively and not added via a plugin.
    extends: ["js/recommended"],                    // (optional) Extends and uses, the exisiting `recommended` ruleset from the imported `js` config with the rules below.
    rules: {                                        // Custom rules, these are just examples.
      //"no-unused-vars": "warn",                     // Warn if there are unused declared variables
      //"no-console": "warn",                         // Warn when using console.log
      //"eqeqeq": ["error", "always"],                // Enforce === instead of ==  
      //"curly": ["error", "all"],                    // Require curly braces for all blocks
      //"prefer-const": "error",                      // Suggest const for variables that never change  
    },
  },

  // Force batch scripts to always use CRLF line endings
  {
    files: ["**/*.[bB][aA][tT]","**/*.[cC][mM][dD]"],
    rules: {
      "linebreak-style": ["error", "windows"],
    },
  },
  
  // Force bash scripts to always use LF line endings
  {
    files: ["**/*.sh"],
    rules: {
      "linebreak-style": ["error", "unix"],
    },
  },
  
]);
    • "files:" is case sensitive
    • "*.js"
      • Only matches JavaScript files in the root directory (where your ESLint config lives).
      • Does not match files in subdirectories.
    • "**/*.js"
      • Matches .js files recursively in all folders.
      • This is almost always what you want in a real project.
    • Edit this file to what you need. I put all of the annotations in because the Flat config syntax has just be made the default paradigm and is complicated to understand. The older config syntax has been deprecated.
    • ESLint does not support CR line endings.
  • .gitattributes (Modified - .gitattributes Best Practices - Muhammad Rehan Saeed) 
    ##########################
# Normalize Line Endings #
##########################
 
# Default Line Ending
* text=auto eol=lf
 
# Force batch scripts to always use CRLF line endings so that if a repo is accessed
# in Windows via a file share from Linux, the scripts will work.
*.{[bB][aA][tT],[cC][mM][dD]} text eol=crlf
 
# Force bash scripts to always use LF line endings so that if a repo is accessed
# in Unix via a file share from Windows, the scripts will work.
*.sh text eol=lf
    • Altering line endings using Git is a fallback method to catch those files you miss. If your workspace is setup correctly this stage should not be needed.
  • .gitignore 
    # Editor Configs
/.vscode/
/nbproject/
/node_modules/
package-lock.json
package.json

# Local Storage
/localonly/
    • If you want to share your VScode you need to comment out or delete the line /.vscode/ line.

Start your Project

Follow each of the sections below to confgure your local project folder with Git integration.

Common

  • Create a local folder (this will be your workspace for you project) or re-use a pre-existing project folder (i.e. VSCode or NetBeans).
    • Pre-exisiting should have the hidden folder /.git/ if you want to use the pre-exisitng Git connection. 
  • Open your project folder in VSCode as follows:
    • File --> Open Folder --> `.../YourProjectFolder/`

Configure Git

Your project will have one of the following scenarios, so pick the relevant section and follow the instructions for Git.

With an existing Netbeans Project which has a local Git repo

During this setup process I am not asked for specific credentials for my remote repository, the OAUTH must be enough along with information pulled from the local Git repository.

  • Local Git Repository
    • When you open a project that was created in Netbeans, the local Git repository is automatically picked up, probably because the local git is stored in `.../YourProjectFolder/.git/`
    • NB: There might be scenarios where the Git repo was not stored in the default location (`.../YourProjectFolder/.git/`) in which case the repo might not get picked up automatically.
  • Re-Authenticate GitHub
    • Click on the GitHub icon on the left of VSCode
    • Click `Sign in`, then `Allow`.
    • Authorize the app on GitHub on the webpage that has just opened i.e. click `Continue`
    • Click  `Authorize Visual-Studio-Code`

      • Most of the stuff on this page is just a warning, you either say yes or no, there are no configurable options here.
    • if you have 2fa you need to `Confirm access`  everyone should have this, just ise whart ever method
       
    • You are now authenticated

      • If the redirect the fails, like mine did, this is whatypou should do to complete authentication:
        • Keep your browser open.
        • Close VSCode and restarted it.
        • Now go the GitHub icon and click on `Sign in`
        • You should now log in with no more prompts as the authetication has already been completed.
        • Reason: Only the redirect failed, the authetication had already completed.
    • You should now see a panel of stuff rather than a `Sign in` button on the GitHub Panel.
  • Check that the local and remote repositories are in sync
    • Source control graph - Using Git source control in VS Code | Visual Studio Code
      • When you have a remote repository configured, you can see how many commits you are ahead or behind the remote.
      • The Graph section of the Source Control view shows a graphical representation of the commits that are incoming and outgoing.
    • Instructions
      • make sure you have Git Graph installed.
      • Click on `Git Graph` in the status bar.
      • If the repo is out of sync this will be shown.
With an already existing GitHub Repo 
  • Intiate the cloning of the remote Git repo, pick a method:
    1. Run the following command from the palette 
      Git: Clone
    2. On the welcome page you can click the link "Clone Git Repository..."
    3. Run the following command from the palette will skip the need to pick the repo 
      git clone https://github.com/angular/angular-phonecat.git
  • Select where to get the repository from (if prompted)

    1. Provide a repository URL such as: 
      https://github.com/angular/angular-phonecat.git
    2. Clone from GitHub (preferred)
      1. You will now be given a list or repositories you can search and make your choice.
    3. Authenticate as required
      1. Authentication might not occur if you already have permission. If it does, just follow it through.


  • Select the target folder for the cloned repository
  • Open the cloned Repository or add it to the current workspace?

    • Choose "Cancel"
  • VSCode has now cloned the GitHub repo to your local project folder, but a double folder issue has occured using this this method.
    • Fix the double folder issue:
      • Close this workspace and then close VSCode.
      • Navigate using windows explorer (potentially this can all be done in VSCode)
      • Move the contents of the folder the Git clone process created up one folder (i.e. to your projects root)
        • Make sure you move all of the hidden files aswell.
      • Delete the now empty folder
      • Done
  • Re-open the project folder in VSCode
    • Open `.../YourProjectFolder/`in VSCode.
    • All connected and done.
With an already existing Local Repo
  • Create a repository on GitHub?
  • Connect the local repo to GitHub?
With no GitHub or Local Repo
  • Create a repository on GitHub
  • Initialise Git locally

NB: you can probably create the GitHub repo from VSCode, but the method above is easier and I know how to do it.

Common

Now you have setup your Git, you need to make sure your configurations are in order, whether they need amending or doing from scratch.

Configure Workspace
  • Setup/Re-Configure the Config files in the project folder (as required)
    • Copy your repo template to the workspace folder (optional)
    • Configure .vscode/settings.json as required
    • Configure .editorconfig as required
    • Configure .prettierrc as required (optional)
    • Configure eslint.config.js as required (optional)
    • Configure .gitattributes as required
    • Configure .gitignore as required
  • Completely Protect specific Local folders from EditorConfig
    • The `localonly` and `vendor` folder already have the "unset" rules applied to them in the default .editorconfig above, however if you add new rules of a different type than those currently unset, then you will need to also add the relevant unset rule in the exclude section..
    • If you add a blank root .editorconfig file (see above for the code) to a folder it will completely prevent EditorConfig parsing of this folder.
Config VSCode
  1. Do you already have a profile that is suitable for this project, then open it. (Optional)
  2. In VSCode open your workspace (i.e. the project folder)
  3. Configure the workspace settings (as required)
  4. Extensions
    1. Install `Recommended Extensions`
    2. Configure as required

Your First Git Commit

Notes

Some things related to your first commit that you will most likely come across.

  • There are no staged changes to commit | Staging Area (Stash)
    • When you encounter the message "There are no staged changes to commit" in Git, it means that you attempted to create a commit without having any changes staged. The staging area is where you prepare changes before committing them to the repository.
    • I think a stash is just a staging area where you can put files you want to commit and then go back to work on the code.
    • The files in the stash are copies of files at the point in time when they were commited to the stash.
    • This feature allow to carry on workign with your code and not worry about chaning files that you have not commit their changes yet.
    • Git Changes Not Staged for Commit: A Quick Guide - Discover what to do when you encounter git changes not staged for commit. This concise guide helps you master your workflow effortlessly.
    • How to resolve the Git message "There are no staged changes to commit" - This guide explains how to handle the Git message "There are no staged changes to commit." Learn step-by-step solutions to identify and fix this issue in your workflow.
  • Further reading
    • Introduction to Git in VS Code | Visual Studio Code - Get started with Git in Visual Studio Code and take control of your code! Our beginner's guide covers everything you need to know, from setting up a repository to committing changes and collaborating with others. Learn Git today and streamline your development workflow.

Extensions

General

  • Where are extensions installed - Extension Marketplace | Visual Studio Code
    • Extensions are installed in a per user extensions folder. Depending on your platform, the location is in the following folder:
      • Windows %USERPROFILE%\.vscode\extensions
      • macOS ~.vscode/extensions
      • Linux ~.vscode/extensions
    • In these folders you will also find
      • extensions.json - Global list of installed extensions
      • .obsolete - I am not 100% about this file's purpose
  • You can install extensions globally or in a workspace.
  • How do i see all of my installed extensions?
  • What are the inbuilt extensions/languages with vscode/
    • View extensions and then filter with @builtin
  • how do i see all of the top extensions by installs?
    • you can use the extensions filters in VScode
      • @popular (Most Popular)
      • @installs (number of installs)
      • Perhaps try both
  • Best practice for installed extensions
    • Globally Install all of the extensions you will need for all of your project
    • Disable all of the extensions globally, except thise that you want on globally such as GIT hitstory and your preferred theme etc...
    • Enable the required extensions per workspace/project
    • This keeps extension bloat down but you have all of the required extensions available when required.
  • You can make a profile with specific extensions e.g. for PHP, do the following:
    • Create a profile called PHP
    • In the profile only enable the PHP extensions required
    • You can now assign this profile to the required PHP only Workspaces.

My Curated List

This is a list of the plugins I use, have looked at and might use in the future. The list was correct when I started and should be a god list for other people who do no now where to start. You don't need to install them all, just the ones that will be useful to you.

If there is more than one extension to do the same job, they are there because I have not used that feature and thus not picked a favourite yet.

  • Adding 2 or more extensions that do the same thing (i.e. IntelliSense for PHP or Bracket Pair Colorisers) might cause issues with stability and certainly functionality as the extensions fight with each other.
  • If you have Visual Studio Code installed and open, the easiest way to install these plugins is to click on the links below which take you to the marketplace, and then click the install button on that page which will open the correct plugin in VSCode ready for you to install in the app.

VSCode

Styling (Not Themes)
  • vscode-styled-components
    • Syntax highlighting and IntelliSense for styled-components.
    • Not sure what this is for but it is popular.
  • Apc Customize UI++
    • Advanced VSCode user interface customizations. Very experimental.
    • This extension allows customization outside vscode scoop.
  • Vibrancy Continued
    • Vibrancy Effect for Visual Studio Code.
    • This gives a glass look and feel to the editor, a semi-transparent effect.
    • This may cause an error message "Your Code Installation appears to be corrupt. Please reinstall". This is caused because the VSCode CSS is being altered.
    • Set the your theme back to the system default which is "Dark+"
  • Peacock
    • Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
    • If you frequently have multiple VS Code instances open and struggle to tell them apart, Peacock might be worth taking a closer look at, the extension subtly changes the color theme of your workspace.
    • But it’s not only when working on multiple projects at once where Peacock shines. It also comes in handy when using VS Live Share or VS Code’s Remote features and you quickly want to identify your editor.
System Resources
  • Resource Monitor
    • Display CPU frequency, usage, memory consumption, and battery percentage remaining within the VSCode status bar.
    • The Dev Containers extension lets you use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment
Keybindings and Toggles
  • Notepad++
    • Popular Notepad++ keybindings for Visual Studio Code
    • This extension ports popular Notepad++ keyboard shortcuts to Visual Studio Code.
    • Adds things like Ctrl + H
  • Toggle
    • Toggle any VS Code setting by using your favorite keybindings.
  • Formatting Toggle
    • A VS Code extension that allows you to toggle formatting settings ON and OFF with a simple click.
Productivity 
  • Text Pastry
    • Extend the power of multiple selections in VS Code. Modify selections, insert numeric sequences, incremental numbers, generate uuids, date ranges, insert continuously from a word list and more.
    • Text Pastry lets you reduce repetitive work and use multiple cursors more effectively in VS Code.
  • TypeScript Hero [Deprecated]
    • Additional toolings for typescript
    • TypeScript Hero is a vscode extension that makes your life easier. When you are coding a lot of TypeScript you may want vscode to organize your imports.
  • Bookmarks
    • Mark lines and jump to them.
    • This extension is great when you are working with large files, you can jump with the command Pallet or use keyboard shortcuts.
  • Project Manager
    • Easily switch between projects.
    • This is needed because each VSCode instance only works on one Workspace/Project at a time.
    • This amongst other things adds a favourites pane so you can select other projects you have been working on almost like a recently opened menu.
    • VSCode extensions to maximise your productivity - YouTube | Dev tips by MoHo
      • In this video, I am going to talk about two VS Code extensions that are going to save your time if you are working on multiple projects.
      • also install Peacock for clarity on which window is for which app.
Tasks
  • Task Explorer
    • Tasks management for npm, vscode, yarn, ant, gradle, grunt, gulp, batch, bash,php composer, make, maven, python, perl, powershell, ruby, pipenv, nsis. Supports external task providers via API.

Themes

TL;DR

What themes I am using:

  • Themes | Visual Studio Code
    • Changing the color theme in Visual Studio Code. You can use color themes provided by VS Code, the community or create your own new themes.
    • Color Theme: A mapping from both UI Component Identifier and Text Token Identifier to colors. Color theme allows you to apply your favorite colors to both VS Code UI Components and the text in the editor.
    • File Icon Theme: A mapping from file type / file name to images. File icons are displayed across the VS Code UI in places such as File Explorer, Quick Open List, and Editor Tab.
    • Product Icon Theme: A set of icons used throughout the UI, from the Side bar, the Activity bar, status bar to the editor glyph margin.
Color Themes (a.k.a. Themes)
  • Color themes enable you to modify the colors in the Visual Studio Code user interface to match your preferences and work environment. A Color Theme affects both the VS Code user interface elements and the editor highlighting colors.
  • Color Theme | Visual Studio Code Extension API
    • A guide to creating Color Theme in Visual Studio Code
    • Colors visible in the Visual Studio Code user interface fall in two categories:
      • Workbench colors used in views and editors, from the Activity Bar to the Status Bar. A complete list of all these colors can be found in the theme color reference.
      • Syntax colors and styles used for source code in the editor. The theming of these colors is different as syntax colorization is based on TextMate grammars and TextMate themes as well as semantic tokens.
  • Default Theme (Built-in) = Default Themes --> Dark Modern: Default Dark modern

Others are available

I have not added every theme into my list and there are many more out there, perhaps some people have a different take on a particular theme.

File Icon Themes
  • File icons indicate a particular file type. These icons are shown alongside the file name in the Explorer view and in tabbed headings. By default, the Seti File Icon Theme is used and those are the icons you see in the Explorer view. 
  • File Icon Theme | Visual Studio Code Extension API
    • A guide to creating a File Icon Theme in Visual Studio Code
    • Visual Studio Code displays icons next to filenames throughout its UI, and extensions can contribute new sets of file icons that users can choose from.
  • Default Theme (Built-in) = Seti File Icon Theme
  • Material Icon Theme
    • Material Design Icons for Visual Studio Code (Philipp Kief)
    • This icon pack has all of the icons you would think of, even the ones for folders and files that are not considered programming languages.
    • You can add your own custom icons, create variants, change colours, use greyscale and many other features.
    • You can change the standard folder colour easily (i.e. empty folders).
    • A very active community.
  • vscode-icons - Adds real icons to your Visual Studio Code files and folders
  • Material Theme Icons - Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme. (Material Theme)
  • VSCode Great Icons - A big pack of icons (200+) for your files.
  • Nomo Dark Icon Theme - Nomo Dark Icon Theme
  • City Lights Icon package - The City Lights icon pack is a gorgeous set of icons which you can toggle by color or grayscale to enhance your focus (Yummygum)
  • Bearded Icons - The icons with a long beard (BeardedBear).
  • file-icons - File-specific icons in VSCode for improved visual grepping.
  • Catppuccin Icons for VSCode - Soothing pastel icon theme for VSCode (Catppuccin).

Others are available

Product Icon Themes
  • Product Icon Themes enable you to change the icons in the VS Code user interface, other than the icons for specific file types. For example, you can modify the icons for the views in the Activity Bar, or the icons in the title bar for changing the layout.
  • Product Icon Theme | Visual Studio Code Extension API
    • A guide to creating Product Icon Theme in Visual Studio Code
    • Visual Studio Code contains a set of built-in icons that are used in views and the editor, but can also be referenced in hovers, the status bar, and even by extensions. Examples are the icons in filter action buttons and view icons, in the status bar, breakpoints, and the folding icons in trees and the editor.
    • A product icon theme allows an extension to redefine these icons to give VS Code a custom appearance. Not covered by product icon themes are the file icons (covered by file icon themes) and icons contributed by extensions.
  • Default Theme (Built-in) = No theme is listed.

Others are available

Misc / Toggles / Buttons / Commands
  • Toggle Light/Dark Theme
    • Command to toggle the theme between light/dark.
    • This extension provides a quick toggle between light/dark themes in VS Code. This may be useful for anyone working under significantly changing background or reflected light levels.
  • Fira Ligature Toggle
    • Adds a button into the status bar to toggle the ligature mode for the Fira Font.
    • This extension requires the Fira Code font to be installed.

Extensions Packs

  • These sometimes are almost like their own piece of software but are an install list of different extensions from the store and people make them to make installing multiple extensions easer, however you might not get the exact setup you want.
  • These packs can be good to get extension suggestions.
  • PHP
    • All-in-One PHP support - IntelliSense, Debug, Formatter, Code Lenses, Code Fixes, Linting, Refactoring, PHPUnit Tests, Web Server, and more.
    • PHP Tools for VS Code is a full development integration for the PHP language. The features are provided respecting conventions, stability, simple use, and performance. Please see the product page for more details on devsense.com.
    • This package extends VS Code with fast code completion, advanced editor features, code fixes, code lenses, code generators, debugger, built-in development web server, test explorer, tests debugger, and workspace-wide code analysis.
    • Free and Paid version.
  • PHP Extension Pack (xdebug)
    • Everything you need for PHP development
    • I think it is a package an installs Debugger and IntelliSense
  • PHP Tools for Visual Studio Code (DEVSENSE)
    • PHP Tools turns Visual Studio and VS Code into a powerful PHP development environment. Edit, analyze, refactor, test & debug code in PHP.
    • Not available through the Microsoft Store.
    • There is a free plan
  • Python Extension Pack
    • Popular Visual Studio Code extensions for Python
    • This extension pack packages some of the most popular (and some of my favorite) Python extensions.
  • Live Sass Compiler
    • Compile Sass or Scss to CSS at realtime.
    • A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS at real-time.
  • C/C++ Extension Pack - Popular extensions for C++ development in Visual Studio Code.

Programming Languages

There are many languages are already built in to VSCode, but some need adding.

In this section are new langauges and language specific extensions that dont fit anywhere else.

Python
  • Python
    • Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.
  • Pylance
    • A performant, feature-rich language server for Python in VS Code.
    • Part of the Python package above.
  • Snippets
JSON
  • json
    • This extension adds json support for Visual Studio Code.
YAML
Markdown
C/C++
  • C/C++
    • C/C++ IntelliSense, debugging, and code browsing.
    • The C/C++ extension adds language support for C/C++ to Visual Studio Code, including editing (IntelliSense) and debugging features.
  • CMake - CMake langage support for Visual Studio Code - is this needed becasue of cmake tools
  • CMake Tools
    • Extended CMake support in Visual Studio Code
    • This extension provides the native developer a full-featured, convenient, and powerful workflow for CMake-based projects in Visual Studio Code. It simplifies advanced configurations with support for CMake presets and enhances the development experience by supporting rich IntelliSense features, a built-in debugger for CMake scripts, and configurable CMake tasks. Its customizable interface allows for efficient tailored control of projects, while CTest integration ensures straightforward test execution and monitoring.
  • C/C++ Themes
    • UI Themes for C/C++ extension.
    • We created C/C++ Extension UI Themes to closely match Visual Studio themes and include colors for many of the new scopes.
Tailwind
  • Tailwind CSS IntelliSense
    • Intelligent Tailwind CSS tooling for VS Code
    • Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
  • Tailwind Docs
    • Easily access the Tailwind CSS documentation from within Code
  • Tailwind Shades
    • Tailwind CSS color palette generator
  • Headwind
    • An opinionated class sorter for Tailwind CSS
    • It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.
Ruby
  • Ruby LSP
    • VS Code plugin for connecting with the Ruby LSP
    • The Ruby LSP is an implementation of the language server protocol for Ruby, used to improve rich features in editors.
    • By Shopify
  • VSCode rdbg Ruby Debugger
    • Ruby's rdbg debugger support for VSCode.
    • A Ruby debugger to connect the debug library which utilize recent Ruby's debug support features.
  • endwise
    • This is an extension that wisely adds the "end" keyword to code structures in languages like Ruby or Crystal while keeping the correct indentation levels.
  • Ruby Test Explorer
    • Run your Ruby tests in the Sidebar of Visual Studio Code.
    • The extension supports the RSpec and Minitest test frameworks.
Rails
Misc
  • Language Server for Java by Apache NetBeans
    • Apache NetBeans Language Server Extension for Visual Studio Code
    • This is Apache NetBeans Language Server extension for VS Code. Use it to get all the goodies of NetBeans via the VS Code user interface! Runs on JDK11 and all newer versions.
    • Apache NetBeans Extension for Visual Studio Code | apache.org - VSNetBeans, the Apache NetBeans Extension for Visual Studio Code, is created as a promotional tool by the Apache NetBeans community for VS Code users.
  • Liquid
    • The essential vscode extension for Liquid. Supports completions, validations, formatting and intelliSense capabilities for Shopify, Jekyll and 11ty Liquid variations.
    • Liquid template language | Shopify
      • Documentation for the Liquid template language, created by Shopify.
      • Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
      • Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.

Media

File Integration
  • SVG
    • SVG Previewer
      • Show SVG preview to the side panel
    • Svg Preview
      • Preview for Svg files
    • SVG
      • SVG Coding, Minify, Pretty, Preview All-In-One
      • A Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.
      • I have not seen this used yet, but it seems to be popular.
  • Misc
    • Draw.io Integration
      • This unofficial extension integrates Draw.io into VS Code.
      • View UML Diagrams.
      • When you create a new file, it needs to have the .drawio file extension to be recognised as a suitable Draw.io project.
      • You can export these diagrams easily.
    • Excel Viewer
      • Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web.
    • Image preview
      • Shows image preview in the gutter and on hover
    • ZipFS - a zip file system
      • Allows to easily inspect and modify files stored within zip archives.
      • This extension adds support into VSCode to read files directly from zip archives. It's maintained as part of the Yarn toolchain.
      • Paths starting with the zip: protocol (e.g. zip:/foo/bar.zip/index.js) will be resolved, the zip archive being extracted and opened as if it was a folder.
    • vscode-pdf
      • Display PDF files in VSCode.
File Handling
  • File Utils
    • A convenient way of creating, duplicating, moving, renaming and deleting files and directories.
  • FileOps
    • VS Code extension to import, group, bookmark, quick switch files, text transformations & keyboard shortcuts.
    • Look at the animation for better idea of the functionality.
  • advanced-new-file - Visual Studio Marketplace
    • Create files anywhere in your workspace from the keyboard
  • Duplicate action
    • Ability to duplicate files and directories in VS Code.
Colour
  • Color Picker
    •  Helper with GUI to generate color codes such as CSS color notations.
  • Color Info
    • Provides quick information about css colors
  • Color Manager
    • color picker and color palette
    • Not sure if this is needed

The Code

AI Code Autocomplete / AI Testing / Coding Assistants

All things AI.

  • GitHub Copilot
    • Your AI pair programmer
    • GitHub Copilot is an AI peer programming tool that helps you write code faster and smarter.
    • GitHub Copilot adapts to your unique needs allowing you to select the best model for your project, customize chat responses with custom instructions, and utilize agent mode for AI-powered, seamlessly integrated peer programming sessions.
    • Free plan = 2000 code completions a month.
    • GitHub Copilot overview - Enhance your coding with AI-powered suggestions and chat conversations with GitHub Copilot in Visual Studio Code.
  • GitHub Copilot Chat
    • AI chat features powered by Copilot
    • Chat version of Copilot.
    • Ask Copilot for help with any task or question in the Chat view, bringing in code from your current files. Rather than giving you a generic answer, it can give answers that are relevant for your codebase using information provided by participants, variables, and slash commands.
    • Free plan = 50 chats per month.
  • Tabnine
    • AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more
    • Tabnine is the AI code assistant that accelerates and simplifies software development while keeping your code private, secure, and compliant. It provides accurate, highly personalized results for generating code, writing unit tests, creating documentation, explaining legacy code, fixing code, and mu
    • This is an alternative to Github Copilot.
  • Pieces
    • AI assisted code snippet manager.
    • An on-device storage agent and AI coding assistant integrated throughout your entire toolchain that helps developers capture, enrich, and reuse useful code, as well as debug, add comments, and solve complex problems through a contextual understanding of your unique workflow.
    • Pieces for Developers - Long term memory for developer workflows - Pieces is your AI companion that captures live context from browsers to IDEs and collaboration tools, manages snippets and supports multiple LLMs.
  • IntelliCode
    • The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
    • This is an AI assistant for Python, TypeScript, JavaScript and Java and IntelliCode is an AI boosted upgrade to the built-in IntelliSense code completion feature of VSCode. It uses AI to provide more accurate suggestions for code completion. It does this by analysing a developers code context to make these better suggestions.
    • It is not as powerful as GitHub Copilot but it is free.
  • Qodo Gen: AI Coding Assistant (formerly Codium)
    • AI Coding Assistant (Codium VS Code) - Code, Test and Review with Confidence, supporting Python, Javascript, Typescript, Java, PHP, Go, and more
    • Qodo Gen (formerly Codiumate) (formerly Codium) is a quality-first generative AI coding platform that offers busy developers a comprehensive AI code assistant for generating code, writing unit tests, and creating documentation. With Qodo Gen, developers can leverage the power of AI directly within their IDE and Git.
    • Will generate tests for your code.
    • Qodo Gen - Generate Meaningful Code Tests - The official homepage.
  • BLACKBOX AI Coding Agent
    • BLACKBOX AI is an AI coding assistant that helps developers by providing real-time code completion, documentation, and debugging suggestions. BLACKBOX AI is also integrated with a variety of developer tools, making it easy to use within your existing workflow.
    • Free and No Signup Required
  • Sourcery
    • Instant Code Reviews in your IDE
    • Sourcery is your pair programmer that reviews and enhances your code in real-time. With intelligent code reviews and an AI chat assistant that understands your code, you can ship better code faster.
    • Sourcery is a VS Code extension to help you move faster and ship code with confidence. Sourcery gives you code reviews anytime you want, so you can get feedback before you need to open a PR. Plus Sourcery's coding assistant helps you speed up repetitive tasks while you work.
Code Completion (IntelliSense)

Not quite AI but a favourite for developers.

  • VSCode might have in-built IntelliSense for PHP
  • PHP Intelephense
    • PHP code intelligence for Visual Studio Code
  • PHP IntelliSense
    • Advanced Autocompletion and Refactoring support for PHP
    • Might not be needed in new versions of VSCode.
  • Path Intellisense
    • Visual Studio Code plugin that autocompletes filenames
  • npm Intellisense
    • Visual Studio Code plugin that autocompletes npm modules in import statements
  • :emojisense:
    • Adds suggestions and autocomplete for emoji
  • IntelliSense for CSS class names in HTML
    • CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
    • A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
  • HTML CSS Support
    • CSS Intellisense for HTML
    • HTML id and class attribute completion.
  • Python Type Hint
    • Type hint completion for Python.
    • Provides type hint auto-completion for Python, with completion items for built-in types, classes and the typing module.
  • Python Path
    • Python imports utils.
    • This extension adds a set of tools which help you generate internal import statements in a python project.
Code Insertion (Manual)
  • IntelliCode API Usage Examples
    • See relevant code examples from GitHub for over 100K different APIs right in your editor.
  • Regex Snippets
    • Easily Insert Popular Regex Codes Without Memorising Anything!
    • A VS Code Extension with a list of 50+ hand picked Regex Code Snippets to make lives of many Developers much easier.
  • JavaScript (ES6) code snippets
    •  Code snippets for JavaScript in ES6 syntax (supports both JavaScript and TypeScript).
Code Correction (Linters)
  • Biome
    • The Biome extension for Visual Studio Code brings first-class support for Biome in VS Code and VS Code-based editors.
    • By integrating with Biome's language server, the extension provides the following features:
      • Format on save
      • Code refactoring
      • Inline suggestions and quick fixes
    • Biome, toolchain of the web - Format, lint, and more in a fraction of a second.
    • Biome:
      • is a performant toolchain for web projects, it aims to provide developer tools to maintain the health of said projects.
      • is a fast formatter for JavaScript, TypeScript, JSX, JSON, CSS and GraphQL that scores 97% compatibility with Prettier.
      • is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features more than 270 rules from ESLint, typescript-eslint, and other sources. It outputs detailed and contextualized diagnostics that help you to improve your code and become a better programmer!
      • is designed from the start to be used interactively within an editor. It can format and lint malformed code as you are writing it.
      • has sane defaults and it doesn't require configuration.
      • aims to support all main languages of modern web development.
      • doesn't require Node.js to function.
      • has first-class LSP support, with a sophisticated parser that represents the source text in full fidelity and top-notch error recovery.
      • unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelize work, caching, and configuration.
    • VS Code extension | Biome - Notes about the Biome's VSCode extension
    • Installing
      • Biome does not need NodeJS. The npm manager can be used to install the binary, but this route is optional.
      • You can manually download the binary and palce it in your systems PATH.
      • npm global install is not supported at this time
      • Manual installation | Biome - Install the Biome manually
        • If you’re already using npm or another package manager, then using the package manager is the preferred way to install Biome. You’re already familiar with the tooling, and installing and updating are simpler.
      • Installing - Getting Started | Biome - Learn how to set up a new project with Biome. 
        npm install --save-dev --save-exact @biomejs/biome
        • We instruct the package manager to pin an exact version of Biome. This ensures that everyone within a project has exactly the same version of Biome. Even a patch release can result in slightly different behavior.
    • Misc
      • Allow downloading pre-releases · Issue #593 · biomejs/biome-vscode · GitHub -Removing the binary downloader (bundled version) = is intentional = Affects 3.x+ series.
        • We're actually sunsetting the downloader in the upcoming stable.
        • Instead, we recommend the following approaches, depending on your use case:
          1. Install Biome directly in your project's dependencies
          2. Install Biome globally on your system
        • The extension will use the version in your project's deps to create an LSP session for the files of your project, and will use the global Biome installation to create an LSP session for files that do not belong to a workspace folder (e.g. when you edit an unsaved file in VS Code).
  • ESLint
    • This is not the actual software, but just an extension so it can be used in VSCode.
    • Integrates ESLint JavaScript into VS Code.
    • This is a linter for: Javascript, Typescript, JSON, Markdown, CSS, HTML
    • ESLint can handle line endings (EOL).
    • Uses minimatch-based glob patterns to match files.
    • ESLint does not support CR-only (\r) endings
    • ESLint enables a curated set of rules that help catch common bugs and bad practices — but intentionally excludes stylistic opinions.
      • However it does not seem to have some code formatting features so going forwared it might also become a full formatter.
    • Plugins TL;DR
      • need to be installed via npm
      • @eslint/js comes as part of the installation because ESLint use to only Lint JavaScript but now has move the JS rules code out into its own package.
      • Thre are many 3rd party plugins covering a lot of different languages.
      • plugins need installing and then referencing int he config file specifically
    • Config TL;DR
      • ESLint commands can be put in the .vscode/settings.json
      • Plugins need specifically referencing to bring their configs into yours.
      • Starting in ESLint v8.21.0, ESLint introduced a new flat config format (eslint.config.js). In this format, ESLint no longer automatically includes its own default rules. So if you want the standard "recommended" ESLint rules, you must explicitly import them from @eslint/js.
    • Requires
      • ESLint, NPM and NodeJS packages to be installed.
      • A trigger command to be installed Open .vscode/settings.json in your project (or use global settings.json) and add: 
        {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
      • How to Format on Save with ESlint | Aleksandr Hovhannisyan - Set up ESLint to format on save in two popular code editors: VS Code and neovim.
    • Installing the ESLint Package
      • eslint - npm - Package page for ESLint on npmjs.com
      • For VSCode use this command from the command line (assumes NPM and NodeJS packages are installed). Do not install globally. 
        npm install eslint
      • Getting Started with ESLint | ESLint
        • Lists commands to use in various scenarios 
          npm init @eslint/config@latest
        • It is also possible to install ESLint globally, rather than locally, using npm install eslint --global. However, this is not recommended, and any plugins or shareable configs that you use must still be installed locally if you install ESLint globally.
    • Websites
      • ESLint - Pluggable JavaScript Linter
        • A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
        • The pluggable linting utility for JavaScript and JSX.
      • ESLint Code Explorer
        • Code Explorer is designed to help developers explore and understand source code to aid in the creation of custom ESLint rules. Each language supported by Code Explorer exposes the same information that ESLint rules have access to.
        • At a minimum, each language displays the AST for any code that is entered into the editor. You can toggle different parser settings for each language to see how that affects the AST. For JavaScript, you also get to see scope and code path information.
      • ESLint | GitHub - Official repository.
      • eslint/eslint · Discussions · GitHub
        • Explore the GitHub Discussions forum for eslint eslint. Discuss code, ask questions & collaborate with the developer community.
        • This is the official forum
      • ESLint Playground - ESLint - Pluggable JavaScript Linter - Experiment with ESLint rules and your files with this playground.
      • html-eslint Playground - Find and fix problems in your HTML code using this online ESLint-HTML playground. Useful for testing rules.
    • General
      • What is the difference between .js, .tsx and .jsx in React? | Stack Overflow
      • Languages Property | ESLint
        • Starting with ESLint v9.7.0, you can extend ESLint with additional languages through plugins.
        • While ESLint began as a linter strictly for JavaScript, the ESLint core is generic and can be used to lint any programming language.
        • Each language is defined as an object that contains all of the parsing, evaluating, and traversal functionality required to lint a file.
        • These languages are then distributed in plugins for use in user configurations.
    • Tutorials
    • VSCode Settings
      • You can configure some ESLint-related settings in VS Code’s settings.json, but not ESLint rules themselves — those belong in your ESLint config (eslint.config.js, .eslintrc, etc.).
      • Settings Options - ESLint - Visual Studio Marketplace - A list of settings you can use in .vscode/settings.json
      • save selectively per language | microsoft/vscode-eslint · GitHub
        • Added configuration options to enable code actions and auto fix on save selectively per language. 
          "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true } ]
      • Added support to validate file types other than JavaScript. | microsoft/vscode-eslint · GitHub - To enable this, you need to do the following:
        • Configure ESLint with an additional plugin to do the actual validation. For example, to validate HTML files install eslint-plugin-html using npm install eslint-plugin-html --save-dev and update the ESLint configuration (e.g. .eslintrc.json file) with "plugin": [ "html" ].
        • Add the corresponding language identifier to the eslint.validate setting. Something like "eslint.validate": [ "javascript", "javascriptreact", "html" ]. If the setting is missing, it defaults to ["javascript", "javascriptreact"]
    • Plugins (Official)
      • @eslint/js
        • The beginnings of separating out JavaScript-specific functionality from ESLint.
      • @html-eslint/eslint-plugin
        • This plugin provides a comprehensive set of linting rules for HTML, supporting both standalone .html files and HTML within JavaScript template literals.
        • html-eslint | Homepage
          • Find and fix problems in your HTML code
          • Lots of code examples
        • GitHub - yeonjuan/html-eslint - An ESLint plugin for linting HTML files and HTML in JavaScript Template Literals
        • ESLint can now lint HTML using the html-eslint language plugin - ESLint - Pluggable JavaScript Linter - Bringing HTML linting to ESLint’s new language-agnostic system. 
          • In 2024, ESLint announced its plan to become a language-agnostic linter that is capable of linting languages other than JavaScript. Since then, we’ve seen official support added for JSON and Markdown, and most recently, CSS. Today, I’m excited to share that html-eslint now provides an ESLint language plugin for linting HTML.
        • getting-started - html-eslint - How to get started making your own configuration file.
      • @eslint/css
        • This package contains a plugin that allows you to natively lint CSS files using ESLint.
      • @eslint/markdown
        • Lint JS, JSX, TypeScript, and more inside Markdown.
      • @eslint/json
        • This package contains a plugin that allows you to natively lint JSON and JSONC files using ESLint.
    • Plugins (3rd Party)
      • GitHub - dustinspecker/awesome-eslint - A list of awesome ESLint plugins, configs, etc.
      • eslint-plugin-html
        • A ESLint plugin to lint and fix inline scripts contained in HTML files.
        • This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML. For that, you can use other plugins like @eslint-html or @angular-eslint. eslint-plugin-html is compatible with those plugins and can be used along them.
    • Documentation (v9.0.0)
      • using ESLint 9 + neostandard with vscode and zed | Martin's Blog - how to set up ESLint with neostandard for code formatting and fixing in vscode and zed
        • eslint.config.js example
        • Formatting on save
        • Using the "format document" command
        • Extension recommendation (.vscode/extensions.json)
      • Configure ESLint | ESLint - ESLint is designed to be flexible and configurable for your use case. You can turn off every rule and run only with basic syntax validation or mix and match the bundled rules and your custom rules to fit the needs of your project.
    • eslint.config.js / Flat config (v9.0.0+)
      • .eslintrc, eslintrc.json and other variations of these ESLint config files have been deprecated in ESLint v9.0.0 in favour of a new format and a new file name eslint.config.js which is using a "flat style" config.
      • ESLint's new config system, Part 1: Background | ESLint
        • ESLint's config system started out fairly simple back in 2013. Since that time it has grown more complex and it's time for a change.
      • ESLint's new config system, Part 2: Introduction to flat config | ESLint
        • ESLint's new config system, nicknamed flat config, is designed to be both familiar and much simpler than the original config system.
      • Flat config rollout plans | ESLint
        • When ESLint v9.0.0 is released, either the end of this year or beginning of next year, flat config will be the default configuration system and we will deprecate, but not remove, eslintrc.
        • New features will be added only for flat config, so we encourage everyone to move off of eslintrc as quickly as possible to take advantage of everything v9.0.0 will offer.
      • The new config file: eslint.config.js - ESLint's new config system, Part 2: Introduction to flat config | ESLint
        • Each config object can have optional files and ignores keys specifying minimatch-based glob patterns to match files.
      • Configure Plugins | ESLint - You can extend ESLint with plugins in a variety of different ways.
      • Configuration Files | ESLint
        • You can put your ESLint project configuration in a configuration file. You can include built-in rules, how you want them enforced, plugins with custom rules, shareable configurations, which files you want rules to apply to, and more.
        • Configuration File
          • In this example, the defineConfig() helper is used to define a configuration array with just one configuration object.
          • The configuration object enables two rules: semi and prefer-const. These rules are applied to all of the files ESLint processes using this config file.
        • Configuration Objects
          • Each configuration object contains all of the information ESLint needs to execute on a set of files. Each configuration object is made up of these properties:
          • These are the options you can use when defining your configuration.
          • Name
            • A name for the configuration object. This is used in error messages and config inspector to help identify which configuration object is being used. (Naming Convention)
            • The name property is optional, but it is recommended to provide a name for each configuration object, especially when you are creating shared configurations. The name is used in error messages and the config inspector to help identify which configuration object is being used.
            • The name should be descriptive of the configuration object’s purpose and scoped with the configuration name or plugin name using / as a separator. ESLint does not enforce the names to be unique at runtime, but it is recommended that unique names be set to avoid confusion.
            • This link shows an example of a rule set that you can import.
        • Specifying files and ignores
          • Configuration object should apply to and which not. Here’s an example:
          • Configuration objects without files or ignores are automatically applied to any file that is matched by any other configuration object. For example:
          • Important: By default, ESLint lints files that match the patterns **/*.js, **/*.cjs, and **/*.mjs. Those files are always matched unless you explicitly exclude them using global ignores. 
            ## Equivalent to:
files: ["**/*.js", "**/*.cjs", "**.*.mjs"],
          • Globally ignoring files with ignores
            • Depending on how the ignores property is used, it can behave as non-global ignores or as global ignores.
              • When ignores is used without any other keys (besides name) in the configuration object, then the patterns act as global ignores. This means they apply to every configuration object (not only to the configuration object in which it is defined). Global ignores allows you not to have to copy and keep the ignores property synchronized in more than one configuration object.
              • If ignores is used with other properties in the same configuration object, then the patterns act as non-global ignores. This way ignores applies only to the configuration object in which it is defined.
            • Global and non-global ignores have some usage differences:
              • patterns in non-global ignores only match the files (dir/filename.js) or files within directories (dir/**)
              • patterns in global ignores can match directories (dir/) in addition to the patterns that non-global ignores supports.
            • For all uses of ignores:
              • The patterns you define are added after the default ESLint patterns, which are ["**/node_modules/", ".git/"].
              • The patterns always match files and directories that begin with a dot, such as .foo.js or .fixtures, unless those files are explicitly ignored. The only dot directory ignored by default is .git.
              • To avoid confusion, use the globalIgnores() helper function to clearly indicate which ignores are meant to be global. Here’s the previous example rewritten to use globalIgnores():
        • Cascading Configuration Objects - When more than one configuration object matches a given filename, the configuration objects are merged with later objects overriding previous objects when there is a conflict.
      • Configuration Migration Guide | ESLint
        • This guide provides an overview of how you can migrate your ESLint configuration file from the eslintrc format (typically configured in .eslintrc.js or .eslintrc.json files) to the new flat config format (typically configured in an eslint.config.js file).
      • Migrate to v9.x | ESLint
        • ESLint v9.0.0 is a major release of ESLint, and as such, has several breaking changes that you need to be aware of. This guide is intended to walk you through the breaking changes.
        • New default config format (eslint.config.js)
          • As announced in our blog post, in ESLint v9.0.0, eslint.config.js is the new default configuration format. The previous format, eslintrc, is now deprecated and will not automatically be searched for.
          • In case you still need to use the deprecated eslintrc config format, set environment variable ESLINT_USE_FLAT_CONFIG to false.
      • Essential Guide to Migration to ESLint v9: Best Practices - Navigate the migration to ESLint v9 with essential tips.
      • New ESLint flat config file format example - DEV Community
        • An example of a working config of the new ESLint format for a project with React and Typescript.
      • Evolving flat config with extends | ESLint - Your eslint.config.js files can now use extends to simplify your configuration.
        • defineConfig() Helper
          • The defineConfig() function is exported from the eslint/config entrypoint and can be used like this:
          • You get type safety through the type definitions for defineConfig(), making it easier to ensure the correctness of your configuration using TypeScript.
          • The defineConfig() function also automatically flattens all of its arguments, meaning you can nest objects and arrays:
          • This flattening behavior is designed to eliminate some of the confusion we heard around the use of the spread operator (...) with the new configuration system. With defineConfig(), you never need to use the spread operator (unless you really want to!).
          • Config Intellisense - Command Line Interface | Rollup
            • Alternatively you can use the defineConfig helper, which should provide Intellisense without the need for JSDoc annotations:
          • Understanding the Difference: .ts vs. .tsx Explained
            • Understand the nuanced differences between ts vs. tsx files.
            • As a superset of JavaScript, TypeScript introduces type safety and static typing, transforming how you write code. Using TypeScript files (with a .ts file extension) enables a level of type-checking that JavaScript alone cannot offer. This helps catch errors early in the development process and significantly improves your code's maintainability and readability.
        • globalIgnores() helper
          • When ignores is in an object by itself, then it acts as global ignores; when there is something else in the object, then it acts as local ignores. It proved to be difficult to make changes to this behavior without breaking a lot of existing configurations, so we opted to add a new globalIgnores() helper function to make the behavior explicit:
          • You can read more about the globalIgnores() function in the ignoring files documentation
        • Bringing back extends
          • The original theory of flat config was that extends was just an abstraction over a one-dimensional array of configuration objects, and was therefore not needed if we gave people access to that one-dimensional array. While many enjoyed the freedom to mix and match configurations using JavaScript, it turned out that a lot of users also found extending other configurations frustrating. One pointed criticism is that they never knew how to extend another configuration because some were objects, some were arrays, and not all plugins exposed their flat configs the same way. Here’s an example:
          • This approach was difficult for JavaScript beginners to understand and frustrating for experienced developers who had to figure out how to apply this technique to large configuration files.
          • Ultimately, we realized that the best way to solve this set of problems was to reintroduce extends. The defineConfig() function allows you to specify an extends array in any object, and that array can contain objects, arrays, or strings (for plugin configs that follow the recommended approach). This allows you to rewrite your configuration file in a more consistent way:
        • Conclusion
          • By introducing defineConfig(), we’ve made it easier to write type-safe configurations while also simplifying the way nested configurations are handled.
          • The reintroduction of extends brings back a familiar and powerful way to compose configurations, addressing one of the most common pain points reported by our users.
          • With the addition of the globalIgnores() helper, we’ve clarified one of the most confusing aspects of the configuration system by making global ignore patterns more explicit.
          • Together, these changes create a more intuitive and user-friendly configuration experience that maintains the power and flexibility of the flat config system.
      • Combine Configs - ESLint - Pluggable JavaScript Linter
        • In many cases, you won’t write an ESLint config file from scratch, but rather, you’ll use a combination of predefined and shareable configs along with your own overrides to create the config for your project. This page explains some of the patterns you can use to combine configs in your configuration file.
        • Apply a Config Object
          • If you are importing an object from another module, in most cases, you can just pass the object directly to the defineConfig() helper. For example, you can use the recommended rule configurations for JavaScript by importing the recommended config and using it in your array:
        • Apply a Config Array
          • If you are importing an array from another module, pass the array directly to the defineConfig() helper. Here’s an example:
        • NB: You can import a plugin once and use it in multiple rules with different modifications applied.
      • ESLint 9 Flat config tutorial - DEV Community
        • That is because, before ESLint 9, it had many conflicts between IDE/Editor, prettier, and ESLint. Now ESLint9 disabled & deprecated some confict rules, and enabled Flat config as default.
        • Even this tutorial is partly out of date because it does not account for defineConfig()
      • What's New in ESLint 9.0. | by Onix React | Medium
        • ESLint has experienced a significant overhaul with the release of version 9.0.0, bringing a lot of enhancements and novel features.
        • Even this tutorial is partly out of date because it does not account for defineConfig()
      • ESLint now officially supports linting of CSS | ESLint
        • Taking our next step towards providing a language-agnostic platform for source code linting.  
        • Back in July of 2024 we announced our plan to make ESLint a more general-purpose linter that is capable of linting any language. In October 2024, we announced linting support for JSON and Markdown, delivering on that vision. Today, we’re excited to add to the list of supported languages with the introduction of CSS support.
      • ESLint v9.0.0 released | ESLint
        • We just pushed ESLint v9.0.0, which is a major release upgrade of ESLint.
        • This release also has some breaking changes, so please read the following closely.
        • Flat config is now the default and has some changes.
      • ESLint v9.22.0 released | ESLint
        • This release introduces the defineConfig() and globalIgnores() helpers for configuration files.
  • HTMLHint
    • VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML
    • Integrates the HTMLHint static analysis tool into Visual Studio Code.
    • By HTMLHint
    • htmlhint - npm - The Static Code Analysis Tool for your HTML.
    • HTMLHint | HTMLHint - The web's most popular Static code analysis tool you need for your HTML. Available as a CLI tool, VS Code extension, and more.
    • This creates uses a .htmlhintrc config and not a .hintrc which by webhint or Microsoft Edge Dev Tools which has webhint built-in.
    • Getting Started | HTMLHint - How to set up HTMLHint in your project by adding it as a dev dependency and configuring it.
      • Create a .htmlhintrc configuration file in the root of your project with htmlhint --init. This will create a file with default rules. (not sure this is need with the VSCode extension)
    • Configuration | HTMLHint - How to configure HTMLHint using a configuration file, command line options, or inline comments.
      • By default, HTMLHint looks for a .htmlhintrc file in the current directory and all parent directories, and applies its rules when parsing a file:
  • webhint
  • Microsoft Edge Tools for VS Code
    • Use the Microsoft Edge Tools from within VS Code to see your site's runtime HTML structure, alter its layout, fix styling issues as well as see your site's network requests.
    • Microsoft Edge DevTools extension for Visual Studio Code - Microsoft Edge Developer documentation | Microsoft Learn - Using the Microsoft Edge Developer Tools extension for Visual Studio Code.
    • This has webhint built-in.
      • See webhint entry for more information in this software.
      • Microsoft Edge Tools warnings in VSCode - Stak Overflow
        • Found it. These messages appear to be coming from WebHint. It looks like VSCode has this as a built-in feature (i.e. you don't need to explicitly install it from Extensions pane).
        • The feature can be turned off using VSCode Settings. Name of the setting is vscode-edge-devtools.webhint and is turned on by default. Turn it off and all these messages will vanish away.
        • The warnings come from the built in WebHint integration. WebHint can be turned off in the settings, or it can be configured with a .hintrc file in the project.
      • Inline and live issue analysis - Microsoft Edge Developer documentation | Microsoft Learn - Inline and live issue analysis in the Microsoft Edge Developer Tools extension for Visual Studio Code.
        • This feature requires Node.js and npm (Node Package Manager). = I am not sure about this as I think the binary is bundled.
        • This feature is on by default; the Webhint checkbox is selected in Settings. To turn this feature on or off:
          • Select Activity Bar --> Microsoft Edge Tools --> hover to the right of Targets --> More Actions (...) --> Open Settings --> select or clear the Webhint checkbox
  • Stylelint
    • Official Stylelint extension for Visual Studio Code
    • Linter for CSS, LessCSS
    • ForrestKnight says the inbuilt CSS linter of VSCode is good enough for him but could be good for others
  • Code Spell Checker
    • A basic spell checker that works well with code and documents.
    • The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
  • PHP Sniffer & Beautifier
    • PHP Sniffer & Beautifier for Visual Studio Code
    • This linter plugin for Visual Studio Code provides an interface to phpcs & phpcbf. It will be used with files that have the “PHP” language mode.
    • This extension is designed to use auto configuration search mechanism to apply rulesets to files within a workspace. This is useful for developers who work with many different projects that have different coding standards.
  • PHP_CodeSniffer
    • Brings PHPCS support to VS Code.
    • This extension uses the version of PHPCS defined by the platform-specific executable setting. Through the use of custom reports we are able to generate diagnostics, code actions, and document formatting that fully utilizes VS Code's available features.
  • php cs fixer - PHP CS Fixer extension for VS Code, php formatter, php code beautify tool, format html
  • phpcs (PHP CodeSniffer) [Deprecated]
    • This linter plugin for Visual Studio Code provides an interface to phpcs. It will be used with files that have the “PHP” language mode.
  • markdownlint
  • Error Lens
    • Improve highlighting of errors, warnings and other language diagnostics.
    • i.e. it will highlight your code errors and what the errors are.
    • Error Lens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.
  • Gremlins Tracker
    • Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. Inspired by Sublime Gremlins.
    • I don't know if this is needed now because this might be part of modern linters.
Code Comments (Docstrings)
  • DocBlock
    • Document This
      • Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.
      • This is a Visual Studio Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.
    • Doxygen Documentation Generator
      • This VS Code Extensions provides Doxygen Documentation generation on the fly by starting a Doxygen comment block and pressing enter.
      • C and C++
    • PHP DocBlocker
      • A simple, dependency free PHP specific DocBlocking package
    • Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more
      • AI powered documentation writer for JavaScript, Python, Java, Typescript & all other languages.
      • Writing documentation sucks. Let Mintlify take care of it. Just hightlight code and see the magic.
      • Docstring formats supported
        • JSDoc
        • reST
        • NumPy
        • DocBlock
        • Doxygen
        • Javadoc
        • GoDoc
        • XML
        • Google
        • More under construction
    • autoDocstring - Python Docstring Generator
      • Generates python docstrings automatically
      • Visual Studio Code extension to quickly generate docstrings for python functions.
  • TODO / FIXME
    • TODO Highlight
      • highlight TODOs, FIXMEs, and any keywords, annotations...
      • Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.
    • Todo Tree
      • Show TODO, FIXME, etc. comment tags in a tree view.
      • This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).
    • TODO Highlight v2
      • This is a fork of Todo Tree
      • Highlight TODO:, FIXME: and any other annotations you wish within your code in VSCode.
      • Sometimes you forget to review the TODOs and NOTEs you've added while coding before you publish the code to production. This extension highlights them, making them harder to forget. They're shown in the file, in the output channel, and optionally as decorations in the 'overview ruler' too.
  •  Misc
    • Better Comments
      • Improve your code commenting by annotating with alert, informational, TODOs, and more!
      • The Better Comments extension will help you create more human-friendly comments in your code.
Code Information

Show information about your code, libraries and packages you are using.

  • Version Lens
    • Shows the latest version for each package using code lens.
    • This extension shows version information when opening a package or project file in vscode.
    • It abides by semver rules and uses the Node Semver package to compare and sort versions.
    • Many languages supported.
  • Word Count
    • Markdown Word Count Example - a status bar contribution that reports out the number of works in a Markdown document as you interact with it.
    • It's pretty simple open up a Markdown file and the status bar will have an auto-updating wordcount in it.
  • Import Cost
    • Display import/require package size in the editor
    • This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
    • Forces you to look at the size of your 3rd party Javascript packages straight in your editor.
    • This is for web designing and Javascript.
Code Display / Syntax Highlighting

Make your code easier to read without altering the actually content.

  • Brackets
    • Bracket Pair Color DLW
      • A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Color DLW” setting added in VS Code v1.60.
      • This adds a toggle and not functionality.
    • Bracket Pair Colorization Toggler
      • Quickly toggle 'Bracket Pair Colorization' setting with a simple command
      • Same as 'Bracket Pair Color DLW'
    • Bracket Pair Colorizer 2 [Deprecated]
      • A customizable extension for colorizing matching brackets
      • This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.
      • I'm glad so many people found it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
      • This extension is deprecated as this functionality is now built-in to VS Code. Configure these settings to use this functionality.
  • Tags
    • Highlight Matching Tag
      • Highlights matching closing and opening tags.
      • This extension highlights matching opening and/or closing tags.
      • Optionally it also shows path to tag in the status bar.
      • Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.
      • Officially supported markup: HTML and JSX. Other flavors (XML, Vue, Angular, PHP) should work, but there are no guarantees. Feel free to report the issues on them anyway.
      • This extension is probably not needed anymore because this functionality is built in to VSCode, however it does add additional styling options.
  • Indentation
    • Indent-Rainbow
      • Makes indentation easier to read
      • When this extensions causes red blocks to appear, this is indication on of the following
        1. there is a mismatch in the indentation, e.g. maybe 3 spaces instead of 4 spaces.
        2. if there are spaces or tabs where they are not needed.
        3. maybe a when there is a mix of tabs and spaces for indentation.
    • Indenticator
      • Highlights your current indent depth.
      • This creates an indicator line on the column where you click your cursor, is does not add an indicator line for the lowest code group on the row. VSCode does this internally anyway so you can end up with 2 indicator lines.
      • This extension can be used by itself, but it's recommended to use it alongside the built-in indent guides (setting editor.renderIndentGuides). These show thin grey lines on every indent, while this extension highlights the indent on the indent depth the cursor is currently on.
      • This is not needed when using Indent-Rainbow.
  • Highlighting
    • CSS Stacking Contexts
      • Highlights stacking contexts in CSS and ineffective z-index declarations.
      • This extension makes Stacking Contexts visible in CSS and SCSS, allowing you to write z-index declarations using small values with confidence.
      • What No One Told You About Z-Index, Philip Walton, Engineer @ Google
        • The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.
        • The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.
    • Color Highlight
      • Highlight web colors in your editor.
      • This extension styles css/web colors found in your document.
    • DotENV
      • Support for dotenv file syntax
      • Enables syntax highlighting in your .env files.
    • Rainbow CSV - Visual Studio Marketplace
      • Highlights columns in comma (.csv), tab (.tsv), semicolon and pipe with different colors for easy of reading.
  • End of Lines (EOL)
    • VS Code doesn't have a native way to show line endings on each line, but you can use an extension.
    • Render Line Endings
      • Renders end of line characters (`CR`, `LF`, `CRLF`) when whitespace rendering is on.
      • This plugin treats EOL as whitespace and also respects the value of editor.renderWhitespace , thus this setting leads to different displays of whitespace/EOL.
      • editor.renderWhitespace = `trailing` is a good option to use.
      • Command to toggle Whitespace/EOL display 
        View: Toggle Render Whitespace
      • The standard EOL is taken from files.eol which is handled like any other VSCode setting (i.e. User --> Workspace overrides).
      • EOL Character Colour
        • Currently there is no setting built in to this extension to be able to change the EOL character's colour, this is soley done by the theme you are currenty using. However we can override the theme's settings.
          • Edit the settings.json (User / Workspace depending on your requirements, if unsure just use the user settings)
            • Settings --> User/Workspace --> Workbench --> Appearance --> Color Customizations --> Edit in settings.json
            • Add the following 
              "workbench.colorCustomizations": {
    "errorForeground": "#ffff00",
    "editorWhitespace.foreground": "#F00000"
},
            • You can just edit the file manually if you know what you are doing.
        • Added color customization in the new version 
          {
    "code-eol.colors.default.foreground": "#007000",
    "code-eol.colors.error.foreground": "#700000",
}
    • code-eol 2022 (Line Endings)
      • This shows newline (technically end-of-line) characters, similar to Atom or Notepad++. There's also the option to show some line endings with an error-color if you want to avoid a particular kind of line ending.
      • This is a fork of sohamkamani with extra features such as colourisation of the EOL characters.
    • code-eol (sohamkamani)
      • Display newline characters in your code
      • When enabled, this will render the EOL characters at the end of each line.
      • You can set the EOL character colour.
      • This is the orginal plugin that has been forked a few times.
Code Formatting / Code Beautifying

These will change the codes formatting but not the content.

  • Formatters
    • Biome
      • See this plugin in the Linters section for more information.
      • The Biome extension for Visual Studio Code brings first-class support for Biome in VS Code and VS Code-based editors.
      • By integrating with Biome's language server, the extension provides the following features:
        • Format on save
        • Code refactoring
        • Inline suggestions and quick fixes
    • Prettier
      • This is not the actual software, but just an extension so it can be used in VSCode.
      • Code formatter using Prettier
      • "editor.formatOnSave": true executes this extension on save formatting your code automatically.
      • Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
      • This extension will honour some settings in .editorconfig including end of line (EOL).
      • Installing
      • PHP Plugin
        • GitHub - prettier/plugin-php: Prettier PHP Plugin
          • This plugin adds support for the PHP language to Prettier.
          • This plugin uses PSR / PER as guidance when making formatting decisions, but does not aim to be fully PSR / PER compliant. The idea is to stay reasonably close to how Prettier for JS works.
        • Prettier for PHP File Formats in VSCode - DEV Community
          • But it turns out that by default Prettier does not support PHP formatting language. Although there is a PHP plugin for Prettier created by the community.
          • You can just read the Use section on the GitHub page to see how to use the plugin together with Prettier to format the PHP language.
          • To format the PHP language, I suggest you use the VSCode extension called PHP Intelephense
    • Prettier ESLint
      • A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
      • Prettier might now have JavaScript and TypeScript built in, in which case this extensions would not be needed.
    • Format HTML in PHP
      • Provides formatting for the HTML code in PHP files using JSbeautify - Works well paired with a PHP formatting extension.
      • This provides functionality that Prettier does not do.
    • EditorConfig for VS Code
      • EditorConfig Support for Visual Studio Code
      • VSCode does not support coding styles specified in .editorconfig file, out of the box.
      • This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.
      • Limited property support.
      • Some changes are done when the file opens and some when the file is saved
        • i.e. Line endings are only changed on save.
      • This is an official VSCode pluging from editorconfig.org
  • End of Lines (EOL)
    • Auto Convert End Of Line - Visual Studio Marketplace
      • Automatically convert files with configured end-of-line sequence
      • Every time a text files is opened, it converts all the EOL sequences into the specific one from the files.eol configuration, and displays an auto-dismissed notification. If no conversion is needed, or if files.eol is configured to be "auto", this extension does nothing.
      • This extension ignores new untitled files, which are already taken care of by the files.eol configuration.
    • Change All End Of Line Sequence - Visual Studio Marketplace
      • Runs the built-in 'Change End Of Line Sequence' on all files of a specified type in a workspace, leaving them open and unsaved.
  • Indentation
    • Python Indent
      • Correct Python indentation
    • Paste and Indent
      • This extension adds limited support for pasting and indenting code. Much like SublimeText's paste_and_indent.
      • This plugin will try and match the code you are pasting in with the current indentation level of your code.
    • Sass (.sass only)
      • Indented Sass syntax Highlighting, Autocomplete & Formatter
      • This extension is for only for .sass files, .scss support is built into vscode by default.
    • Indent 4-to-2
      • Convert indentation from tab or 4 spaces into 2 spaces.
Code Manipulation (Text)

This section is all about making actual changes to the text/code content and not how it looks.

  • Tags
    • Auto Rename Tag
      • Auto rename paired HTML/XML tag
      • Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
      • This will change the start and end tag instead of just the one you edit, so basically you are editing the pair in one go.
      • VSCode setting Editor: Linked Editing only works for HTML files.
      • From 1.44, VS Code offers the built-in auto update tags support for HTML and Handlebars that can be enabled with the setting editor.linkedEditing. If this setting is enabled, this extension will skip HTML and Handlebars files regardless of the languages listed in auto-rename-tag.activationOnLanguage
    • Auto Close Tag
      • Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
      • From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.
  • Case
    • change-case
      • Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
    • Multiple cursor case preserve
      • Preserves case when editing with multiple cursors.
      • Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection case in these situations. It recognises CAPS, Uppercase and lowercase. Works for typing or pasting.
  • Lines
    • Permute Lines
      • Lets you reverse or shuffle lines of code or filter for unique lines.
    • Sort lines
      • Sorts lines of text.
      • Many options.
  • Misc
    • Toggle Quotes
      • Toggle / Cycle " --> ' --> `
      • Allows you to change already encapsulated text, i.e. change from "..." to '...' using a Ctrl + ` instead of doing it manually.
    • Code Spell Checker
      • Spelling checker for source code.
      • A basic spell checker that works well with code and documents.
      • The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
Package Managers
  • Composer
    • All-in-One composer integration, quick actions, commands, automatic installation, tasks, code lenses, diagnostics, and composer.json IntelliSense.
    • Composer "All-in-One" provides complete integration of composer and packagist into Visual Studio Code.
    • The extension provides quick composer commands, IntelliSense for composer.json, code lenses, code actions, schema validation, browsing and searching packages, checking abandoned packages, running user scripts, and it extends VS Code with composer tasks.
Package Files
  • Keep a Changelog
    • An extension that provides snippets for markdown files to create a changelog with the ruleset of Keep a Changelog.

Data

SQL Databases
  • SQL Server (mssql)
    • Design and optimize schemas for SQL Server, Azure SQL, and SQL Database in Fabric using a modern, lightweight extension built for developers.
    • This extension is designed to empower developers by providing a seamless and modern database development experience. Our goal is to make SQL development more productive and intuitive by integrating essential features such as schema management, query execution, and AI-powered assistance.
  • SQL Database Projects
    • Enables users to develop and publish database schemas for MSSQL Databases.
  • Data Workspace
    • This extension is bundled into the SQL Server (MSSQL) extension for VS Code and is required by the SQL Database Projects extension. It will be installed automatically when those extensions are updated or installed.
  • SQLite Viewer
    • A quick and easy SQLite viewer for VS Code, inspired by DB Browser for SQLite and Airtable.
  • SQL Bindings
    • Enables users to develop and publish Azure Functions with Azure SQL bindings.
Data Handling
  • JSON
    • Sort JSON objects
      • Sorts the keys within JSON objects
    • Paste JSON as Code
      • Copy JSON, paste as Go, TypeScript, C#, C++ and more.
      • Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript
Data Science

nothing here yet

Source Control / SCM Providers

Git
  • Management
  • Visualization
    • GitLens
      • Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
      • Enhance your workflows with powerful Git functionality like in-editor blame annotations, hovers, CodeLens, and more—all fully customizable within VS Code. Try GitLens Pro's advanced workflows that accelerate PR reviews, provide rich interactive Git actions, and enhance collaboration for you and your team.
      • Launchpad
        • Launchpad is your centralized PR hub in VS Code where you can spot bottlenecks, prioritize reviews and unblock your team. With Worktrees, you can work on multiple branches—hotfixes, features, or experiments—without disrupting your workspace.
        • Try the new Launchpad (Preview) · gitkraken/vscode-gitlens · Discussion #3286 · GitHub
          • We're excited to introduce "Launchpad," accessible now in GitLens via "Open Launchpad" command.
          • The new Launchpad is categorized and gives you info at a glance on the state of your PRs, which helps you prioritize and pick the best ones to take action on, without interrupting your coding workflow.
          • Adds "Launchad" button at the bottom
      • GitLens Editions: Community and Pro
    • Git Graph (mhutchie)
      • View a Git Graph of your repository, and perform Git actions from the graph. Configurable to look the way you want!
      • This is the orginal Git Graph extension but it has not been updated in 4 years.
    • Git Graph v3
    • GitHub - hansu/vscode-git-graph
    • GitLG - Visual Studio Marketplace
      • GitLG, previously known as "git-log--graph", is a free, customizable Git UI.
      • A Git graphing extension written from scratch.
    • Git History (Don Jayamanne)
      • View git log, file history, compare branches or commit.
      • 14M
    • Git History (Guodong Sun)
      • Git history panel in your VS Code
      • 73K
    • Git History Diff
      • View git history. View diff of committed files. View git blame info. View stash details.
    • Interactive Git Log
      • The Ultimate Git GUI for VSCode
      • Interactive Git Log (IGL) shows exactly what matters—your uncommitted changes and the branch history that impacts them—so you can commit, rebase, and ship code blazing fast without ever touching the terminal.
      • Interactive Git Log - Interactive Git Log (IGL) is the most powerful Git GUI for VSCode, streamlining and enhancing your interaction with Git repositories.
  • .gitignore
GitHub
  • GitHub Repositories
    • Remotely browse and edit any GitHub repository
    • The GitHub Repositories extension lets you quickly browse, search, edit, and commit to any remote GitHub repository directly from within Visual Studio Code.
    • Remote Repositories - Blog | Visual Studio Code
      • Remotely browse and edit a source control repository from within Visual Studio Code.
      • The new Remote Repositories extension, published by GitHub, makes the experience of opening source code repositories in VS Code instant and safe. With this, you can quickly browse, search, edit, and commit to any remote GitHub repository (and soon, Azure Repos) directly from within VS Code, no clone necessary!
      • Probably really good for making small and quick changes to someone elses repo.
    • Remote Repositories
      • This is required as part of the GitHub Repositories extension installation.
      • Remotely browse and edit git repositories
      • The Remote Repositories extension integrates with the GitHub Repositories and Azure Repos extensions, allowing you to quickly browse, search, edit, and commit to remote git repositories directly from within Visual Studio Code.
      • This extension was previously part of the GitHub Repositories extension.
  • GitHub Pull Requests
    • Pull Request and Issue Provider for GitHub.
    • This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.
  • GitHub Actions
    • The GitHub Actions extension lets you manage your workflows, view the workflow run history, and helps with authoring workflows.
  • GistPad
    • Manage your code snippets and developer notes using GitHub Gists and repositories.
    • GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork, archive, and star gists/repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulling anything. It's like your very own developer library for building and referencing code snippets, commonly used config/scripts, programming-related notes, knowledge bases and interactive samples.

External Platforms

Containers and VMs
  • Docker
    • This Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.
  • Dev Containers
    • Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set.
Remote Development Servers
  • Remote - SSH
    • Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
    • This lets you use any remote machine with an SSH server as your development environment. 
  • Remote - SSH: Editing Configuration Files
    • Edit SSH configuration files
    • This extension complements the Remote - SSH extension with syntax colorization, keyword intellisense, and simple snippets when editing SSH configuration files.
    • If you already have an extension that provides this functionality, you can disable this extension.
Telemetry
  • New Relic CodeStream
    • Bring production telemetry into your IDE to quickly identify and resolve performance issues.
    • Hss a free tier that is generous, pricing for the paid plans is very expensive and can esculated quickly.
    • You have to sign up even to watch the promo video.
    • This does require a `New Relic` account but as mentioned there is a free tier.
    • New Relic | Monitor, Debug and Improve Your Entire Stack - Get Instant Observability with New Relic One and Quickstarts that make it easy to instrument in a few clicks.
    • what is new relic - Bing Search
      • New Relic is a cloud-based observability platform that helps website and application owners track the performance of their services. It provides full-stack monitoring, allowing users to monitor applications, infrastructure, and web browsers on a single platform in real-time. New Relic enables developers to analyze and optimize their software systems, offering a holistic view from code to customer experience.
    • What Is New Relic, What Can It Be Used for + Benefits
      • New Relic is a SaaS that specializes in monitoring performance and availability. Check this article to learn what is new relic and how it works.
      • New Relic uses an agent – a short code installed within your web app or virtual private server. This agent gathers different performance data by instrumenting your web app at the code level.
      • Every monitoring task requires a dedicated agent. For instance, there are three separate agents for application, infrastructure, and browser monitoring.
      • New Relic will retrieve the data from the agent and display it on the dashboard.
    • What is New Relic? How does it work? New Relic features, importance, competitors, - DevOpsSchool.com
      • New Relic is a San Francisco, California-based technology company which develops cloud-based software to help website and application owners track the performances of their services.
      • New Relic is an observability platform that helps you build better software. You can bring in data from any digital source so that you can fully understand your system and how to improve it.
      • New Relic is an Application Performance Management (APM) used by teams for application monitoring. The idea is to maximize productivity and minimize downtime by monitoring application statistics that reflect overall application performance.
Cloud-hosted Development Enviroments / Cloud Development Platforms
  • GitHub Codespaces
    • Your instant dev environment
    • GitHub Codespaces provides cloud-hosted development environments for any activity - whether it's a long-term project, or a short-term task like reviewing a pull request. You can connect to Codespaces from Visual Studio Code or a browser-based editor that's accessible anywhere.
    • There is a free plan
  • CodeSandbox
    • CodeSandbox support in VSCode
    • CodeSandbox is a cloud development platform that empowers development teams to code, collaborate, and ship projects of any size from any device in record time.
    • There is a free plan.

Sharing / Collaboration / Digital Nomad

There are many different ways to share you knowledge, information and code, this collection of extensions will address that.

Settings Sharing
  • Settings Sync
    • Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
  • Settings Repository
    • Sync VSCode settings, extensions, keybindings, and more to a git repository.
  • Project Recommended Settings
    • Recommend settings to project developers.
    • This extension is for developers who work in a team and want to promote VSCode settings to team members.
    • Adding settings to .vscode/settings.json enforces the settings to every user with the user having no way of overriding them. This extension provides a less intrusive way of promoting setting user by letting them load these settings to their User settings instead.
Live Collaboration
Code Sharing
  • Polacode
    • Polaroid for your code
    • Select the code you want a picture of for sharing, right click and Polacode will make a PNG image of the code for you to share as needed.
    • Makes a professional screenshot of your code. Looks great on twitter.
  • CodeTour
    • Allows you to record and playback guided tours of codebases, directly within the editor.
    • Excellent for making presentations for colleagues.
Content Presentation
  • Jupyter (Extension Pack)
    • Jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more. 
    • Complementary Extensions
      • Jupyter Notebook Renderers - Renderers for Jupyter Notebooks (with plotly, vega, gif, png, svg, jpeg and other such outputs)
      • VS Code Jupyter Notebook Previewer
        • An easy to use extension for previewing Jupyter Notebooks within VS Code
        • An extension for supercharging your Data Science workflow by previewing Jupyter Notebook within VS Code.
        • View graphs and interact with Plotly visualizations from within VS Code.
      • Jupyter Keymap
        • Jupyter keymaps for notebooks
        • This extension provides keymaps for notebooks in Visual Studio Code to match the keybindings in Jupyter Notebook.
        • This extension comes with the Jupyter extension for Visual Studio Code and can be disabled or uninstalled.
    • Official Sites
      • Project Jupyter | Home
        • The Jupyter Notebook is a web-based interactive computing platform. The notebook combines live code, equations, narrative text, visualizations, interactive dashboards and other media.
        • JupyterLab is the latest web-based interactive development environment for notebooks, code, and data. Its flexible interface allows users to configure and arrange workflows in data science, scientific computing, computational journalism, and machine learning. A modular design invites extensions to expand and enrich functionality.
        • Jupyter supports over 40 programming languages, including Python, R, Julia, and Scala.
        • Notebooks can be shared with others using email, Dropbox, GitHub and the Jupyter Notebook Viewer.
        • JupyterLab: A Next-Generation Notebook Interface
          • JupyterLab is the latest web-based interactive development environment for notebooks, code, and data. Its flexible interface allows users to configure and arrange workflows in data science, scientific computing, computational journalism, and machine learning. A modular design invites extensions to expand and enrich functionality.
      • Project Jupyter · GitHub - Interactive Computing.
      • GitHub - jupyter/notebook
        • Jupyter Interactive Notebook.
        • The Jupyter notebook is a web-based notebook environment for interactive computing.
      • Project Jupyter | JupyterHub
        • JupyterHub brings the power of notebooks to groups of users. It gives users access to computational environments and resources without burdening the users with installation and maintenance tasks. Users - including students, researchers, and data scientists - can get their work done in their own workspaces on shared resources which can be managed efficiently by system administrators.
        • JupyterHub runs in the cloud or on your own hardware, and makes it possible to serve a pre-configured data science environment to any user in the world. It is customizable and scalable, and is suitable for small and large teams, academic courses, and large-scale infrastructure.
      • Project Jupyter | nbviewer
        • A simple way to share Jupyter Notebooks. You can use nbviewer on this website by entering the location of a Jupyter Notebook to have it rendered on this site.
        • nbviewer is a web application that lets you enter the URL of a Jupyter Notebook file, renders that notebook as a static HTML web page, and gives you a stable link to that page which you can share with others. nbviewer also supports browsing collections of notebooks (e.g., in a GitHub repository) and rendering notebooks in other formats (e.g., slides, scripts).
        • nbviewer is written in Python and JavaScript.
    • My Notes
      • Based on iPython which is an enhanced shell with auto comlete and syntax highlighting.
      • IPython continues to exist as a Python shell and a kernel for Jupyter.
      • Is Python based.
      • WYSIWYG to easily build interactive pages/notebooks with livecode, graph plots and markdown text sections.
      • The "pages" are stored in notebook files with the extension ".ipynb"
      • These are used so you can show your prodomiently date/data science work to colleagues.
      • What is required
        • Python Server to run the Jupyter server.
        • Jupyter Notebook server is required to show the notebooks, not just edit them.
        • Relevant Python packages installed for the code you are going to run.
      • Jupyter Labs is the latest version of Jupyter Notebooks
      • Online versions of Jupyter: Google Colab, Kaggle Notebooks
      • Aimed at data scientists (who all seem to use Python).
      • To use other languages, such as PHP or C++, their kernels need to be installed in Python/Jupyter.
      • jupyter notebook media wiki - Bing Search
        • Jupyter Notebook is an open-source web application that allows you to create and share documents containing live code, equations, visualizations, and narrative text. It was developed as part of Project Jupyter, which was spun off from the IPython project in 2014 by Fernando Pérez and Brian Granger
        • The name "Jupyter" is a reference to the three core programming languages supported by Jupyter: Julia, Python, and R. The project aims to develop open-source software, open standards, and services for interactive computing across multiple programming languages
        • IPython continues to exist as a Python shell and a kernel for Jupyter, while the notebook and other language-agnostic parts of IPython moved under the Jupyter name
        • Jupyter supports execution environments (called "kernels") in several dozen languages, including Julia, R, Haskell, Ruby, and Python (via the IPython kernel)
        • Jupyter is financially sponsored by NumFOCUS, a nonprofit organization that supports open-source scientific computing projects
        • The project has gained significant popularity and adoption, with major cloud computing providers like Amazon, Google, and Microsoft integrating Jupyter Notebook or derivative tools into their platforms
        • In summary, Jupyter Notebook was developed by Fernando Pérez and Brian Granger as part of Project Jupyter, which aims to provide interactive computing tools for multiple programming languages, including Python
    • Documentation
      • Project Jupyter - Wikipedia
      • Jupyter Notebook Documentation — Jupyter Notebook 7.4.0 documentation
        • The Jupyter Notebook documentation site.
        • Jupyter Notebook is a simplified notebook authoring application, and is a part of Project Jupyter, a large umbrella project centered around the goal of providing tools (and standards) for interactive computing with computational notebooks.
        • A computational notebook is a shareable document that combines computer code, plain language descriptions, data, rich visualizations like 3D models, charts, graphs and figures, and interactive controls. A notebook, along with an editor like Jupyter Notebook, provides a fast interactive environment for prototyping and explaining code, exploring and visualizing data, and sharing ideas with others.
        • Jupyter Notebook is a sibling to other notebook authoring applications under the Project Jupyter umbrella, like JupyterLab and Jupyter Desktop. Jupyter Notebook offers a lightweight, simplified experience compared to JupyterLab.
    • Tutorials
      • Getting Started with Jupyter Notebooks in VS Code - YouTube | Visual Studio Code
        • In this video, you'll learn how to create your very first Jupyter Notebook in VS Code, including setting up your environment, running and debugging code, and visualizing data. Getting started with Jupyter Notebooks has never been easier!
        • VSCode supports Jupyter Notebooks natively.
        • You will need to install Python
      • Jupyter Notebook Complete Beginner Guide - From Jupyter to Jupyterlab, Google Colab and Kaggle! - YouTube | Rob Mulla
        • Jupyter notebooks and python notebooks are an important tool for data science. If you want to learn about them this is the ultimate jupyter notebook guide made in 2022. In this tutorial I try to provide everything you need to know to get started with notebooks. Jupyter notebook, jupyter lab, google colab and kaggle notebooks are all covered! Rob Mulla wil guide you though this tutorial.
        • Jupyter is a WYSIWYG
        • JupyterLab is the next generation of the notebook interface.
        • The Jupyter sysetm is now very popular you can run it in the cloud
      • How to Work in Jupyter Notebook with Multiple Languages | GeeksforGeeks
        • For using different kernels for different programming languages, we need to install the appropriate kernels for each language separately, then we can seamlessly switch between different languages within the same Jupyter Notebook itself. Let's now discuss how can we work in Jupyter Notebook with multiple languages.
        • Jupyter Notebook is a popular IDE (Integrated Development Environment) mostly used in Data fields.
        • If we want to work in Jupyter Notebook with multiple languages, we first need to install the kernels for the specific languages, it's also called Language-Specific-Kernels.
        • One way to install these kernels for different languages we can install kernels using package managers like pip (as we used it to install the Jupyter Notebook itself) or conda or by following language-specific instructions.
  • Data Wrangler
    • Data viewing, cleaning and preparation for tabular datasets.
    • Data Wrangler is a code-centric data viewing and cleaning tool that is integrated into VS Code and VS Code Jupyter Notebooks.
    • It provides a rich user interface to view and analyze your data, show insightful column statistics and visualizations, and automatically generate Pandas code as you clean and transform the data.
Social Media

Debugging and Testing

API Development
  • Postman
    • Streamline API development and testing with the power of Postman, directly in your favorite IDE.
    • The Postman VS Code extension enables you to develop and test your APIs in Postman directly from Visual Studio Code and Visual Studio Code Insiders.
  • REST Client
    • REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
    • Extensive instructions on the GitHub page
  • Thunder Client
    • Lightweight Rest API Client for VS Code
Debugging
Unit Testing / Testing
  • Common
    • Test Explorer UI
      • Run your tests in the Sidebar of Visual Studio Code
      • In version 1.59, VS Code added an official API and UI for running tests, which provides all the functionality of this extension and more. Therefore this extension is now deprecated. I will keep maintaining it so it will remain usable but I don't plan to add any major new features to it.
  • Javascript
    • Jest
    • Jest Runner
      • Simple way to run or debug a single (or multiple) tests from context-menu.
      • vscode-jest-runner is focused on running or debugging a specific test or test-suite, while vscode-jest is running your current test-suite every time you change it.
    • Quokka.js
      • JavaScript and TypeScript playground in your editor.
      • Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
      • Show you the result of your code directly in your editor
      • A lite scratchpad for Javascript and TypeScript. Users can run code and instantly see the results which is great for testing code snippets and debugging.
      • Free and Paid versions.
  • Python
Running Code / Previewing
  • Code Runner
    • Run a code snippet or a code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, Mojo, Erlang, SPWN, Pkl, Gleam, and custom command.
    • Run code snippets and files easily with just a highlight and a right click. It takes care of the compiling on the fly.
  • Live Preview (from Microsoft)
    • Hosts a local server in your workspace for you to preview your webpages on.
    • You cannot execute html in the VScode terminal so we can use this extension to open in a browser preview right in Visual Studio code right click on file and then `Show Preview`.
  • Live Server
    • Launch a development local Server with live reload feature for static & dynamic pages
    • Every time a bit of code is changed the live HTML page is refreshed.
    • Reloads the page when a JS, CSS or HTML file is updated.
Tools
  • Regex Match
    • Create, test and debug regular expressions in Visual Studio Code
    • Regex Match is a Visual Studio Code extension that enables dynamically creating, testing and debugging regular expressions within a text file. It provides a simple and user-friendly interface, making the process of working with regular expressions effortless and efficient.

CMS

Joomla
  • Joomla 5 Snippets for Visual Studio Code
    • Snippets for Joomla 4 and Joomla 5.
    • Supercharge your Joomla 4 and Joomla 5 development with "VSCode Joomla 4 and 5 Snippets"! Elevate your coding efficiency and unleash your creativity. Get ready to write Joomla code like a pro!
  • Joomla Snippets
    • Snippets for Joomla. Including Joomla 3.x and Joomla 4 Snippets.
    • All code snippets are based on and follow the Joomla style guide https://docs.joomla.org/Joomla_CodeSniffer.
    • This might be the old way as Joomla now uses PSR as-is.
WordPress

Misc

  • vscode-pets
    • Pets for your VS Code
    • Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy in your code editor to boost productivity.

Research

  • Setups (Extensions and settings)
    • The ULTIMATE VS Code Setup - Extensions & Settings 2025 - YouTube | Devression
      • In this video, I’ll walk you through the best VS Code extensions, themes, settings, and AI tools that will help you write better code, customise your workflow, and maximise efficiency in 2025.
      • Settings: Increase interface size, Enable mini map, Change cursor blinking to "expand", Enable cursor smooth caret animation, Enable word wrap, Enable bracket pair colorization
      • Themes: palenight theme, Material Icon Theme
      • Extensions: Peacock, GitHub Copilot, Live Server, Docker, Prettier, GitLens, Import Cost, Code Runner, Remote SSH, Quokka, Live Share, Polacode, JavaScript Code Snippets, VS Code PDF, Rainbow CSV
      • One of the comments has all of the timestamps.
    • My Visual Studio Code Setup for Web Development - YouTube | ForrestKnight
      • My focus lately as a developer has been building websites & web apps, and VS Code is the main tool I use to get that done. It's the most popular IDE/code editor among developers, according to the 2022 Stack Overflow Developer Survey. So, I want to show you how I use VS Code, my preferred extensions, my current theme, and my favorite VS Code settings that I’ve been using for many different types of web development.
      • Extensions: vscode-icons, Prettier, ESLint, HTMLHint, Stylelint, Auto Rename Tag, Tabnine, Live Server, Document This, Doxygen Documentation Generator
      • Themes: Andromeda
    • How to set up VSCode like a PRO! - YouTube | Syntax  - this is a tutorial+ setup
      • Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.
      • Extensions: Text Pastry, Better Comments, Auto Rename Tag, Change Case, Permute Lines, File Utils, Sort JSON objects, SQLite Viewer, Code Spell Checker, APC Customize U++
      • Themes: SyntaxFM, Cobalt2 Theme Official, Night Owl, Level Up
    • How to use VSCode Like a Pro (Senior Developer) - YouTube | CoderOne
      • We all love VSCode and work with it every day as developers, but do we actually use it as a Senior Developer? In this video, I'll show you Pro tips and tricks to unlock hiding and pro features of VSCode, from refactoring hundreds of lines of code in seconds to relaxing and doing YOGA using VSCode.
      • Check out a few themes to see which one you like best.
      • Make sure you use the command Pallet.
      • Profiles: These can have different settings and extensions for different scenarios
      • Extensions: Color Picker, Color Info, Color Manager, Docker, GitHub Copilot, GitLens, json, indent-rainbow, Prettier, TODO Highlight, vscode-styled-components, TypeScript Hero
      • Themes: Halcyon
    • How I Configure VS Code for Everything | by Aman Mittal | Better Programming - A Journey on sorting out what VSCode extensions to use.
      • This is the setup Aman now uses for his JavaScript, Node.js, React and React Native work. This has some nice setup steps with settings.
      • Extensions: :emojisense:, Bracket Pair Colorizer, Code Spell Checker, Code::Stats, ESLint, Indent 4-to-2, Express.js, markdownlint, GitHub Pull Requests, Import Costs, npm Intellisense, Path Intellisense, Pug, IntelliSense for CSS class names in HTML, React Native Tools, Todo Tree, Version Lens, Settings Sync, Word Count, Prettier
      • Themes: fairyFloss, Dracula Official, Night Owl, Material-Icon-Theme
  • Extensions Only
    • Visual Studio Code Extensions to Improve Your Productivity - YouTube | freeCodeCamp.org
      • Learn about 10 helpful VS Code extensions. These VSCode extensions could make you more productive as a developer.
      • Extensions: GitLens, LiveShare, Pieces, Better Comments, Turbo Console Log, Code Runner, Import Cost, Prettier, ESLint, Docker
    • VS Code extensions that I can't live without! - YouTube | Kevin Powell
      • I'm far from a VS Code power user, but that doesn't mean that I don't use a handful of extensions! As someone who writes primarily HTML and CSS, these are the ones that I find the most useful for my workflow.
      • Extensions: Bracket Pair Colourizer, Bracket Pair Colourizer 2, Live Server, Prettier, Auto Tag Rename, SVG Previewer
      • Themes: Atom One Dark, One Dark Pro
    • 26 Best VSCode Extensions for 2024 - YouTube | SkillCurb
      • In this comprehensive video we will go over the 26 best VSCode Extensions for 2024 . We have also broken down the extensions per category for you , so its easier to remember which one to use when.
      • Extensions: Prettier, Bracket Pair Colorization Toggler, Indent-Rainbow, Test Explorer UI, Jest Runner, Python Test Explorer, GitLens, Git History, Git Graph, Live Server, IntelliCode, Code Spell Checker, DevTools for Chrome App, Code Runner, Python Debugger, Peacock, Better Comments, ESLint, Polacode, Rainbow CSV, Codecrumbs, Tabnine, markdownlint
      • Themes: One Dark Pro, Material UI
    • 20 Essential VS Code Extensions In 2024 - YouTube | Traversy Media
      • 20 extensions for Visual Studio Code to increase your productivity.
      • Extensions: Prettier, Github Copilot, Live Server, Multiple Cursor Case Preserve, Git History, Git Lens, Code Runner, Markdown Preview Enhanced, Console Ninja, Regex Snippets, Polacode, Code Spell Checker, Document This, ChatGPT, Peacock, Postman, REST Client, Bookmarks, Codiumate/Codium AI, Quakka
    • 12 VS Code Extensions to INCREASE Productivity 2024 - YouTube | Devression
      • I made this video to help any newbies out there who are looking for some great VS Code extensions to help increase productivity and write cleaner code. I know there are PLENTY more extensions out there to try so if you guys have any suggestions, feel free to leave them in comments and I might make a video on them! In this video I cover the 12 best VS Code extensions that I use throughout my studies as a Computer Science student. I hope these tips and tricks help you!
      • Extensions: Code Runner, Tabnine, Live Server, Excel Viewer, CodeTour, TODO Highlight, Draw.io Integration, Polacode, Code Spell Checker, Prettier, Vibrancy Continued
      • Themes: Material Icon
    • The Best VSCode Extensions 2024 - YouTube | Coding With Adam
      • The best VSCode extensions. These are some of my favorite VSCode extensions that I use to increase my productivity. Checkout my video to learn more and see a demo of each extension.
      • Extensions: Prettier, Code Spell Checker, ESLint, Error Lens, Live Server, Auto Rename Tag, Peacock, Auto-Open Markdown Preview, Markdown All in One, Code Runner, Jest, Jest Runner, Simple React Snippets, GitHub CoPilot, InteliCode, YAML, GitLens, Git History, Git Graph, vscode-pets
      • Themes: Material Icon
    • My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer (en-US)
      • Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany.
      • You can install extensions from the command line.
      • Extensions: Auto Close Tag, Better Comments, Bracket Pair Colorizer 2, Dash, EditorConfig for VS Code, ESLint, Git History, GitLens, Import Cost, Live Share, npm Intellisense, Path Intellisense, Permute Lines, PHP Intelephense, Prettier, Project Manager, SVG, Remote - SSH, Task Explorer, Twig Language 2, VS DocBlockr, Wrap Console Log Simple,
      • Themes: Night Owl (sarah.drasner)
    • Useful VS Code Extensions For Front-End Developers — Smashing Magazine
      • Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way.
      • There is awhole section snippets
      • This is an in-depth article and everything is well explained. Although some extensions are deprecated most of them are still valid today.
      • Extensions: Turbo Console Log, Import Cost, Prettier, --- loads of snippet plugins ---, Polacode, Better Comments, Debugger for Chrome, Microsoft Edge Tools for VS Code, File Utils, FileOps, vscode-icons, GitLens, Git History, Watermelon, TODO Highlight, Bracket Pair Colorizer, Gremlins Tracker, Indent-Rainbow, CSS Stacking Contexts, Peacock, IntelliCode, CodeTour, vscode-pets, Quokka, Remote - SSH, Live Sass Compiler
    • VS Code Extensions That'll Boost Your Development Productivity
      • Having a good text or code editor that fits into your workflow is crucial to productivity as a developer. VS Code comes stocked with a lot of features by default, but here are 7 extensions that will help take your workflow up another level.
      • Extensions: Sublime Text Keymap and Settings Importer, Import Cost, Indent-Rainbow, Rainbow Brackets, Settings Sync, Profile Switcher, Better Comments, Duplicate Action
    • How to configure Visual Studio Code right the first time - DEV Community
      • VS Code is a powerful tool but "batteries included" is not the expression this IDE is known for. Here's how to proceed to have the best developer experience.
      • Extensions: Auto Rename Tag, Bracket Pair Colorizer, Color Highlight, DotENV, ESLint, VS Code JavaScript (ES6) snippets, Prettier, Better Comments, Error Lens, GitLens, Live Server, npm Intellisense, Path Intellisense, Settings Sync, Code Spell Checker, Image preview, Kite Autocomplete for Python and JavaScript, Polacode, Sort lines
      • Themes: Night Owl, Cobalt2 Theme Official, Material Icon Theme
    • How I VSCode | Profile: Scott Watermasysk - a live list of his VSCode extensions.
    • How I VSCode | Profile: Stefan Natter - a live list of his VSCode extensions.

Fonts

TL;DR

  • My selected Font
    • Fira Code without ligatures enabled in VSCode.
    • Font size of 14.
  • VSCode Default Font
    • Editor: Font Size = 14
    • Editor: Font Family = Consolas, 'Courier New', monospace

Getting the right font for your workflow is just as important as your extensions and theme choice.

  • Ligatures
    • are a single character that is automatically used to replaces a symbol group such as === or =>
    • Transforms symbols like !==, =>, && into more readable glyphs.
    • Some people like these becasue they say it makes reading code easier.
    • In VSCode, ligatures are disable by default so you can use any font as a normal font.
  • Monospace font
    • This means each symbol takes the same amount of space as the next.
    • I a normal font different letters, symbols and numbers will take up different amounts of space. Consider M and N.
    • Ideal for code alignment and clarity.
    • Monospaced font - Wikipedia
  • VSCode Enable/Disable Ligatures
    • Settings --> (User/Workspace) --> Text Editor --> Font --> Font Ligatures
    • Default = false
    • The settings.json setting: 
      "editor.fontLigatures": false

My Curated List

These are all free unless otherwise stated.

  • Used (this is my rough preference list, 1 is best, please note these might change)
    1. Fira Code
      • A very popular font. If you use ligatures then this is your choice as it has lots.
      • Monospaced, ligatures for symbols, very popular among devs
      • Free monospaced font with programming ligatures
      • A great all-rounder
      • Ligature support
      • Free and open-source
      • Active community
      • Monospaced
      • Works flawlessly in VS Code, JetBrains IDEs, terminals, and browsers.
      • Huge Adoption: Frequently featured in developer blogs, tutorials, and screencasts.
      • VS Code Instructions · tonsky/FiraCode Wiki · GitHub
        • download zip from github repo
        • extract zip
        • select all fonts in `./ttf/` and click install (these do not have the internet flag because they are in a zip)
          • NB: I just choose to install for all users.
          • NB: You probably on need regular if using for an IDE
        • VSCODE User settings
          • via GUI:
            • `Editor: Font Family = Fira Code'
            • `Editor: Font Ligatures = Edit in settings.json`    (default = false)
          • via settings.json 
            "editor.fontFamily": "Fira Code",                       
"editor.fontLigatures": true,           // Default is false
      • Based on Fira Mono which was made by Mozilla in 2013 for their now obsolete Firefox OS.
    2. Commit Mono
      • Many settings and options so I will revisit this font later. This font offers options for the experienced developer who knows what he wants.
      • This is highly configurable font made possible by the configurator on the website. There is a defautl options font you can download.
      • Neutral programming typeface
      • Commit Mono is an anonymous and neutral coding font focused on creating a better reading experience.
      • Fira Code and JetBrains Mono were a huge inspiration and go-to for best practices for this font's creation.
      • Commit Mono uses an innovative technique to improve kerning. Kerning is crucial for efficient reading, but it’s not possible if you want a monospaced font. ‘Smart Kerning’ combats this by sliding letters to better spacing positions – all while preserving monospacing. This gives Commit Mono a superior reading experience compared to other monospaced fonts.
      • Does not have a huge range of ligatures.
    3. JetBrains Mono
      • A good solid font but I am not a fan of the bracket styling.
      • Designed for developers, great ligatures, good line spacing
      • Professional designed by JetBrains.
      • JetBrains Mono’s typeface forms are simple and free from unnecessary details. Rendered in small sizes, the text looks crisper.
      • Using the JetBrains Mono font in vscode | Christophe Avonture - Instructions on ow to install this font in to Window and VSCode.
      • JetBrains Mono is a font specifically designed for coding from the producers of WebStorm. 
    4. Monaspace
      • Monaspace was made with the goal of improving all code, for all developers. 
      • Many settings and options so I will revisit this font later.
      • The Monaspace type system is a monospaced type superfamily with some modern tricks up its sleeve. It consists of five variable axis typefaces. Each one has a distinct voice, but they are all metrics-compatible with one another, allowing you to mix and match them for a more expressive typographical palette.
      • Has Texture Healing
      • Monaspace includes code ligatures for a broad variety of programming language.
      • This has been developed by GitHub.
      • GitHub - githubnext/monaspace - An innovative superfamily of fonts for code
      • Releases · githubnext/monaspace · GitHub
        • After Cascadia Code added support for Nerd Fonts, we reached out to our colleagues at Microsoft to learn how to do it for ourselves. The key blocker was always legal, not technical. Nerd Fonts contain logos for a variety of companies — there are 11 glyphs which contain an Octocat or the GitHub wordmark across the various Nerd Fonts icon sets!
  • Default VSCode Fonts
    1. Consolas
      • Consolas is aimed for use in programming environments and other circumstances where a monospaced font is specified. 
      • The improved Windows font display allowed a design with proportions closer to normal text than traditional monospaced fonts like Courier. This allows for more comfortably reading of extended text on screen.
      • Consolas - Wikipedia
      • Made by Microsoft.
    2. Courier New
      • Designed as a typewriter face for IBM, Courier was re drawn by Adrian Frutiger for IBM Selectric series.
      • A typical fixed pitch design, monotone in weight and slab serif in concept. Used to emulate typewriter output for reports, tabular work and technical documentation.
      • Courier New - Courier (typeface) - Wikipedia
      • Made by Microsoft.
    3. Monospace
      • This has no listed font. Maybe this is just a placeholder
  • Not tried
    • Cascadia Code / Cascadia Mono
      • Microsoft's default font for terminals, has ligatures.
      • Ships with Windows Terminal.
      • This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.
      • Not content with creating the world’s most popular free editor, VS Code, Microsoft has also developed the open-source Cascadia Code font, which is the default in Windows Terminal. 
      • This has 4 different version:
        1. Cascadia Code: standard version of Cascadia
        2. Cascadia Mono: a version of Cascadia that doesn't have ligatures
        3. Cascadia (Code|Mono) PL: a version of Cascadia that has embedded Powerline symbols
        4. Cascadia (Code|Mono) NF: a version of Cascadia that has Nerd Font symbols
    • Source Code Pro
      • Adobe's monospaced font, no ligatures, but very legible.
      • Professional and polished.
      • Source Code was designed by Paul D. Hunt as a companion to Source Sans.
      • Source Code Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments.
    • Hack
      • Clean, minimalistic, highly readable, good fallback option
      • no-frills
      • very legible
    • mononoki
      • Designed specifically for programming, unique but readable.
      • A font for programming and code review.
    • Inconsolata
      • Aesthetic and readable, great for light themes.
      • Open-source monospace font for code listings.
    • Dank Mono
      • Stylish, very clean, paid font, popular in demos
      • A typeface designed for coding aesthetes with modern displays in mind.
      • Delightful ligatures and an italic variant and bold style.
  • Misc
    • Nerd Fonts
      • This Font is created by taking lots of icons fonts, combining them and then adding them into well known programming fonts.
      • Iconic font aggregator, collection, and patcher
      • Nerd Fonts patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular ‘iconic fonts’ such as Font Awesome, Devicons, Octicons, and others.
      • 9,000+ glyph/icons, 60+ patched fonts: Hack, Source Code Pro, more. Popular glyph collections: Font Awesome, Octicons, Material Design Icons, and more
  • Other are available
    • There are more in the lists below, I just have not gone through them to add them into this list.

Research

 

 

 

 

 

Published in Programming
Read more...
Sunday, 03 November 2024 15:26

Which IDE or Text Editor should I use for my coding projects?

These are my notes I used to help me decide what IDE or Text Editor I should use for future project. Up until now I was using NetBeans so I though I would have look and see if this was still the best.

TL;DR = Use VSCode

  • Netbeans is great for Java and does PHP. Limit language support.
  • VSCode does all the languages, is far more popular, it can be a pain to setup everything using plugins but once that is done you have a powerful IDE.

IDE

These are the softwares you recognise that people use for programming, however it is not always the case.

  • WebStorm
    • The JavaScript and TypeScript IDE, by JetBrains
    • Make development more productive and enjoyable with WebStorm, the IDE for JavaScript and related technologies.
    • The JavaScript and TypeScript IDE
    • Goodbye VS Code - YouTube
  • PhpStorm
    • The PHP IDE by JetBrains
    • Explore the PhpStorm IDE for web projects. Get everything you need for PHP, JavaScript, and SQL coding out of the box
  • JetBrains Fleet
    • More Than a Code Editor
    • Built from scratch, based on 20 years of experience developing IDEs. Fleet uses the IntelliJ code-processing engine, with a distributed IDE architecture and a reimagined UI.
  • IntelliJ IDE
    • The Leading Java and Kotlin IDE by JetBrains
    • IntelliJ IDEA is undoubtedly the top-choice IDE for software developers. It makes Java and Kotlin development a more productive and enjoyable experience.
  • PyCharm
    • the Python IDE by JetBrains
    • The Python IDE for data science and web development with intelligent code completion, on-the-fly error checking, quick-fixes, and much more.
  • CLion
    • A Cross-Platform IDE for C and C++ by JetBrains
    • A powerful IDE from JetBrains helps you develop in C and C++ on Linux, macOS and Windows.
  • Apache NetBeans
    • Development Environment, Tooling Platform and Application Framework.
  • Visual Studio
    • IDE and Code Editor for Software Developers and Teams
    • The most comprehensive IDE for .NET and C++ developers on Windows. Fully packed with a sweet array of tools and features to elevate and enhance every stage of software development.
    • Visual Studio 2022 Community Edition – Download Latest Free Version - Try our free, fully-featured, and extensible IDE for creating modern developer apps for Windows, Android, & iOS. Download Community for free today!
  • Eclipse IDE
    • The Eclipse Foundation
    • The Leading Open Platform for Professional Developers.
  • Geany
    • The Flyweight IDE
    • Geany is a powerful, stable and lightweight programmer's text editor that provides tons of useful features without bogging down your workflow. It runs on Linux, Windows and macOS, is translated into over 40 languages, and has built-in support for more than 50 programming languages.
  • CodeLobster
    • Free portable cross-platform PHP IDE
    • Free portable cross-platform PHP IDE with support Drupal, Smarty, Twig, WordPress, Joomla, JQuery, CodeIgniter, HTML, CSS, JavaScript, TypeScript, AngularJS, CakePHP, Python, Laravel, Phalcon, Symfony, Yii
    • Free version is crippled

Text Editor

Just because they are called a Text Editor does not mean they do not offer the full gamut of features an IDE does but rather to add these features you need to use plugins. However text editors like Nano are not included in the list because that is all they do.

  • Visual Studio Code
    • Code Editing. Redefined
    • Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favourite platform - Linux, macOS, and Windows.
    • A standalone source code editor that runs on Windows, macOS, and Linux. The top pick for JavaScript and web developers, with extensions to support just about any programming language.
    • My VSCode Notes | QuantumWarp
  • Cursor
    • The AI Code Editor
    • Fork of VSCode and instroduces AI with other fixes
  • Notepad++
    • Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages.
  • VIM
  • NeoVIM
  • Zed
    • The editor for what's next
    • Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
    • Zed is a next-generation code editor designed for high-performance collaboration with humans and AI.
    • Code with LLMs
    • Zed adds a uniquely powerful interface for AI-assisted programming.
  • Sublime Text
    • Text Editing, Done Right
    • Available on Mac, Windows and Linux
  • Brackets
    • A modern, open source code editor that understands web design.
    • Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.
    • A modern, open source code editor that understands web design.
  • Bluefish Editor
    • Home of the Bluefish Editor, a powerful editor targeted towards programmers and web designers. It supports working with local and remote files, syntax highlighting and a WYSIWYG interface.
    • Bluefish is a powerful editor for experienced web designers and programmers.
    • Bluefish supports many programming and markup languages, but it focuses on editing dynamic and interactive websites.

Versus

  • Free (Non-Commercial) JetBrains Rider vs. Visual Studio 2022 Community Edition -- Visual Studio Magazine - With JetBrains making its Rider and WebStorm IDEs freely available for non-commercial use, Visual Studio 2022 Community Edition has a new competitor, not to mention Visual Studio Code. So what's a (non-enterprise) .NET-centric developer to do now?
  • Vscode vs Webstorm - Which One Is Better? - YouTube
    • Learn the differences between Vscode and Webstorm and which one is better for you. We will go through most important differences and use cases which are important for development.
    • VSCode is a text editor, IDEA and Webstorm are full IDE
  • Visual Studio Code vs Visual Studio - YouTube
    • Deciding on Visual Studio or Visual Studio Code is not just a personal decision but based on the best option for the operating system and application type you are building.
    • There is a community editions or Visual Studio.
    • VSCode is a text editor which can be extended by plugins.
  • NetBeans IDE vs Visual Studio Code | What are the differences?
  • Why I switched from VSCode to Zed. - YouTube - VSCode can be really slow, especially with larger codebases. Luckily, there are some alternatives, and one of them is Zed.
  • VSCode vs NetBeans: A Comprehensive Comparison | vscode.io
    • Visual Studio Code (VSCode) and NetBeans are both popular integrated development environments (IDEs) used by developers worldwide. While they share some similarities, they also have distinct differences that make them suitable for different types of projects and developers. In this article, we’ll compare VSCode and NetBeans across several key areas to help you determine which IDE is best for your needs.
    • VSCode and NetBeans are both powerful IDEs, but they cater to different audiences and use cases.
    • VSCode is a modern, versatile editor that supports a wide range of languages and is highly customizable through its extensive marketplace. It’s ideal for developers who work with multiple languages or who need a lightweight, flexible tool that can be tailored to their workflow.
    • NetBeans, on the other hand, is a full-featured IDE with a strong focus on Java development. Its deep integration with Java and related technologies makes it an excellent choice for enterprise-level projects and developers who need a comprehensive environment tailored to Java. While NetBeans also supports other languages, its primary strength lies in its robust Java tools and features.
  • Apache NetBeans Extension for Visual Studio Code | apache.org - VSNetBeans, the Apache NetBeans Extension for Visual Studio Code, is created as a promotional tool by the Apache NetBeans community for VS Code users.
  • Talk about the main differences between netbeans and vscode? · apache/netbeans · Discussion #6924 · GitHub
    • What are the main differences between netbeans and vscode?
    • All my friends have switched to vscode. It is undeniable that vscode runs extremely fast, has many packages, and has a large community.
    • However, vscode cannot open multiple and multiple software projects like Netbeans. It can only open one project at a time.
    • I will be honest and maybe you will leave NetBeans then but this is not a secret, of course you can add more than one project to the workspace. Just right click on the projects tab and choose add folder to workspace. VS Code will recognice everything inside of it also that it is a git project.
  • Which Code Editor (IDE) should you be using for Python in 2022? - YouTube
    • So it has come to my attention, after reading thousands of comments, that a lot of you are having trouble with Python because of the code editor (or IDE) that you chose for your task. Both PyCharm and Vistual Studio Code are great. If you're a beginner, I highly recommend you start with PyCharm, otherwise Visual Studio Code shouldn't give you any trouble.
    • PyCharm for beginners, otherwise use VSCode
  • Best Code Editor for Python - My personal favorites - YouTube | Christian Lempa
    • Best Code Editor For Python? Here are my personal favourite code editors I've used for Python programming.
    • VSCode is his favourite editor
    • VSCode integrates with Docker Desktop
  • VS Code Wins Best PHP IDE/Editor for WordPress Development in 2021 - Find out the benefits & drawbacks to integrated development environments, code editors and text editors. Plus, we’ll recommend some specific tools for each.
  • NetBeans vs Visual Studio Code detailed comparison as of 2024 - Slant - When comparing NetBeans vs Visual Studio Code, the Slant community recommends Visual Studio Code for most people.
Published in Programming
Read more...
Sunday, 13 October 2024 15:18

Force restricted content and SafeSearch on different platforms

Filtering content is an important thing to do nowadays if you have a family for all the major platforms such as YouTube, Bing, Google, DuckDuckGo and more. In this article I will outline the different methods to restrict content and show you how to apply them.

There are a few different ways to restrict content on the internet:

  • Use a DNS provider that implements the restricted content for you.
    • OpenDNS, CleanBrowsing, etc...
    • Some are paid and some are free.
  • Install control Apps on your device
    • This requires an installation on each device.
  • Override key domains for each of the platforms you want restricted content on.
    • This is done on your router or hosts file on your PC.
  • Each platform can usually have the content filters by the account. This does require you to login to get the filtered results.
  • When using the DNS options it is important to make sure you do full DNS Hijacking on your local network to ensure the DNS requests are all sent through your router.
  • You should always make the changes on your router/network level so you do not have to visit each device and you cannot change the DNS settings on every device as required such as a Firestick.

 YouTube

  • To test the restriction level, visit:
  • Tutorials
    • Control YouTube content available to users - Google Workspace Admin Help
      • As an administrator, you can set up your network or managed devices to restrict which YouTube videos are available to employees and students in your organization.
      • Not everyone's router can override CNAMEs such as pfSense. There is a workaround, see below.
    • How To Enable YouTube Restrict / Moderate Modes | cleanbrowsing.org
      • This articles shows a user what options YouTube offers with restrict and moderate mode for content on the YouTube platform.
      • YouTube Offers 2 modes:
        • restrict.youtube.com: More strict mode. It blocks access to videos with violence, language, sexuality or adult content. It is the closest to the YouTube Kids mode. Blocks comments. Recommended for kids under 12.
        • restrictmoderate.youtube.com: Less strict mode. It blocks access to videos with possible violence, sexuality or adult content. It also blocks comments.
    • Your YouTube content & Restricted Mode - YouTube Help
      • Restricted Mode is an optional setting that has been available since 2010. A small subset of users, such as libraries, schools, and public institutions, who choose to have a more limited viewing experience on YouTube use Restricted Mode.
      • Restricted Mode is turned off for viewers by default.

General Notes

  • Filters from different companies
    • Web Content Filtering and Security – OpenDNS - Introduction to Web Content Filtering and Security
    • Free DNS Filtering | Block Online Porn with CleanBrowsing - Free DNS Filters by CleanBrowsing allow you to filter adult, pornography, obscene and other similar content from your internet.
    • CleanBrowsing - Wikipedia
      • CleanBrowsing is a free public DNS resolver with content filtering, founded by Daniel B. Cid and Tony Perez. It supports DNS TLS over port 853 and DNS over HTTP over port 443 in addition to the standard DNS over port 53. CleanBrowsing filters can be used by parents to protect their children from adult and inappropriate content online.
      • There are several filter levels with their settings outlined here.
  • Tutorials
    • How to: Enforcing Google SafeSearch, YouTube, and Bing – OpenDNS
      • Currently, enforcing Google SafeSearch, YouTube, or Bing on your network without an HTTP proxy requires the ability to create a local Canonical Name (CNAME) record on your local DNS server or editing your Hosts file on your local computer.
      • The Global enforcement of Google SafeSearch previously was only possible with a local agent or firewall rules; however, Google has introduced a new way of enforcing SafeSearch with Google SafeSearch VIP.

Handling CNAMEs on pfSense

Instructions

  • Here we ping the CNAME, get the IP and use that instead of the CNAME.
  • The basic procedure below can be used for all of the platforms that use a SafeSearch VIP system (i.e. like below)

Notes

  • pfSense is configured as a forwarder and not a full authoritative resolver so cannot expand the CNAME records.
  • pfSense Force Safe Search Configuration - Virtualization Howto - pfSense Force Safe Search Configuration. A look at pfSense, pfBlockerNG, Unbound DNS, and other plugins that allow you to enable safesearch
    • Has safe search instructions for Google, Bing, YouTube
    • You can edit the Local Unbound Configuration Files (not recommended)
  • DNS CNAME records posible with unbound? | Netgate Forum
    • No, it's not going to work with Unbound because it's not an authoritative name server and can not expand the CNAMEs. You would need BIND or equivalent for that. Use the host overrides if that solves your problem as noted by dok above.
    • You can override MX, PTR, SRV and even SOA records with Unbound, no problem (not exposed trough the GUI in pfSense but you can use custom options).
    • What I wrote above is bit incorrect. The reason the CNAME records won't work as host overrides is because they have to be resolved with an additional query either to the upstream forwarder or the authoritative server. A resolver like Unbound won't look at its own host overrides to resolve a CNAME, they have to be set in the authoritative server.
  • Guide to force your clients to use Youtube in Restricted mode | Netgate Forum - The below example will show how to configure Unbound to force LAN clients to use Youtube in Restricted mode. This same process will work with safesearch for Google/Bing/etc.
Published in DNS
Read more...
Saturday, 12 October 2024 14:00

My Xbox One Notes

There are some casting notes here: My Meta Quest 3 Notes | QuantumWarp

General

Networking

Port Forwarding

A network port lets your Xbox console communicate with the Xbox network servers and other Xbox consoles over the internet.

To let your Xbox console communicate with the Xbox network, you might need to open or forward ports, which means you'll be making a configuration change to your firewall or network hardware, such as a router. Port forwarding for Xbox is done on your router or other network hardware, not on the Xbox console itself.

Port forwarding is:

  • not needed for all Xbox services
  • only needed to allow for unsolicited traffic

If your router does not have UPnP enabled (or available) which just allows the Xbox to setup the port forward rules automatically, then you will manually need to configure your port forwarding.

Tutorials

The Ports

Port Number Protocol Purpose Notes
88 UDP Xbox Live connectivity  
3074 UDP/TCP Xbox Live party chat and matchmaking  
53 UDP/TCP Domain Name System (DNS) Forwarding this will break local servers
80 TCP Web traffic Forwarding this will break local servers
500 UDP Session Traversal Utilities for NAT (STUN)  
3544 UDP Teredo tunneling  
4500 UDP IPsec NAT Traversal  

Testing

Extensible to test port forwarding you need to do the following things:

  1. Setup the port forwards to point to your PC.
  2. Run an app on the PC that exposes/responds on those ports
  3. From outside of your network, connect to these ports and see if you get an appropriate response.
  4. Once you have checked the port forwards work, re-point them to your Xbox.

Misc Diagnostic /Microsoft Network

Open Ports (Apps)

You can also use simple servers to give the same results. A bit more fiddly but a strong alternative method.

  • HFS (HTTP File Server)
    • Access your files directly from your disk via the web
    • portable, GUI, HTTP on custom ports.
  • MiniWeb HTTP server
    • MiniWeb is a high-efficiency, cross-platform, small-footprint HTTP server implementation in C language. It implements GET and POST methods and works on multiple platforms ranging from server, desktop, game console and IoT hardware.
    • last updated 2018
    • Run on any port 
      miniweb.exe -r ./wwwroot -p 8080
  • netcat 1.11 for Win32/Win64 - ancient netcat for Windows
    • run this command to start a listener on port 12345 
      nc -l -p 12345
  •  Powershell
    • If you prefer no downloads, you can use PowerShell to create a simple TCP listener: 
      # Run in PowerShell as Administrator
$listener = [System.Net.Sockets.TcpListener]8080; $listener.Start(); $client = $listener.AcceptTcpClient()
    • Change 8080 to your desired port.
    • You can then test by connecting to it from outside using telnet or nc.

Check the ports are open on the PC (Apps)

Opened Port Testers (Online)

Opened Port Testers (Apps)

These must be run from outside of your network to be of any use in testing port forwarding.

Opened Port Testers (Command Line)

These must be run from outside of your network to be of any use in testing port forwarding.

  • Telenet 
    telnet your.public.ip 12345

Double NAT Detected

  • Double NAT = An additional (or unexpected) network hop has been detected in the packet path.
  • Strict NAT = UPnP is not enabled.
  • Double NAT Detected
    • The Xbox can be very twitchy about detecting this, so sometimes I wonder if there is actually Double NAT taking place.
    • If all services are available in the Xbox network test, the this warning can be ignored as the Double NAT is not interfering with anything.
    • Double NAT detection is not intrinsically bad, it is just the Xbox has detected an additional (or unexpected) network hop in the packet path.
    • This additional NAT is most likely caused by an additional router or AP between the Xbox and the internet. (i.e. not all your devices are on the same subnet / You have daisy chained two routers)
    • This is not caused by my Powerline adapters as I ruled this out by connecting directly to my router. Cheaper adapters can create an internally NAT network which can cause this error.
    • pfSense Router (with NAT Reflection enabled)
      • If running pfSense this detection "could" be caused by using NAT reflection
      • You would only need to setup UPnP or port forwarding once and the router will take care of everything else.
      • Detection is probably caused by NAT Reflection being present on port 80.
      • I disabled NAT reflection on all of the additional port forwards (NAT) that were recommend by Microsoft to forward and this made no difference to the detection results.
      • This is not caused by my pfSense router having multiple WAN Gateways. I disabled all but the WAN and still got the Double NAT detection.
      • Even with Port forwarding or UPnP enables I was still getting the Double NAT issue.
  • Diagnostics
    • I ran packet capture on my pfSense router for the Xbox's IP and port 3074. When you see traffic here in both directions then the port forwarding is working correctly.
      • I set up the port forwarding in pfSense first, but this might not be needed as the traffic from the Xbox is in response to initial packets from my Xbox on my network rather than being unsolicited.
      • Expect to see traffic between your Xbox and a Microsoft IP address.
  • An Xbox can usually can open ports (port forward) automatically using UPnP but this has to be enabled on your router.
    • Most residential routers have this on by default but commercial ones probably don't because of the security implications.
    • If your Xbox network tests says NAT type = "Strict NAT" then this is a good indication that UPnP is disabled.
  • Detecting Double NAT
    • Use a hop plotter such as Tracert after reading the articles below.
    • Double NAT. How can it be detected? (and why/how it should create issues?) - Super User
      • 'Tracert' (Trace Route) command will show if you have a double NAT. e.g. tracert 8.8.8.8. You will see more than one hop with a private IP address. Note that this assumes small office / home networks where every router applies NAT. Corporate networks may have more hops and you'd need to do more testing to figure out which hops apply NAT.
      • An example of something double NAT detectably breaks is UPnP (Universal Plug and Play) Port Forwarding. When a device on your network requests a temporary port forward rule from your router, it won't work right because the upstream router also needs to forward the port. The device will know something is wrong because the router replied that it granted to port open request, but the port still isn't open from the internet. The device can guess that you are in a double NAT situation.
      • You can also get IP address range overlaps in double NAT situation. It could be impossible for the inner and outer network to communicate with each other because they use the same IP ranges and are thus indistinguishable. Internet may still work on the inner network depending on how smart the inner router is.
      • The major reason double NAT is not desirable is devices in the outer network cannot initiate a connection to devices in the inner network. Actual routing (e.g. static routes) allows bidirectional communication.
    • Detecting and Resolving Double Network Address Translation Issue | Intermedia Cloud Communications - This article explains when Double NAT could be an issue and what you can do to alleviate the issue.

Xbox Website

  • You cannot view your games library on this site, it use to be a feature.

Xbox App (Android/Windows/Website)

General

Check if your Xbox is present in the App

`Xbox App --> Library --> Consoles`
  • This is not the most logical place to look for an attached Xbox, you would assume your Library is just for your games.
  • If you know you have already added your Xbox at a prior time but it is not visible, then this is most likely a network issue such as Double NAT or a lack of `Port Forwarding`/`UPnP`. You should now test your Xbox network connectivity before trying anything else.

Cannot add my Xbox to the App

This can have a few causes:

  • The Xbox network is down. You can check the here.
  • The Xbox is already added and present.
  • Network connectivity issues such as port forwarding are preventing communication.
  • The Xbox is already added but not visible because of network connectivity issues.
  • You cannot add the same Xbox twice to your App, it will always fail as if it cannot talk to it.
  • What would be nice is if an error message came up saying you were trying to add the same Xbox twice.

XBOX 360 Emulator

  • XBOX 360 Emulator - Keep asking for my Xbox password
    • XBOX 360 Games on XBOX One Keeps Asking For Password - Microsoft Community
      • ** Solution from Dan_774 ** ** works **
        • I had this problem on my xbox one x and accidentally solved it. Here's how:
          1. Launch the 360 game. While in the 360 game, open the 360 menu by pressing select and start at the same time. Log in to your account. Select "remember me".
          2. Once logged in, open the 360 menu again and log out WHILE STAYING IN THE GAME.
          3. Open the 360 menu again and log in again. This time it shouldn't ask for your password.
          4. Now you can fully exit the game, relaunch it, and it should automatically sign you in to your 360 account.
        • I did this for multiple accounts on my xbox one and it worked every time so I don't have to keep re-entering my password every time I want to play black ops 2 and any other 360 game. Hopefully it works for you, too.
    • 360 games on series x never reminds my password, everything else works - Microsoft Community
      • Dan_774 solution is on this page.
      • Another suggestion:
        • I figured it out! If you have multiple XBox Ones on your account, only the "HOME" Xbox will remember password and auto sign into xbox 360 games.
          1. You have to sign into your Microsoft Account on a trusted browser, then click on your profile on the top bar and go to settings to see all hardware associated with account.
          2. Click on your New XBox Device.
          3. This is good time to register with Microsoft with a click of a button BTW.
          4. There is no button to make a "HOME" device but there will be a button that states "This is not my Home Device" if it happens to be so.
        • I sold my last xbox one and did not remove my device from account.
        • Once I removed my older devices my new Xbox now remembers my XBox 360 Login and auto-sign ins. What a relief...
    • I keep getting logged out of Xbox Live playing backwards compatible games but only on the 360 not on the Xbox One. | Microsoft Community
      • Your password is longer than 16 characters. 360s including the emulator on the Ones do not like passwords longer than 16 characters if your password is longer than 16 characters then you would need to change it to something smaller.
      • You have two step verification turned on. Again the 360s including the emulator do not like two step verification so you would either need to turn it off or use your app password.
      • You changed your gamer tag since the last time you downloaded your profile to the 360 Emulator/360 console.
    • My password is too long to enter into my xbox 360 | Microsoft Community
      • Basically it is a limitation to the 360 including the emulator on the One for backwards compatible games that it does not like passwords longer then 16 characters so if you are wanting to play games on your 360 just make change your password to something that is less then 16 characters.
      • Enable 2Fa and generate an App password.
  • Passwords always incorrect
    • Password always incorrect when signing into Xbox live for 360 games on Series X console | Reddit
      • I found a fix. I turned off two step verification
      • Yeah somewhere on the xbox / microsoft website there is some button under a "security" tab that says "generate app password" and the password it generates is what you enter for the Xbox 360 download-profile password.
      • This thread also details steps including the password fix from Dan_774 but using an app password.
      • App passwords can only be used if 2FA is on.
      • In summary
        • If you are using 2FA you need to use an App password.
        • You can turn of 2FA.

Purchases and Xbox.com

  • Redeeming Codes
    • To redeem a Xbox One code, use on of the following options:
      1. Goto to https://www.xbox.com/redeemcode
      2. On the Xbox One dashboard: Click on Gamertag --> Three balls --> Redeem Code
    • If you get a code and it is for an Xbox 360 game, then you
      • need to redeem it from the https://www.xbox.com/redeemcode
      • you could maybe do it from a real Xbox 360.
      • I do not know if you can do it from the 360 emulator on the Xbox One
  • View Digital Purchases
    • Console: Settings --> Account Management --> Download History
    • Xbox.com: Gamertag --> My Microsoft Account --> Order History
    • Xbox.com: Gamertag --> Xbox Profile--> My Games ???

Controllers

Different Controller Models

Misc

Glossary

  • Wiper
    • This is the metal disc in a potentiometer that is rotated on the carbon track.
  • Hall Effect Potentiometer / Hall Effect Thumbsticks
    • These are potentiometers that are based on magnets rather than carbon tracks and a wiper. The benefit is that they do not have any moving parts that will wear out.
    • Can Hall Effect Sensors Stop Drift Forever? - iFixit - Hall effect sensors are ideal for joysticks. Find out how Hall effect sensors work, where to find them, and why they’re the perfect antidote to joystick drift!
    • Hall Effect Technology in Gaming Controllers - Learn how Hall Effect technology revolutionizes gaming controllers by providing precise control, reducing stick drift, and enhancing durability. Explore the future of gaming with advanced Hall Effect sensors.
    • Everything you need to know about Hall Effect Sensing Joysticks & Trig – EasySMX
      • In the world of interactive gaming, controllers are the crucial tools through which we enter and navigate virtual realms. Integral to these controllers are the joysticks and triggers, which have seen considerable evolution in their design and the technologies behind them. In this article, we delve into two significant technologies that power these components: Hall Effect sensing and potentiometer-based mechanisms, as seen in ALPS joysticks.
      • Hall effect sensors don't play well with metallic parts iirc, like installing metal thumbsticks in a Xbox One controller could mess with the hall sensor triggers.
    • Third party hall effect sensors replacement for xbox controller? | Microsoft Community
      • Can use more power
      • Xbox series controllers have a 10000Hz polling rate, but current Hall sensors are limited to 1000Hz.
    • Do Hall Sensors make a difference in gameplay? | Reddit
      • Hall sensors alone don't impact gameplay. They're simply a way to read the joystick. A more durable way than potentiometers, but alone they don't alter gameplay.
      • Yes it does affect all non Shooters or 3D games. ALPS is far superior for metroidvanias fighting, racing, platformers in which you need perfect inputs for competitive play. HALL wont register diagonal inputs correctly (or register them at all) and most of the time you going to regret having one.
      • Hall effect sensors do make a difference in gameplay. They have less of a chance to miss-input than potentiometers, and don't degrade. Having more reliable input will 100% make a difference in gameplay.
      • My layman's explanation is that hall effect sensors are better than traditional carbon potentiometers because they're immune to PODE aka they don't wear down and cause misinputs.
      • To keep it brief: carbon film potentiometers (the normal type found in GCCs) wear down over time, and they get less accurate. We call this "PODE" in the community. This has some positive gameplay effects, but if there is too much wear, it can have really really bad gameplay effects too.
      • Hall effects sensors don't wear the same way, so once you set up your controller, it should be good to go for a much longer time.
    • Jun Zeng's Hall Effect Sticks - PS5/Xbox Installation & Calibration - YouTube | VK's Channel
      • These have a special board that will correct the jitter and calibrate the circularity test.
      • @alexklaus2778
        • One question: I also installed Hall Sticks on a XBox controller and noticed afterwards that the LT/RT Buttons also work with hall sensors. After testing it, I could see how the hall sensor in the sticks gets disturbed by the magnets on the trigger. For my normal Xbox controller I bought clicky buttons from extremerate and want to remove the magnet. You seem to only built in the hall sticks. How did you work around that problem? I guess the scuff you have there will work with the same hall technology for the LT/RT buttons.
        • I do not see a proper solution there since installing the board and calibrating it with software means that it will be centered until I press the LT button (which has its hall sensor right under the sicks). That would cause the left stick to drift a little up or down.
    • New V2.0 Hall Effect Modules - Now without Jitter! - YouTube | VK's Channel - Orange Module V2.0 (I bought mine from this seller it is also cheaper here) the price is for 1 unit.
    • GuliKit - This company makes products with Hall Effect Sensors.

Thumbsticks: Potentiometers vs Hall Effect Sensors

Xbox controllers (most of them) come with thumbsticks that use potentiometers that change resistance so the controller knows how far you have moved the stick. This technology is well tested but the potentiometers wear out because the wiper is a piece of metal that is run against a carbon strip and because of the friction over time these will fail. Hall effect Sensors are a new technology that use magnets and as such there is no physical touching between surfaces so they do not wear out. Below I have done a table of the pros and cons of each of the technology whilst having my 1708 Xbox controller in mind, although most of the principles will be the same no matter what controller you use.

  Pros Cons
Potentiometer
(POT)
  • It is what your controller was designed to use.
  • Spares are easy to source
  • No Jitter
  • Fast response
  • Wears out over time. This is called PODE in the community.
  • Stick drift is a common fault
Hall Sensor
  • Do not wear out
  • Modern Technology
  • Once calibrated, you should never suffer stick drift again
  • Can adjust the calibration of the sensor on the actual unit.
  • Can be more accurate
  • Doesn't suffer from dead zones
  • No stick drift
  • Jitter - Some newer versions appear not to suffer from this.
  • Xbox controller: Hall sensors in the sticks gets disturbed by the magnets on the triggers. This might be true for other controllers.
  • Can use more power, higher battery drain
  • Xbox series controllers have a 10000Hz polling rate, but current Hall sensors are limited to 1000Hz.
  • Hall effect sensors don't play well with metallic parts such as metal thumbsticks.
  • Needs a module board to prevent interference, correct jitter and calibrate for the circularity test. These boards usually only come with premium upgrades.

Conclusion

So in conclusion hall effect sensors are a good thing if decent sensors that do no suffer from jitter and that they will not interfere with the rest of your controller (i.e. triggers on the xbox controller) or you could get ones that come with an additional circuit board that prevents interference and jittering.

Using the standard potentiometers are what your controller was designed for and just swapping like for like is not a bad thing. If you keep wearing out the sticks out frequently then you should use hall sensors.

Tutorials

Stick Drift

Testing

What Causes Stick Drift?

Tutorials

Fixes

  • Update controller firmware
    • This probably will not fix anything, but it certainly will not harm.
  • Software Calibration (Window Only)
  • Software Calibration (Xbox Accessories App)
    • You should try software calibration before any other method if it is available to you.
    • See section below.
  • Modified Software Calibration (Xbox Accessories App)
  • Blow out the thumbsticks with air
    • This only works some of the time but is worth a go.
  • Clean the potentiometers (Wiper and Carbon Track) with Isopropanol alcohol.
    • This worked for me and is my recommended method.
    • This should not need a recalibration as you are using the original parts.
  • Replace the affected potentiometer's Wiper
    • Sometime this can work if cleaning does not.
    • This method requires recalibration.
      • NB: You can try several wipers to see if you get one that does not require calibration because it is the correct value, but this could be time consuming and might not work.
  • Replace the affected potentiometer on the thumbstick
  • Replace the thumbstick with a new one
    • This method requires recalibration.
  • Hardware Calibration
    • If software calibration is not available there are several hardware methods avaliable to complete this process.
    • See section below.

Stick Calibration Methods

Over time the resistance values in a potentiometers change over time (unless you are using hall effect ones) and so re-calibration can fix the problem but also when you swap parts in your thumbsticks these might not have the perfect values and again calibration is required.

  • Xbox Accessories App (Windows and Xbox)
  • Hall Effect Sticks / Potentiometer
  • Manually altering the position of the potentiometers by using their pins
  • Drift Fix Adapter / Drift Repair Board
    • This is a tiny circuit board that you solder onto the back of the controller’s circuit board, behind the thumbstick. It has two potentiometers that allow you to compensate for the loss of resistance in the thumb stick’s own potentiometers.
    • These are used to add an easy calibration method but as such can also fix stick drift.
    • You can buy these on AliExpress
    • How to Fix Joystick Drift Permanently! - YouTube
      • FINALLY! PERMANENTLY FIX JOYSTICK DRIFT for PS4, PS5, XBOX One, and Series X Controllers! New mod from Helder Finally Fixes Joystick Drift!
      • One of the most frustrating issues with modern controllers is that they’ll eventually get joystick drift. This issue essentially makes the controller unusable. Up until now, there have only been ways to band-aid the problem but those are just temporary. We FINALLY have a permanent fix for Joystick Drift! Let’s take a closer look!
    • Drift Fix Analog Stick Fix PCB Mod | Acidmods
      • Has pictures
      • These are not drift proof like people want them to be.
      • These only meant for you to be able to re-calibrate the center.
      • If the carbon filter is too far gone on the stick pots then you're still going to have noticeable drift and only a replacement can fix.
      • I have the top ones but not using them because even slight calibration for example on right make analog not able to go fully left. Maybe other versions are better but that top one isn?t worth any money. I read somewhere that 10k ohm trimmers can be use for better results but never tried.
      • The higher the value used the less impact is has current wise on the circuit. Remember there are 4 POTs in there that all use the same power rail. So 4 x 10k in parallel is really a single 2.5k load on there, but you toss in 4 more 10k and now it's a 1.25k load and now it is using twice as much current. Using a higher value, like 1M, it will still change the voltages of it, which is what the MCU is measuring to 'see' where the stick is, but current wise you've changed it from a 2.5k load to a 2.475k load, not a big enough difference to really matter.
      • Placing it in series is far more work as you would have to place it on the correct side, or both sides and use twice as many parts, and it would really stuff up the divider. Unless you used some trimpots with more turns that you'd want to turn so you could dial in that very minute value, whereas tossing them on there in parallel is quick and easy, and unless the stick is really way off it's not noticeable, and if it is way off then trying another stick or POT should be done first before trying to dial it back in with a parallel one.

Notes

  • General
  • Xbox Accessories App
    • Can be found
      • Xbox: The Xbox Accessories app comes pre-installed on Xbox consoles. Press the Xbox button to open the guide, select My games & apps > See all > Apps, and then choose Xbox Accessories.
      • Windows: To open the Xbox Accessories app on Windows, press the Start button , type Xbox Accessories or choose it from the list, and then sign in. If the app isn’t installed on your PC, get it here.
    • Adjusting the controller stick settings in the Xbox Accessories app | Xbox Support - You can adjust sensitivity settings for the left and right sticks on your Xbox controller using the Xbox Accessories app to customize gameplay to your own personal need or style. This functionality is supported for the Xbox Elite Wireless Controller Series 2 and analog joysticks connected to the left or right USB ports of Xbox Adaptive Controllers.
    • How to optimise your Xbox Elite Controller for better gaming | GamesRadar+ - Six tips and tricks to get the most accurate controller experience possible with Microsoft's luxury peripheral
    • The Xbox February Update is Starting to Roll Out  - Xbox Wire - Use touch controls in Xbox remote play, adjust thumbstick sensitivity for Xbox Wireless Controllers, and more with Xbox’s February Update. This also mentions New thumbstick recalibration tool for Xbox Wireless Controllers (Model 1914).

Controller Sensitivity

  • Controller is hypersensitive on Xbox Home Screen / Dashboard
    • This is caused by stick drift on your controller.
    • I would suggest plugging it into a PC and checking the feedback from the controller.
  • Problem with dashboard sensitivity | Reddit
    • OoomaThurman
      • i had this yesterday, i just unplugged the unit for a while and it resolved it. Reset / hard reboot did nothing to fix it. Unplugged for about 5 mins and came back to it. Might have just been a lucky reset though :-/
    • Misanthrope-X
      • You could check to see if your controller has a firmware update in the accessories app.
      • Your second issue sounds like stick drift but the right stick doesn't have any function on the home screen so that shouldn't impact it there.
      • The best you can do for stick drift is take the controller apart and clean the stick area with isopropyl alcohol but that would probably just be a temporary fix.
    • MistbornSynok
      • It’s caused by the stick drift, I had this issue before.
    • GEDROCKL33
      • Having this issue currently as well the right stick moving on its own. Which i have a friend that works with GS he put it on their controller tester for Trade ins and the Right stick was perfectly Zeroed.
      • I have done a unpair repair, Hard shut off with Xbox button and left on D-Pad until the controller shut off havent done a Clear Cache reset yet but will try that first.
      • Edit!!! Did a Reset Cache clear on the system and havent had any issues so far since. Link to what i did is here How to clear the cache on Xbox Series X | Digital Trends As a note i did the power cycle your xbox series X and the clear Blu Ray Cache. I did not do the reset console. Unsure if its a permanent fix but so far this has worked for me.
  • Can I adjust my Xbox Controller's sensitivity? - Quora
    • If we were talking about using an Xbox One Elite controller then the answer would be "yes!"[1] . Standard Xbox One controllers don't seem to have the ability to non-invasively adjust the Trigger range[2] — which is what you're really asking about.
    • All non-invasive customizations to Xbox One controllers require the Xbox Accessories app[3]. In your case, go to the Microsoft Store app on your PC and download Accessories app, then plug in your controller using a USB cable. Last time I checked this didn't work if you tried to do it using the Wireless Adapter. You'll see what you can configure and customize there.
    • Having said this, the whole reason why the Elite exists is because Microsoft wanted to give non-professional players the experience of using a highly customized controller. The implication there is that it is possible to invasively modify the controller to your heart's content. How to do that? As far as I know at minute this is the only way, while each game it's different and you would need different settings.
    • Each game in the settings options have the sensitivity options where you can work it out this.
    • No you can not change the sensitivity in xbox one settings. Maybe in a particular game but have not got any in which you can change. So there is not pretty much customization you can do about it.

D-PAD Button Repair

  • Easiest way to fix the D-pad on an Xbox controller - works on Series S, Series X and One controllers - YouTube
    • This video shows how you can repair a none working D-Pad on an Xbox One, Xbox Series S & Xbox Series X controller.
    • The D-Pad, also called the directional pad uses a conductive film for the buttons.
    • This film is known to go bad, which causes the D-Pad to stop working.
    • NB: Do not put the sticky film on top of a towel where you get loads of filth if you are going to reuse
    • NB: I would use a pen to mark on the board where the outside of the plastic film sits to get a perfect fit upon re-fitting.

Use an Xbox 360 Controller on Xbox One

  • How to Use an Xbox 360 Controller on Xbox One: 5 Steps
    • Do you wish you could use your old Xbox 360 controller on your Xbox One or Xbox One X and S?
    • While you can't directly connect an Xbox 360 controller to your Xbox One, it is possible to use an Xbox 360 controller with the Xbox One using a Windows computer.
    • This wikiHow teaches you how to connect your XBox 360 controller to your Windows 10 PC and stream your Xbox One games to the XBox app on Windows 10.
    • To do this, you will need an Xbox One, a Windows 10 PC, and a wired XBox 360 controller, or a wireless XBox 360 controller with a wireless adapter.
  • How To Use An Xbox 360 Controller On Xbox One | Yoodley - If your Xbox One controller is broken, or if you want to connect two controllers for multiplayer purposes, you have come to the right place. This guide explains how you can connect your wired or wireless Xbox 360 controller to Xbox one and play multiplayer or other split-screen games.
  • How to use a Xbox 360 controller on the Xbox One (5) - YouTube | My Mate VINCE
    • This quick video shows you how to use a wired and wireless Xbox 360 controller on the Xbox One.
    • This does require a 3rd party dongle.

Console Disassembly

Hard Drive upgrades and repairs

General

Formatting and partitioning of the new drive and optionally transferring your data

There are several steps to swapping your harddrive depending on whether you want to move your data across. some of these tutorials assume you have stripped your Xbox apart and can access both hard drvies.

DVD Drive not reading Discs

 

Published in Other Devices
Read more...
Sunday, 29 September 2024 07:48

My Microscope Notes

This is list of my microscope kit and collection of my related notes.

Kit List

Notes

  • The Microscope Connections
    • The eyepiece:
      • C-Mount
    • The Barlow Lens end:
      • This is the screw thread and diameter standard for my microscope.
      • 1-3/4" (42mm) Mounting Thread
      • M48x0.75
  • C-Mount/ CS-Mount
    • C and CS share the same connection threads
      • Inner Diameter: 25.4mm / M28
    • K3PGP - Experimenters Corner - Difference between C and CS mount
      • The physical difference is the CS mount lens is designed to be mounted ~5mm closer to the image sensor than a C mount lens. (C-mount lenses are designed to be mounted 17.526mm in front of the image sensor vs. 12.5mm for CS-mount.)
      • You can always use a C mount lens on a CS mount camera by using a 5mm spacer ring (many cameras now have C/CS selectable adjustment screws or rings).
    • C-Mount | OptoWiki Knowledge Base - Standardized interface for the mounting of lenses, described in ISO 10935 (1996-12) Optics and optical instruments – Microscopes – Interface Type C
    • CS-Mount | OptoWiki Knowledge Base - Standardized interface for the mounting of lenses, described in ISO 10935 (1996-12) Optics and optical instruments – Microscopes – Interface Type CS
  • Barlow Lens
    • Barlow lens - Wikipedia
    • Barlow Lens - Microscope.com
      • A Barlow lens is a diverging lens that alters the focal length of a microscope and, therefore, the field of view.
      • The most common type of Barlow lens is the Reducing Barlow.
      • A Reducing Barlow reduces the magnification power of the microscope, but has the advantage of increasing the field of view and the working distance between the objective and the specimen.
      • Reducing Barlows are typically 0.3x, 0.5x and 0.75x although other powers are available.
      • 0.5x
        • Working Distance: Increases
        • Field of View: Doubles
        • Magnification: Halves
  • Buying Guides

 

misc

 

Published in Other Devices
Read more...
Saturday, 21 September 2024 15:08

Washed out colours on my Dell U2414H monitor

I have written these instruction while trying to diagnose and fix washed out colours on my Dell U2414H monitor attached to my Dell E6540 laptop which uses the Intel HD Graphics 4600 GPU however the solutions and logic will apply to al lot of setups.

Solutions

Some of these options might not realise unless you restart your PC.

  • Calibration (settings can be changed at the monitor and through Windows)
    • Run the Windows calibration tool (in particular, increasing Gamma)
      Use an Online Gamma Calibration Tool
  • Windows
    • check the brightness in the Action Center (bottom right of screen where screen snip is)
      • This will only affect the inbuilt panel
    • Make sure `Night light` is not enabled.
    • Make sure no 3rd party screen brightness utilities are running.
    • Disable accessibility colour filters
    • Make sure the monitor is set to native resolution and the correct refresh rate.
  • Intel / nVidia / AMD Utility
    • Ccreate a custom resolution in 1080p
  • Hardware
    • Use HDMI and put to full colour range
    • Use external USB graphics card
    • Use another graphics card (not so easy in a laptop)
    • Try different cables. The HDMI signal is especially susceptible to cheap cables.
    • Laptop display panels have a hardware brightness control, look at this, but should be tied to action centre brightness setting.
    • Cehc the monitor is being correctly detected.
  • Graphics Card
    • use the `Intel HD Graphics Control Panel` to alter the colour and gamma (or the nVidia/AMD equivalent)
    • nVidia cards only: This can be rectified for both DisplayPort and HDMI by creating a custom resolution with a 59.999Hz refresh rate. This will be treated by any application* as 60Hz but uses the correct Full Range RGB 0-255 colour signal. The process for setting this up is shown in the video below.
  • Dell U2414H monitor
    • Make sure it's device driver is installed and does not display as "Generic PnP Monitor" in device manage
    • Install the ICC profile for the Dell U2414H monitor. You will find this in the driver package.
    • Check the monitor's viewing angle. Depending on how you look at it the picture can look bad.
    • Check the monitors physical settings (colour, gamma, brightness, contrast, etc...). There is no harm in having a play as you can always put them back.
    • If you have several monitors of the same model, there can be differences between the revisions.
    • Your monitor is old and failing. Get a new one.
    • Try all of the ports (miniDP, DP, HDMI) and see if you get a better picture through one over the others.
    • Daisy chaining the DP ports should not cause any issue, but no harm i trying a single monitor on its own.
    • Try Display Port v1.2
    • Try your monitor with a known good laptop or PC to test to rule out the computer.
    • Confgure the monitor via `EDID` which I assume will require `DDC/CI` to be enabled. This monitor might not be EDID capable.
    • Enable DisplayPort 1.2
      • This might not be compatible with your devices and can cause the monitor to no longer recognise an input (not permanently though)
      • It might make the picture better.

Dell U2414H monitor settings

These are a reference for my monitors but if you have a Dell U2414H you might as well use them.

  • Custom Colour:
    • R:100,
    • G:98
    • B:990
  • Brightness: 100
  • Contrast: 75
  • DisplayPort: v1.2 (optional)

Research

  • Windows Calibration
  • Intel 4600 HD GPU / Intel  HD Graphics Control Panel Calibration
    • Best settings to fix washed out colors in Intel HD Graphics Control Panel? | Reddit
      • You need to set the quantization range to full range both under Display > General Settings or under Video > Color Enhancement > Input Range, where you have to click Use Driver Settings first.
      • HDMI tend to default to RGB limited mode, which is what non-HDR televisions use, but it's not suitable for computer displays.
    • Fix your laptop's color and brightness with Graphics Command Center | PCWorld - Fix Windows 10 auto-brightness and color problems with this hidden Intel app.
    • Potential fix for Intel graphics washed out colours (non native HDMI displays) | Reddit
      • When I tried to change the resolution of my monitor to something else I realised that my monitor was using the full colour range. It was only in the case of the default 1080p resolution that it would show washed out colours.
      • The solution was to create a custom resolution in 1080p
    • windows 10 - External monitor is washed out with Intel HD Graphics - Super User
      • This is what worked in my case. My monitor was being incorrectly detected as a HDTV with limited range and adding a custom resolution with "CVT-RB" timing fixed it.
      • How To Geek may have the answer! Essentially HDMI sometimes defaults to RGB Limited. You need to go into your graphics card control panel and change it to RGB Full. On Intel cards it's at the bottom of the General tab according to HTG's instructions.
      • The technical difference is that full range RGB uses full 8 bit range from integer value 0 to 255 where 0 is black and 255 is white. Limited range RGB transmits the image with 8 bit integers but all values 0-35 result in black and all values 235-255 result in white. As a result, the image is actually using only integer values 35-235 meaning you get better compability with old displays but lose about 22% of all possible colors due less effective bits available for the signal.
      • If GPU and display are both compatible, you always want full range RGB support.
      • Some technical information here.
    • How to Avoid Washed Out Colors When Using HDMI on Your PC - Black colors may look washed out and gray if you connect your PC to its display via an HDMI cable, and it's not your display's fault.
    • Quantization Range Option Is Not Visible in the Intel® Graphics
      • Describes expected behavior of the Quantization Range option that’s found on the Intel® Graphics Control Panel and the Intel® Graphics Command Center depending on video connection type.
      • With the most recent drivers (xx.xx.100.xxxx and newer), the Quantization Range option will only be visible if the video output on your computer is native HDMI. Using a DisplayPort (DP) video output or adapters such as DP-to-HDMI or USB Type-C to-HDMI will cause the option to disappear.
    • Quantization Range Option in the Intel® Graphics Control Panel or... - Expected behavior of the Quantization Range option that’s found on the Intel® Graphics Control Panel depending on video connection type.
  • 3rd Party Calibration add Tools
    • LCD monitor test images - Welcome to the Lagom LCD monitor test pages. With the test images on these pages, you can easily adjust the settings of your monitor to get the best possible picture quality.
    • Best free Monitor Calibration Tools for Windows 11/10 - Learn how to calibrate your monitor using these free Color or Monitor calibration tools for your Windows 11/10 PC. Good for Photographers or Gaming.
    • 10 Best Monitor Calibration Tools for Windows in 2022 - To calibrate your monitor, you’ll need calibration software, special calibration gadgets, or a combination of both. Let’s review software and hardware to find the ideal calibration tool for your monitor. 
    • Best Free Monitor Calibration Software Windows 10 - TechWiser - You can always buy a hardware colorimeter but, if you have zero dollars to spend, here is some free software that will get the job done. 
    • Gamma calibration - Lagom LCD test
      • This is a gamma calibration test image. The gamma defines how the luminance (the amount of light) on the screen depends on the 8-bit RGB values. As of 2007, computer monitors are supposed to adhere the sRGB standard, which is very similar to a gamma value of 2.2.
  • Screen Brightness Tools (ie night light)
  • Dell U241H Monitor
    • Dell U2414H Review | PC Monitors
      • A review of the Dell U2414H, a 23.8 inch AH-IPS member of the UltraSharp family with exceptionally thin bezels.
      • This can be rectified for both DisplayPort and HDMI by creating a custom resolution with a 59.999Hz refresh rate. This will be treated by any application* as 60Hz but uses the correct Full Range RGB 0-255 colour signal. The process for setting this up is shown in the video below.
    • Dell U2414H Review - TFTCentral - Dell's UltraSharp range always attracts quite a lot of attention and they always seem to do a good job of updating their screens to offer buyers something a bit new and different each time they do.
    • U2414H Banding using sRGB preset. | DELL Technologies
      • Q: My monitor is exhibiting banding with the sRGB preset. It doesn't do this on the Standard preset, but I would like to use the sRGB preset since that's the one that was factory calibrated. Is there anything I can do to correct this?
      • A:
        • Factory default does not over write calibrations. I would reset and check all modes.
        • Install the driver from the File Library. The driver includes the INF, ICM (ICC), CAT files.
    • Calibrating Dell U2410 and U2414H using Colormunki Display | DisplayCAL
      • Hi! I'm new to display calibration and bought and X-Rite Colormunki Display for calibration and profiling of my Dell U2410 and U2414h.
      • I followed an advice from some guys in the Dell forum and used the factory menu for OSD adjustment of the white point (because usually SRGB preset doesn’t offer RGB sliders).
  • Misc
    • If you turn all the brightness up full and a pure white page does not get any brighter then this is the maximum whiteness that the monitor will show white. If the white looks off colour at this point, then it is a limitation of the monitor.
    • sRGB - Wikipedia - sRGB is a standard RGB (red, green, blue) colour space that HP and Microsoft created cooperatively in 1996 to use on monitors, printers, and the World Wide Web.
    • DisplayPort - Wikipedia - DisplayPort (DP) is a proprietary[a] digital display interface developed by a consortium of PC and chip manufacturers and standardized by the Video Electronics Standards Association (VESA).
    • DISPLAYPORT 1.2, DISPLAYPORT 1.4, DISPLAYPORT 2.0 and DISPLAYPORT 2.1 - To help you understand the evolution and the differences between DP standards, today’s article will walk you through the differences between DisplayPort 1.2, DisplayPort 1.4, DisplayPort 2.0, and DisplayPort 2.1.
    • GitHub - dylanraga/win11hdr-srgb-to-gamma2.2-icm - Transform Windows 11's virtual SDR-in-HDR curve from piecewise sRGB to Gamma 2.2
Published in General
Read more...
Sunday, 15 September 2024 13:25

Transferring music from Sony MiniDiscs

There are a few ways to recover music from Sony Minidiscs and these will vary between devices:

  • Digital download
    • Digitally without loss.
    • This will be the actual audio file 'as-is' from the disk. (aea)
    • Tracks will be split into individual files.
  • Analogue
    • Output via the 3.5mm jack.
    • This is a universal method.
    • There will be no track data.
  • SPDIF / Optical / Coax
    • Digital with minimal loss
    • There will be no track data.

This article is dedicated towards digitally downloading tracks direct from the Walkman with no sound quality loss.

My Kit

  • Windows 11 Laptop
  • Edge browser (Google Chrome can be used)
  • Zadig
  • Sony Portable Minidisc Recorder MZ-N710 (NET MD Walkman)
  • USB cable (USB A to Mini-B)

My Instructions

This YouTube tutorial covers everything from grabbing tracks using Method 1 to converting the .aea files to a more useful format.

  • Connect device to the computer
    • Using the USB A to Mini-B cable.
  • Install Zadiag
    • Short instructions
      • Connect your MZ-N710 via the USB cable.
      • Download Zadig
      • Run the Zdiag installer
      • Click install
      • Reboot windows
    • GitHub - asivery/webminidisc
      • The Windows USB stack requires a driver to be installed to communicate with any USB device. The bad news is that there are no official Windows 10 drivers for NetMD devices. The good news is that we don't need it! We can just use a generic driver like WinUSB to access the device.
      • You can find installation instruction here, but the easiest way to install is to use Zadig.
  • In Edge
    • Open https://web.minidisc.wiki/
      • This is "Web MiniDisc Pro" and is a fork of the original but can also download tracks digitally.
    • Click connect
    • Select Netman MD
  • Safety
    • Make sure all your discs have write protect enabled to protect you from mistakes.
  • Insert your disc
    • Simply put your first disc into the MZ-N710
  • Download the tracks
    • Method 1 (use this)
      • Click on the 3 dots and select Enable Homebrew Mode Ripping in Main UI
      • Select all of the tracks you want
        • Clicking the top track, hold shit and then select the last track will select them all.
      • Click "Download"
        • We don't want to convert them here, we want the RAW data.
      • The track(s) will now download as .aea files labelled with their track number and name (if present).
    • Method 2 (old)
      • Enter Homebrew Mode
        • Click on the 3 dots and select Enter Homebrew Mode
      • Homebrew Mode explained
        • See: Homebrew mode [MiniDisc Wiki]
        • You will be now present with a some tables representing Tracks and the TOC
        • The "Track Junction Map" has one track per sector thing
        • Track 0 is not a track, it possibly is the TOC.
        • You can only download one track at a time.
        • Not all tracks are named
        • The unit must be power cycled between each disk (i think) to clear the TOC which also happens when you swap the disc.
        • If you press the Shift key the track names should be displayed but I never got this to work, maybe my tracks did not haven names on them.
      • Download the track
        • Click on a sector in "Track Junction Map"
        • Click on the download icon.
        • The track will now download as an .aea file labelled with their track number and name (if present).
  • Swapping Disc
    • Stop the disk spinning before ejecting
      • On my MZ-N710 if I hold the CANCEL/CHG button this will stop the disc spinning and allow you to swap the disc without restarting "Web MiniDisc Pro" but this does not always work.
    • You might need to restart "Web MiniDisc Pro".
    • Repeat the download method you choose.

Notes

  • General
  • Web MiniDisc / Web MiniDisc Pro
    • GitHub - asivery/webminidisc:
      • Upload your Music to NetMD and HiMD MiniDisc devices thanks to WebUSB and WASM
      • Differences between Web Minidisc and Web Minidisc Pro
      • Web MiniDisc Pro was forked from the original Web MiniDisc to provide a more advanced workflow for interacting with NetMD devices.
      • https://web.minidisc.wiki/is the new webapp. Web MiniDisc Pro = Brings NetMD Devices to the Web
    • Web MiniDisc Pro - Brings NetMD Devices to the Web
      • Bring back to life your old NetMD MiniDisc player. Upload music to MiniDisc from the Browser.
      • the new version of the webapp.
      • Web MiniDisc Pro - It is a complete replacement for Sony's SonicStage and Simple Burner software. It is considered the flagship NetMD software project.
    • Web MiniDisc - Brings NetMD Devices to the Web
      • Bring back to life your old NetMD MiniDisc player. Upload music to MiniDisc from the Browser.
      • This is the original version of the webapp.
    • The Web MiniDisc Application - Use your old NetMD device in the browser - Get control of your MiniDisc device thanks to WebUSB and WASM
      • Some of the last MiniDisc players, branded as NetMD units, were equipped with a USB port that allowed for recording music onto the device by using the infamously SonicStage software (Windows only, of course). When Sony abandoned the MiniDisc, that software was left unmaintained and, nowadays, it can’t run outside virtual machines or without using dangerously unsigned drivers.
      • I’ve been lucky enough to find my old MZ-N710
    • The Web MiniDisc Application - YouTube | Stefano Brilli - A short demo of how the Web MiniDisc application works.The GitHub project also contains a few instructions to make the app work fine if you're on Windows or Linux.
    • Web Minidisc Update: ToC Cloning and ATRAC download via USB on Type-S Sony NetMD portables | Reddit
      • I'm very happy to announce a new version of Web Minidisc Pro. It's now possible to transfer tracks via USB back to the computer from Sony Type-S portables.
      • To enable this new functionality, you must check the "Factory Mode Ripping In Main UI" switch in the ellipsis menu.
      • After enabling that functionality, the 'Record' button gets replaced by the 'Download' button. If a warning shows up, saying that the current version is not supported, please use the full factory mode to download the RAM and ROM, then contact me.
      • It can definitely rewrite the TOC of an errored disc, but if the disc itself is damaged, the data just won't persist, so it will go back to its old, errored self.
        • Has instructions on fixing a disc's TOC
      • Worked with my MZ-N710 today
      • You can convert them in vlc media player if you need to, under media /convert. Vlc also does batch conversion as well.
      • AEA files are supported by VLC you can convert them/batch convert them directly from vlc media player under Media/convert/save. (to mp3 should you want to).
      • It won't be possible with the MDS-S500. The button to enter the factory mode won't even be displayed. This works only on portables because of how they're built (the CPU and the USB controller are one chip, this is not the case in bookshelf systems / decks).
      • Sony made a tool to convert from ATRAC to MP3: https://www.sony.com/electronics/support/downloads/W0002971
    • Managing tracks [MiniDisc Wiki]
      • Web MiniDisc Pro has two ways to copy tracks on a MD back to the PC: recording and downloading. The Sony MZ-RH1 also allows downloads similar to the exploits method below.
      • If many options are disabled, the disc may be write-protected. Check the write-protect tab on the disc (open = writable; closed = protected).
    • Ignore vs Skip?
      • Bad Sector - Web Minidisc Pro | Reddit
        • asivery
          • Skip this sector discards this sector's data, and jumps to the next one.
          • Ignore writes the corrupted data to the output file you'll download.
        • NeoG_
          • Skip = Delete corrupted data , audio will jump slightly as part has been removed. Track length is slightly shortened.
          • Ignore = Keep corrupted data, audio will act unpredictably while going over the corrupted data such as making glitchy sounds, Track length is preserved.
    • Web Minidisc Pro - Atracdenc vs Remote Atrac encoder, which gives best quality ? | Reddit
      • This is for transferring music to the device
      • I also read this on the web minidisc pro guide page :
        • "SP mode does not need any encoder as the ATRAC processing is performed by the recorder. This also means SP mode records much slower than LP modes."
        • So I guess choosing the Remote Atrac Encoder, doesn't change anything quality wise, when you choose SP mode ?
      • The remote encoder uses Sony's propriety ATRAC3 encoder from the PSP SDK and has a much higher output quality when compared to atracdenc.
        • And indeed, the remote encoder does not impact SP (ATRAC1) audio.
  • Other Sites
  • Buying Guide
    • MiniDisc Buyer's Guide [MiniDisc Wiki] - MiniDisc Buyer's Guide This page is intended to be a compliment to the Getting Started guide, with more details about particular generations of machine, decks, and “gotchas” - for someone new to the MD format, please check the Getting Started guide first. What do you need?
    • All NetMD devices [MiniDisc Wiki] - All NetMD devices Page / USB Capable players
    • Sony MZ-RH1 / MZ-M200 [MiniDisc Wiki]
      • Sony MZ-RH1 / MZ-M200 The last portable MiniDisc recorder produced by Sony.
      • When originally released, it was the only device capable of transferring recordings made on standard MiniDiscs back to a computer. However, this functionality is now available to all USB-equipped HiMD portables as well as a number of NetMD portables thanks to the WebMiniDisc project. A list of the NetMD portables which support this feature can be found Here
    • Devices that support Homebrew features [MiniDisc Wiki]
      • This page lists Type-S and Type-R portables from Sony (as well as direct clones) that support the netmd-exploits as described on the Web Minidisc Pro guide.
      • The exploits for Type-S devices are older and more thoroughly tested. The exploits for Type-R devices currently operate slower and there may still be errors to work out, and not all functions are available.
      • As of this writing, ripping performance is roughly: - Type-R devices will rip at roughly half of real-time, for SP audio. - Type-S devices will rip at roughly 4x real-time, for SP audio.
  • Hardware
    • Write Protect
      • MINIDISC WRITE-PROTECT SWITCH - YouTube
      • Check the write-protect tab on the disc (open = writable; closed = protected)
        • Open mean the tab is there, closed the tab is pushed in so there is a gap/hole.
  • Sony MZ-N710
    • Buy a `Sony MZ-N710`
      • MZ-NF810 same as MZ-710 but with radio tuner.
      • The Italian programmer who originally wrote this software used his MZ-710.
    • Sony MZ-N710 [MiniDisc Wiki] - Sony MZ-N710 Compact and durable NetMD recorder, with its only significant downside being a reliance on gumsticks for internal power, not AA batteries. Works perfectly in both Web MiniDisc and SonicStage. Identical to the MZ-NF810, with the exception of lacking a TV tuner.
    • Sony RM-MC33EL [MiniDisc Wiki] - The remote.
  • Copying MiniDiscs to PC
    • Copying MiniDiscs to PC [MiniDisc Wiki]
      • This guide covers real time audio transfer from a MiniDisc to a PC for archival.
      • Be aware that the most common USB sound card with SPDIF input, the C-Media CM6206, does not accept inputs with a SCMS copy protection signal.
      • Optical and Coaxial digital signals can be converted with an inexpensive adapter.
  • Converting (ATTRAC / .aea) files
    • General
      • AEA files are supported by VLC you can convert them/batch convert them directly from vlc media player under Media/convert/save. (to mp3 should you want to).
    • File information
      • AEA File - What is a .aea file and how do I open it? - Learn about .AEA files and view a list of programs that open them.
        • An AEA file contains audio data encoded in the ATRAC1 format, which is a data compression format developed by Sony. It stores audio most likely dumped from a MiniDisc (MD), which is an optical disc similar to a compact disc (CD) that can be played with various MD players.
        • AEA files are not common, since MDs were introduced back in 1992 and overshadowed by CDs. You will most likely never encounter an AEA file unless you dump audio from an MD you own. You may also receive an AEA file from a friend sharing music dumped from one of his MDs.
        • The ATRAC1 format is a variation of the ATRAC format, which stands for Adaptive TRansform Acoustic Coding. Besides being used in MDs, the format was also utilized in the Sony Dynamic Digital Sound (SDDS) theater sound system in the 1990s.
    • CODEC information
      • ATRAC: Adaptive Transform Acoustic Coding for MiniDisc | minidisc.org
        • Compression of 16-bit 44.1 kHz stereo audio into less than 1/5 of the original data rate with minimal reduction in sound quality.
        • 16-bit 44.1 kHz = (16/44.1)
      • .AEA File Codec Info Question... | Reddit
        • DCT based audio formats don't really have a bit depth, so VLC decodes them all to 32-bit PCM internally. Newer versions of VLC identify this as "decoded bit depth" and report the original bit depth if available, but I suspect for atrac files it is not available, and only the sample rate is.
        • I'm still looking for the most viable way of converting ".aea" files extracted with WebMiniDisc Pro, and although ffmpg is a good option I have the doubt about wich are the best settings for the conversion to WAV or FLAC, since in the VLC info about the ".aea" file, it says that the bit depth is 32 bits wich I find too high but altough the source is only 16 bit I don't want to convert to 16 bit as I would be cutting information from the original minidisc file... so is trully 32 bit the depth of the minidisc files (SP)?
        • VLC worked fine for converting multiple at once but otherwise I used Audacity. For some reason VLC wouldn't play some of the tracks but Audacity does. You can use a software called SPEK to see if information is lost during conversion.
        • The AEA files should be 16/44.1.
        • The decoding is happening with the open source ATRAC1 decoder in ffmpeg/VLC and is itself passable but still not quite as good as if you'd played the audio on a minidisc machine and recorded it onto your computer.
        • I haven't tested converting the AEAs to anything yet but I'd say if the result is any greater than 320 kilobits per second, something is lying along the way. The SP format is only 292kbit/sec and ATRAC isn't that miraculous.
        • An alternative ATRAC decoder (and encoder...) exists in the form of "atracdenc" here: https://github.com/dcherednik/atracdenc
        • I'd just go with converting to a very common lossy format once now (320 kbps MP3 if you want to overdo it, but 128/192 is probably "just fine", and if it's spoken word only - not music - even less than that should be plenty - YMMV) for everyday use and easy accessibility, and keep the AEA files for long-time archival (you can always turn the AEA files into WAV/FLAC using ffmpeg).
        • ffmpeg's source code won't go away that fast, so there will always be the possibility of converting later (assuming the AEA files are smaller than a corresponding FLAC file, so you can save storage space by hanging onto the AEA files + ffmpeg instead of just FLAC). Also, VLC will most likely "forever" be able to play back AEA files on the fly.
    • Guides
    • Tools
    • Other Audio Containers
  • Troubleshooting

 

Published in Other Devices
Read more...
Thursday, 12 September 2024 08:53

Divi Contact form will not send if using a free email address

Background

This article is based on the server running cPanel/WHM, the website CMS is WordPress with Divi as it's template, but the logic will most likely apply to a lot of other platforms.

Issue

I have a contact form that will not send the emails when the submitted details contain a free email address even though the contact form says the message was sent.

The failed emails do not appear in "Track Delivery" in cPanel so I have nothing to inspect and figure out what is going on.

If you do not manage your emails locally then an emails that are sent but are bounced will be returned to the server defined in the MX entry.

Cause

  1. Outbound emails are being scanned for SPAM by SpamAssassan (spamd).
  2. The email in the `Email Address` field on a Divi contact form is used by default for the <reply-to> header.
  3. Emails with freemail addresses present in the header score extra SPAM points.
  4. Because of the extra points caused by having freemail addresses present, the emails are scored just above the SPAM score threshold and they become flagged as SPAM.
  5. Flagged emails are modified and then delivered to the system mailbox in cPanel, they are never passed to the MTA (Exim).
    • The modification and redirects are performed by spamd.
    • cPanel "Track Delivery" shows transactions by Exim, but because the email never gets to Exim, there will be no record of the delivery or transport of the email.
    • A modified email in the system mailbox might look something similar to this:
      ### Title ###

Mail failure - rejected by local scanning code

### Message Body ###

A message that you sent was rejected by the local scanning code that
checks incoming messages on this system. The following error was given:

  This message was classified as SPAM and may not be delivered

------ This is a copy of your message, including all the headers. ------

.....

Solutions

These are some solutions an workarounds, pick which ever best suits your needs, which ever you pick you should monitor the situation for a while to make sure the changes you implement are working as expected.

Use SMTP plugin for WordPress

  • Using this method reduces the outbound SPAM score massively
  • Requires you to setup an email account for every website. Do not use the cPanel system account for emails as this is a security risk.
  • Your server does not need to handle email for the domain for you to be able to create an email account locally and send from it as normal, however I do recommend you make sure the SPF record is correctly set and that DKIM is not going to be an issue.
  • My recommended plugin is: FluentSMTP | WordPress.org

Remove the Freemail address from the email header

  • When using Divi, the email address on a contact form is used by default as the reply address Moving the client's email address to the content only would most likely reduce the SPAM score below 5 and therefore all the email to be sent.
  • In Divi you would use Message Patterns to alter the content of the email.

Increase the outbound SPAM score threshold

  • This change would be global
  • WHM --> Exim Configuration Manager --> Basic Editor --> Apache SpamAssassin Options -->
    • Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting: Off
    • Scan outgoing messages for spam and reject based on defined Apache SpamAssassin™ score: 8.5
    • Do not forward mail to external recipients if it matches the Apache SpamAssassin™ internal spam_score setting: Off
    • Do not forward mail to external recipients based on the defined Apache SpamAssassin™ score: 8.5

NB: 8.5 = Default Threshold + PHP_SCRIPT + KAM_COUK

Disable outbound SPAM scanning

  • This change would be global.
  • This is not the preferred method as there is not outbound SPAM checking which can allow abuse.
  • WHM --> Exim Configuration Manager --> Basic Editor --> Apache SpamAssassin Options -->
    • Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting: Off
    • Scan outgoing messages for spam and reject based on defined Apache SpamAssassin™ score: Disabled
    • Do not forward mail to external recipients if it matches the Apache SpamAssassin™ internal spam_score setting: Off
    • Do not forward mail to external recipients based on the defined Apache SpamAssassin™ score: Disabled

Disable certain SpamAssassin tests

You can reduce the SPAM score by disabling or cancelling out certain tests, but this requires a lot more time to setup.

Notes

WordPress - Email subsystem

  • mail()
  • Email Logging
  • Code Walk through 
    ## wordpress/wp-includes/PHPMailer/PHPMailer.php

'instantiate' => 'Could not instantiate mail function.',

-->

mailPassthru($to, $subject, $body, $header, $params)

-->

$result = @mail($to, $subject, $body, $header, $params);

-->

mail()              # This is a wrapper for sendmail

-->

sendmail            # cpanel sendmail is blocking gmail addresses

-->

sendmail returns true or false

WHM - Settings

  • General
  • Tutorial
  • SpamAssassin’s internal spam_score
    • Is calculated by summing the scores of various matched rules.
    • This is not the SPAM threshold, but just the score that SpamAssassin assigns to the email after all of the tests.
    • How to Configure SpamAssassin in cPanel – PhilmoreHost
      • Configuring your internal SpamAssassin score threshold = Specify a score under Apache SpamAssassin bounce spam score threshold.  ?
  • cPanel Tutorial Series 6: using email - TransIP - This is the sixth part of our cPanel Tutorial Series.
    • Apache SpamAssassin ™ reject spam score threshold
      • Incoming messages that are designated as spam are stopped instead of subjects being rewritten (see Filters), or the mail is moved to your spam box. You will never see messages that meet these criteria in your mail. If you use this option, we advise you to use a fairly generous score so only messages that are definitely spam are stopped, for example with a score of 10-11.
    • Apache SpamAssassin ™ bounce spam score threshold
      • Sends a bounce email to the sender of spam when mail reaches the set score. This can work positively and negatively: a conscious spammer knows that you are using a filter and will try to find something to work around it, but someone with an infected computer / server will find out more quickly that he or she has an infected computer / server thanks to a bounce message.
    • Scan outgoing messages for spam and reject based on the Apache SpamAssassin ™ internal spam_score setting
      • Scans all outgoing messages from your VPS and stops all messages that reach the set spam score (default 5). 
        This is a very useful option that we highly recommend. For example, suppose you created cPanel accounts for your customers and they host their own sites but never update them, then there is a plausible chance that sooner or later a vulnerability will be found, and a domain will start sending spam. Thanks to this option, you get rid of that spam, so your VPS does not get a bad IP reputation.
    • Scan outgoing messages for spam and reject based on defined Apache SpamAssassin ™ score
      • This option does the same as the previous one, but this allows you to determine the spam score upon which SpamAssassin takes action when outgoing mail is recognized as spam.
    • Do not forward mail to external recipients if it matches the Apache SpamAssassin ™ internal spam_score setting
      • Mail that is addressed to your VPS and which is redirected is also scanned by SpamAssassin and stopped if it is marked as spam.
    • Do not forward mail to external recipients based on the defined Apache SpamAssassin ™ score
      • Same as the previous option but allows you to set a score yourself.
    • Score
      • By default, SpamAssassin marks mail as spam when it reaches a score of 5. This base value can only be adjusted via command line using the following commands: 
        sudo nano /etc/mail/spamassassin/local.cf
      • The particular rule to alter is: 
        #   Set the threshold at which a message is considered spam (default: 5.0)
#
# required_score 5.0
  • acl_not_smtp and acl_smtp_data
    • Both acl_not_smtp and acl_smtp_data can count towards the Apache SpamAssassin™ internal spam_score setting, depending on how your Exim configuration is set up.
    • There is no proper documentation from cPanel for these options.
    • Ypu can expose the underlying code in the GUI by using the 'Advanced Editor'.
    • acl_not_smtp:
      • outgoing_spam_scan (Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting)
      • This refers to Exim's Access Control Lists (ACLs) that apply to non-SMTP email submissions, such as mail sent from local scripts or PHP applications. This is often used to set rules for handling outbound mail generated by websites, contact forms, or local applications.
      • Purpose: To control and filter outgoing email messages that are not sent via SMTP, such as web apps or local daemons.
      • Advanced Settings (Under Advanced editor):
        warn
        condition   = ${if forany{<, $recipients}{!match_domain{${domain:$item}}{:+relay_domains}}}
        set acl_m_outbound_recipient = 1

warn
        condition   = $acl_m_outbound_recipient
        condition   = ${if <={$message_size}{1000K}}
        condition   = ${if !eq{$originator_uid}{0}}
        condition   = ${perl{spamd_is_available}}
        set acl_m_spam_scan_enabled  = 1

deny
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        spam        = cpaneleximscanner/defer_ok
        message     = This message was classified as SPAM and may not be delivered
        log_message = "SpamAssassin as cpaneleximscanner detected OUTGOING not smtp message as spam ($spam_score)"

warn
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        log_message = "S
    • acl_smtp_data:
      • outgoing_spam_scan (Scan outgoing messages for spam and reject based on the Apache SpamAssassin™ internal spam_score setting)
      • Purpose: The acl_smtp_data ACL is used to inspect the content of the email before it's accepted for delivery. It is commonly employed for tasks such as:
        • Spam Filtering: Checking the email content against spam filters (like SpamAssassin).
        • Virus Scanning: Scanning the email for malware or viruses.
        • Attachment Filtering: Restricting certain types of file attachments or scanning them.
        • Rate Limiting or Message Size Checking: Ensuring that message sizes adhere to server limits.
        • Custom Message Rejection: Applying custom rules to reject messages that contain specific content or violate policies.
      • Advanced Settings (Under Advanced editor):
        warn
        condition = $acl_m_outbound_recipient
        condition = ${if <={$message_size}{1000K}}
        condition = ${if !eq{$acl_c_authenticated_local_user}{root}}
        condition = ${if !match{$authenticated_id}{\N^__cpanel__service__auth__[^+%:@]+$\N}}
        condition = ${perl{spamd_is_available}}
        set acl_m_spam_scan_enabled = 1


deny
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        spam        = ${if eq{$acl_m1}{}{cpaneleximscanner}{$acl_m1}}/defer_ok
        message     = This message was classified as SPAM and may not be delivered
        log_message = "SpamAssassin as ${if eq{$acl_m1}{}{cpaneleximscanner}{$acl_m1}} detected OUTGOING smtp message as spam ($spam_score)"

warn
        condition   = $acl_m_outbound_recipient
        condition   = $acl_m_spam_scan_enabled
        log_message = "SpamAssassin as ${if eq{$acl_m1}{}{cpaneleximscanner}{$acl_m1}} detected OUTGOING smtp message as NOT spam ($spam_score)"

 

WHM - Outbound Filtering

  • I am not sure if it uses the per user/cPanel custom rules (as appropriate) for calculating the spam_score when outbound filtering, I cant see why it doesn't though.
  • When an email has been forwarded after being scanned for SPAM it will have an additional header with it's score.
  • How to configure Spam Assassin to scan outgoing mail. – cPanel - This article covers configuring outgoing mail to be scanned by Spam Assassin.
  • Enable Outgoing Spam Filtering Using SpamAssassin - eukhost - This guide explains how to enable Outgoing Spam Filtering Using SpamAssassin.
  • Configure SpamAssassin to block outgoing form mail – cPanel
    • There are actually two assigned spam scores, one when you receive the email locally and one that is assigned to it when it's scanned outbound.
    • In this case Spam Score: X-Spam-Score: 100 refers to the score assigned on delivery to the server.
    • The score that is being assigned to the server when it is sent is the Outgoing Spam Score which in this case is below the threshold of 2: X-Outgoing-Spam-Status: No, score=1.7 So with a spam score of 1.7 SpamAssassin isn't seeing this email as spam and sends it.
  • How-To Prevent Exim From Forwarding Spam – cPanel - This article covers configuring Exim to not forward mail based on the message's Apache SpamAssassin™ Spam score.

SpamAssassin - Example rules that can be triggered

To find the rules, search for them in the following format: describe KAM_DMARC_STATUS

SpamAssassin - Managing rules

  • General
  • KAM Ruleset
    • This is not part of the Spamassassin base code.
    • The is a 3rd party ruleset that is included with cPanel/WHM and is on by default.
    • In cPanel/WHM: /etc/mail/spamassassin/KAM.cf
    • KAM Ruleset | The McGrail Foundation
      • The KAM Ruleset is a set of Apache SpamAssassin rules developed and used on our systems.
      • This ruleset has been in active use and development since May 2004 and provides a significant boost to the performance and efficacy of a stock installation of Apache SpamAssassin.
    • KAM Ruleset Channel | The McGrail Foundation - The McGrail Foundation Home Page

SpamAssassin - What rules caused an email to get flagged?

  •  Exim Mail Log - Example Entry 
    Sep  1 13:56:08 srv spamd[414141]: spamd: connection from localhost [127.0.0.1]:43490 to port 783, fd 6
Sep  1 13:56:08 srv spamd[414141]: spamd: setuid to cpaneleximscanner succeeded
Sep  1 13:56:08 srv spamd[414141]: generic: trusted_networks doesn't contain internal_networks entry '0/0'
Sep  1 13:56:08 srv spamd[414141]: spamd: checking message <XXXXXXXXXXXXXXXXZldVRrQX6dyBuRHk9yR9jnJNGRM@www.example.co.uk> for cpaneleximscanner:992
Sep  1 13:56:18 srv spamd[414141]: spamd: identified spam (5.9/5.0) for cpaneleximscanner:992 in 10.3 seconds, 3794 bytes.
Sep  1 13:56:18 srv spamd[414141]: spamd: result: Y 5 - FREEMAIL_FORGED_REPLYTO,KAM_COUK,KAM_DMARC_STATUS,PHP_SCRIPT,T_SCC_BODY_TEXT_LINE,URIBL_BLOCKED scantime=10.3,size=3794,user=cpaneleximscanner,uid=992,required_score=5.0,rhost=localhost,raddr=127.0.0.1,rport=43490,mid=<XXXXXXXXXXXXXXXXZldVRrQX6dyBuRHk9yR9jnJNGRM@www.example.co.uk>,autolearn=no autolearn_force=no,shortcircuit=no
  • spam - Where can i find explanation of a SpamAssasin scores like SPOOFED_FREEMAIL? - Server Fault 
    ## This adds the score
/var/lib/spamassassin/3.004006/updates_spamassassin_org/20_freemail.cf

## This is the list of the Freemail domains
/var/lib/spamassassin/3.004006/updates_spamassassin_org/20_freemail_domains.cf

## An old list
/var/lib/spamassassin/3.004006/updates_spamassassin_org/20_freemail_mailcom_domains.cf
  • How to find the descriptions of SpamAssassin rules to help understand why a message was marked as spam – cPanel - If you find that SpamAssassin is marking messages as Spam when it should not be, or that SpamAssassin is not marking messages as spam when it should be, you can use the following procedure to find out what rules were applied to a message and review the description of the applied rules for additional context.
  • How can I check why SpamAssassin applied a particular score? – cPanel - Some email messages are flagged or rejected as spam, but I'm not sure why. Can I check how SpamAssassin is applying this score?
  • How to find SpamAssassin scan results – cPanel -When SpamAssassin scans an email the results are saved to the /var/log/maillog file. This can be used to determine what rules are being triggered by the message. 
    /usr/local/cpanel/logs/spamd_error_log

SpamAssassin - Here’s a breakdown of how this score is calculated:

I got this from my VPS provider:

SpamAssassin’s internal spam score is calculated by summing the scores of various matched rules.

  1. Rule-Based System
    • SpamAssassin uses a large set of predefined rules to analyze various parts of an email, including:
      • Email headers (e.g., suspicious sender domains, mismatched or forged headers).
      • Message body content (e.g., words commonly associated with spam, HTML content, or embedded links).
      • Attachments (e.g., dangerous file types, large attachment sizes).
      • Blacklists (e.g., checking if the sender's IP address or domain is on a spam blacklist).
    • Each rule is assigned a specific score, positive or negative, depending on how indicative it is of spam. These scores are predefined, but you can customize them in SpamAssassin’s configuration files.
      • Positive score: Increases the likelihood that the message is spam.
      • Negative score: Decreases the likelihood that the message is spam (e.g., messages from trusted sources might get a negative score).
  2. Cumulative Scoring
    • When SpamAssassin scans an email, it applies multiple rules. The total spam score is the sum of all the individual rule scores that match the email.
    • Example: 
      Rule    Description    Score
HTML_MESSAGE    Email contains HTML    1.0
BAYES_99    Bayesian filter suggests 99% spam probability    3.5
RCVD_IN_SPAMHAUS    Sender's IP is in the Spamhaus blacklist    2.0
DKIM_VALID    Email has a valid DKIM signature    -1.0
Total Score        5.5
      • In this example, the email’s total spam score is 5.5.
  3. Spam Threshold
    • The total score is compared to the spam threshold configured in cPanel/WHM. The default threshold is usually 5.0. If the total score exceeds this threshold, the message is flagged as spam.
      • Spam Threshold of 5.0: If an email’s score exceeds 5.0, it is considered spam.
      • Spam Threshold of 7.0: If the threshold is set to 7.0, only messages with a spam score higher than 7.0 will be flagged as spam.
    • You can adjust the spam threshold score in the SpamAssassin configuration settings to make the filter more or less aggressive.
  4. Bayesian Filtering (Adaptive Learning)
    • SpamAssassin also uses a Bayesian filter, which is a machine-learning technique that adapts to the types of emails received over time. When trained with both spam and non-spam emails, this filter becomes more accurate in determining whether an email is spam by calculating the probability based on previously learned patterns.
      • The Bayesian filter assigns probabilities to words or phrases, which contribute to the overall spam score.
      • SpamAssassin rules like BAYES_50 (50% spam probability) or BAYES_99 (99% spam probability) are examples of how this filter impacts the overall score.
  5. Custom Rules and Scoring
    • You can also create custom rules and assign them specific scores. This allows you to adapt SpamAssassin to your organization’s needs by:
      • Increasing the score of certain patterns (e.g., emails with specific attachments).
      • Decreasing the score for emails from trusted domains or senders.
  6. Adjusting the Spam Score Multiplier
    • In cPanel and WHM, the spam score is multiplied by 10 for internal use. For example, if you set a spam score threshold of 5.0 in WHM, it will show up as 50 in log files and email headers.
    • For instance, if you see the following in an email header, It corresponds to a score of 4.0 (since 40 divided by 10 is 4.0), which is below the default spam threshold of 5.0, so the email wouldn’t be flagged as spam.
      X-Spam-Score: 40

 

Published in General
Read more...
Thursday, 01 August 2024 10:23

My Meta Quest Notes

These are a collection of my notes for the Meta Quest 3

General

  • Official Sites
  • Other Sites
  • Specs
  • Performance
  • Equipment
    • VR Treadmills
    • Controller Stocks
  • Maintenance / Looking after your Quest
  • Legal / Warranty
    • Meta might be trying to get around EU 2 year warranty with Quest 3 or they already did | Reddit
      • Consider Duration from the T&Cs: 1 year from the date of purchase or delivery of the Product, whichever is later (the “Warranty Period”). If you are a consumer, this does not affect your statutory rights which may provide for longer warranty coverage.
      • You're mixing the legal guarantee (2 years in the EU, regarding the seller of the product) with the commercial warranty (1 year, in most cases regarding the manufacturer). A lot of companies only offer 1 year of commerical warranty (like Apple for example).  
      • this. also important to know: the one year warranty that apple and meta offer are voluntary. but as nightkrwlr said: it's different from the two-year consumer law rule.
      • = 2 Years warranty
    • Meta Quest EU/EEA/UK consumer right of withdrawal information | Meta Quest - Under applicable law, consumers in the European Union (EU), the European Economic Area (EEA) and the UK have a right to withdraw from or cancel certain purchases for a refund.
    • Meta Horizon Store Terms | Meta Quest - No meta description
  • Sign up issues
    • The sign up form will only accept UK postcodes in this format SW1 1LF and not SW11LF
  • Meta keep trying to charge £59.99 for my free subscription
    • I could not get the 6 months free to work, my bank kept on wanting to charge me £59.99 even thought it said the due amount today was £0.00
      By ticking this box and clicking the Confirm button, you agree that the content will immediately begin downloading onto your device, and you acknowledge that you will thereby lose any statutory right of withdrawal (EU/EEA) or cancellation (UK). Learn more
You will be charged £59.99, including tax, when this free trial ends on 26 Feb 2025 and every year when this subscription is automatically renewed until you cancel. Cancel at any time in your account settings at least 24 hours before the end of this free trial or the next billing date to avoid future charges.By selecting Confirm, you agree to the Meta Quest Store Terms.
    • So this is what I did to fix it:
      • Created a virtual card with £10 on it to prevent my account from getting charged.
      • Using the phone APP I signed up using my information and the virtual card
      • When I get to the point it wants to test my card is valid, the amount being charged to my account is £59.99
      • A 2FA notice appeared in a browser thing, I clicked cancel on it ignoring any messages on my phone to accept or deny the transaction through my banking App.
        • This is not the link that is sent to your phone's banking app asking you to approve.
        • Never approve it and don't cancel it either.
        • I let the request in my banking app expire. It should only take 10 mins.
      • Bingo, it works
    • Research
  • Cloud Backup
    • About cloud backup | Meta Store
      • When cloud backup is turned on, Meta backs up your device's app data, such as app progress or app settings, to the cloud. This allows you to easily pick up where you left off in a game if you reinstall an app, factory reset your device or set up a new device.
      • To keep your cloud backup data safe, your app data is encrypted on the device and remains encrypted on our servers.

Meta Quest+

  • Meta Quest+ subscription | Meta Store
    • Experience the ultimate gaming adventure with Meta Quest+. Enjoy instant access to over 25 games, exclusive deals and monthly drops. Cancel at any time with no hidden fees.
    • Meta Quest+ is your subscription for premium games and more. Discover and play on repeat. You'll get instant access to a growing content catalogue and curated monthly drops of top titles, all for just £7.99 a month. Plus, you'll get exclusive deals and offers as a subscriber. Get ready to explore new apps and worlds.
  • Meta Quest Plus - Homepage | Meta Store
    • Claim your free games here every month, both the permanent ones and the ones in the rotating games catalogue.
  • You get a selection of free games every month in 2 categories, both of which require you to redeem them to gain access but they have different retention terms.
    • Monthly Games
      • Every month you are given 2 games you can redeem.
      • You need to redeem these games, when offered, to keep them.
      • Once redeemed, these games are added to your library permanently.
    • Games catalogue
      • The majority of the game catalogue will remain consistent month over month, but each month, one or more titles may leave or be added in order to keep content fresh.
      • if you have a redeemed a game that is removed from the `Games catalogue` you will loose access to it and will need to purchase it to continue using it. Your game saves should remain preserved.
  • What happens if I unsubscribe or resubscribe?
    • Once you are no longer a paying Meta Quest+ subscriber, you will lose access to all previously redeemed Meta Quest+ titles and not be able to redeem any more titles.
    • When you resubscribe, you will regain access to all previously redeemed Meta Quest+ titles and the titles that are currently available for as long as you are a subscriber.
  • Examples of Meta Quest+ game listings
    • Redeem
    • Redeemed
    • Redeemed - Soon to be removed from the `Games catalogue`

 

Q&A

Apps

  • System
  • YouTubeVR
    • Experience your favourite YouTube channels, videos and creators in virtual reality.
    • The YouTube VR app turns every video on the platform into your own virtual reality experience and reimagines YouTube as a 3D world you can explore from the inside.
    • Cannot load the app, keeps on crapping out
      • 5 Ways to Fix YouTube VR if It’s Not Working on Oculus Quest - To fix Oculus Quest YouTube VR not working issue, you will need to tweak some settings and follow additional steps shown in this article.
      • Solution
        • Setup you boundary area before you start YouTubeVR
        • You must share boundary information when asked otherwise the app will just crap out with no message.

Casting and Inputting

Remote Desktop / Productivity

Casting from Quest to (Phone|Computer)

Play PCVR Games on Quest

HDMI Input (Xbox One / SteamDeck / Playstation)

Xbox One

Play Xbox games on Quest (General)

You can pair your Xbox controller on your Quest for using with games.

  • Methods
    • Xbox One HDMI Output --> HDMI USB capture dongle --> quest
    • Xbox Gamepass
      • is natively supported on Quest 3
      • A.k.a Xbox Cloud Gaming (beta) / Xbox App
      • No Xbox needed
    • Xbox --> PC --> Quest
      • Uses Virtual Desktop App on the Quest and PC.
    • As PC VR Headset (needs a decent PC)
  • 4 Ways to Play Xbox Games On Oculus Quest / Quest 2 – Smart Glasses Hub
    • Can you also use the Oculus Quest and Quest 2 VR headsets to enjoy some Xbox gaming?
    • The short answer is that you can play Xbox games on both the Oculus Quest and Quest 2 headsets.
    • It is possible to stream the Xbox console to your headset or alternatively play Xbox games without the console by using the Xbox Cloud gaming service.

Play Xbox games on Quest (via Xbox App)

  • Playing Xbox on Oculus Quest 3 | OculusQuest | Reddit
    • I got the Xbox app running on the Oculus Quest 3. For anyone wanting to know how it's done, follow the steps below.
      1. Enable developer mode on Oculus. The requires a developer account which anyone can set up. It's super easy. This give you access to the library folder for unknown sources, more on this later.
      2. Install Side Quest on a PC
      3. Download File Manager APK from https://flashlight-clock-file-manager.en.uptodown.com/android
      4. Follow Side Quest steps to connect your Oculus
      5. Upload file manager to Oculus via side quest
      6. Get on your Oculus and use the web browser to search for the Xbox app APK and download from uptown.
      7. Go to your library, click the search bar, use the drop down to go to "unknown sources"
      8. use the file manager to install the Xbox APK
      9. connect an Xbox controller to the headset via Bluetooth setting
      10. log into Microsoft account and enjoy!
      11. It seems like a lot of steps but it only took me about 20 minutes altogether.
    • Other Comments
      • For some reason the xbox app uses low resolution (I'm using quest pro), still playable but sometimes annoying
      • Surprisingly low in my experience, but it looks like they use a low bitrate to achieve that so it doesn’t look great. There’s a custom Xbox remote play app someone made that lets you adjust the bitrate so that may help.
      • I know Xbox Cloud Gaming is officially coming to the Quest in December and I've seen some people assume that means you'd be able to remote play as well, but I'm not actually sure that'll be the case since I don't think they've specifically mentioned remote play.
      • For those wondering about the screen resize, open this menu on the oculus and hit "switch view". After that you should be able to resize windows.
      • Also, if anyone has any issues where the Xbox controller uses head tracking, press the start and back button on the controller at the same time and it will switch the controls.
      • Sidequest (advanced) can install apks directly to the oculus headset
      • FYI, there is a way easier way to do this. Just download Fluid on App Lab. Works out of the box.
  • How to play Xbox games on the Meta Quest 3 | Trusted Reviews - You can stream Xbox games directly to your Meta Quest 3, as well as the Quest 2 and the Quest Pro. Here's how.

Casting to a Xbox One

Casting from a Xbox One

  • How to Stream Xbox One to Your PC
    • You can stream Xbox One to any PC as long as they're both running Windows and are connected to the same network. Here's how to do it.
    • Page is faulty, click on the TOC links on the left hand side to navigate.

Play Xbox games on your PC

Purchases

random thing to look at later, I have not made a descicion and do not know the quality of the brands, this is more an idea holders

Troubleshooting

  • Solved: Meta Quest app - stuck on the "Pair a new device" ... - Meta Community Forums - 1153444
    • Q:
      • I'm stuck on the "Pair your headset with the Meta Quest app to continue." step during the Meta Quest 3 setup. The smartphone app tells me to "Allow permissions", which I have already done. I have "Use precise location" enabled as well. Pressing the blue "Continue" button does nothing. The Meta Quest 3 button is greyed out. I have a code displayed in the headset that I'm supposed to input somewhere in this app. What do I do?
      • My Meta Quest app is up to date. I have already installed all system updates on my smartphone. My smartphone and Meta Quest 3 are on the same WiFi network.
    • A:

      • I had the same problem. Make sure your location is turned on from the swipe down panel.
  • Solved: Passthrough turns on - can't use menu button - Meta Community Forums - 1078491
    • Q: My Oculus would not load the menu screen without passthrough on. With passthrough on the oculus would not load apps/games. The app on my phone says the apps are open on the device. 
    • A:
      Hey there! Thank you for letting us know the experience you're having with your device as this is not what we want. We do have a few users having the menu button disappear and a Factory Reset has gotten them back on track. However, I am not seeing some users not having the button load overall even when factory resetting. 
  • Stuck on Passthrough with Menus not working - Meta Community Forums - 1173053
    • Q: I'm stuck in pass through but the home music cuts in and out and I can't open any menus or nothing
    • A: With the device being stuck viewing your play area, we'd like to hard reboot the headset by holding the power button down for 30 seconds. 
  • Hand tracking not working
  • Cannot login to the Meta Quest community forum

    This call accesses the User ID platform feature, which requires certifying through the Oculus Data Use Checkup program. Please visit this page for more detail: https://developer.oculus.com/distribute/publish-data-use/. If you have already completed a Data Use Checkup, please ensure that all compliance issues are resolved by visiting the Compliance Dashboard: https://developer.oculus.com/resources/publish-compliance-dashboard/.
    • If you get this error below when you try and login to the Meta Quest community forum then you should know:
      • this is nothing you have done but is the garbage infrastructure and support team from Quest. A billion dollar corporation cannot keep their own API key updated and then when it needs swapping takes nearly 2 weeks to fix. Meta need to change their support team from wherever they have outsourced it to.
      • This is a common occurrence
    • Solved: Login to user forum problems | Meta Community Forum
    • Developer account data use checkup. | Overclockers UK Forums - Has anyone with a dev account had this pop up when trying to log into the meta forums
  •  not authorized to relay messages to the server that reported this error
  • Meta Quest app - stuck on the "Pair a new device" screen - Meta Community Forums - 1153444
    • Q:
      • I'm stuck on the "Pair your headset with the Meta Quest app to continue." step during the Meta Quest 3 setup.
      • The smartphone app tells me to "Allow permissions", which I have already done.
      • I have "Use precise location" enabled as well.
      • Pressing the blue "Continue" button does nothing.
      • The Meta Quest 3 button is greyed out.
      • I have a code displayed in the headset that I'm supposed to input somewhere in this app.
      • What do I do?
    • A:
      • Make sure your location is turned on from the swipe down panel.

 

Published in Other Devices
Read more...
Page 3 of 96