VS Code Setup

Font

I use Operator Mono which is a paid font. A good, free alternative would be Anonymous Pro.

Theme

Cobalt2

Extensions

• vscode-icons
  • Bring real icons to your Visual Studio Code
• ESLint
  • Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
• Prettier
  • Prettier is an opinionated code formatter.
• Code Spellchecker
  • A basic spell checker that works well with code and documents.
• CodeSnap
  • 📸 Take beautiful screenshots of your code in VS Code!
• CSS to JS
  • An extension for Visual Studio Code that allows you to convert CSS to JSS and vice versa.
• CSS-in-JS
  • Provides CSS in JS autocompletion and converts kebab-case CSS to camelCase CSS and vice versa

Settings

{
  "workbench.colorTheme": "Cobalt2",
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 20,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
  "editor.renderWhitespace": "all",
  "editor.tabSize": 2,
   "editor.fontLigatures": true,
   "editor.minimap.enabled": false,
   "editor.detectIndentation": true,
   // The diff viewer highlights and shows differences in trailing whitespace.
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.iconTheme": "vs-minimal",
  "extensions.ignoreRecommendations": true,
  "files.autoSave": "onWindowChange",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.statusBar.visible": false,
  "workbench.sideBar.location": "right"
}