My VSCode World

Pamela Peixinho
6 min readJun 19, 2018

--

Hi everyone,

This is my first medium article 😀. 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

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

Active file at status bar

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

Intellij Keybindings

For the people addicted for JetBrains Products too:

Port of IntelliJ IDEA Keybindings

TODO highlight

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

Spotify

SVG Viewer

“svgviewer.enableautopreview”: true,

Change Case

Import cost

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:

Node/NPM

NPM Intellisense

Autocompletes NPM modules in import statements

Version lens

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

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,

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

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.

Markdown

For all the markdown lovers, like me:

Markdown lint

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

Auto open markdown preview

Markdown all in one

Markdown emoji

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
Twitter: https://twitter.com/pamepeixinho
Github: https://github.com/pamepeixinho
Website: https://pamepeixinho.github.io

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

--

--