Customize VS Code

Published on
• 4 min read

Update

I am using my oown VS Code theme DevHaven which has green all over!

Theme and Icon pack

One of the best(free) theme extensions out there is Material Theme. The other noteworthy mentions are Dracula Pro and Monokai Pro. Both of these have pro license variants that needs to be bought or an evaluation copy is available. The other free theme that I’ve come to like is Cobalt2.

Material Icon Theme has an abundant collection of icons for nearly every kind of file.

Material Theme Icons is another such icon pack that I recommend you check out.

Font with ligatures

One of the best monospace programming fonts with ligatures is Fira Code. You can set it up by installing the fonts onto your PC, then copy and paste the following snippet in your settings.json

"editor.fontFamily": "Fira Code","editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",

Nerd Font patches developer targeted fonts with a high number of icons.

Extensions

VS Code provides numerous plugins that help out programmers to code efficiently.

  1. Live Server : It launches a development local Server with live reload for static & dynamic pages.

  2. Better Comments : It allows us to categorize our comments into various alerts, queries, to-do's.. using various annotations.

  3. Indent-Rainbow: It make the code easier to read by colorizing the indentations and making them more readable.

  4. Bracket Pair Colorizer 2: This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

  5. Polacode : It takes a snapshot of your code.

  6. Color Highlight : This extension styles css/web colors found in your document.

  7. Kite : AI-powered programming assistant that helps you write Python code inside Visual Studio.

  8. Prettier : It is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

  9. AREPL for python : It automatically evaluates python code in real-time as you type.

  10. Live Sass Compiler: It helps you to compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload.

  11. Auto Rename Tag : It automatically renames paired HTML/XML.

  12. CSS Peek : This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

  13. IntelliSense for CSS class names in HTML : It provides CSS class name completion for the HTML classattribute based on the definitions found in your workspace or external files referenced through the link element.

My Configuration

You can use the snippet below to copy and paste my settings.json

{

  "workbench.iconTheme": "material-icon-theme",

  "editor.fontFamily": "Fira Code",

  "terminal.integrated.fontFamily": "monospace",

  "editor.fontSize": 16,

  "window.zoomLevel": 0,

  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",

  "indentRainbow.colors": [

    "rgba(16,16,16,0.1)",

    "rgba(16,16,16,0.2)",

    "rgba(16,16,16,0.3)",

    "rgba(16,16,16,0.4)",

    "rgba(16,16,16,0.5)",

    "rgba(16,16,16,0.6)",

    "rgba(16,16,16,0.7)",

    "rgba(16,16,16,0.8)",

    "rgba(16,16,16,0.9)",

    "rgba(16,16,16,1.0)"

  ]

}

You can alo find this same post on medium