WissmannWeb Editor Essentials - Extension Pack for VS Code

This extension pack for Visual Studio Code adds extensions that are amazingly useful for development with VS Code.

See the CHANGELOG for the latest changes

As tools evolve, the usefulness of extensions come and go. I reserve the right to update the extension pack's contents up to my own discretion.

Recommended Settings

Here are some of my recommended settings. These are optional, but I get asked a lot for them, so here they are.

Editor settings

  "workbench.colorTheme": "Default Light+",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "newUntitledFile",

  "editor.renderIndentGuides": false,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "none",
  "editor.tabCompletion": "on",
  "editor.tabSize": 2,
  "editor.wordWrap": "off",

  "npm.packageManager": "yarn"

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

Prettier settings

  "prettier.singleQuote": true,
  "prettier.printWidth": 140,

Todo Tree settings

  "todo-tree.filtering.excludeGlobs": [
    "**/node_modules/**",
    "**/dist*/**"
  ],
  "todo-tree.tree.flat": true,

Included

Here is the list of extensions the pack includes:

• Prettier - Code formatter - VS Code plugin for prettier/prettier
• Visual Studio IntelliCode - AI-assisted development
• gitignore - A extension for Visual Studio Code that assists you in working with .gitignore files.
• npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements
• Path Intellisense - Visual Studio Code plugin that autocompletes filenames
• Todo Tree - Show TODO, FIXME, etc. comment tags in a tree view
• Material Icon Theme - Material Design Icons for Visual Studio Code
• EditorConfig for VS Code - EditorConfig Support for Visual Studio Code
• Debugger for Chrome - Debug your JavaScript code in the Chrome browser.
• Color Highlight - Highlight web colors in your editor
• Bracket Pair Colorizer 2 - A customizable extension for colorizing matching brackets
• Auto Rename Tag - Auto rename paired HTML/XML tag