DEV Community

loading...
Cover image for My VS Code Setup (and less known extensions)

My VS Code Setup (and less known extensions)

David Morais
Got a languages degree, did not enjoy market, became developer <3
・9 min read

Hey hey 👋

You may look at the title and sarcastically say "Yay, another VS Code extensions list", at least I would. The fact is that I end up opening said articles and realize that most times they share 8 out of 10 extensions between them all. I use most of them, so I'm not going to go into detail about those that are most featured in articles, instead I'll try to analyze the lesser known and most useful extensions I'm using. I've split the extension list into categories so you can easily find whatever you're looking for here, and at the end of the article you can find the full list of extensions I'm using.

Our Lord and Savior

Let's start with the editor itself. VS Code is a code editor made by Microsoft. It's mainly powered by the open source Monaco Editor, extensions and the extensive settings API. It's also pretty lightweight for all that it offers which is why I changed from Atom and have never stopped preaching about our lord and savior VS Code.

By using an extension called Settings Sync, I've kept about the same configuration throughout the years. Recently Microsoft added a built-in Sync feature which seems to work even better. Sometimes I clean up my extensions, change the color and icon theme and install a few new jewels, hence why I'm currently rocking 59 extensions.

This is my VS Code setup at the moment 👇

My VS Code Setup

Some main changes from the initial layout include the sidebar on the right side, the activity bar, theme and sidebar items.

Starting with the theme, I'm currently using these extensions to achieve this look:

Theming & Layout

Theme: Electron vue

Sidebar Icons: Carbon Product Icons

Opacity (Linux & Windows only): GlassIt-VSC

Folder and File Icons: Moxer Icons

Font: FiraCode (w/ ligatures)

For the sidebar on the right side and other customizations that are available out of the box, you can add this to your settings.json (You can open your settings by pressing Ctrl + P and selecting 'Open Settings (JSON)'.

{
    **"workbench.editor.tabCloseButton": "off", // I was accidentally closing tabs too often, so I removed the close button
  "workbench.sideBar.location": "right", // Pretty straightfoward**
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'", // Fira Code is an open source ligature font that I strongly recommend you install
  "editor.fontLigatures": true, // Enable font ligatures for Fira Code
  "editor.formatOnPaste": true, // Formats your pasted content
  "editor.minimap.enabled": true, // Enables the file minimap
  "editor.minimap.maxColumn": 200,  // Minimap char count
  "editor.minimap.renderCharacters": false, // You can render actual characters instead of the color blocks
  "editor.minimap.showSlider": "always", // Adds a scrollbar to the minimap
    "terminal.integrated.fontFamily": "'MesloLGS NF', 'MesloLGL Nerd Font', monospace", // Change to your terminal font
  "terminal.integrated.shell.linux": "/usr/bin/zsh",  // Change to your default shell and check your OS key (ex: for mac use "shell.mac"),
    "files.eol": "\n",  // Force LF  line endings, useful if you use Windows and Linux/Mac
  "files.watcherExclude": {  // Boosts performance by not watching for changes in these directories
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true
      },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false // Set to true if you're enforcing ESLint. Disable if you're working on old projects that changed their linting config over time.
      },
  "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], // use ESLint on these files
  "eslint.workingDirectories": [
    "./node_modules/eslint"
  ],
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // use the Prettier extension to format javascript code
  },
}
Enter fullscreen mode Exit fullscreen mode

Linting & Code Formatting

I've included there two settings which are for two extensions, ESLint and Prettier - Code formatter.

The first is, in my opinion, the best linter for Javascript around. Basically it will warn or throw errors if your code breaks common best practices rules. If you have never used it I strongly suggest you start doing so, and every time ESLint complains about something you think it's stupid, go read about it instead of disabling the linter for that line. ESLint has seriously helped me grow as a developer and while it's a well known extension, it's one I can't help mentioning here.

Prettier on the other hand is a code formatter, it 'prettifies' your code. So when pasting something my editor, the code gets instantly formatted by Prettier.

Something that I've seen in some projects is combining both ESLint and Prettier, meaning that if code style is off the linter will warn you and Prettier will also format your code according to the ESLint rules you have in place.

