You are here:Home»KB»Programming»My Visual Studio Code Notes
Sunday, 03 November 2024 15:26

My Visual Studio Code Notes

Written by

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 optimised 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 customisable 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 course.
  • Code 2020 - YouTube - Hi, I'm Matt Bierner! I work on VS Code and created this channel to share some of my favorite tips and tricks for working efficiently with VS Code.

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.
  • TOML: Tom's Obvious Minimal Language
    • A config file format for humans.
    • TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics. TOML is designed to map unambiguously to a hash table. TOML should be easy to parse into data structures in a wide variety of languages.
    • A configuration file format designed to be easy to read and write. It uses a simple syntax that consists of key-value pairs, sections, and comments.

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 and npm 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 (includes npm manager)

  • 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 and npm 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.
    • Use the default values uness you know why you are changing them.
    • 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.

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?
    • What is Node.js?
      • Node.js is a runtime environment built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript code on the server side, enabling the creation of fast, scalable, and efficient network applications.
    • Difference between Node.js and JavaScript - GeeksforGeeks - This article explores the key differences between JavaScript and Node.js, detailing their roles, capabilities, and use cases to help you understand which technology is best for your project.
    • Node JS vs JavaScript: What's the Difference? - Compare Node JS vs JavaScript to understand their unique roles, and learn which technology is better suited for backend development or frontend coding.
    • What is the difference between Node.js and JavaScript? | Reintech media - This tutorial covers the differences between Node.js and JavaScript, including their history, use cases, and code examples. JavaScript is primarily used for client-side programming in web browsers, while Node.js enables developers to build server-side applications using JavaScript. By understanding their differences, you'll be better equipped to choose the right technology for your projects.
    • NodeJS vs JavaScript - A Detailed Comparison | Flexiple - Flexiple
      • Want to know how NodeJS compares to JavaScript? Check out this page for a detailed comparison between the two across various factors such as advantages, disadvantages, performance and use cases among others.
      • JSON5: is a superset of JSON, which includes all the functionality of JSON and adds additional features that make it easier to work with. However, JSON5 is not a widely adopted standard and may not be supported by all JSON parsers. JSON is a more widely used and accepted format, but JSON5 can be a useful tool for certain use cases where additional flexibility is needed.
      • JSONC:  JSONC (JSON with comments) is a proposed extension to the JSON format that allows developers to include comments in their JSON data structures.
      • JSON5 vs JSONC: JSONC was created by Microsoft and is used in VS Code. While JSONC is an extension of JSON, it lacks a specification and is incompatible with other tools and tooling. JSONC allows developers to add comments to their JSON data, but that's the only significant benefit it offers over JSON.
    • JSON5 & JSONC Explained: Lenient JSON Standards and Formatting Support - Go Tools
      • Understand the new syntax, compatibility differences, and formatting tools for JSON5 and JSONC so you can write more readable, safer data structures.
      • JSON (strict) vs JSON5 vs JSONC comparison tables
      • Spec maintainers:
        • JSON = ECMA
        • JSON5 = Community (A. Rauschmayer)
        • JSONC = Microsoft / VS Code
  • The difference between: .js, .cjs, .mjs
  • 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.

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",
}

Tutorials

  • 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

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.

Multi-root Workspaces  (Monorepo)
  • Creating
    • Create one root project folder
    • In this folder create single folder for each repo
  • Example structure 
    /my-projects
  /node_modules ← shared
  /project-a
    /src
  /project-b
    /src
  /project-c
    /src
  • Using
    • Utilise VSCode Multi-root Workspaces configurations
    • Install the node modules into the root project folder only
  • Links
    • Multi-root Workspaces - You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
    • Multi-root workspaces - VS Code extension | Biome
      • A multi-root workspace is a workspace where there are multiple workspace folders. In this case, the extension will automatically create a Biome instance per workspace folder.
      • Nice diagram
    • Documentation update - Multi-root workspaces - What triggers this · Issue #646 · biomejs/biome-vscode · GitHub
      • Q: What triggers the multi-root behaviour of Biome?
      • A:
        • So Biome can tell if these folders are actually workspaces rather than just normal folders. I am guessing folders and workspaces are internally referenced differently but appear the same in the explorer.
        • That's correct. Actually, VS Code makes this distinction. When the extension starts, it retrieves the list of existing workspace folders and starts an LSP session for each (assuming biome is enabled in that workspace folder)
Symlinks

 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.

User Interface Overview

It is good to know what the different things you are using are called and what they do. This makes it much easier for customisation later.

User interface - A quick overview of the Visual Studio Code user interface. Learn about the editor, window management, and special UI to handle source control, extension management, full text search and more.

Visual Studio Code (VS Code) provides a highly customizable and intuitive user interface designed to maximize productivity. Its layout is divided into several key components, each serving a specific purpose to streamline development workflows. Key Components of the VS Code UI

  1. Editor: The central area where you edit files. You can open multiple editors side by side, both vertically and horizontally, to work on multiple files simultaneously.
  2. Primary Side Bar: Located on the left, it includes views like the Explorer for managing files and folders. You can move it to the right or toggle its visibility using shortcuts like Ctrl+B (Windows/Linux) or Cmd+B (macOS).
  3. Secondary Side Bar: Positioned opposite the Primary Side Bar, it can hold additional views like Chat. You can drag and drop views between the Primary and Secondary Side Bars.
  4. Activity Bar: Found on the far left, it allows you to switch between views such as Explorer, Search, Source Control, and Extensions. You can customize its position or hide it entirely.
  5. Status Bar: Located at the bottom, it displays information about the current project, such as Git branch, file encoding, and line/column numbers.
  6. Panel: Positioned below the editor, it contains tools like the integrated terminal, output logs, and debug information. You can move the Panel to the left or right for better vertical space.
  7. Tabs: Open files are displayed as tabs above the editor. You can reorder, pin, or group tabs for better organization. Preview tabs are italicized and reused unless explicitly opened.

Advanced Features for Productivity

  • Side-by-Side Editing: Split the editor using shortcuts like Ctrl+\ (Windows/Linux) or Cmd+\ (macOS) to view and edit files simultaneously.
  • Floating Windows: Drag an editor tab out of the main window to create a floating window, ideal for multi-monitor setups.
  • Minimap: A code outline on the right side of the editor for quick navigation. You can move it to the left or disable it via settings.
  • Sticky Scroll: Displays the starting lines of visible nested scopes at the top of the editor for better navigation within a file.
  • Breadcrumbs: A navigation bar at the top of the editor showing the file path and symbol hierarchy. It can be toggled on or off.

Customization Options

  • Themes: Choose from a variety of color themes or create your own. Use the command palette (Ctrl+Shift+P or Cmd+Shift+P) to search for "Preferences: Color Theme."
  • Settings: Modify settings globally or per workspace using the settings.json file. Access it via Ctrl+, (Windows/Linux) or Cmd+, (macOS).
  • Zen Mode: Focus on your code by hiding all UI elements except the editor. Activate it with Ctrl+K Z (Windows/Linux) or Cmd+K Z (macOS).

Navigation and Views

  • Explorer View: Manage files and folders in your project. Drag and drop files, create new ones, or open them in the integrated terminal.
  • Outline View: Displays a symbol tree of the active file, helping you navigate its structure.
  • Timeline View: Shows the history of file changes, including Git commits and local saves.

Profiles and Extensions

  • Profiles: Save and switch between different configurations, including extensions, settings, and layouts. Create profiles via the command palette.
  • Extensions: Enhance functionality by installing extensions from the marketplace. Manage them through the Extensions view in the Activity Bar.

VS Code's UI is designed to be flexible and adaptable, allowing developers to tailor it to their specific needs and workflows. Whether you're working on a single file or managing a large project, the interface provides tools to optimize your productivity.

General

Panels

These issues and solutions pertain to the panels and their features. Search has its own section becasue it spans more than the panel.

Pressing F3 in any of the panels will open a Search Menu which as the ability to search or filter that panel's child data as required.

General

  • Moving/Detaching Panels

Explorer (Panel)

 

Terminal (Panel)

  • Moving/Detaching the Terminal (Floating Window or Tab)
    • Move the Terminal into its own standalone window 
      > Move Terminal into New Window
    • Move the Terminal into its own tab 
      > Move Terminal into Editor Area
  • Open Multiple Terminals in VSCode for to allow for Multiple Instances of Your Python Server - YouTube
    • This is AI generated and has some errors but the theory is useful.
    • The command to open multiple Terminals is actually: Ctrl + Shift + '
    • Discover how to easily open multiple terminals in Visual Studio Code (VSCode) to run multiple instances of your Python applications. Perfect for when you need to run a server and a client from the same workspace.

Problems (Panel)

Source Control (Panel)

  • Source Control panel is missing
    • VS Code's Source Control icon has gone missing, how do I get it back? - Stack Overflow
    • Different Methods
      1. You can show the "Source Control" panel with a keyboard shortcut:
        • Ctrl + Shift + G
        • Once it's displayed, from there you can drag it to your menu bar.
      2. Open the Command Palette:
        • Ctrl + Shift + P
        • Then write "source control", then add it.
      3. It is an icon on the left hand side, looks like a USB:
        • Right click on it and select
        • `Move To ` --> `Panel`

Timeline (Panel) (File and Git History)

The Timeline displays a chronological list of changes for the selected file. It integrates with Git (if available) to show commit messages, authors, and timestamps alongside local save points.

  • Tutorials
  • See a file's change history (Timeline)
    • Instructions
      1. Select the relevant file in `EXPLORER`
      2. In `EXPLORER`, exapand the `TIMELINE` panel
      3. Both `Git History` and `Local History` are show but you can filter as required
  • How to compare current file with a previously saved version
    • Have the correct file open that you want to compare
    • In the panels on the left select the TIMELINE panel.
      • This will show you a history of the file.
    • Scroll down to any entry
    • Right click on it and select Compare with File
    • The file will now be displayed in a Diff layout.
      • The current file is on the right.
      • You can only copy code from the old one to the new one.
  • Restoring Previous Versions of a file
    • Right-click on a specific entry in the Timeline.
    • Select Restore Contents to revert the file to that version.
  • Troubleshooting
    • visual studio code - Timeline not showing timeline of current opened file - Stack Overflow
      • Q:
        • I have a new Windows installation, and the Timeline feature doesn't seem to be working properly. Clicking the TIMELINE window does not show the git log.
        • I had to click the Refresh button. It then showed the git log for one particular file. When I changed the opened file in the editor, the TIMELINE window contents did not change. Clicking the Refresh button flashed the TIMELINE window, but it still showed the log for that same one file.
        • Are there additional Timeline settings needed to make it work?
      • A:
        •  It sounds like you pinned a file in the timeline. If you did, just click the pin button in the action bar of the timeline again.

