My VSCode Setup (simple and catchy)

I like working with the VS Code Editor. It’s simple to use and code-friendly. Being a developer, I have to sit for long hours of coding. So it’s imperative to set up VSCode in such a way that it should look attractive as well as increases my productivity.

The following are the extensions I use.

  1. Auto Rename Tag (by Jun Han)
  2. Bracket Pair Colorizer (by CoenraadS)
  3. ES7 React/Redux/GraphQL/React-Native (by dsznajder)
  4. Intellisense for CSS class names in HTML (by Zignd)
  5. Live Server (by Ritwick Dey)
  6. Path Autocomplete (by Mihai Vilcu)
  7. React-Native/React/Redux Snippets (by EQumiper)
  8. Vscode-icons (by VSCode Icons Team)

I use Halcyon Theme and Fira Code font.

In settings.json, I use the following settings. Add the following lines to your existing settings.

{
 "editor.fontSize": 16,
 "editor.fontWeight": "500",
 "editor.lineHeight": 24,
 "editor.wordWrap": "on",
 "terminal.integrated.fontSize": 14,
 "editor.tabSize": 2,
 "editor.formatOnSave": false,
 "workbench.colorTheme": "Halcyon",
 "workbench.colorCustomizations": {
  "statusBar.background": "#333333",
  "statusBar.noFolderBackground": "#333333",
  "statusBar.debuggingBackground": "#263238",
  "tab.activeBackground": "#6200EA"
 },
 "emmet.includeLanguages": {
  "javascript": "javascriptreact"
 },
 "vsicons.dontShowNewVersionMessage": true,
 "editor.fontFamily": "'Fira Code Retina', 'Cascadia Code', Menlo,   Monaco, 'Courier New', monospace",
 "editor.fontLigatures": true,
 "workbench.iconTheme": "vscode-icons",
 "liveServer.settings.donotShowInfoMsg": true,
 "[javascript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features"
 },
 "editor.linkedEditing": true,
 "json.maxItemsComputed": 8000,
 "javascript.updateImportsOnFileMove.enabled": "always",
 "terminal.integrated.defaultProfile.windows": "Git Bash"
}

These are simple settings that will make you love coding even more in VS Code.

Thank you for reading.