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 optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favourite platform - Linux, macOS, and Windows.
    • A standalone source code editor that runs on Windows, macOS, and Linux. The top pick for JavaScript and web developers, with extensions to support just about any programming language.
    • Microsoft Visual Studio Code is a free, powerful, lightweight code editor for Windows, macOS and Linux. Based on open source, it is highly customizable with over 25,000 extensions, for every developer and every programming language.
    • Although VSCode is classed as a text editor, it is now more like an IDE but requires you to install extension for functionality you need.
  • All the names for Visual Studio Code
    • Visual Studio Code
    • VSCode
    • VS Code
    • vscode
  • Features of note
    • Integrates with Docker Desktop
    • Copilot built in
    • 25,000+ extensions
    • VSCode can be run in the cloud
  • Visual Studio vs Visual Studio Code
    • Visual Studio 2022 Community Edition – Download Latest Free Version
      • Try our free, fully-featured, and extensible IDE for creating modern developer apps for Windows, Android, & iOS. Download Community for free today!
      • The download is a Stub-Installer, not a full offline package.
    • Visual Studio Code vs Visual Studio - YouTube
      • Deciding on Visual Studio or Visual Studio Code is not just a personal decision but based on the best option for the operating system and application type you are building.
      • There is a community editions or Visual Studio.
      • VSCode is a text editor which can be extended by plugins.
    • Visual Studio Ide vs Code: What's the difference between visual studio and vs code? - DEV Community
      • Visual Studio is a full IDE (integrated development environment) primarily used for .NET development. Debugger, refactor-er, compile, create packages, and more. The full version that supports .NET and .NET Core is not cross-platform. It is only on Windows. It also is used for other languages, but primarily for .NET C#/F#/etc development for and on Windows machines/servers. Working with .NET 4.x, WCF, WebAPI, building DLLs? Use Visual Studio probably. I do not use Visual Studio, but I am not a Windows/.NET dev.
      • Visual Studio Code is a text editor with lots of optional plugins -- it is more akin to Atom, SublimeText, and BBEdit. It has some features of Visual Studio, like syntax highlighting, some code sense, and other neat features. It is cross-platform and can be used for writing pretty any language. I use it on Mac and Linux for PHP, Python, HTML5, JavaScript, NodeJS, and more.
  • IntelliSense
    • Code completion with code explanations in a modal
  • 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

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

Web / HTML

Python

TOML

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

C++

Joomla

A collection of Joomla related links.

 

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

Using VSCode

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

Commands

Keyboard Shortcuts

  • Command key on the Mac = Ctrl key on the PC
  • Command Palette
    • F1
    • Ctrl + Shift +P
    • In the search box at the top, type >
  • Execute your code
    • F5 or use the `Run` button.
  • Refactoring
  • Online
    • When on any GitHub repo, if you press the period "." then it will change the page to an online VSCode editor.

Links

General

Settings

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

Themes

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

Workspaces

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

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

  • General
  • Optimising
  • Setting Up
    • How to Configure VS Code Workspace Settings: A Step-by-Step Guide
      • Master VS Code workspace settings for tailored development and enhanced productivity.
      • Save changes: Your modifications are saved automatically in the .vscode/settings.json file within your project folder. For advanced configurations, you can directly edit the JSON file related to VS Code workspace settings.
      • User vs. Workspace Settings: Key Differences
  • Customise your VSCode setup
  • Using extensions only for specific Workspaces / Profiles
  • Export VSCode extension list
  • Sync VSCode Settings (inbuilt)
    • This is just for your user, not for sharing settings between teams, colleagues and collaborators.
    • Settings Sync | Visual Studio Code
      • Synchronize your user settings across all your Visual Studio Code instances.
      • Settings Sync lets you share your Visual Studio Code configurations such as settings, keyboard shortcuts, and installed extensions across your machines so you are always working with your favorite setup.
  • Shared Settings / Recommended Extensions
  • Workspaces / Folder / Root 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
    • 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.
  • VSCode Config File / Config Folder
    • The config file for single folder workspace is located at .vscode/settings.json
    • The config file for the multi-root workspace is: .code-workspace
    • .vscode vs .code-workspace · microsoft/vscode-discussions · Discussion #2498 · GitHub
      • Put .vscode/settings.json in .gitignore, so any changes made by the user won't be pushed to the repository
      • Use Language-specific user settings, but this depends on the extension setting itself support that so, which may not work 100%.
      • About the .code-workspace file, it is designed to Multi-root workspaces scenarios, and the obvious answer is indeed the right one. Anything you define there will be / can be overwritten by the folder setting. Either way, there is no way to give users the ability to change these settings without commiting the changes.
    • Best practices in handling .code-workspace files · Issue #3264 · microsoft/vscode-docs · GitHub
      • Semantically a workspace is hierarchically above the folder concept, i.e. a workspace contains (zero or more) folders. This being the case, it makes sense for a .code-workspace file to be outside it's root folders/repositories, even when it's a single folder workspace, like so:
      • So how do you keep .code-workspace files source controlled and how do you share them with your team?
      • I would love to know how you guys solve this problem and if there's a good solution, I think this would be a very important piece of information that should be added to the documentation.
  • Tutorials

