My VSCode setup

TLDR

I have been a Sublime Text person for years, but I am experimenting with VSCode and love it. This is what I stumbled on and fixed in my initial setup.

Why VSCode?

I knew some of the UI devs loved it, and as I worked more in Vue I heard more recommendations about Vetur. The things I am most loving right now are:

  • Prettier
  • Vetur
  • Git-status sensitivity
  • the debugging window

It is so so nice to have so many dev niceties just-work out of the box. Automatically saving my ~~bad~~ handwritten code under perfected style, builtin markdown preview; it's a well-polished experience all around.

What to do?

These are my installed packages. Follow the setup for each of them; there is a little bit of project-specific config below.

Extensions I use

In my new toy project, this is the config I used for eslint and prettier. .eslintrc.js is particular about extends-ordering, and requires a couple .*-config-.* and .*-plugin-.* packages

I made a .prettierrc with:

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all"
}

and an .eslintrc.js with

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {},
};

Now code gets autofixed for trivial things that prettier can just manage for me, like quotes and line-ending commas etc. 🥳