Blog

 / How to make VS Code work with ESLint, TypeScript and Prettier

How to make VS Code work with ESLint, TypeScript and Prettier

Tom Riglar

This blog post shows you how to setup VS Code with TypeScript, Prettier and ESLint.

feature-image

Mon Sep 09 2019 - 2 min read

This blog post shows you how to setup VS Code with TypeScript, Prettier and ESLint.

What are they?

VS Code (aka Visual Studio Code or just ‘Code’) is an open source IDE from Microsoft. https://code.visualstudio.com/

TypeScript is a programming language which adds type safety to JavaScript. It compiles to JavaScript for use in browsers and on servers. https://www.typescriptlang.org/

Prettier is a formatter for many web focused languages (including TypeScript) and let’s you know when you’ve broken a stylistic rule. https://prettier.io/

ESLint is a linter for TypeScript and JavaScript that understands these languages and let’s you know when you’ve broken a syntactical rule. https://eslint.org/

What’s the goal here?

The goal is to have a performant and user friendly development environment that can:

  • Keep code type safe
  • Auto format ugly code
  • Highlight potential code issues

Setting up VS Code and TypeScript

VS Code has first class support for TypeScript so this is straightforward.

  • Open up VS Code
  • You should see ‘tools and languages’ — click ‘typescript’
  • In your terminal: npm install -D typescript

Setting up Prettier

  • Get the prettier extension (Prettier — Code formatter via the extensions marketplace in VS Code)
  • Open up settings.json — you can do the via the command pallet (View > Command Pallet then type settings.json and hit enter)
  • Paste in this setting: “editor.formatOnSave”: true — this will make VS Code format each file as it is saved.
  • You now need to set default formatters for the files you use, so paste in the below config options as needed:
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
  • Save settings.json
  • Add a .prettierrc file in your root directory
  • This file contains all your prettier options, mine looks like this:
{
  "singleQuote": true,
  "printWidth": 120
}
  • You might need to restart VS Code for changes to take effect

Setting up ES Lint

ES Lint and Prettier have some similar features so we are going to need some extra config here to ensure they don’t conflict with each other.

If you are wondering why we’re using ESLint and not TSLint — read this.

  • Get the ESlint extension (ESLint via the extensions marketplace in VS Code)
  • Add an .eslintrc.js file in your root directory
  • This file will contain all of your TypeScript rules (ESLint ships with no default rules). It will also contain the config to ensure it doesn’t conflict with Prettier). Mine looks like this:
module.exports = {
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  rules: {
    '@typescipt-eslint/interface-name-prefix': ['always'],
    'no-underscore-dangle': 'error'
  }
};
  • You might need to restart VS Code for changes to take effect

You are all done!

These tools change all the time, so if something isn’t working please reach out to us so we can help :-)

Copyright © 2021 Morrow Digital Ltd | Registered in England #11169148

Privacy Policy