Outline (Panel)

  • Automatically position the outline based on cursor position. 
    • Click on OUTLINE
    • Click on on OUTLINE's 3 balls menu
    • Select `Follow Cursor`
  • Start Outline with collapse items 
    "outline.collapseItems": "alwaysCollapse"
    • Outline: Collapse Items
    • Controls whether Outline items are collapsed or expanded.
    • If you have outline set to always start collapsed, the result is very user friendly as you navigate to the functions, methods or varaible without the rest of the tree being expanded
  • Outline's "Follow Cursor" option is missing from Settings · Issue #173935 · microsoft/vscode · GitHub
    • jrieken
      • That's actually on purpose. The "Follow Cursor" is a UX state property however it is persisted and part of settings sync, meaning it should feel like a setting minus the configurable out-of-the-box default
    • LeCalicot
      • One of the main usage of the outline is to be a "geographical map" of the file to be able to navigate and find the direction. For very long files, it is very useful to jump to another part of the file without having to scroll all the way through. Similarly to a geographical map, one need a "you are here" marker otherwise the map is useless. Here the "follow cursor" is the "you are here" marker.
      • It helps to make a mental map of the file (e.g.: class A is between class E and H) and remembering how a section of the code is associated to the outline. Otherwise the outline is totally decorralated from the code and it becomes hard to answer questions like "should I go up or down to find class E).
      • PS: one could argue that the minimap fills this usecase, but I have understood how anyone can read anything with with such tiny characters)
    • gmccullo
      • I have to turn on follow every time I restart vscode. The rationale for not making this choice pesistent / configurable is idiosyncratic.
      • NB: I am not sure this is an issue anymore.
  • OUTLINE - Additional Collapse and Expand buttons · Issue #273412 · microsoft/vscode · GitHub

Open Editors (Panel)

  • Better Open Editors
    • Groups open editors by package folders or RegEx patterns.
    • This is a replacement for the Open Editors panel, which becomes very cluttered with many open files. Especially in projects with package folders (e.g. in monorepos) you often have many files with the same name open and have difficulties to distinguish them.
  • Open Editors Tree View
    • Display open editors as a file tree with drag and drop support, similar to the regular file explorer.
  • Open Editors Hierarchy
    • Shows currently open editors (tabs) organized by folder hierarchy in the Explorer sidebar.
    • Perfect for managing many open files with enhanced navigation and organization features.
  • Nested Open Editors
    • Display open editors as a file tree with drag and drop support, similar to the regular file explorer.

Multiple Panel Instances (eg: Multiple Explorer Panels)

We will use Explorer (File Explorer) to help explain this as having multiple Explorer panels is a common question but this will also apply to many of the other panels.

There is the Panel, Primary Side Bar and Secondary Side Bar areas where you can put the explorer, but these are only ever available on the Primary Editor Window and there is only ever 1 Explorer panel per VSCode instance.

  • How can I have the explorer tab on more than one window?
    • You cannot currently have the same Explorer view (with synced folder structure, open files, etc.) visible in multiple editor windows within the same VSCode instance.
    • There is only one explorer panel and it is only ever present on the primary editor windows.
    • The explorer panel cannot be detached, made into a floating window or moved to a tab.
    • There are some workarounds with their own nuances. You can open the same folder in multiple instances of VSCode, each with its own Explorer panel showing the same files.
      1. Open the same folder in a new window
        • Each window has its own independant Explorer tab showing the same directory tree.
        • They won’t stay synced (like which file is selected), but you can edit the same files independently.
      2. Duplicate As Workspace in New Window (command)
        • Opens a copy of your current workspace (same folders, layout, and settings) in a new window.
        • Make sure you close this duplicate workspace first to prevent overwriting your real workspace's settings
      3. Use an Extension
        • There are none currently available.
  • Links
Workaround: Open the same folder in a new window
  • Each window has its own independant Explorer tab showing the same directory tree.
  • They won’t stay synced (like which file is selected), but you can edit the same files independently.
  • What it does:
    • Opens a completely empty new VS Code window.
    • This does not share VSCode settings but will honour those in the workspaces settings.json
    • It’s a “fresh instance” — no folder, no workspace settings, no context.
    • You can then manually open any folder or workspace inside it.
    • This gives you another explorer, outline, timeline.
    • It behaves like another instance of the program.
    • It does not share settings from the first workspace.
    • It does not use the same setting from the first workspace (not sure why if all of the settings files are there).
    • It will use any settings it finds in /.vscode/settings.json
  • Use it when:
    • You just want a blank slate.
    • You want to open a totally different folder/project.
    • You don’t need to preserve settings, extensions, or UI layout from the current window.
  • How To
    • Go to File → New Window.
    • Then go to File → Open Folder
    • Open the same folder as the first window.
  • Links
Workaround: Duplicate As Workspace in New Window
  • Opens a virtual copy of your current workspace (same folders, layout, and settings) in a new window.
  • You can then navigate to different subfolders or files independently while keeping the same context.
  • When you quit out of VSCode close the duplicate workspace first to prevent overriding settings in your primary instance.
  • What it does:
    • Opens a virtual copy of your current workspace (same folders, layout, and settings) in a new window.
    • This is particularly useful when:
      • You have a multi-root workspace.
      • You want to work on the same project in two windows simultaneously.
      • You want to see different files or Explorer views side by side, while keeping the same workspace configuration.
    • Duplicating a workspace in Visual Studio Code allows you to open the same project in multiple windows, enabling parallel workflows. This is particularly useful for working on different files or branches simultaneously.
    • Duplicating a workspace does not create a new physical copy of your project; it simply opens another instance of the same workspace.
    • This allows you to have two separate VSCode windows open that point to the same workspace.
  • It’s smarter than just reopening the folder — because it also copies:
    • The workspace configuration (.code-workspace file if one exists)
    • Folder list (for multi-root)
    • Settings specific to that workspace
    • Open editors (depending on your settings)
  • How To
    • File --> Duplicate Workspace
      or
    • Run the command: Workspaces: Duplicate As Workspace in New Window
  • Links
    • Running Multiple VSCode Windows from the Same Workspace – Ryan Chapin's Website
      • In order to have two separate VSCode windows open that point to the same workspace, press CTRL+Shift+P and then search for Duplicate As Workspace in New Window. This will open a new window that is associated with the current workspace.
      • The thing to keep in mind is that it just DUPLICATED the existing workspace in a new window. Notice that at the top of the EXPLORER it will say UNTITLED (WORKSPACE). You can now work with two windows editing your code, but when you quit out of VSCode close the duplicate workspace first. It will ask you to save the workspace. You can tell it to close without saving.
      • When you close the duplicated workspace, don't save it otherwise you will override your normal projects settings. These settings include window layout not just those in settings.json
    • VSCode duplicate workspace in new window - YouTube - How to open duplicate workspace in VSCode?
Workaround: Worked Example

Say you’re working on my-project and you want to edit backend and frontend files side by side in two windows.

  • If you use File → New Window, you’ll need to open the same folder again manually.
  • If you use Workspaces: Duplicate As Workspace in New Window, VS Code instantly opens a clone of your current setup, same folders, extensions, and environment,  but in a new window.
    • You can then navigate to different subfolders or files independently while keeping the same context.

If your goal is “have Explorer tabs for the same project in multiple windows”, then Workspaces: Duplicate As Workspace in New Window is the better and more efficient way to do it. 

Search and Replace

The search feature in VSCode is very powerful but it does have it's limits.

You can control what files and folders are included in a searches using the VSCode mini Glob library.

VSCode can perfom searches using either:

  1. Search Panel (always attached to your main editor window)
  2. Search Editor (Standalone in either a tab or a window)

General

  • Tutorials
  • Search Editor (A standalone search instance in window or tab)
    • This is not the Search Panel.
    • You can open a new Search Editor with the Search Editor: Open New Search Editor command, or using the Open New Search Editor button at the top of the Search view. Alternatively, you can copy your existing results from a Search view over to a Search Editor with the Open in Editor link added to the top of the results tree, or the Search Editor: Open Results in Editor command.
    • vscode-docs/release-notes/v1_43.md at vnext · microsoft/vscode-docs · GitHub - After a few iterations stabilizing on Insiders, we are shipping Search Editors, which let you view workspace search results in a full-sized editor, complete with syntax highlighting and optional lines of surrounding context.
    • Underrated VSCode feature: Search Editor - Lucas Arantes
  • Regex Searching
  • Glob Patterns
    • Docs
      • Glob Patterns Reference - Visual Studio Code glob patterns reference
        • In the Search view, the ** prefix is assumed. The glob patterns in these settings are always evaluated relative to the path of the workspace folder.
      • vscode/src/vs/base/common/glob.ts at main · microsoft/vscode · GitHub - The mini Glob library VSCode uses.
      • ./ cause the pattern to be treat as absolute and apply this path from the root, otherwise the pattern is always treated as relative.
      • src/ is the same as **/src as they both will match any part of the path.
    • Patter Testers
    • What is supported
      • VS Code’s search include/exclude patterns do not support Bash-style brace expansion {a,b,c}.
      • The mini glob library of VSCode soes not fully support brackets for folders, it does for files.
      • It only supports glob patterns following the minimatch syntax, e.g.: 
        * → any characters in a file/folder name

** → recurse through subfolders

? → single character

[...] → character set
      • Not Valid 
        ./src/setup/upgrade{/3_1_0/,/3_1_1/,/3_1_2/,/3_1_3/}
      • Valid 
        ./src/setup/upgrade/3_1_?/**
./src/setup/upgrade/3_1_*/**

./src/setup/upgrade/3_1_0
./src/setup/upgrade/3_1_1
./src/setup/upgrade/3_1_2
./src/setup/upgrade/3_1_3

./src/setup/upgrade/3_1_0/**, ./src/setup/upgrade/3_1_1/**, ./src/setup/upgrade/3_1_2/**, ./src/setup/upgrade/3_1_3/**
  • Search in a Specific Folder
    • Manually add file path
      • Open the search panle
      • click on the 3 dots to ex[and the advanced options
      • manually add your required path to `Find in Folder`, eg: 
        ./src/components/core                   - Recursively search all files starting in ./src/components/core/
./src/components/core/**/*.php          - Recursively search all files starting in ./src/components/core/ and they must be PHP files
    • `Find in Folder` Context Menu
      • In the Explorer panel, right click on the folder, select `Find in Folder`.
      • This automatically fills in the path into the search field `files to include`but be warned, it does replace what is there.
      • Some examples 
        ./src/components/core
./src/components/core/**/*.php
  • Show full lines in search results
  • Show line numbers in search results
    "search.showLineNumbers": true
    • Search: Show Line Numbers
    • Controls whether to show line numbers for search results
  • Collapse State of search results (Default) 
    "search.collapseResults": alwaysExpand
    • Search: Collapse Results
    • Controls whether the search results will be collapsed or expanded.
    • I leave mine on auto expand.
  • View mode of search results (Default) 
    "search.defaultViewMode": tree
    • Search: Default View mode
    • Controls the default search result view
    • Tree is great for context
  • Troubleshooting
    • If after you added or edited a glob pattern and a result does not dissapear from the search immediately as expected, or not at all, try restarting VSCode.
    • search.exclude is being ignored · Issue #86727 · microsoft/vscode · GitHub
      • You have explicitly disabled the exclude do the following:
        • Toggle the search details to expand them (if needed)
        • Click on Exclude Settings and Ignore Files.

