IDE · Web Development

Visual Studio Code Setup and Tweaks

Below are the settings and extensions for visual studio code (vscode) to make the most out of it. These are the optimized settings for vscode to make the life of web developers easy.

Steps to setup visual studio code (vscode).

  1. Download and install vscode from Visual Studio website
  2. Now open vscode and goto File > Preferences > User Settigs
  3. Paste the following Settings in User Settings
    // Place your settings in this file to overwrite the default settings
    {
    	"editor.detectIndentation": false,
    	"editor.fontFamily": "Ubuntu Mono",
    	"editor.fontSize": 24,
    	"editor.formatOnType": true,
    	"editor.insertSpaces": false,
    	"editor.tabSize": 4,
    	"editor.wordWrap": "on",
    	"files.trimTrailingWhitespace": true,
    	"git.enabled": false,
    	"html.format.indentInnerHtml": true,
    	"html.format.preserveNewLines": true,
    	"html.format.unformatted": "code",
    	"html.format.wrapLineLength": 0,
    	"telemetry.enableTelemetry": false,
    	"javascript.implicitProjectConfig.checkJs" : true,
    	"window.newWindowDimensions": "maximized",
    	"window.openFoldersInNewWindow": "off",
    	"workbench.activityBar.visible": true
    }
    

    Note : The setting “files.exclude” is especially for Angular 2. If you need git you set the value of “git.enabled” to true.

    Another minimal settings for vscode. It will not auto format code. :

    {
    	"editor.detectIndentation": true,
    	"editor.fontFamily": "Ubuntu Mono",
    	"editor.fontSize": 24,
    	"editor.formatOnPaste": false,
    	"editor.formatOnSave": false,
    	"editor.formatOnType": false,
    	"editor.insertSpaces": false,
    	"editor.tabSize": 4,
    	"editor.wordWrap": "on",
    	"html.format.enable": false,
    	"javascript.format.enable": false,
    	"telemetry.enableTelemetry": false,
    	"javascript.implicitProjectConfig.checkJs" : true,
    	"typescript.check.tscVersion": false,
    	"window.newWindowDimensions": "maximized",
    	"window.openFoldersInNewWindow": "off"
    }
  4. Install JS-CSS-HTML Formatter extension.
  5. Install language-vscode-javascript-angular2 extension.
  6. Install JavaScript Snippet Pack extension.
  7. Install Whitespacer extension.
  8. Install Monaki Black theme.
  9. Install Color Highlight.
  10. For Nodejs code to work
    npm install typings -g -S

Leave a Reply

Your email address will not be published. Required fields are marked *