Pamela Peixinho

Posted on Mar 3, 2019 • Originally published at Medium on Jun 19, 2018

My VSCode World

#developertools #extension #ide #javascript

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".

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 as good as the autocomplete and debug.

Plus: IMO, VSCode is good for both, "frontenders" and "backenders" !!

Interesting Settings 1.1 Font
Useful for Everyone (Backenders and Frontenders) 2.1 IDE Settings and extensions 2.2 Version Control 2.3 Node/NPM 2.4 Lint 2.5 Test 2.6 Markdown
Useful for Frontenders
Other cool extensions

Interesting Settings

Font

The main font that I use is Fira Code (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:

Useful for Everyone (Backenders and Frontenders)

Here's the extensions list of my VSCode world:

IDE Settings and extensions

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

Settings Sync - Visual Studio Marketplace

Active file at status bar

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

Active File In StatusBar - Visual Studio Marketplace

Intellij Keybindings

For the people addicted for JetBrains Products too:

Port of IntelliJ IDEA Keybindings

IntelliJ IDEA Keybindings - Visual Studio Marketplace

TODO highlight

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

TODO Highlight - Visual Studio Marketplace

Spotify

vscode-spotify - Visual Studio Marketplace

SVG Viewer

“svgviewer.enableautopreview”: true,

SVG Viewer - Visual Studio Marketplace

Change Case

change-case - Visual Studio Marketplace

Import cost

Import Cost - Visual Studio Marketplace

Version Control

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:

GitLens - Git supercharged - Visual Studio Marketplace

Node/NPM

NPM Intellisense

Autocompletes NPM modules in import statements

npm Intellisense - Visual Studio Marketplace

Version lens

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

Version Lens - Visual Studio Marketplace

Lint

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:

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

“eslint.autoFixOnSave”: true,

ESLint - Visual Studio Marketplace

Test

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

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