VS Code Setup Guide

Sublime Text as the text editor of my choice for Front End Web Dev work (and to draft these blog posts). I wanted to try a different text editor (FOMO, next cool thing, need more fun … whatever) and decided to try Visual Studio Code or VS Code. This post is my VS Code setup guide.

VS Code is made by the makers of OneNote (which I adore), and it has good reviews from other dev folks. It is also free and has an extensive extensions market. In addition to the installation, in this guide, I list some of the many extensions to improve productivity from the get go and to try to replicate some features I loved in Sublime Text.

Here is the set of links I followed for setup, configuration and customization.

Installation

Installation Link
On Mac only: setup the command prompt for command line invocation.

Customize the Look and Feel

Nomo Dark icon theme: Icons in your explorer window to identify the files types / folders easily.After installing, enable the extension by going to File > Preferences > File Icon Theme > VSCode Icons. (On OSX it is Code > Preferences > File Icon Theme > VSCode Icons.)
Kary Foundation Theme Light theme: I pretty much use light themes. I like the color scheme and the recommended typography. Out of the box, the fonts and text color in this theme isnt’t that great. You absolutely need need to install the recommended Hasklig font, and then it becomes really good.After installing, enable the theme by going to File > Preferences > Color Theme and select “Kary Foundation Theme – Light”
Hasklig Font: A code font by Adobe Systems with monospaced ligatures, recommended for use with the Kary Foundation Theme. After installing the theme on your OS, enable the font. Then go to File > Preferences > Settings and update your settings with the following: {
“workbench.iconTheme”: “vs-nomo-dark”, “workbench.colorTheme”: “Kary Foundation － Light”, “editor.fontFamily”: “Hasklig, Menlo, Monaco, ‘Courier New’, monospace”, “editor.fontWeight”: “500”, “editor.fontWeight”: “normal”, “editor.fontSize”: 15, “editor.fontLigatures”: true, “terminal.integrated.fontFamily”: “Hasklig, Menlo, Monaco, ‘Courier New’, monospace”, “terminal.integrated.fontLigatures”: true }

Set up the editor conveniences

Path Intellisense Visual Studio Code: Plugin that autocompletes filenames.
NPM Intellisense Visual Studio Code: Plugin that autocompletes npm modules in import statements.
Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
Auto Rename Tag: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Expand Selection To Scope: This extension introduces a command that incrementally expands the selection to the nearest outer scope (delimited by bracket pairs).
Paste and Indent: Paste some code with “correct” indentation.
AB HTML Formatter: This tool is formatting / reindenting HTML code.
Rainbow Brackets: Provides rainbow colors for the round brackets, the square brackets and the squiggly brackets.
Guides:Guides is simply an extension that add various indentation guide lines.
Color Highlight: Highlight web colors in your editor.
Color Picker: Helper with GUI to generate color codes such as CSS color notations.

Set up the development conveniences

ES Lint: ESLint Integrates ESLint into VS Code. You need to have installed ESLint first.
```
npm install eslint
```
CSS Auto Prefix: Auto-prefixes certain attributes in CSS.
Style Lint: Modern CSS/SCSS/Less linter.Enable the linter, while disabling the built-in CSS and SCSS linter. Go to File > Preferences > Settings and add the following to settings.json:
```
{
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
}
```
HTML CSS Support: CSS support for HTML documents.
HTML Snippets: Full HTML tags including HTML5 Snippets.
HTML Boilerplate: A basic HTML5 boilerplate snippet generator.
Gulp Snippets: Gulp JS Snippets for Visual Studio Code.

Projects and versioning

Git Extension Pack: Popular Visual Studio Code extensions for Git. Contains the following extensions:
1. Git History: View git log, file or line History.
2. Project Manager: Easily switch between projects.
3. Git Lens: Provides Git CodeLens information (most recent commit, # of authors), on-demand inline blame annotations, status bar blame
information, file & blame history explorers, and commands to compare changes.
1. gitignore: Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.
2. Open in GitHub / Bitbucket / VisualStudio.com: Jump to a source code line in Github / Bitbucket / VisualStudio.com.

Measuring (for the dataphiles)

Wakatime: Metrics, insights, and time tracking automatically generated from your programming activity.

Debuggers

Debugger for chrome: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
Debugger
for firefox: Debug your web application or browser extension in Firefox

Polymer Specific

These extensions are specific to Polymer – a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable

apps.

Polymer IDE: Provides linting, autocompletion, and more for web components.
Polymer Syntax: Polymer syntax highlighting for Atom & VS Code!
Polymer Snippets: Sublime snippets for Polymer and Web Components

Additional Settings

These are additional changes to the editor settings to make life easier. Go to File > Preferences > Settings and add the following lines to your settings.json file

Change tab size from 4 spaces (default) to 2 spaces.
```
{
"editor.tabSize": 2
}
```
Enable word-wrap – if you are crazy like me.
```
{
"editor.wordWrap": "on"
}
```
Enable the minimap to quickly navigate long files.
```
{
"editor.minimap.enabled": true
}
```

Show white spaces outside words

{
"editor.renderWhitespace": "boundary"
}

Enable formatting on typing and pasting.

{
"editor.formatOnType": true,
"editor.formatOnPaste": true
}

Enable copying the current line when Ctrl+C is pressed without any selection. – Enabled by default!

Enable Files Auto-Save

{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 8000
}

Enable Polymer to analyze the whole package, though it’s slower:
```
{
"polymer-ide.analyzeWholePackage": true
}
```

The settings.json file now looks like

// Place your settings in this file to overwrite the default settings
{
    "workbench.iconTheme": "vs-nomo-dark",
    "workbench.colorTheme": "Kary Foundation － Light",
    "editor.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontWeight": "500",
    "editor.fontSize": 15,
    "editor.fontLigatures": true,
    "terminal.integrated.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "boundary",
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "terminal.integrated.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 8000,
    "polymer-ide.analyzeWholePackage": true
}

web-development

May 10, 2017

Rope and Tire

Suprada's blog