My VSCode World
Tags: developertools, extension, ide, javascript
Published: 2019-03-03 20:22:39

---
title: My VSCode World
published: true
tags: developer-tools,extension,ide,javascript
canonical_url: https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c
---

Hi everyone,

I'm gonna talk about one thing that I’m usually asked at my work or events:

> “Your VSCode looks different, what is this extension? Can you pass me these extensions?”

I’m still a _beginner_ but I really like to customize and improve my code environment. So, I decided to write this explaining all the extensions, tricks, settings, and helpers that I use, instead of an article with "Top 10 extensions".

![](https://cdn-images-1.medium.com/max/1024/1*ehYGNxDnE21_kUpEITZsVQ.png)

First of all, why VSCode ??

VSCode is an IDE from Microsoft. It’s **free** , **open source** and **built with JS + electron**. It’s good for all languages, but mainly for _Javascript_.

It's [simple and easy to customize everything in VSCode](https://code.visualstudio.com/docs/getstarted/settings) as good as the autocomplete and debug.

Plus: IMO, VSCode is good for both, "_frontenders_" and "_backenders_" !!

#### Table of Contents

1. [Interesting Settings](https://medium.com/p/2c7b7506e32c#ec19)  
1.1 [Font](https://medium.com/p/2c7b7506e32c#5bf8)
2. [Useful for Everyone (Backenders and Frontenders)](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#1f57)  
2.1 [IDE Settings and extensions](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#9b4a)  
2.2 [Version Control](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#f488)  
2.3 [Node/NPM](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#ad4d)  
2.4 [Lint](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#648f)  
2.5 [Test](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#d0f5)  
2.6 [Markdown](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#e3c7)
3. [Useful for Frontenders](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#cdbf)
4. [Other cool extensions](https://medium.com/@pamepeixinho/my-vscode-world-2c7b7506e32c#ee6f)

### Interesting Settings

#### Font

The main font that I use is [Fira Code](https://github.com/tonsky/FiraCode) (_Monospaced font with programming ligatures_). You need to install this font at your font system and enable it just adding to your settings:

```
// Set the font family
“editor.fontFamily”: “‘Fira Code’, Menlo, Monaco, ‘Courier New’, monospace”,

// Enable the font ligature
“editor.fontLigatures”: true,
```

Then, you have a font like this:

![](https://cdn-images-1.medium.com/max/812/1*Q1y6nDxs3U_P3GhusQwLpg.png)

### Useful for Everyone (_Backenders and Frontenders_)

Here's the extensions list of my VSCode world:

#### **IDE Settings and extensions**

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

Sync all your VSCode settings across multiple machines. I always have this problem because I have work and personal notebook.

> Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist

![](https://cdn-images-1.medium.com/max/1024/1*nl3OlJfHCdwP-QobiXyaTw.png)

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

[**Active file at status bar**](https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar)

It shows the full path of the currently active file in the status bar

![](https://cdn-images-1.medium.com/max/734/1*xxtyK7R9wbRZHa3I7xcF2A.png)

[Active File In StatusBar - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar)

[**Intellij Keybindings**](https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings)

For the people addicted for JetBrains Products too:

> Port of IntelliJ IDEA Keybindings

[IntelliJ IDEA Keybindings - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings)

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

“It’s just highlight, why do you like it?”. _Answer_: It’s easy to find your TODOs with this highlight.

![](https://cdn-images-1.medium.com/max/748/1*-mTbiwgjrCpEiqoA-yZWig.png)

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

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

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

[**SVG Viewer**](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

```
“svgviewer.enableautopreview”: true,
```

[SVG Viewer - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

[**Change Case**](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

![](https://cdn-images-1.medium.com/max/656/1*6-t5Jm7sLT5WVtKl94GwEw.gif)

[change-case - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

[**Import cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

![](https://cdn-images-1.medium.com/max/1000/1*Q8Gxqo7Ybt3WpQt6hhK6nA.png)

[Import Cost - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

#### Version Control

[**Gitlens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

As the name says: it’s an extensions like “lens” for git.

> **Supercharge the Git capabilities built into Visual Studio Code**  — Visualize code authorship at a glance via Git blame annotations and code lens...

There’re a lot of settings to improve the git lens for your taste, for example:

![](https://cdn-images-1.medium.com/max/1024/1*ytg19RTSlnHQf9wxvkPkoA.png)

![](https://cdn-images-1.medium.com/max/1024/1*y-c7jiNkjqGr-xDm5Ttmjw.png)

[GitLens - Git supercharged - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

#### Node/NPM

[**NPM Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

Autocompletes NPM modules in import statements

[npm Intellisense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

[**Version lens**](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)

It shows package version information for NPM. It’s very good to see versions available and the package status.

![](https://cdn-images-1.medium.com/max/480/1*TR9CWrd833Hl2upOknT2Gg.png)

[Version Lens - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)

#### Lint

[**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Integrates ESLint into VS Code. That’s extremely necessary for projects that use eslint (It should be all, if you want a clean code 😆). When you have this extension enabled and some eslint violation, your IDE looks like:

![](https://cdn-images-1.medium.com/max/544/1*l0OX1iZ0AEc4bzs8mQWOVA.png)

Every line highlighted shows error Lint errors it’s.

**Plus:** It’s easy to fix it using “Fix all auto-fixable problems” or enable to auto-fix when saving in the settings

![](https://cdn-images-1.medium.com/max/1024/1*1Q8SWN914R1wPs9Yqpgdhg.png)

```
“eslint.autoFixOnSave”: true,
```

[ESLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

#### Test

[**Jest Snippets**](https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets)

If you use Jest as test framework, you should have this amazing plugin to help write tests faster.

The main snippets that I use is:

- **desc+[tab]**: _describe(() =\> {}_
- **it+[tab]**: _it(‘’, () =\> {});_

[Jest Snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets)

[**Jest**](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)

This is a nice plugin for jest users, it shows at the start of each **it** if it’s passing. However, I put a warning here, this plugin _can slow down your IDE_.

[Jest - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)

#### Markdown

For all the **markdown lovers,** like me:

[**Markdown lint**](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

This extension shows a highlight to improve your markdown file to follow good practices.

[markdownlint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

[**Auto open markdown preview**](https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview)

[Auto-Open Markdown Preview - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview)

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

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

[**Markdown emoji**](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji)

[Markdown Emoji - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji)

### Useful for Frontenders

#### [Auto close tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

[Auto Close Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

#### [Auto rename tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

[Auto Rename Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

#### [Color highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

[Color Highlight - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

#### [Styled Components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)

[vscode-styled-components - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)

### Other cool extensions

#### [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

[Bookmarks - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

#### [Path intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

[Path Intellisense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

#### [Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

![](https://cdn-images-1.medium.com/max/644/0*lntqtztHoSbduALQ)

[Quokka.js - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

This article will be updated when I found new cool extensions! If you know about some nice extension or setting that It's not here, please contact me 😃

**LinkedIn** : [https://www.linkedin.com/in/pamepeixinho](https://www.linkedin.com/in/pamepeixinho)  
**Twitter** : [https://twitter.com/pamepeixinho](https://twitter.com/pamepeixinho)  
**Github** : [https://github.com/pamepeixinho](https://github.com/pamepeixinho)  
**Website** : [https://pamepeixinho.github.io](https://pamepeixinho.github.io)

> My name is LittleFish, I swim and code sometimes. "Sea" you later! 😉