VS Code Configuration

Extensions

CLI

I recommend installing the CLI for VS Code. Then, from the command line you can use code to open your project or code --install-extension <extension-id> to install any of the extensions below.

Config

• editorconfig.editorconfig: Overrides user/workspace settings with settings found in .editorconfig files.

Twig

• whatwedo.twig: Support for the Twig syntax
• bajdzis.vscode-twig-pack: Snippets, auto-completion, emmet, and syntax for TWIG language
• mblode.twig-language-2: Twig syntax highlighting, snippets, emmet, etc. (forget why I needed this in addition to the one above, but I did at one point)
• marcostazi.VS-code-drupal: Syntax highlighting support for Drupal specific file types (.module, .inc, .theme, etc.)

JS, CSS, HTML

• dbaeumer.vscode-eslint: Integrates ESLint (can also run via yarn lint)
• stylelint.vscode-stylelint: Lint CSS/SCSS/Less with stylelint
• esbenp.prettier-vscode: Code formatter using prettier

PHP

• felixfbecker.php-debug: PHP Debug Adapter

Optional helpers

• bradgashler.htmltagwrap: Wraps your selection in HTML tags
• Tyriar.lorem-ipsum: Generates and inserts lorem ipsum text
• ryu1kn.partial-diff: Compare (diff) text selections within a file, across files, or to the clipboard
• guosong.vscode-util: Additional functions such as sort, trim lines, and more
• Tyriar.sort-lines: Sorts lines of text
• stevensona.character-count: Counts and displays the number of characters in the status bar

Settings

Use ⌘, to open settings. Make changes via the UI or edit settings.json directly. Note: some settings here will be overridden by .editorconfig.

My current user settings:

{
  "debug.allowBreakpointsEverywhere": true,

  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.minimap.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "editor.formatOnType": true,
  "editor.formatOnSave": true,

  "emmet.includeLanguages": {
    "twig": "html"
  },

  "files.associations": {
    "*.html": "twig"
  },
  "files.insertFinalNewline": true,

  "html.format.endWithNewline": true,
  "html.format.preserveNewLines": false,

  "javascript.updateImportsOnFileMove.enabled": "always",

  "stylelint.validate": ["css", "scss"],

  "[twig]": {
    "editor.formatOnSave": false
  },
  "[theme]": {
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}