DEV Community

Pamela Peixinho
Pamela Peixinho

Posted on • Originally published at Medium on

My VSCode World

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

Table of Contents

  1. Interesting Settings 1.1 Font
  2. 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
  3. Useful for Frontenders
  4. 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

Markdown

For all the markdown lovers, like me:

Markdown lint

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

markdownlint - Visual Studio Marketplace

Auto open markdown preview

Auto-Open Markdown Preview - Visual Studio Marketplace

Markdown all in one

Markdown All in One - Visual Studio Marketplace

Markdown emoji

Markdown Emoji - Visual Studio Marketplace

Useful for Frontenders

Auto close tag

Auto Close Tag - Visual Studio Marketplace

Auto rename tag

Auto Rename Tag - Visual Studio Marketplace

Color highlight

Color Highlight - Visual Studio Marketplace

Styled Components

vscode-styled-components - Visual Studio Marketplace

Other cool extensions

Bookmarks

Bookmarks - Visual Studio Marketplace

Path intellisense

Path Intellisense - Visual Studio Marketplace

Quokka

Quokka.js - Visual Studio Marketplace

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! 😉

Top comments (1)

Collapse
 
vaibhav profile image
Vaibhav

Nice article pamela. But i think you forgot to remove something from the first line. 😁😁