Exclude Files and Folders (Project Level)

There are different aspects of VSCode to which you can apply path exclusions to so you 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.

Files Exclude (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.
    • In settings Type: files.exclude
    • URL Shortcut: vscode://settings/files.exclude
  • 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`.
    • In settings Type: git.ignore
Search Exclude
  • 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.
    • In settings Type: search.exclude
    • URL Shortcut: vscode://settings/search.exclude
  • 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.

Diff Editor (Diff / Compare / Merge)

  • Tutorials
    • How to do a Diff in VS Code (Compare Files) - VS Code has a very powerful diff tool. This quick post is going to teach you how to perform diffs (compare files) in VS Code.
    • VS Code: How to Compare Two Files (Find the Difference) - KindaCode - This concise and straightforward article shows you a couple of different ways to compare two files using VS Code (Visual Studio Code).
    • 3 way merge editor | Visual Studio Code
      • In this release, June 2022 (version 1.69), we continued working on the 3-way merge editor.
      • This feature can be enabled by setting git.mergeEditor to true and will be enabled by default in future releases.
      • The merge editor allows you to quickly resolve Git merge conflicts. When enabled, the merge editor can be opened by clicking on a conflicting file in the Source Control view.
  • Swap Diff Direction
    • Q: I use VSCode as my default tool to compare files (git changes and others) and I sometimes I need to see the differences in the other way than I have them opened in the viewer. Hoqw can I do this?
    • A:
      • You can use Compare: Swap Left and Right Editor Side in the command palette.
      • If you want to bind it to a keyboard shortcut, the command's ID is workbench.action.compareEditor.swapSides. See also the isInDiffEditor context key.
      • There is no in-built button for this but you can add one using an extension.
        • swapdiff - Visual Studio Marketplace - Quickly swap diff direction for documents open in diff mode
          • When you swap directions with this plugin, the arrows allowing you to copy from one side to the other will dissapear.
          • The arrows are present only for left (old) to right (new) and if you use the left/right swap plugin, the arrows will disappaer and that is why you cannot fine them
    • Allow merging from right to left with diff arrows view · Issue #153620 · microsoft/vscode · GitHub
  • FAQ
    • Q: When using the diff editor (in default state) to compare changes to a file in version control you cannot copy Right to Left, why not?
    • A: You're not comparing two files, you're comparing the current state to a previous state. The previous state (last commit) is locked in, so you can't swap in order to copy changes from current state to previous state.

Sticky Scroll

When I scroll in HTML (and other langauges) there is a bar at the top that shows how deep i am, what is this? = Sticky Scroll

Sticky Scroll in Visual Studio Code is a feature that keeps important lines—like function or class declarations—pinned at the top of the editor while you scroll, helping you maintain context in large files. It’s especially useful for navigating deeply nested code without losing track of the current scope.

  • Tutorials
  • Settings
    • Editor > Sticky Scroll: Default model
      "editor.stickyScroll.defaultModel": "outlineModel"
      • Defines the model to use for determining which lines to stick. If the outline model does not exist, it will fall back on the folding provider model which falls back on the indentation model. This order is respected in all three cases.
      • Default = outlineModel
    • Editor > Sticky Scroll: Enabled 
      "editor.stickyScroll.enabled": true
      • Shows the nested current scopes during the scroll at the top of the editor.
    • Editor > Sticky Scroll: Max Line count 
      "editor.stickyScroll.maxLineCount": 5
      • Defines the maximum number of sticky lines to show.
      • Default = 5
  • Different Models (my explanation)
    • outlineModel
      • Class --> Methods
      • This is the default option and works the best.
    • foldingProviderModel
      • Class --> Methods --> Brackets
      • This can be a bit flaky with badly formatted code. It does not always show the function, gets comment lines mixed up and then bracket parsing can be hit and miss.
    • indentationModel
      • Works simply by using the indetation level. HTMl is a good example or when to use this.

Commands

Keyboard Shortcuts / Bindings

  • Ctrl key (Windows/PC) = Command key (macOS/Mac)
  • Command Palette (open)
    • F1
    • Ctrl + Shift +P
    • In the search box at the top, type >
    • View --> Command Palette
    • How to Open the Command Palette in VS Code | Alphr
      • If you’re using VS Code, how to open the command palette is one of the first things to know. You’ll learn about how to open in on three platforms.
      • There is a list of keyboard shortcuts at the bottom.
  • Open Panel Search Menu
    • F3
    • Pressing F3 in any of the panels will open a Search Menu which as the ability to search or filter that panel's child data as required.
  • 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
  • Focus Editor Group
    • Ctrl + 1 = Select the primary editor group
    • Ctrl + 2 = Select the secondary editor group
    • Ctrl + 3 = Select the tertiary editor group
    • If the selected editor group does not exist, a new editor group is created within the currently selected Editor Window.
  • Focus Terminal
    • Ctrl + ' = Terminal
  • Zoom
    • How to Zoom in and out in Visual Studio Code | bobbyhadz - A step-by-step guide on how to zoom in and out, reset the zoom level and enable mouse wheel zoom in VS Code.
      • Zoom In: Ctrl + = ( or Cmd + = on macOS)
      • Zoom Out: Ctrl + - ( or Cmd + - on macOS)
      • Reset: Ctrl + Numpad0 (or Cmd + Numpad0 on macOS)
    • I recommend at least - 1 zoom level
    • Accessibility | Visual Studio Code - Visual Studio Code user accessibility features. Learn here about the various ways VS Code aids user accessibility.
      • View > Appearance > Zoom In (Ctrl+=) - increase the zoom level.
      • View > Appearance > Zoom Out (Ctrl+-) - decrease the zoom level.
      • View > Appearance > Reset Zoom (Ctrl+Numpad0) - reset the zoom level to 0.
  • Split Editor
    • This splits the editor windows into panes by adding another window group but will also open up the same file in this new group.
    • Useful for working on different parts of the file at the same time.
  • Tutorials
    • Course: Master VSCode
      • Master VSCode is an interactive course to learn keyboard shortcuts and level up your productivity. It consists of 20 lessons that are carefully separated by topic and importance.
      • Visual Studio Code has quickly become one of the most popular IDEs, if not the most popular. Its flexibility enables work with any kind of code base and project. Unfortunately, it is easy to get stuck with inefficient workflows when you are missing some important commands. This interactive course will help you explore and master VSCode's keyboard shortcuts.
    • DON'T Use the File Explorer in VS Code! - YouTube | James Q Quick
  • CheatSheets

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.

Git

Git Blame
  • VSCode includes built-in Git Blame support and should be enabled by default.  should this be here or in documentation
  • Settings
    • Git › Blame › Status Bar Item: Enabled 
      "git.blame.statusBarItem.enabled": true
      • Controls whether to show blame information in the status bar.
    • Git › Blame › Status Bar Item: Template 
      "git.blame.statusBarItem.template": "${authorName} (${authorDateAgo})"
      • Template for the blame information status bar item. Supported variables:
  • How to use
    • Find the blame information in the status bar:
      • Look in the status bar for an icon (a circle intersected with a vertical line), next to a name and date (which should match the default blame template above).
      • It is probably in the right handside group.
    • Click on a line you are interested in.
      • The Blame will update.
    • Avaiable functions
      • Hover over the blame to see the Git blame information.
      • If you click on the blame then VSCode will load the relevant Git submission in tab.
      • If you right click on it, it brings up a VSCode menu where you can enable/disable items in the status bar including this extension.
  • VSCode: How to Show Git Blame | HatchJS.com
    • Learn how to show git blame in vscode with this step-by-step guide. Includes instructions on how to enable the Git Blame extension, view git blame information, and customize the blame view.
    • Git Blame is a powerful tool that can be used to track down the source of bugs or to see who made a particular change to a file. It is a valuable tool for any developer who works with Git.
    • To show the Git blame for a file in VS Code, follow these steps:
      1. Open the file you want to view the blame for.
      2. Press Ctrl+Shift+G to open the Git Blame view.
    • The Git Blame view will show you a list of all the commits that have changed the file. Each commit will be listed with the author’s name, the commit message, and the date and time of the commit. You can also click on a commit to see the changes that were made in that commit.

Specific / Recommendations

  • When I click on another file in the Explorer panel, it changes the file I am working on to it 
    "workbench.editor.enablePreview": false
  • When I open a new file it is in the middle of my tabs 
    "workbench.editor.openPositioning": last
  • VSCode allows the opening of a file more than once 
    "workbench.editor.revealIfOpen": true
    • Controls whether an editor is revealed in any of the visible groups if opened. If disabled, an editor will prefer to open in the currently active editor group. If enabled, an already opened editor will be revealed instead of opened again in the currently active editor group. Note that there are some cases where this setting is ignored, such as when forcing an editor to open in a specific group or to the side of the currently active group.
    • Links
  • How do I always show the full filepath in the tab?
    • By default, VS Code only disambiguates filenames when there’s a conflict. You can force it to always show the path.
    • Here are a few differnt options:
      1. Hover over the tab, VSCode always shows the full path in the tooltip.
      2. Force the full filepath in the tab 
        "workbench.editor.labelFormat": "medium"
        • Short = Show the name of the filefollowed by it's directory name which is better for me as I deal with different modules which have the same file names.
      3. Use breadcrumbs which are enabled by default 
        "breadcrumbs.enabled": true
        • The breadcrumbs also includes the element path aswell which is why this method is not so obvious at the beginning.

Automatically Apply Fixes (VSCode)

When 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.

Themes

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

General
  • 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.
  • Theme Color | Visual Studio Code Extension API - Theme Color reference that lists all themable colors in Visual Studio Code.
  • Themes are stored in the extensions folder.
  • How to automatically switch themes - 23 Stunning VSCode Themes for Any Lighting | Ayoub Khial
    • Light / Dark theme handling
    • Before starting with our curated collection, add the following fields to use user settings to automatically switch between light and dark themes in Visual Studio Code based on the operating system's appearance preferences. 
      {
    "window.autoDetectColorScheme": true,
    "workbench.preferredLightColorTheme": "Github Light",
    "workbench.preferredDarkColorTheme": "Github Dark",
    ...
}
    • You can use an extension to perform a manual toggle (Toggle Light/Dark Theme - Command to toggle the theme between light/dark.).
What is my Active theme and related settings

Look in User/settings.json to see what your active theme and related setting are:

  • Specifies the color theme used in the workbench when `Window: Auto Detect Color Scheme` is not enabled. 
    "workbench.colorTheme": "Dracula Theme Soft"
  • Additional themes 
    "workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "material-product-icons",
  • If enabled, will automatically select a color theme based on the system color mode. 
    "window.autoDetectColorScheme": false
  • These control what theme is used when automatic theme detection is enabled 
    "workbench.preferredDarkColorTheme": "Default Dark Modern"
"workbench.preferredHighContrastColorTheme": "Default High Contrast"
"workbench.preferredHighContrastLightColorTheme": "Default High Contrast Light"
"workbench.preferredLightColorTheme": "Default Light Modern"
  • What font is being used 
    "editor.fontFamily": "Fira Code"
Theme Customisations

Without editing the theme itself you can override any colour setting at either a User or Workspace level.

  • How to Modify Themes in VSCode – Alvee's Blog - A guide for customizing VSCode to your heart's content.
  • How to Customize or Make your own VSCode Color Theme - DEV Community - This is a quick guide on how to customize the VSCode - both the Workbench and the Syntax.
  • Setting a per-project colour scheme in VSCode | by Juris | Medium
    • This article goes over how to customise your colour scheme per project or “workbench” as they are called in VSCode.
    • A well put together article and a good place to start.
    • Covers settings directly in then user's settings.json 
      "workbench.colorCustomizations": {
 },
    • How to change error styles in VS Code? - Stack Overflow 
      {
   "workbench.colorCustomizations": {
        "errorForeground": "#ffffff",
        "editorError.background": "#ff0000",
        "editorWarning.foreground": "#ffffff",
        "editorWarning.background": "#dddd00",
        "editorInfo.foreground": "#ffffff",
        "editorInfo.background": "#0000ff"
    }
},
  • Highlights
    • Highlights are applied on top of each other (and the token when present). They are just HTML element backgrounds with opacity set less than 100 which gives rise to the effect of the highlighting.
    • Change highlight text color in Visual Studio Code - Stack Overflow - Right now, it is a faint gray overlay, which is hard to see. Any way to change the default color?
    • How can I change the background highlight color associated with searching (find) for a color theme in VS Code? - Stack Overflow
    • Example: Customize Highlight Colors
      • For all templates 
        "workbench.colorCustomizations": {
   "editor.selectionBackground": "#ffcc00",             // Background of selected text
   "editor.selectionHighlightBackground": "#ffcc0040",  // Highlighted matches
   "editor.wordHighlightBackground": "#00ff0040",       // Word highlights
   "editor.findMatchBackground": "#ff000040",           // Current search match
   "editor.findMatchHighlightBackground": "#0000ff40"   // Other search matches
},
      • For a specific template 
        "workbench.colorCustomizations": {
    "[Your Theme Name Goes Here]": {
       "editor.selectionBackground": "#ffcc00",             // Background of selected text
       "editor.selectionHighlightBackground": "#ffcc0040",  // Highlighted matches
       "editor.wordHighlightBackground": "#00ff0040",       // Word highlights
       "editor.findMatchBackground": "#ff000040",           // Current search match
       "editor.findMatchHighlightBackground": "#0000ff40"   // Other search matches
    }
},
Example Theme setting explained

editor.findMatchBackground: !alpha [ *ORANGE, 80 ]

  • Rules Purpose: Use the ORANGE color, but make it 80% opaque, and apply it as the background for the current find match.
  • Rough CSS equivalent: background-color: rgba(255, 152, 0, 0.8);
  • editor.findMatchBackground
    • The VSCode setting for the background of the currently selected match when you use Find (Ctrl/Cmd + F).
  • !alpha
    • !alpha is a custom YAML tag used by VS Code theme files.
    • It applies transparency (alpha channel) to a color.
  • *ORANGE
    • This is a YAML anchor reference.
    • *ORANGE means: “Reuse the color value stored under the ORANGE anchor.”
    • Somewhere earlier in the theme file, there is likely a definition like: ORANGE: &ORANGE "#FF9800"
  • [ *ORANGE, 80 ]
    • This is the argument list for !alpha:
      • Base color: *ORANGE
      • Opacity level in percent: 80
How to Identify any Element in VSCode
  • Tokens / Theme Elements
    • This is for code inside the editor (keywords, strings, comments, variables, etc.).
    • Steps
      • Open the file and place your cursor on the text
      • Open the command palette. (Windows: Ctrl+Shift+P or F1) (macOS: Cmd+Shift+P)
      • Run Developer: Inspect Editor Tokens and Scopes
      • Now click on an element in your code and you will see a popup showing:

        • Standard information
          • forground: Font colour of the token
          • background: Standard background colour or token background colour (of defiend)
        • textmate scopes
          • used by themes
          • with Semantic token type/modifiers
        • foreground
          •  Font colour of the token
        • NB: This does not give highlighting colours as they are not part of the underlying token.
  • VSCode UI Elements
    • This is for UI elements like:
      • Activity Bar
      • Sidebar
      • Tabs
      • Status bar
      • Title bar
      • Buttons
    • Steps
      • Help --> Toggle Developer Tools
        • Edge Developer Tools will now open.
      • In the Edge Developer Tools, inspect any element in VSCode like you would a webpage.
        1. Click the Elements tab in the Edge windows (if not selected already)
        2. Use the element picker (top-left icon / A square with an arrow)
        3. Now select the VS Code UI element you want to inspect
      • You’ll see CSS classes like: 
        .monaco-workbench
.part.sidebar
.statusbar
.editor-group-container
        • These don’t use CSS, but they hint at the color key name.
  • VSCode Settings UI (Color Picker trick)
    • This is very effective for discovery.
    • Steps
      1. Open Settings
      2. Search for colorCustomizations
      3. Add a color entry
      4. VS Code shows autocomplete for every valid UI color key
  • Use the Color Theme Reference
    • VS Code exposes exact setting names for UI parts with their calculated values at time of generation.
    • Open the command palette
    • Run: Developer: Generate Color Theme From Current Settings
    • You can now easily searh for hex codes to find their related settings or just browse about.
    • NB: This generates a file, it does not alter your theme's settings.

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

Types of Workspaces

This is a collection of notes and the different type of workspace to hekp me defin their uses.

  • Workspaces Explained
  • 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.

Sharing Settings

  • 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

Monorepo

  • These are not Workspaces.
  • A monorepo is a single sourcecode repository that contains many often 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

General

  • 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
  • "Open with Code" has disappeared from my Windows 11 File Explorer context menu
  • When examining some code, the Functions/Methods/Variables (Symbols) are missing on the left
    • They should be undet the `OUTLINE` Panel
    • Instead you see the error: 
      No symbols found in document 'YourFilenameHere.php'
    • Soutions
      • You need an appropriate extension to parse the symbols. In this example I needed to enable `PHP Intelephense` so i could see the functions/methods in the OUTLINE panel.
      • If the `OUTLINE` panel is missing: click on the 3 dots at the top of the `EXPLORER` columen, select `OUTLINE`.
      • Run the `Reset View Locations` command from the Command Palette.
    • Links

Window Focus / File Focus Issues

  • How do I change the Editor Window focus?
    • Each editor instances only has the one primary editor window and this cannot be changed.
    • This means you cannot change the window focus for the purpose of opening new files in a particular editor window.
  • When I click on a new file in the explorer it's position jumps randomly
    • This is probably happening because you were working in a secondary editor window and then you go to open another file from the explorer panel. When you do this, you are actually selecting the primary editor window which causes the explorer to update it's position to match the file which the primary editor window has open. You then have to click again the in the explorer to open the new file.
    • If selecting another tab in the primary editor windows, the explorer's position will automatically update to match the tab's file and when you click on a new file in the explorer a second click will not be required.
    • The Explorer: Auto Reveal setting will prevent the explorer from moving it's position upon focus and should prevent some of this unexpected movement.
      "explorer.autoReveal": "focusNoScroll"
      • Controls whether the Explorer should automatically reveal and select files when opening them.
      • It has a couple of options
        • true = Files will be revealed and selected.
      • false = Files will not be revealed and selected.
      • focusNoScroll = Files will not be scrolled into view, but will still be focused.
  • How to focus editor after clicking file in the VS Code Explorer View? - Stack Overflow
    • Using the keyboard and not the mouse, pressing enter should automatically move focus to the opened editor. 
    • You can also look into the following settings and binding them to keyboard shortcuts.
      • explorer.openAndPassFocus
      • filesExplorer.openFilePreserveFocus 
  • Setting to focus editor on mouse click · Issue #166118 · microsoft/vscode · GitHub
    • Possible workaround? Set Workbench > List: Open Mode to "doubleClick" ("workbench.list.openMode": "doubleClick")
    • Single clicks will no longer open files from the Explorer, and a double click appears to properly set input focus to the selected file. (VSC version 1.79.2 on Mac Ventura.)
    • I just found out there is an extension for this, search for: "Focus file on click" from Steven Rafferty. Thanks Steven!
    • There is also Focus on Click by OzerGul
  • When window gets focus it changes the selected file in Explorer · Issue #238358 · microsoft/vscode · GitHub
    • This is a new bug that has been reported.
    • When using multiple windows, if the focus on the main window is lost, when clicking on a file in "EXPLORER" it first changes the currently selected file to the one opened in the main window then it opens the wrong file from the list

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

These are your user preferences and are stored on the computer you are working on and not in the project's folder.

These settings will override the VSCode defaults but can be overridden by workspace 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
  • Official Sites
    • 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.
  • General
    • Why?
      • The .editorconfig file is used to maintain consistent coding styles across different editors and IDEs, including Visual Studio Code (VSCode). It allows you to define settings such as indentation style, tab width, and line endings, ensuring that all contributors to a codebase adhere to the same formatting rules.
      • The benefit of using .editorconfig, is that
        • irrelevant of how your colleagues hav configured their editor, the settings in the .editorconfig will be used for the project (if their editor supports this file) keeping everones settings synced.
        • .editorconfig is editor agnostic which means that 2 colleagues can be using a different editor but share the same settings.
    • Editor Support
      • A user should be aware that not all .editorconfig values might be supported in a specific extension or plugin. 
      • Visual studio VS2019 (i.e. full) supports .editorconfig out of the box.
      • Visual Studio code needs a plugin to enable .editorconfig support.
        • To use .editorconfig in VSCode, you can install the EditorConfig plugin, which automatically applies the settings defined in the .editorconfig file, overriding user or workspace settings if necessary.
    • What is it?
      • The .editorconfig is a text file that overrides the settings of your editor.
      • The .editorconfig file is found in the usually root of your project but the spec allows for a heiracchihal system where child .editorconfig files can override their parent.
      • The top most .editorconfig must be specified as the root file otherwise, plugins will keep looking further up the file tree for further .editorconfig configuration files.
  • 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
    • Standard Tabs, Spaces and Indent settings (I asked ChatGPT)
      • 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 
  • Initiate the cloning of the remote Git repo (pick a method):
    • FreeType / Wizard
      • Run the following command from the palette 
        > Git: Clone
        • Or on the welcome page you can click the link "Clone Git Repository..."
      • The following option Clone from GitHub will now appear and you should click on it
      • You will now be given a list of repositories you can click on, usually yours. 
        • However if you start typing a GitHub repo's name, search results from GitHub will appear.
        • It is possible to use the repo's Git definition locator instead of searching/freetyping eg: 
          https://github.com/shoulders/mysql-slow-query-log-visualizer.git
      • Select your desired repository.
    • Direct
      • Running the following command from the palette replacing the URL with your select repository. (notice there is no  > becasue we are using the Git CLI directly) 
        git clone https://github.com/shoulders/mysql-slow-query-log-visualizer.git
        • This can be got from the repo's homepage on Github. Just click on the green "Clone" button.
  • Authenticate as required
    1. Authentication might not occur if you already have permission. If it does, just follow it through.



      • If you are already authenticated with GitHub this tage will not happen.
  • Select the target folder for the cloned repository
    • Whatever folder you select, VSCode will create a folder in their and put the repositories content in it.
    • So you have 2 choices really where to put the files
      1. Projects folder
      2. Workspace folder
  • Open the cloned Repository or add it to the current workspace?

    • Choose "Cancel"
    • This will not affect the files.
    • When you are use to this process/workflow you can use these buttons as needed but for now we will use the easy way.
  • VSCode has now cloned the GitHub repo to your selected target folder
    • Depending on where you put your files you has a couple of steps to do:
      • Projects folder
        • Rename the folder (only if required).
      • Workspace folder
        • A double folder issue has occured using this this method and need fixing.

        • To fix the double folder issue:
          1. Close this workspace and then close VSCode.
          2. Navigate using windows explorer (potentially this can all be done in VSCode)
          3. 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.
          4. 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

Same as "With an existing Netbeans Project which has a local Git repo".

  • Create a repository on GitHub.
  • Open the folder containing the /.git/ folder in VSCode.
    • VSCode will automatically pickup the Git repo.
  • Connect the local repo to GitHub.
With no GitHub or Local Repo
  • Create a repository on GitHub.
  • Initialise Git locally.
  • Connect the local repo to GitHub.

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.
  • Configure EOL / Line Endings
    • Select your EOL
      • LF is the universal EOL and should be used unless it is a Windows project, in which case the EOL will be CRLF.
      • Only old and specialist systems use CR.
      • Some projects can have a mix of files with different EOL.
      • Rarely, some single files can have mixed EOL but VSCode does not currently support this.
    • How to handle EOL
      • Set EOL on a per project basis.
      • Use EditorConfig to set your EOL, if this is not supported, set them with your editor.
      • Do NOT use Git to convert EOL on submission for any reason.
      • Set VSCode's default EOL for new files to LF. This is not mandatory but makes life easier when working cross platform.
    • Read this for more in-depth information: Line endings when working with Git for Windows and Visual Studio Code | QuantumWarp
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.

npm Packages

  • An npm initialised project is a prerequisite for installing any packages locally. You can check this by the presence 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.
  • To use these in VSCode usually requires a VSCode extension.

ESLint

  • It is possible to 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.
  • When I make changes to the eslint.config.mjs the server responds/updates with the new config.
  • When I install a new npm package, the ESLint server does not restart, you have to do this manually.

Install ESLint

  • 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 ESLint software that does the work.
    • The commands above are the same, except one is a shorthand version.
    • --save-dev / -D switches install the ESLint package as a dependency so it is only used in the development of your project and is not present or required for your final software (i.e. production).
  • 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?
        • = `JavaScript, JSON, JSON with comments, JSON5, Markdown CSS`
        • Pick the languages you want to lint, but for this example we will use those above.
        • 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?
        • = `JavaScript modules (import/export)`
      • Which framework does your project use?
        • = `None of these`
      • Does your project use TypeScript?
        • = `Yes`
        • When you need typescript, you can probably figure out how to add this.
        • When you need Typescript, you can probably figure out how to add this later or just enable it now if required.
        • If you select yes, have JavaScript as a language to be installed, and select JavaScript for the config file type, then TypeScript is added to the JS Files: declaration line and a tseslint.configs.recommended rules declaration line is added immediately below. No other files or packages are required so you can just amend and add lines as shown below. I have added it here for reference only as I was curious what was the difference.
      • Where does your code run?
        • = `Browser, Node`
        • Pick all the locations your code will run.
        • If you are developing JavaScript then it it will be run in the browser which is Client-Side.
        • `Node` is for projects that run Server-Side in NodeJS.
      • Which language do you want your configuration file to be written in?
        • = `JavaScript`
        • Options = `JavaScript` or `TypeScript`
        • This question only appears if you said earlier that your project uses TypeScript.
      • What flavour of Markdown do you want to lint?
        • = `GitHub Flavoured Markdown`
        • GitHub uses a slightly modified Markdown but I am going to use this becasue I will be using GitHub for all of my repositories.
        • This option only appears if you have selected Markdown 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, typescript-eslint, @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.
    • See this example: 
      import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import json from "@eslint/json";
import markdown from "@eslint/markdown";
import css from "@eslint/css";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  tseslint.configs.recommended,
  { 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"] },
]);
  • 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)

  • ESlint installed and configured correctly is a prerequisite.
  • html-eslint
    • Find and fix problems in your HTML code
    • In addition to standalone HTML files, html-eslint also supports linting HTML inside JavaScript and TypeScript template literals.
  • @html-eslint/eslint-plugin - npm
    • An ESLint plugin which provides linting rules for HTML.
  • Install the NPM package
    • Run this command in the terminal
      npm install --save-dev @html-eslint/parser @html-eslint/eslint-plugin
  • Edit the projects 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 export block. Pick one from below. They both do the same but the second one is laid out differently with a rule override/declaration. 
      { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: ["html/recommended"] },

or

{
  files: ["**/*.html"],
  plugins: { html, },
  language: "html/html",
  extends: ["html/recommended"],
  rules: {
    "html/no-duplicate-class": "error",
  }
},
    • You can remove the extends: statement if you do not want to use the default HTML ruleset.
  • Lint HTML code inside JavaScript Template Literals
    • Add a files: declaration at the end of the export block. Pick one from below. They both do the same but the second one is laid out differently with a rule override/declaration.  
      { files: ["**/*.js", "**/*.ts"], plugins: { html }, extends: ["html/recommended"] },

or

{
  files: ["**/*.js", "**/*.ts"],
  plugins: {
      html,
  },
  extends: ["html/recommended"],
  rules: {
      "html/require-img-alt": "error",
  },
},
      • You can remove the extends: statement if you do not want to use the default HTML ruleset.
  • 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 oversight 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
    • This might not be needed, but does not harm.
    • Done

eslint-plugin-html (ESlint Plugin)

  • Not currently added to flat config below because I cannot get it to work. I think the package has to be updated to support 'Flat Config'.
  • Example Flat config, only eslint-plugin-html 
    export default [
  {
    files: ["**/*.html", "**/*.we"],
    plugins: { html },
    settings: {
      "html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML
    },
  },
]
    • Note: you need to specify extensions twice, which is not ideal. This should be improved in the future.
  • Incompatibility issue between `eslint-plugin-html` and `@html-eslint` · Issue #293 · BenoitZugmeyer/eslint-plugin-html · GitHub
    • Q: According to the documentation, eslint-plugin-html should be compatible with @html-eslint. However, when I tried using both in my project, I noticed that eslint-plugin-html stops working. It seems like the issue is caused by @html-eslint/parser.
    • A: You need both the @html-eslint/parser and @html-eslint/eslint-plugin to make it work. Eg: 
      import html from "eslint-plugin-html"
import htmlEslint from '@html-eslint/eslint-plugin'
import PARSER_HTML from '@html-eslint/parser'

export default [
  {
    files: ["**/*.html"],
    plugins: {
      html,
      "@html-eslint": htmlEslint,
    },
    languageOptions: {
      parser: PARSER_HTML
    },
    rules: {
      'no-console': 2
    }
  }
]

 

  • ESlint installed and configured correctly is a prerequisite.
  • GitHub - BenoitZugmeyer/eslint-plugin-html
    • An ESLint plugin to extract and lint scripts from HTML files. - BenoitZugmeyer/eslint-plugin-html
    • 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.
  • eslint-plugin-html - npm - A ESLint plugin to lint and fix inline scripts contained in HTML files.
  • Deprecation: For modern projects, it's recommended to use html-eslint, which supports linting standalone HTML files and HTML embedded in JavaScript/TypeScript template literals.
  • Recommended Alternative: html-eslint
  • This plugin:
    • It does not ship with any “rulesets” (like plugin:html/recommended).
    • The only thing it provides is the parser/extractor and some settings (html/indent, html/report-bad-indent, etc.).
    • So there’s nothing from this plugin to extend.
  • Uses the standard ESLint rules: Rules Reference - ESLint
  • 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.
  • Check the plugin is working
    • Using the no-console rule as in the examples above.
    • Due to a bug, the following code will no sho the no-console error, it gets stuck on the var declaration. 
      <!doctype html>
<html>
    <head>
    </head>
    <body>
      <script>
        var 51;
        console.log("chicken");
      </script>
    </body>
</html>
    • The corrected code below will show an error corectly due to the presences of the console.log() statement. 
      <!doctype html>
<html>
    <head>
    </head>
    <body>
      <script>
        abc = 51;
        console.log("chicken");
      </script>
    </body>
</html>
  • Restart VSCode
    • Done

ESLint Stylistic

I have not added this but it seems it could be useful

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

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

What this configuration does:

  • Lints TypeScript, Javascript, JSON, JSONC, JSON5, MD, CSS, HTML files. (ESLint)
  • Lints HTML files. (html-eslint)
  • Lint HTML code inside JavaScript Template Literals (html-eslint)
  • Lints inline Javascript in HTML files. (eslint-plugin-html). Not added and not currently working, see notes above.

Using the instructions above this is what your completed eslint.config.mjs should look like. Alter and use as required.

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
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([

  // ESLint Core
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  tseslint.configs.recommended,
  { 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"] },

  // html-eslint
  { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: ["html/recommended"] },
  { files: ["**/*.js", "**/*.ts"], plugins: { html }, extends: ["html/recommended"] },

]);

Notes 

  • 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.
    • Rules Reference - ESLint
    • Command Line Interface Reference - 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 Files - ESLint
  • 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.
  • eslint.config.js or eslint.config.mjs - Which should I use?
    • When you run install ESLint using my instructions, an eslint.config.mjs is created. I am not an expert so I am going to use this file name for my config.
    • Configuration Files - ESLint
      • If your project does not specify "type":"module" in its package.json file, then eslint.config.js must be in CommonJS format, else if specified then ECMAScript modules (ESM) format.
      • eslint.config.mjs files expect the content to be in ECMAScript modules (ESM) format.
      • eslint.config.cjs files expects the content to be in CommonJS format.
    • Docs: `eslint.config.js` vs `eslint.config.mjs` - which one should i use? · Issue #20129 · eslint/eslint · GitHub
      • DMartens
        • Hi, the use of the file extension is only to mark the file as a module allowing import and export.
        • An alternative to mark all files as a module is to set type: "module" in the package.json.
        • In other words you do not need to use .mjs to use modules and I think the modern way is to always use type: "module" so that all files in the project are seen as modules.
        • For more information you can have a look at the Node.js documentation for this.
        • But this is not specific to ESLint but to all npm packages.
        • I checked the configuration files documentation and the .mjs file extension is only for the file precedence and which files are linted by default.
        • The supported way is to use npx @eslint/create-config@latest to create the configuration file, which uses the type of the package.json file to determine the file extension of the configuration file.
      • shoulders
        • From what I understand is that ECMAScript Modules (ESM) is the preferred option on modern projects and will eventually replace CommonJS.
      • DMartens
        • The config creator (npx @eslint/create-config@latest) uses the type field of the package.json file to determine the file extension of the configuration file.
        • With the new configuration format it defaults to parse .js and .mjs files as ESM and CommonJS for .cjs files.
      • My Takeaway
        • eslint.config.js is by default parsed as ECM but this can be changed to CommonJS by setting the type in the package.json.
        • eslint.config.mjs is always parsed as ECM.
        • eslint.config.cjs is always parsed as CommonJS.
        • npx eslint --init by default creates a eslint.config.mjs file.
    • Enabling - Modules: ECMAScript modules | Node.js v24.8.0 Documentation
      • Node.js has two module systems: CommonJS modules and ECMAScript modules.
      • Authors can tell Node.js to interpret JavaScript as an ES module via the .mjs file extension, the package.json "type" field with a value "module", or the --input-type flag with a value of "module". These are explicit markers of code being intended to run as an ES module.
      • Inversely, authors can explicitly tell Node.js to interpret JavaScript as CommonJS via the .cjs file extension, the package.json "type" field with a value "commonjs", or the --input-type flag with a value of "commonjs".
      • When code lacks explicit markers for either module system, Node.js will inspect the source code of a module to look for ES module syntax. If such syntax is found, Node.js will run the code as an ES module; otherwise it will run the module as CommonJS. See Determining module system for more details.
  • Multi-root Workspaces (Working with ESLint)
  • Tools
  • CommonJS Modules (CJS) vs. ECMAScript Modules (ESM)
    • From a Bing Search
      • Both CommonJS (CJS) and ECMAScript Modules (ESM) are systems for organizing and reusing JavaScript code, but they differ in syntax, behavior, and use cases. Here's a concise comparison:
      • Key Points 
        • Syntax
          • CommonJS (CJS):
            • Uses require() to import modules.
            • Uses module.exports or exports to export modules.
            • Example 
              // Import
const fs = require('fs');

// Export
module.exports = { myFunction };
          • ECMAScript Modules (ESM):
            • Uses import and export keywords.
            • Example 
              // Import
import fs from 'fs';

// Export
export const myFunction = () => {};
        • Default Support
          • CJS: Default in Node.js (prior to version 12). No configuration needed.
          • ESM: Native in modern JavaScript (ES6+). Requires "type": "module" in package.json or .mjs file extension in Node.js.
        • Loading Behaviour
          • CJS: Synchronous loading (blocking). Suitable for server-side environments.
          • ESM: Asynchronous loading (non-blocking). Better for client-side and modern applications.
        • Compatability
          • CJS: Works seamlessly with older Node.js versions and libraries.
          • ESM: Requires modern environments or transpilers (e.g., Babel) for backward compatibility.
        • Use Cases
          • CJS: Ideal for legacy projects or when working with older Node.js libraries.
          • ESM: Recommended for modern JavaScript projects, especially when targeting browsers or using tree-shaking for optimization.
        • Key Takeaway
          • Use CJS for backward compatibility or legacy projects.
          • Use ESM for modern, forward-looking projects to leverage the latest JavaScript features.
    • CommonJS vs. ES modules in Node.js - LogRocket Blog
      • Explore the differences between CommonJS and ES modules in Node.js, exploring how they handle JavaScript modules, their syntax, and more.
      • The ES module format was introduced in Node.js v8.5.0 as the JavaScript module system was standardized.
    • Understanding CommonJS vs. ES Modules in JavaScript | by Jollen Moyani | Syncfusion | Medium - This blog compares two pivotal module systems in JavaScript, CommonJS and ES Modules, with code examples.
    • CommonJS (CJS) vs ECMAScript Modules (ESM) in JavaScript - DEV Community - JavaScript modules play a crucial role in organising code, enhancing reusability, and improving maintainability of applications. Two primary module systems widely used are CommonJS (CJS) and ECMAScript Modules (ESM). Understanding their differences and capabilities is key to effectively leveraging them in your projects.
    • CommonJS vs ECMAScript Modules (ESM). Choosing the Right Module System for Your JavaScript Project | by Eduard Koshkelyan | Stackademic - Explore CommonJS vs. ECMAScript Modules (ESM) in JavaScript. Choose the right module system to enhance code efficiency and performance.
    • CommonJS vs. ES Modules | Better Stack Community
      • CommonJS (CJS) and ECMAScript Modules (ESM) have coexisted for years, causing confusion and technical headaches. Their split has led to compatibility issues, inconsistent tooling, and frustrating workarounds.
      • You’ve likely dealt with libraries that support only one format, leading to mismatched imports, runtime errors, and complex build setups. Even within Node.js, interoperability remains a challenge.
      • This article breaks down the differences between CJS and ESM, giving you a clear understanding of when and how to use each module system—without the headaches.
  • Tutorials
  • 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.
  • Flat config (v9.0.0+) (eslint.config.mjs  / eslint.config.js)
    • .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.
    • A Flat Attempt at the ESLint Flat Config | by Naman Dhingra | Medium
      • While upgrading to ESLint v9, I encountered several challenges related to compatibility and plugin integration that weren’t immediately obvious.
      • ESLint 9 introduces a new way of configuring your linter called the flat config. Unlike the traditional .eslintrc files, the flat config uses a flat array of configuration objects and leverages ECMAScript modules.
      • Note: If your project uses ECMAScript modules (ESM) but does not specify "type": "module" in your package.json, you should rename your ESLint configuration file to use the .mjs extension (e.g., eslint.config.mjs). Alternatively, if you add "type": "module" to your package.json, you can keep using the .js extension for your ESLint config file while still using ESM syntax.
    • 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.

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.

VSCode Extensions

General

  • You can install extensions globally or in a workspace.
  • Extension Marketplace - Discover, add, update, disable and uninstall Visual Studio Code extensions (plug-ins) through the Extension Marketplace.
  • 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
    • An example Windows location. 
      C:\Users\{username}\.vscode\extensions\bmewburn.vscode-intelephense-client-1.16.3
  • 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.

Managing Extensions

  • General
  • Prevent Extension functionality overlap (Using Extension Load Order)
    • I have investigated this because sometimes you have functionality overlap in extentions and you cannot just disable it in one or the other due to this functionality being part of a package and their is no specific setting to disable it in either one, so what happens and how can I fix this, Extension Load Order?
    • VS Code does not provide a way to set a priority or load order for extensions such that one will always override another.
    • If two VS Code extensions overlap in functionality and you can’t uninstall or disable them either, then to manage conflicts between extensions, you must use settings, disable features, change Hot Keys, or unbind commands — not an extension ordering system.
    • Lazy Loading and Deferring Extensions · Issue #234231 · microsoft/vscode · GitHub
      • Extensions are loaded based on the activation events declared by the extension authors. Ensuring extensions are loaded in an efficient way is in part the reponsibility of the author.
      • You could also consider installing slower extensions exclusively in just the workspaces that need it. In this case you could the keep your "Defaults" to only the essentials, improving your experience.
    • VS Code Extension: How do you set an order/priority to the extension's settings/configurations? - Stack Overflow
      • "order": 1 - This isn’t talking about extension activation order or priority for their behaviors. It’s talking specifically about ordering the extension’s settings UI (how settings appear in the Settings view), not how or in what order extensions run or take priority over each other.
    • visual studio code - How VSCode Handle Conflicting Intellisense extensions on hover - Stack Overflow
  • Extensions View
    • This is the extensions panel in VSCode.
    • How do I see all of my installed extensions?
      • Click on the Extensions icon in the Activity Bar or use the keyboard shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS). This will show a list of all installed extensions, including their names, versions, descriptions, and management options. You can also use the search bar at the top to find specific extensions quickly. 
      • Filter extensions by using @installed
    • 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
  • List Installed Extensions (Command Line)
  • Export and Install Extensions (Command Line)
  • List Installed Extensions (by an Extension)

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 scope.
  • 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
UI / GUI
  • Shortcut Menu Bar
    • Add handy buttons like beautify, show opened files, save, toggle terminal, activity bar etc to editor menu bar. User-defined buttons are also possible.
    • Add 35+ handy buttons like beautify, show opened files, save, toggle terminal, activity bar, Find replace etc to the editor menu bar in VSCode.
    • You can also create your own buttons with custom commands.
Keybindings
  • Notepad++
    • Popular Notepad++ keybindings for Visual Studio Code
    • This extension ports popular Notepad++ keyboard shortcuts to Visual Studio Code.
    • Adds things like Ctrl + H
Toggles
  • Settings
  • Items / Text
    • Toggle Quotes
      • Toggle / Cycle " --> ' --> `
      • Allows you to change already encapsulated text, i.e. change from "..." to '...' using a Ctrl + ` instead of doing it manually.
    • Toggle Boolean
      • Easily toggle between booleans (i.e. true and false).
      • Toggles selected boolean(s), or just the boolean that's beneath the cursor.
      • Default keybinding: alt+b (or set a custom one).
  • Error, Warning and Info Toggles
    • Error Toggle
      • Adds an icon to toggle error squiggles on and off to status bar.
      • Perfect for when you want to temporarily hide error underlining while working on incomplete code.
    • invisible-squiggles
      • Toggle squiggles on/off from the status bar or command palette.
      • Supports errors, warnings, and info squiggles
    • Disable Error and Warning Squiggles
      • Disable Error and Warning Squiggles for all languages in your vscode editor!
      • This can be useful when you want a cleaner look while coding or presenting.
      • Command pallette only.
    • Problems Filter
      • Automatically filters the Problems panel to show only errors and warnings.
      • Tired of "Info" messages cluttering your Problems panel? This extension helps you maintain a cleaner view by default, focusing on errors and warnings, while still allowing you to easily toggle Info messages visibility.
  • Files
    • Visibility Toggle (for Excluded Files)
      • Easily reveal excluded files and folders via UI toggle or command.
      • This extension lets you toggle the visibility of excluded files (in regards to exclusions via files.exclude or .gitignore) directly via the UI – perfect for anyone who wants more control over what’s shown in the Explorer.
    • Hide/Unhide Files
      • Toggle visibility of files and folders in VS Code Explorer by inverting the files.exclude settings from your workspace configuration.
      • Non-destructive: Preserves your original exclude settings.
    • Toggle Excluded Files
      • Quickly toggles excluded (hidden) files visibility in the file explorer.
      • Adds a button into the status bar.
    • Toggle "Exclude Git Ignore"
      • Toggle "Explorer: Exclude Git Ignore" (explorer.excludeGitIgnore) setting globally to show or hide .gitignore'd files on the Explorer panel with a single command.
      • Setting globally in user settings.
    • Show/Hide Excluded Files
      • Quickly Show/Hide hidden files in the file explorer.
      • Status Bar Toggle Quickly Show or hide excluded files from the status bar. It can be disabled in the extension configuration.
      • Right Click Do right click anywhere in the sidebar to show/hide excluded files.
      • Multiple Commands Assign keyboard shortcuts or call the commands from the command palette.
Productivity 
  • Selecting Code
    • 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.
  • Navigating Code
    • 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.
  • Projects Management
    • 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.
  • TODO Files / Markdown TODO Lists 
    • These are not TODO/FIXME comments
    • GitHub - todotxt/todo.txt - A complete primer on the whys and hows of todo. This is not an extension but a standard for .todo files.
    • Todo List
      • TodoList TreeView Editor.
      • Check your todo list with a TreeView
      • Supports *.todo
    • Todo MD
      • Todo tracking based on `todo.txt` format.
      • Lots of features and options
      • By default works for files with names todo.md, someday.md & todo.archive.md (Can be configured with todomd.activatePattern setting).
    • Todo+
      • Manage todo lists with ease. Powerful, easy to use and customizable.
    • Projects+ Todo+
      • Bird's-eye view over your projects, view all your todo files aggregated into one.
      • Requires some setting up.
    • Markdown Todo
      • Manage todo lists inside markdown files with ease.
  • Misc
    • Quit Control for VSCode
      • Stop mistyping keyboard shortctus that close/quit VSCode unintentionally
      • Do you hate mistyping ⌘Q and shutdown VSCode with all your unsaved and beloved work? This extension is for you!
      • Do you hate the fact that ⌘W or CTRL+W closes VSCode if there are no open files? This extension is for you!
      • This extension will make all "quitish" keyboard shortcuts prompt you if you really want to close everything if they were going to do so.
    • 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.
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.
Panels
  • Problems
    • Problems: Copy Plus
      • Copy diagnostic messages from the Problems Panel to the clipboard or a file. This extension provides powerful features to filter, format, and save exactly what you need, overcoming the limitations of VS Code's built-in functionality.
      • Powerful filtering (by severity, file, message), custom formatting templates and JSON output.
      • This extension is a fork of the original Problems: Copy by ArturoDent.
    • Problems: Copy
      • Copy to the clipboard the problems shown in the Problems Panel.
  • Outline
    • Outline Map
      • A visual, interactive outline map that combinesAlternative Minimap. The clarity of the outline with the intuitive overview of the minimap. Enhanced version of vscode built-in outline.
      • Automatically scroll, expand and collapse the outline tree when the cursor moves or the viewport scrolls.
    • Outline Explorer
      • This extension supports displaying outlines in a manner similar to the explorer, inspired by the "Show Member" feature in JetBrains IDEs.
      • This extension displays files and their outlines in a tree structure.
    • Outline Eclipsed
      • An outline view for VS Code that lets you drag and drop to reorganize your document structure.
      • Supports multiple languages.
      • Very useful for Markdown files.
  • Explorer
    • Misc
      • Focus on Click
        • This is useful if you have the following setting "explorer.autoReveal": false
        • This adds a focus button into the Explorer Panel (which is like the Webstorm's focus button).
        • Selecting a file in the Explorer panel and then pressing this button will cause VSCode to move focus to that selected file.
      • Explorer File Sizes
        • Tiny, fast file size badges in the Explorer Panel with tooltips and optional folder sizes.
        • Hover to see exact bytes/MB.
        • Optional recursive folder sizes.
      • Open in File Manager
        • Add a button to open file manager (finder, file explorer) on the status bar and editor toolbar.
        • Doesnt work
      • Windows Explorer Context Menu
        • Opens Windows Explorer Context Menu on files and folders within VSCode.
    • Expaned / Collapse Folders

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

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.
    • All-in-One PHP support - IntelliSense, Debug, Formatter, Code Lenses, Code Fixes, Linting, Refactoring, PHPUnit Tests, Web Server, and more.
    • This has code formatting preferred code styling like PSR-12, PSR-2, Allman and K&R. 
    • This is a complete PHP development environment in one plugin but is expensive. It offers all features of Intelephense and more rolled into one package.
    • There is a free plan.
    • Not available through the Microsoft Store.
  • 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
JavaScript / TypeScript
  • VarLens
    • VarLens is a powerful Visual Studio Code extension that transforms your debugging experience by providing variable inspection and persistent state tracking across debugging sessions.
    • It will remember the values of variables in your debug session so you can examine them after the code has run rather than keeping the code paused.
    • Supported Languages
      • JavaScript
      • TypeScript
    • 1. Introduction to VarLens - See Through your variable | Wani Ubaid - A simple introduction and how to use this extension.
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.
Java
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.
  • Brewfile
    • This extension adds Ruby syntax highlighting for Brewfiles.
  • Ruby Haml
    • This extension provides syntax highlighting for Ruby Haml files.
  • ERB Linter
    • This extensions provides interfaces to erb-lint for vscode.
    • This project is based on ruby-rubocop (a code analyzer for Ruby)
Rails
TOML
  • Even Better TOML
    • Fully-featured TOML support.
    • It is currently a preview extension, it might contain bugs, or might even crash.
  • Better TOML
    • Better TOML Language support.
    • Not been updated since 2018.
Smarty
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

AI

All things AI.

Coding Assistants
  • 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.
  • 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
  • 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.
  • 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.
  • Pieces
    • AI assisted code snippet manager.
    • 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.
    • Pieces is an app that automatically remembers your work and helps you find and reuse it later.
    • 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.
    • MS Store
      • What you did, in what app, and when—it’s all saved automatically. Pieces helps you form memories of the things that matter most: documents, chats, tabs, code, research, and more. Everything stays connected to the bigger picture, so you can pick up right where you left off—without breaking your flow.
      • With Artificial & Long-Term Memory, Pieces works quietly in the background across the apps you already use, capturing context as you go. When you need something, it’s there—organized, enriched, and surfaced at the right moment.
      • Stay in control of your memories: Pieces is private and offline-first by default, with the option to backup data across devices when you choose. Search naturally by time, content, or context to find exactly what you need—even months later.
      • Pieces is more than storage. It’s a personal memory layer for your digital life, designed to keep you focused, organized, and in the moment.
    • Simple English Explanation
      • Pieces remembers your work so you don’t have to.
        • When you’re working on your computer (especially coding or writing), you constantly:
          • copy code
          • open links
          • read docs
          • chat with AI or teammates
          • switch between apps
        • Pieces quietly saves those useful bits for you and lets you find them later.
      • Think of it like this:
        • It’s a smart notebook that fills itself
        • A memory for your computer work
        • Or a “where did I see that?” button
      • What it actually does day-to-day
        • Saves code snippets, links, notes, and context automatically
        • Lets you search in plain English, like: “that React example I used last week”
        • Has an AI helper that can explain, reuse, or improve things you saved
        • Works across apps (browser, code editor, etc.)
      • What problem it solves
        • Instead of:
          • re-Googling the same thing
          • digging through old tabs
          • scrolling chat history
          • losing good code you copied once
        • You just ask Pieces or search it.
      • Who it’s mainly for
        • Developers
        • Technical writers
        • Anyone who works with lots of tabs, code, or notes
    • Free and Pro avaiable
Toolkits
  • AI Toolkit for Visual Studio Code
    • AI Toolkit for VS Code streamlines generative AI app development by integrating tools and models.
    • Browse and download public and custom models; author, test and evaluate prompts; fine-tune; and use them in your applications.
    • AI Toolkit is a powerful extension for Visual Studio Code that streamlines agent development.
    • By Microsoft

The Code

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.
    • Intelephense can be used as a formatter and a linter.
    • Official
      • Intelephense: Documentation
        • It is recommended you read these instructions as they offer some very helpful information.
        • Installation: The built-in VSCode PHP Language Features extension can cause excessive completion suggestions that are out of context and is best disabled. Go to the Extensions UI and search for PHP Language Features to disable it. Alternatively, you can disable parts of it via it's configuration settings. Other third party extensions that provide similar functionality to Intelephense may also need to be disabled for best results. 
        • Best Practice: Providing type information in your PHP code will result in a better experience when using Intelephense. Type information can be provided via coded type declarations or PHPDoc type annotations. Where both have been provided, PHPDoc type annotations are given precedence as they can provide more detailed type information. 
      • GitHub - bmewburn/vscode-intelephense
        • This has proper lsit of premium features.
      • GitHub - bmewburn/vscode-intelephense: Quick Start
    • General
      • DocBlocks with auto completion is a Pro feature. The free version (maybe just VSCode) creates and empty DocBlock in the usual mannor /**
    • Tutorials
    • Issues
      • Q: Sometimes after I correct an error, there still is a red wavvy underline where the error was and this does not disapear until I save, which can be frustrating.
      • A: This is not caused by Intelephense, it is because you have not disabled the built-in VSCode PHP Language Features as per the Quick Start instructions. Once installation is complete, Intelephense's official documentation recommends that you disable the built-in PHP Language Features extension that comes with VS Code so:
        • Go to the `Extensions UI`
        • Search for `PHP Language Features` and disable it. 
      • Q:Everytime I save a change, Intelephense updates its index and this slows VSCode response time down while it is indexing.
      • A: Xampp Causes PHP Intelephense to start indexing · Issue #3357 · bmewburn/vscode-intelephense · GitHub
        • Windows Defender is causing the slowness, so I added an exclusion which fixes that, but why is intelephense triggering an index refresh (might just be a reflex and not an index).
  • PHP IntelliSense
    • Advanced Autocompletion and Refactoring support for PHP
    • Might not be needed in new versions of VSCode.
  • vscode-phpactor
    • Phpactor PHP Language Server extension for vscode
    • Integrates Phpactor with VSCode.
    • Note that the Phpactor Language Server currently only runs on Linux and macOS so if you are on Windows you might need to make use of WSL or a Linux VM combined with VSCode Remote.
    • This is difficult to setup, but has some powerful features.
    • GitHub - phpactor/phpactor
      • Mainly a PHP Language Server with more features than you can shake a stick at - phpactor/phpactor
      • This project aims to provide heavy-lifting refactoring and introspection tools which can be used standalone or as the backend for a text editor to provide intelligent code completion.
    • VS Code — Phpactor latest documentation - Intelligent completion and refactoring tool for PHP
  • 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 (Snippets)
  • 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).
  • Evondev snippets
    • Useful HTML CSS snippets for a Frontend Developer.
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.
    • Formatting and Linting
    • By integrating with Biome's language server, the extension provides the following features:
      • Format on save
      • Code refactoring
      • Inline suggestions and quick fixes
    • Official
    • General:
      • 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.
    • 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.
      • This creates the config file. It might be a standard command amongst npm packages 
        npm biome --init
    • ESLint and Prettier to Biome
    • 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.
    • See the ESLint section in npm packages for installing ESLint.
    • 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.
    • 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"]
      • Format on Save
        • 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.
        • 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
  }
}
  • eslint-disable-snippets
    • Itellisense for eslint disable comments.
    • Start typing eslint-disable in a file to trigger the snippet autocomplete.
  • quick-lint-js
  • StandardJS
    • Visual Studio Code extension for JavaScript Standard Style with automatic fixing.
    • This uses Javascript Standard Style (StandardJS)
      • Style guide, linter and formatter
      • Alternative to ESLint/Prettier
      • It "just works" (no descisions, no configuration, no overrides) (e.g. opinionated)
      • Uses ESLint behind the scenes
    • Requires NodeJS.
    • StandardJS Tutorial: A Simple Alternative to Prettier & ESLint! - YouTube | The Common Coder
      • Tired of managing both Prettier and ESLint? StandardJS (JavaScript Standard Style) might the all-in-one solution you've been looking for!
      • StandardJS takes the hassle out of configuring both Prettier and ESLint by offering a single tool that handles the linting and formatting of your JavaScript code.
      • In this video, we'll learn how to install and configure StandardJS in a project, and show you just how easy it is to use.
      • Whether you’re tired of juggling multiple tools or just curious about other options, StandardJS is worth checking out if you’re looking for a Prettier and ESLint alternative. Plus, it works seamlessly with Visual Studio Code for a smooth development experience.
  • 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 / TODO: / FIXME: / BUG:) 
  • 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.
      • Old but is the original and still works.
    • 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: / BUG:
    • 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).
      • The predefined keywords BUG, FIXME, HACK, and TODO are present without the colon so you might want to edit them and add the colon on to the end of them to folow normal convetions,
      • If you are using another exention for highlighting you can disable highlighting in this extension.
      • On large projects this might slow initial loading down becasue it has to enumerate the whole file tree.
      • You can add custom Tags.
    • 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.
      • Command: List highlighted annotations
        • List annotations to the Output tab when you have a folder and/or workspace open.
        • When you are working on individual files in one or more editors, the command returns 0 results.
        • The results are not instant becasue it searches the project.
      • Show TODO in the problems colum
        • There is an option for this, but this is not perfect.
      • Only TODO: and FIXME: are predefined so you will need to add BUG: etc...
      • Tags colouring can be completely customised.
      • You can add custom Tags.
    • 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.
      • No longer developed.
    • TODO
      • Highlight annotations inside comments.
      • By default, 3 types of annotations are supported: NOTE, TODO and BUG.
      • They can be used by writing e.g. NOTE: or NOTE@Whatever:.
      • I colours the font of TODO: and then the writing afterwards
    • Todo Tomorrow
      • Highlights TODO, HACK, FIXME, etc. comments.
      • By default this extension justs bolds the keywords.
      • You can override the keywords and their styles.
    • Highlight
      • Advanced text highlighter based on regexes. Useful for todos, annotations, colors etc.
      • There are alternative extensions that you may be considering, like TODO Highlight, but this is more generic, this can apply different styles to different capturing groups within the same regex, and this is focused on doing only one thing and doing it well.
  • 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.
  • tl;dr pages
    • Hover for commands using simplified and community-driven man pages.
    • Provides tldr hover information for common commands in
      • Shell scripts, Batch files, Dockerfile, PowerShell and Makefile files.
    • tldr pages are a collection of simplified and community-driven man pages.
  • tl;dr panel
    • A utility panel for tldr-pages shell command summaries
    • A utility for quick and easy command lookups directly in VSCode. Makes use of the excellent tldr pages.
    • tldr is a collection of community-maintained help pages for command-line tools, that aims to be a simpler, more approachable complement to traditional man pages.
    • Features
      • Ability to search any command available in the tldr documentation
      • Lightweight and fast, opens directly in vscode using the command palette
      • Always up to date with the official tldr pages
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 by generating a rainbow palette staggered for each indentation.
      • 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.
    • Evondev - Indent Rainbow Palettes
    • 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.
  • Highlighting (Errors)
    • Error Lens
      • Improve highlighting of errors, warnings and other language diagnostics.
      • Puts the error message in the code and optionally you can enable matching gutter icons.
      • usernamehw/vscode-error-lens | DeepWiki - Error Lens is a VS Code extension that enhances the display of diagnostic information (errors, warnings, info, and hints) by providing rich visualizations directly in the editor. This document provides a technical overview of the extension's architecture, components, and data flow.
      • Gutter Icons
        • When enabled - show gutter icons representing the severity level (error, warning, info, hint) of diagnostics at specific line locations. (In place of the debug breakpoint icon)
        • Demo
        • Icons not appearing
          • They need enabling after you install the extension.
          • Error Lens: Gutter Icons Enabled 
            "errorLens.gutterIconsEnabled": true
    • Error Highlighter Pro
      • Enhanced error highlighting with context - highlights errors, warnings, and their surrounding lines for better visibility
  • 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).
      • This formatter does not support PHP out of the box, but you can use a plugin to add this functionality.
      • Official
      • Installing
      • PHP Plugin
    • Prettier ESLint
      • A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
      • Prettier might now have JavaScript and TypeScript support built in, in which case this extensions would not be needed.
      • What does this extension do? some newbie questions · Issue #267 · idahogurl/vs-code-prettier-eslint · GitHub
        • Q: Does Prettier not support JavaScript and TypeScript out of the box?
        • A: Yes, it does; however, getting ESLint and Prettier to work in the same project causes some issues. You'll format with Prettier and end up with linting errors. prettier-eslint fixes this issue by formatting your code via prettier, and then passing the result of that to eslint --fix.
        • Q: Can these not be installed globally? as mentioned here on the same page
        • A: There have been issues with some global installations. Sometimes it works and other times it does not.
    • 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
      • You can create the .editorconfig file directly in VSCode by right-clicking in the folder structure and selecting the option to generate it.
    • StandardJS
      • See this plugin in the Linters section for more information.
      • Visual Studio Code extension for JavaScript Standard Style with automatic fixing.
  • 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
    • 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 Installs
    • Git History (Guodong Sun)
      • Git history panel in your VS Code
      • 73K Installs
    • 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 (Homepage) - Interactive Git Log (IGL) is the most powerful Git GUI for VSCode, streamlining and enhancing your interaction with Git repositories.
    • Git Blame
      • See Git Blame information in the status bar.
  • .gitignore
    • Templates
      • .gitignore Generator
      • gitignore (CodeZombie)
        • Lets you pull .gitignore templates from the https://github.com/github/gitignore repository.
        • Language support for .gitignore files and assists you in working with .gitignore files.
      • YAGI - Yet Another GitIgnore
        • Smart .gitignore generator with auto-detection, template preview, and intelligent suggestions
        • A powerful Visual Studio Code extension that simplifies creating and managing .gitignore files for your projects. YAGI fetches up-to-date templates for various languages, frameworks, tools, and environments using the Toptal gitignore API.
      • Add gitignore
        • A VS Code extension that simplifies the integration of .gitignore files.
        • Choose from a vast collection of templates directly from github/gitignore, and seamlessly integrate or extend them in your projects.
    • Right Click
      • gitignore
        • Add a file or folder to .gitignore by right clicking on them.
        • Treats \n as a non empty line, so adds new entries below which then leaves an empty line.
        • There is no repo so cannot report this issue above
      • Global Gitignore
        • Add files and folders to global or local gitignore.
        • This VS Code extension adds 3 context menu items to the file explorer.
          • "Add to Global Gitignore"
          • "Add to Gitignore"
          • "Add to .git/info/exclude"
      • Add to GIT Ignore
        • Adds files to .gitignore or .git/info/exclude
        • Add files or general patterns based on their filename to .gitignore or .git/info/exclude.
        • This is useful for more finegraind additions.
      • ignore "g" it
        • A simple way to update .gitignore from UI.
        • Add/Remove a (file|directory|extension) from .gitignore via the VSCode UI.
        • Old and only 1 release. I have not tried this yet but the functionality is ideal.
        • Adds quite a lot of menu items
      • Gitignore Adder
        • Add selected directory or file to the .gitignore easily.
        • Has potential but does not use the correct path for windows folders.
      • gitignore (Shreyas Sarve)
        • Extension helps you to add files/folder to gitignore on single click.
        • The extensinons needs enabling first.
        • Has potential but does not use the correct path for windows folders.
    • Managers / Editors
      • GitIgnore Assistant (I use this one for my right clicks.)
        • Easily add, remove, or clean entries in your .gitignore by right clicking a file or folder in the Explorer.
        • While editing the workspace .gitignore file, Clean .gitignore is available in the editor context menu.
        • Other features such as duplicate detection are available.
        • This extension operates on the .gitignore file located at the root of the workspace. It does not manage .gitignore files in subfolders or handle global Git ignore files.
      • Gitignore Helper
        • Essential helper tools for managing .gitignore files
        • Gitignore Helper is the ultimate Visual Studio Code extension for managing your .gitignore files.
        • From a powerful Visual Editor with intelligent autocomplete to right-click context menu integration, this tool streamlines every aspect of git ignore management.
      • Git Exclude with panel
        • Add files to .git/info/exclude directly from the context menu
        • A powerful VS Code extension to manage your local git exclusions (.git/info/exclude) without polluting the shared .gitignore. Perfect for local configuration files, secrets, logs, and temporary test files.
        • While .gitignore is great for project-wide ignore patterns shared with your team, sometimes you need to ignore files only on your machine.
        • The .git/info/exclude file works exactly like .gitignore but is never committed.
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.
    • Has 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
  • Console.Log
    • Turbo Console Log
      • Automating the process of writing meaningful log messages.
      • Turbo Console Log extension makes debugging much easier by automating the operation of writing meaningful log message.
      • Makes console.log messages much easier to use
    • Console Ninja
      • JavaScript console.log output and runtime errors right next to your code.
      • Console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It's like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.
      • Free and Paid versions.
    • Wrap Console Log Simple
      • Wrap to console.log(or any function name) by word or selection
      • Click a variable and it will make a console.log() function for logging.
  • Browser Integration
  • WordPress
  • PHP
  • Python
    • Python Debugger
      • Python Debugger extension using debugpy.
      • A Visual Studio Code extension that supports Python debugging with debugpy. Python Debugger provides a seamless debugging experience by allowing you to set breakpoints, step through code, inspect variables, and perform other essential debugging tasks. The debugpy extension offers debugging support for various types of Python applications including scripts, web applications, remote processes, and multi-threaded processes.
  • Misc
    • Watch Expressions With Address
      • Quickly add variables with addresses to the Watch panel in VS Code debugging.
      • It works both from the Debug Variables Context Menu and by selecting variables directly in the editor.
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.
  • Gitlantis - Visual Studio Marketplace
    • Transform your project into an explorable 3D world
    • Gitlantis transforms the way you explore your project files by turning your codebase into an immersive ocean world.
    • Navigate your folders and files by interacting with the floating lighthouses and buoys — it’s a unique, fun, and creative way to visually explore and manage your code.

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

 

 

 

 

 

Read 2615 times Last modified on Wednesday, 17 December 2025 17:21
Published in Programming
back to top