Snippets

I honestly think I'm using far too many snippets extensions, despite the fact that I may or may not be using some on these list, who knows. I'm not a 'snippets' person. But from my extensions list, the ones that I use on a daily basis and actually know that they exist are, ES7 React/Redux/GraphQL/React-Native snippets, Path Intellisense & JavaScript (ES6) code snippets. Path Intellisense is great at auto completing your relative path imports, the other two I use mostly for JavaScript/React shortcuts. The big boss of auto complete and intellisense is Visual Studio IntelliCode, developed by Microsoft itself, it provides an AI-based relevant code completion to your code editor and is a must have for all VSCode users.

Other cool 'auto complete' extensions I have include Turbo Console Log which I use with the keyboard shortcut to log my highlighted variables, Auto Close Tag, a well known extension that works flawlessly even with self closing elements and my personal favorite Auto Import, which automatically finds and parses code actions for imports.

Productivity & Git

On the bottom bar there you can see how much I've coded for the day, I'm using two extensions for time tracking and I'm going to recommend the one I've been using for the longest time which is Waka Time. On the sidebar you can also see Project Manager's logo which is an extension for quickly switching between projects from your sidebar.

Also on the sidebar, we have two git extensions, Git Lens is the first and allows you to fully integrate git into your code editor by adding code blame, revision navigation and file,line and branch history all from your sidebar. The other one is Git Graph which adds a neat graphical interface to your Source Control tab and allows you to quickly check your repository status.

The last two items on the sidebar are Todo Tree, which shows all // TODO comments on the current repository and the bane of our existence, Jira also has a VSCode extension, which I only recently discovered, and offers a quick glimpse of your assigned tasks out of the box.

Honorable Mentions

Hermes Comments has about 1k installs and is a simple extension that adds comment commands to your VSCode Command Palette (Ctrl + Shift + P). Simply highlight text, hit the command palette and create framed or sub section comment out of the highlighted text.

Emoji Log is one of the many surfacing extensions that prefix your commits with Emoji. I prefer this one because it actually adds a button to the Source Control tab.

Power Mode is another extension I didn't know I needed until I had it. This baby adds up your keystrokes into combos and even has the option to add sparks and custom GIFs to your code editor.

People, I was blind before I started using ident-rainbow, Guides and Bracket Pair Colorizer. These are one of the most known and oldest extensions out there, and they're always present when I'm using VSCode, check them out if you haven't.

Full List

Theming & Layout

Electron vue

Carbon Product Icons

GlassIt-VSC

Moxer Icons

Productivity & Git

Code Time

Emoji Log

Git Lens

Git Graph

Hermes Comments

Icomoon Viewer

Jira

Project Manager

Todo Tree

Waka Time

Utils

Advanced New Files

Auto Close Tag

Auto Import

Back & Forth

Better Comments

Bracket Pair Colorizer

Color Highlight

Color Picker

Guides

HTML Preview

Icon Fonts

Import Cost

ident-rainbow

Music Time for Spotify

Power Mode

Remote - WSL

Settings Sync

Sort JSON objects

Template String Converter

Turbo Console Log

Languages & Snippets

Babel JavaScript

DotENV

ES7 React/Redux/GraphQL/React-Native snippets

IntelliSense for CSS class names in HTML

JavaScript (ES6) code snippets

JavaScript and TypeScript Nightly

JSRefactor

Jupyter

Markdown All in One

npm Intellisense

Path Intellisense

Python

React PropTypes Intellisense

Ruby

Ruby Solargraph

styled-components-snippets

Typescript React code snippets

Visual Stadio IntelliCode

VSCode React Refactor

VSCode Ruby

YAML

Linting

ESLint

markdownlint

Prettier - Code formatter

scss-lint

Follow Me

Thanks if you ended up reading through the whole list 💪 For more JS/React content you can check out my website and follow me on Twitter.

Let me know what extensions you're using that I did not mention in here so I can check them out 👀

Discussion (2)

Collapse
pybash profile image
PyBash

Great write-up! I got a lot of new extensions!

Collapse
dsmorais profile image
Forem Open with the Forem app