VS Code Configuration

Our recommended (and favourite) code editor is Visual Studio Code, so we’ve put together a list of our most helpful extensions and user settings. If you’re new to VS Code, get started with a Video Tutorial for Beginners.

Recommended Extensions

Every Day Helpers

• Bracket Pair Colorizer
  code --install-extension CoenraadS.bracket-pair-colorizer
• Trailing Spaces
• Blank Line at the End of File
• Change Case
• Select Line Status Bar
• Toggle Excluded Files
• SVG Viewer

Productivity

• Flynt Snippets
  code --install-extension flyntwp.flynt-vscode-snippets
• Project Snippets
• Project Manager
• VS Live Share
• Git Lens
• TODO Highlight
• Peacock

SCSS or Stylus

• SCSS IntelliSense
• SCSS-Lint
• Color Highlight
• Alignment (useful for aligning global variables)
• Sort Lines

JavaScript

• NPM Intellisense
• StandardJS
• Babel JavaScript
• Node Modules Navigation

Templating

• Highlight Matching Tag
• Auto Closing Tag

PHP

• PHP Intelephense
• PHP DocBlocker

Language Packs

• DotENV
  code --install-extension mikestead.dotenv
• Apache Conf
• EditorConfig for VS Code
• Gitignore
• Language Stylus
• Twig Language 2
• Hosts

Snippets

• TODO: Add Doga’s vhost snippet.

Recommended User Settings

To access your user settings, open the command palette (shift + command + p) and select “Preferences: Open User Settings”.

{
  "trailing-spaces.saveAfterTrim": true,
  "files.associations": {
    "*.html": "twig"
  },
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "theme": true,
    "dist": true
  },
}