My opinionated VS Code setup
Tags: webdev, vscode
Published: 2020-07-30 09:46:17

I know, I know - I've been bragging about  **VS Code**  on this blog several times now. But really, I cannot be blamed for how much I like this piece of software for how helpful it is in my daily work.

However, among all these posts, I discovered that I haven't yet covered my  **personal VS Code setup**  properly - that is in a nicely-compact package. And with all the extensions, themes, and config options available, I think it can make for a pretty interesting tour - so let's dive in!

# Theme

Starting with the theme - not much has changed from my last  [theme comparison](https://areknawo.com/5-of-the-best-vs-code-themes-compared-an-opinionated-review/). I'm still rocking the same  [Horizon Bright](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode)  theme. Honestly, I don't find dark themes as appealing as probably most of VS Code users do.

![Horizon theme](https://areknawo.com/content/images/2020/07/horizon.png)

Sadly, the development of the Horizon theme appears to have  [stagnated](https://github.com/jolaleye/horizon-theme-vscode), and the repo has been  **archived**. So, it is a possibility that I'll be switching in the near future. But for now, unless something really nice catches my eye, I'll leave it as is.

As for the icon theme, I use  [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme), mainly due to its nice  **design**  and colors, as well as a very  **broad set**  of icons.

![Example Material Icon Theme icons](https://areknawo.com/content/images/2020/07/fileIcons.png)

# Settings

Now, I don't plan on going over all the crap that I've got in my  `settings.json`  (man, I really need to clean this up). Instead, I'll just tell you that my integrated terminal's shell, which I use a lot is plain old  **Bash**, and that my font is  [Fira Code](https://github.com/tonsky/FiraCode)  with  **ligatures**  enabled.

I know that some developers find font ligatures being not only unnecessary but also an annoying  **gimmick**. I get that they might be a bit uncomfortable - especially when deleting complex ligatures like  `===`, but that's not that big of a deal for me. I find their look and design worth this little inconvenience, but again - that's an  **opinionated setup**.

# Extensions

Now we're getting to the key part of this blog post - the part that makes customizing your VS Code that much more exciting -  **extensions**.

## Essential 5

Not to repeat myself, I've already covered 5 of the extensions I use most in  [my previous article](https://areknawo.com/5-essential-vs-code-extensions-for-web-development/). Nothing has changed in this regard since then, and I heavily recommend you check out that article for a more in-depth review of all of these 5 extensions. But for now, here's a short overview:

-   [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)  - an extension that takes nice, polaroid-like  **screenshots**  of your code, with respect for your font and theme.
-   [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  - arguably the most popular  **spell checking**  extension for VS Code. It helps keep your comments and naming grammatically correct in English and about 20 more languages (through additional extension-based dictionaries).
-   [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  - nothing special here - just good and irreplaceable  [Prettier code formatter](https://prettier.io/)  integration.
-   [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  - another great integration - this time with the best JS linter available -  [ESLint](https://eslint.org/).
-   [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  - the most feature-packed VS Code extension for working with  **Git**.

Obviously, I've got more extensions installed than just those 5, and now is a good time to talk about all of them.

## [Node.js Extension Pack](https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack)

Starting with an extension - or rather a bunch of extensions bundled together in one package, we've got  **Node.js Extension Pack**. Now, like any VS Code extension pack, this one is nothing more than a sum of its parts, which are:

-   **ESLint**  (covered earlier)
-   **npm**  - for running npm scripts from the command palette
-   **JavaScript (ES6) Snippets**  - a nice set of modern JS snippets
-   **Search node_modules**  - quickly search through your black hole of node modules.
-   **NPM & Path intellisense**  - autocompletion for node modules and usual paths.

Granted, I don't use all these extensions individually that much, but having them around - especially when installed through a single package - is a very convenient solution.

## [SCSS Intellisense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)

Because  [Sass](https://sass-lang.com/)  with its  **SCSS**  syntax is my CSS preprocessor of choice, I do require my VS Code to support it. Even though the editor itself has  [basic support](https://code.visualstudio.com/docs/languages/css)  built-in (most notably syntax highlighting and CSS properties autocompletion), I still decided to install an additional  **SCSS Intellisense**  extension.

The extension is capable of autocompleting SCSS variables, functions, mixins, and more. And although it is still in its  **preview release**, it already has a fair number of downloads (about 300K) and works pretty reliably.

## [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Next up, although most of my Markdown-related workflow happens  [outside of VS Code](https://areknawo.com/best-markdown-editors-compared/), I still use it occasionally for reading documentation or making quick edits. And for that, I use the  **Markdown All in One**  extension. It provides many helpful features like list and path autocompletion, table formatting, automatic render preview, table of contents, and more.

## [file-size](https://marketplace.visualstudio.com/items?itemName=zh9528.file-size)

**File-size**  is a tiny and simple, but also very useful extension. As the name implies, all it does is display your currently-viewed  **file's size**  down in the bottom right corner of the editor. I often use it as a quick and dirty way of checking my bundled output file sizes (when not possible otherwise), and to keep my source files within rational limits.

## [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

If you're a web developer like me, chances are you often need to start your  **development server**  to do any of your work. Although most modern JS toolchains and bundlers have this feature built-in, you can still find yourself in a need of running a dev server yourself.

If your needs don't go beyond static file serving, the  **Live Server**  VS Code extension will work for you just fine. Simply open your HTML file and with a click of a button, you'll have your  **live-reloading**  server ready to go!

## [Settings sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

Being a person who frequently changes his OS between different Linux distros (and sometimes even Windows), I really appreciate the convenience that  **Settings sync**  provides me. If you don't already know it it's an extension that lets you sync your VS Code settings (themes,  `settings.json`, and even extensions) across different installations of VS Code, through GitHub Gists.

Using the extension feels good, with everything being only a couple clicks away in the  **command palette**. Just invoke the right command and the extension will handle both OAuth logging and data syncing with a breeze!

## [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg)

**SVG**  is an extension similar to Markdown AiO, but this time for SVG. It comes with everything you'd expect from text editor SVG integration and more. This includes advanced SVG autocompletion, minification, formatting, MDN references, live preview & more. For me, this is a perfect tool for quick edits even in fairly-advanced SVG icons or graphics.

## [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

![TODO Highlight example](https://areknawo.com/content/images/2020/07/material-night.png)

Like most developers I suspect, I do have  **TODO comments**  in my code. And even with my ESLint config detecting these with ease, I still appreciate the option to make them stand out more from the overall codebase.

That's why I use the  **TODO Highlight**  extension. It automatically highlights all TODOs, FIXMEs, and any other comment labels I decide to configure. More than that, its highlight colors can also be configured, and you can even list all your labeled comments within a single section through a single command!

## [vscode-spotify](https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify)

Lastly, for a good measure, I've got  **vscode-spotify**  installed. As the name suggests, it's an extension that connects to your desktop Spotify client to provide in-editor playlists and music  **playback control**  features. It is pretty basic, but I say it doesn't need to do anything more.

# Bottom line

So, that's it! These are all the themes, settings, and extensions that I use for my personal VS Code setup. If you think that the list of extensions is pretty short, then there's a little secret I need to tell you. Before getting to this article, I went through the list of all my VS Code extensions and uninstalled those that I hadn't even used. I was really surprised by the number of one-off extensions that I've got laying around collecting dust. Uninstalling unnecessary extensions can possibly make your VS Code run  **even faster**  than it currently does, so I highly recommend you ado the same thing on your own machine.

Anyway, this was my setup. I'm really curious to hear about yours, so feel free to leave them down in the  **comment section**  below. Also, for more web development content,  **follow me**  on  [Twitter](https://twitter.com/areknawo), or [Facebook](https://facebook.com/areknawoblog). Thanks for reading and happy coding!