Background

I am a huge fan of VS Code. I previously coded on Sublime Text, then moved to Code after a job change. The transition has been smooth and I am not looking back!

Extensions

Syntax highlighting

Babel Javascript and Styled Components

I don’t think I need to introduce these two ;)

JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL. Syntax highlighting and IntelliSense for styled-components.

Code formatting

ESlint and Prettier

I have both these plugins set up in such a way that linting errors are highlighted according to the current project’s config.

Trailing spaces

Highlight trailing spaces and delete them in a flash!

I brought this with me from Sublime.

Rainbow brackets

I believe I discovered this gem while exploring best vs code plugins in the search engine. I find this one immensely helpful overall in my JS code.

Currently I work with a React/Redux application with actions written this way:

export function sendRequestWithReload(id) {
  return (dispatch, getState, api) => {
    dispatch({ type: LOADING });
    return api.sendData(id).then(() => {
      dispatch(getRefreshedData(id));
      dispatch({ type: LOADED });
    });
  };
}

With this plugin each pair of brackets has its own color. Finding a bracket that is not closed has never been so easy!

… and for the purpose of this blog:

Markdown Preview Enhanced

Recommended by a colleague. So convenient, because of its live reload.

Settings

View the whole path of the current file

This one is especially useful to me when familiarizing myself with a new project. At that moment I don’t know my way around it just yet and the path helps me navigate.

{
    "window.title": "${activeEditorLong}${separator}${rootName}",
}

View all whitespace

There were times when indentation alone was not enough for me to spot an extra white space character. Its use seems obsolete with Prettier right now, but I cannot imagine having it any other way.

{
    "editor.renderWhitespace": "all","files.insertFinalNewline": true,
}

Quick-open to edit files

Open the file in a new tab with quick-open (e.g. cmd + p) instead of viewing it with preview mode.

{
    "workbench.editor.enablePreviewFromQuickOpen": false,
}

Format files

Format on save is a life saver. One of my favourite options, here together with the project’s prettier config. Trimming trailing whitespace on save and adding that last empty line is a cherry on top.

{
    "prettier.requireConfig": true,
    "editor.formatOnSave": true,
    "trailing-spaces.trimOnSave": true,
    "files.insertFinalNewline": true,
}