VSCode Setup

VSCode Extensions and Setup.md

Install the following extensions

• Live Server - Run server for static - live reloading on file saved

• ES7 React/Redux/GraphQL/React-Native Snippets - provides snippets for javascript ES6 and React development

• Prettier - code formatter

• Git Lens - visualized use of git, with overview of who did changes, etc.

• Auto Rename Tag - To automatically rename the closing tag when changed the opening tag

• Bracket Pair Colorizer - To easily see the opening and closing of the brackets and braces by color matching

  • The extension is now deprecated because VSCode has native settings for this already Settings > Editor > Bracket Pair Colorization > Enabled > Set to true

  Add the following to your setttings.json

  "editor.language.colorizedBracketPairs": [
        ["[", "]"],
        ["(", ")"],
        ["{", "}"]
   ],
  

• Debugger for Chrome - To debug values within VSCode debugger tab

• Better Comments - To colorize the comments

  /**
   * * Important bold comments
   * ! Deprecated
   * ? queries
   * TODO: Something needs to be done
   * @param myParam The parameter for the methods
   **/
  

• HTML CSS Suppport - for css and html intellisense - including available css class names

• Html Boilerplate - to use html:boilerplate to start an html snippets

• Emmet - No need to install. It is automatically included in VSCode installation of latest.

  • For React development, to use emmet on JSX: Settings > Emmet > Include Languages > Add Item: Item=javascript Value=javascriptreact

• Sublime Text Keymap

• Tailwind CSS IntelliSense - for class name suggestions when using tailwind

• **Install themes (Cobalt2 / Material Facebook Theme / One Dark Pro / Dainty Material Theme - Palenight **

• Auto import sorting - to auto re-arrange imports and remove unused imports

  // Update settings.json
  
  "editor.codeActionsOnSave": {
  
    "source.organizeImports": true
  },
  

• Add vertical line as ruler for different character counters

  // Update settings.json
  
   "editor.rulers": [
    80, 100
  ],
  

VSCode Neat and Clean Setup.md

Install Theme

1. Install extension 'Material Facebook Theme'
2. Ctrl + Shift + P --> type 'Color Theme' and select
3. Choose Material Facebook Blue or Gray

Install Sublime Text Keymap

Hide Open editors section

Update Settings > Open Editors visible = false

Change fonts

Instruction here: https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions

"editor.fontFamily": " ‘Fira Code’, Consolas, ‘Courier New’, monospace",
"editor.fontLigatures": true,  // to convert characters like === or => to single glyph

The following settings depend on your preference

Hide minimap

Update Settings > Minimap: Enabled > Uncheck

Hide indentation lines

Update Settings > Editor > Guides: Indentation > Uncheck

Toggle Sidebar

Ctrl + B / Cmd + B

Git Ready

Install GitLens