NPM for Windows

For some plugins you need to install NPM

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

Errors

  • 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

Setup your Project (Cheatsheet)

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

VSCode User Settings (optional)

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

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

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

Default Repo Config Files

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

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

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

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

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

    },  

    /* Prettier */

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

    /* ESLint */

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

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

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

# top-most EditorConfig file
root = true

# Default Behaviour
[*]
indent_style             = tab
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
    • EditorConfig Specification | EditorConfig - The latest official specification.
    • 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.
    • 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.
    • 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.
    • 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.
  • .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"
            }
        }
    ]
}
    • 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.
    • 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.
  • .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/

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

Start Project (With no GitHub Repo)

Create Workspace

  1. Create a local folder (this will be your workspace for you project)
  2. Setup files in your the folder
    • 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

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 local folder)
  3. Configure the workspace settings (don't know what to configure yet)
  4. Configure your extensions, including `recommended extentions`

Setup the Git Repository

  1. Initialise Git
  2. Create a repository on GitHub (or should i create in VSCode and then push??)
  3. Fill in GitHub credentials into your workspace
  4. Push changes to GitHub

Start Project (With an already existing GitHub 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.

Start Project (With an already existing project that is fully configured locally in Netbeans.)

  • Open your project folder in VSCode as follows:
    • File --> Open Folder --> `.../YourProjectFolder/`
  • Local Git Repository
    • When you open a project that was created in netbeans, the local Git repository is automatically picked up probably becasue the locl git is store 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-Configure the repository config files
    • .gitignore
    • .gitattributes
    • .editorconfig
    • and any others....
  • Re-Authenticate GitHub
    • Read Working with GitHub in VS Code | Visual Studio Code - Working with GitHub Pull Requests and Issues in Visual Studio Code
    • Instructions
      • Install the GitHub Pull Request extension

      • 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.
    • You should now 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.

ddddCheck Repository Sync

Extensions

General

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

My Curated List

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

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

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

VSCode

Styling (Not Themes)
  • vscode-icons
    • Adds real icons to your Visual Studio Code files and folders.
  • vscode-styled-components
    • Syntax highlighting and IntelliSense for styled-components.
    • Not sure what this is for but it is popular.
  • Apc Customize UI++
    • Advanced VSCode user interface customizations. Very experimental.
    • This extension allows customization outside vscode scoop.
  • Vibrancy Continued
    • Vibrancy Effect for Visual Studio Code.
    • This gives a glass look and feel to the editor, a semi-transparent effect.
    • This may cause an error message "Your Code Installation appears to be corrupt. Please reinstall". This is caused because the VSCode CSS is being altered.
    • Set the your theme back to the system default which is "Dark+"
  • Peacock
    • Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
    • If you frequently have multiple VS Code instances open and struggle to tell them apart, Peacock might be worth taking a closer look at, the extension subtly changes the color theme of your workspace.
    • But it’s not only when working on multiple projects at once where Peacock shines. It also comes in handy when using VS Live Share or VS Code’s Remote features and you quickly want to identify your editor.
Themes

Yes these are also extensions but deserve their own section. Pick one you like.

System Resources
  • Resource Monitor
    • Display CPU frequency, usage, memory consumption, and battery percentage remaining within the VSCode status bar.
    • The Dev Containers extension lets you use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment
Keybindings and Toggles
  • Notepad++
    • Popular Notepad++ keybindings for Visual Studio Code
    • This extension ports popular Notepad++ keyboard shortcuts to Visual Studio Code.
    • Adds things like Ctrl + H
  • Toggle
    • Toggle any VS Code setting by using your favorite keybindings.
  • Formatting Toggle
    • A VS Code extension that allows you to toggle formatting settings ON and OFF with a simple click.
Productivity 
  • Text Pastry
    • Extend the power of multiple selections in VS Code. Modify selections, insert numeric sequences, incremental numbers, generate uuids, date ranges, insert continuously from a word list and more.
    • Text Pastry lets you reduce repetitive work and use multiple cursors more effectively in VS Code.
  • TypeScript Hero [Deprecated]
    • Additional toolings for typescript
    • TypeScript Hero is a vscode extension that makes your life easier. When you are coding a lot of TypeScript you may want vscode to organize your imports.
  • Bookmarks
    • Mark lines and jump to them.
    • This extension is great when you are working with large files, you can jump with the command Pallet or use keyboard shortcuts.
  • Project Manager
    • Easily switch between projects.
    • This is needed because each VSCode instance only works on one Workspace/Project at a time.
    • This amongst other things adds a favourites pane so you can select other projects you have been working on almost like a recently opened menu.
    • VSCode extensions to maximise your productivity - YouTube | Dev tips by MoHo
      • In this video, I am going to talk about two VS Code extensions that are going to save your time if you are working on multiple projects.
      • also install Peacock for clarity on which window is for which app.
Tasks
  • Task Explorer
    • Tasks management for npm, vscode, yarn, ant, gradle, grunt, gulp, batch, bash,php composer, make, maven, python, perl, powershell, ruby, pipenv, nsis. Supports external task providers via API.

Extensions Packs

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

Programming Languages

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

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

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

Media

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

The Code

AI Code Autocomplete / AI Testing / Coding Assistants

All things AI.

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

Not quite AI but a favourite for developers.

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

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

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

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

  • Brackets
    • Bracket Pair Color DLW
      • A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Color DLW” setting added in VS Code v1.60.
      • Do I need this?
    • Bracket Pair Colorization Toggler
      • Quickly toggle 'Bracket Pair Colorization' setting with a simple command
      • Same as 'Bracket Pair Color DLW'
    • Bracket Pair Colorizer 2 [Deprecated]
      • A customizable extension for colorizing matching brackets
      • This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.
      • I'm glad so many people found it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
      • This extension is deprecated as this functionality is now built-in to VS Code. Configure these settings to use this functionality.
  • Tags
    • Highlight Matching Tag
      • Highlights matching closing and opening tags.
      • This extension highlights matching opening and/or closing tags.
      • Optionally it also shows path to tag in the status bar.
      • Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.
      • Officially supported markup: HTML and JSX. Other flavors (XML, Vue, Angular, PHP) should work, but there are no guarantees. Feel free to report the issues on them anyway.
      • This extension is probably not needed anymore because this functionality is built in to VSCode, however it does add additional styling options.
  • Indentation
    • Indent-Rainbow
      • Makes indentation easier to read
      • When this extensions causes red blocks to appear, this is indication on of the following
        1. there is a mismatch in the indentation, e.g. maybe 3 spaces instead of 4 spaces.
        2. if there are spaces or tabs where they are not needed.
        3. maybe a when there is a mix of tabs and spaces for indentation.
    • Indenticator
      • Highlights your current indent depth.
      • This creates an indicator line on the column where you click your cursor, is does not add an indicator line for the lowest code group on the row. VSCode does this internally anyway so you can end up with 2 indicator lines.
      • This extension can be used by itself, but it's recommended to use it alongside the built-in indent guides (setting editor.renderIndentGuides). These show thin grey lines on every indent, while this extension highlights the indent on the indent depth the cursor is currently on.
      • This is not needed when using Indent-Rainbow.
  • Highlighting
    • CSS Stacking Contexts
      • Highlights stacking contexts in CSS and ineffective z-index declarations.
      • This extension makes Stacking Contexts visible in CSS and SCSS, allowing you to write z-index declarations using small values with confidence.
      • What No One Told You About Z-Index, Philip Walton, Engineer @ Google
        • The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.
        • The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.
    • Color Highlight
      • Highlight web colors in your editor.
      • This extension styles css/web colors found in your document.
    • DotENV
      • Support for dotenv file syntax
      • Enables syntax highlighting in your .env files.
    • Rainbow CSV - Visual Studio Marketplace
      • Highlights columns in comma (.csv), tab (.tsv), semicolon and pipe with different colors for easy of reading.
  • End of Lines (EOL)
    • VS Code doesn't have a native way to show line endings on each line, but you can use an extension.
    • Render Line Endings
      • Renders end of line characters (`CR`, `LF`, `CRLF`) when whitespace rendering is on.
      • This plugin treats EOL as whitespace and also respects the value of editor.renderWhitespace , thus this setting leads to different displays of whitespace/EOL.
      • editor.renderWhitespace = `trailing` is a good option to use.
      • Command to toggle Whitespace/EOL display 
        View: Toggle Render Whitespace
      • This extension contributes the following settings (compatible with code-eol extension): = I am not sure if this plugin and the orginal code-eol can be run at the same time.
      • 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.
    • 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
    • Prettier
      • 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).
      • Documentation
        • Documentation · Prettier
        • Configuration File · Prettier
          • You can configure Prettier via (in order of precedence):
          • 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
        • .prettierrc will override .editorconfig settings
        • "options.editorconfig: true"
        • Configuration File · Prettier
          • 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.
          • 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.
        • prettier.resolveConfig(fileUrlOrPath [, options]) - API · Prettier - If options.editorconfig is true and an .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. Currently, the following EditorConfig properties are supported:
        • List all supported `.editorconfig` values on one dedicated page · Issue #3692 · prettier/prettier-vscode · GitHub
      • Tutorials
      • PHP Plugin
        • GitHub - prettier/plugin-php: Prettier PHP Plugin
          • This plugin adds support for the PHP language to Prettier.
          • This plugin uses PSR / PER as guidance when making formatting decisions, but does not aim to be fully PSR / PER compliant. The idea is to stay reasonably close to how Prettier for JS works.
        • Prettier for PHP File Formats in VSCode - DEV Community
          • But it turns out that by default Prettier does not support PHP formatting language. Although there is a PHP plugin for Prettier created by the community.
          • You can just read the Use section on the GitHub page to see how to use the plugin together with Prettier to format the PHP language.
          • To format the PHP language, I suggest you use the VSCode extension called PHP Intelephense
    • Prettier ESLint
      • A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
      • Prettier might now have JavaScript and TypeScript built in, in which case this extensions would not be needed.
    • Format HTML in PHP
      • Provides formatting for the HTML code in PHP files using JSbeautify - Works well paired with a PHP formatting extension.
      • This provides functionality that Prettier does not do.
    • EditorConfig for VS Code
      • EditorConfig Support for Visual Studio Code
      • VSCode does not support coding styles specified in .editorconfig file, out of the box.
      • This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.
      • Limited property support.
      • Line endings are only changed on save.
      • This is an official VSCode pluging from editorconfig.org
      • Research
  • End of Lines (EOL)
    • Auto Convert End Of Line - Visual Studio Marketplace
      • Automatically convert files with configured end-of-line sequence
      • Every time a text files is opened, it converts all the EOL sequences into the specific one from the files.eol configuration, and displays an auto-dismissed notification. If no conversion is needed, or if files.eol is configured to be "auto", this extension does nothing.
      • This extension ignores new untitled files, which are already taken care of by the files.eol configuration.
    • Change All End Of Line Sequence - Visual Studio Marketplace
      • Runs the built-in 'Change End Of Line Sequence' on all files of a specified type in a workspace, leaving them open and unsaved.
  • Indentation
    • Python Indent
      • Correct Python indentation
    • Paste and Indent
      • This extension adds limited support for pasting and indenting code. Much like SublimeText's paste_and_indent.
      • This plugin will try and match the code you are pasting in with the current indentation level of your code.
    • Sass (.sass only)
      • Indented Sass syntax Highlighting, Autocomplete & Formatter
      • This extension is for only for .sass files, .scss support is built into vscode by default.
    • Indent 4-to-2
      • Convert indentation from tab or 4 spaces into 2 spaces.
Code Manipulation (Text)

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

  • Tags
    • Auto Rename Tag
      • Auto rename paired HTML/XML tag
      • Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
      • This will change the start and end tag instead of just the one you edit, so basically you are editing the pair in one go.
      • VSCode setting Editor: Linked Editing only works for HTML files.
      • From 1.44, VS Code offers the built-in auto update tags support for HTML and Handlebars that can be enabled with the setting editor.linkedEditing. If this setting is enabled, this extension will skip HTML and Handlebars files regardless of the languages listed in auto-rename-tag.activationOnLanguage
    • Auto Close Tag
      • Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
      • From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.
  • Case
    • change-case
      • Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
    • Multiple cursor case preserve
      • Preserves case when editing with multiple cursors.
      • Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection case in these situations. It recognises CAPS, Uppercase and lowercase. Works for typing or pasting.
  • Lines
    • Permute Lines
      • Lets you reverse or shuffle lines of code or filter for unique lines.
    • Sort lines
      • Sorts lines of text.
      • Many options.
  • Misc
    • Toggle Quotes
      • Toggle / Cycle " --> ' --> `
      • Allows you to change already encapsulated text, i.e. change from "..." to '...' using a Ctrl + ` instead of doing it manually.
    • Code Spell Checker
      • Spelling checker for source code.
      • A basic spell checker that works well with code and documents.
      • The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
Package Managers
  • Composer - All-in-One composer integration, quick actions, commands, automatic installation, tasks, code lenses, diagnostics, and composer.json IntelliSense.
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
      • View a Git Graph of your repository, and perform Git actions from the graph. Configurable to look the way you want!
    • Git History (Don Jayamanne)
      • View git log, file history, compare branches or commit.
      • 14M
    • Git History (Guodong Sun)
      • Git history panel in your VS Code
      • 73K
    • Git History Diff
      • View git history. View diff of committed files. View git blame info. View stash details.
  • .gitignore
GitHub
  • GitHub Repositories
    • Remotely browse and edit any GitHub repository
    • The GitHub Repositories extension lets you quickly browse, search, edit, and commit to any remote GitHub repository directly from within Visual Studio Code.
  • GitHub Pull Requests
    • Pull Request and Issue Provider for GitHub.
    • This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.
  • GitHub Actions
    • The GitHub Actions extension lets you manage your workflows, view the workflow run history, and helps with authoring workflows.
  • GistPad
    • Manage your code snippets and developer notes using GitHub Gists and repositories.
    • GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork, archive, and star gists/repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulling anything. It's like your very own developer library for building and referencing code snippets, commonly used config/scripts, programming-related notes, knowledge bases and interactive samples.

External Platforms

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

Sharing / Collaboration / Digital Nomad

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

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

Debugging and Testing

API Development
  • Postman
    • Streamline API development and testing with the power of Postman, directly in your favorite IDE.
    • The Postman VS Code extension enables you to develop and test your APIs in Postman directly from Visual Studio Code and Visual Studio Code Insiders.
  • REST Client
    • REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
    • Extensive instructions on the GitHub page
  • Thunder Client
    • Lightweight Rest API Client for VS Code
Debugging
  • 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
    • DevTools for Chrome App
      • A tool help to edit and debug when develop remotely chrome app.
      • Debug Javascript code, set breakpoints, set variables, step through.
    • Chrome Extension Developer Tools
      • VSCode support for Chrome extension development
    • Debugger for Chrome [Deprecated]
      • Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
      • This extension has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality. It is a debugger that debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more.
      • Introducing Chrome Debugging for VS Code - Chrome debugger extension for Visual Studio Code
    • Microsoft Edge Tools for VS Code
      • Use the Microsoft Edge Developer 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.
    • Debugger for Firefox - Debug your web application, Javascript code or browser extension in Firefox.
    • Open PHP/HTML/JS In Browser
      • A GUI to open PHP/HTML/JS files in browser on http://localhost or file:/// scheme. Suitable for XAMPP.
    • PHP XAMPP Runner
      • A VSCode extension to run PHP files on XAMPP local server by opening .php or .html files in the default browser.
      • This is not a complete plugin and the repo has no code
    • PHP Auto Switcher - Visual Studio Marketplace
      • Automatically switches php versions inside xampp folder
      • Issues - igorponce/php-auto-switcher/issues | GitHub - I have asked some important questions about how this works.
      • PHP Auto Switcher is a Visual Studio Code extension that automatically switches PHP versions inside the XAMPP folder or other specified based on the requirements specified in the composer.json file of your project.
      • Windows Only
  • 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.
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
      • Free and Paid versions.
  • Python
Running Code / Previewing
  • Code Runner
    • Run code snippet or 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.
Tools
  • Regex Match
    • Create, test and debug regular expressions in Visual Studio Code
    • Regex Match is a Visual Studio Code extension that enables dynamically creating, testing and debugging regular expressions within a text file. It provides a simple and user-friendly interface, making the process of working with regular expressions effortless and efficient.

CMS

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

Misc

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

Research

  • Setups (Extensions and settings)
    • 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.

 

Read 784 times Last modified on Saturday, 31 May 2025 07:48
Published in Programming
back to top