Angular VS Code Extension Pack

This extension pack contains all of my favorite VS Code extensions primarily targeted for Angular development.

I've been inspired by John's Papa Angular Essentials - Extension Pack for VS Code.

Recommended settings

Editor settings

  "editor.codeLens": false,
  "editor.renderWhitespace": "none",
  "editor.autoIndent": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "off",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "[typescript]": {
    "editor.formatOnPaste": false
  },
  "[css]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false
  },
  // recommended by stylelint extension
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

File settings

  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js": {
      "when": "$(basename).ts"
    },
    "**/*.js.map": {
      "when": "$(basename)"
    },
    "**/*.css": {
      "when": "$(basename).css"
    }
  },
  "files.hotExit": "onExit",
  "files.defaultLanguage": "typescript",
  "files.trimTrailingWhitespace": true,

Prettier settings

  "prettier.singleQuote": true,
  "prettier.printWidth": 120,
  "prettier.stylelintIntegration": true,

Stylelint settings

(as a stylelint property in package.json or a .stylelintrc file)

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-concentric-order",
    "./node_modules/prettier-stylelint/config.js"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "selector-type-no-unknown": null
  }
}

It requires following packages installed:

• stylelint-config-standard
• stylelint-config-concentric-order
• prettier-stylelint

List of extensions included in pack:

• Better Comments - Better readability of comments

• Angular Language Service - Provides a rich editing experience for Angular templates

• Path Intellisense - Filenames autocompletion

• GitLens — Git supercharged - Supercharge the Git capabilities built into Visual Studio Code

• TSLint - TSLint for Visual Studio Code

• Node npm - Supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json

• Prettier - Code formatter - Extension to format JavaScript/TypeScript/CSS using Prettier

• angular2-switcher - Easily navigate to typescript(.ts) | template(.html) | style(.scss/.sass/.less/.css)

• Hungry Delete - Smart backspace feature

• Angular TypeScript Snippets for VS Code - Adds TypeScript and HTML snippets for Angular

• Debugger for Chrome - Extension to debug code in the Google Chrome from VS Code

• angular2-inline - Adds specific features for inline templates and stylesheets in Angular

• stylelint - Extension to lint CSS/SCSS/Less with stylelint

• Auto Import - Automatically finds, parses and provides code actions and code completion for all available imports

• Formatting Toggle - A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click

• javascript console utils - Easy insert and remove console.(*) statements

• jumpy - Provides fast cursor movement, inspired by Atom's package of the same name

I hope you'll enjoy!