Setting up Typescript with ESLint+Prettier on VSCode
Tags: typescript, eslint, vscode, prettier
Published: 2021-04-23 13:07:28

I spent way too long trying to find a decent or updated tutorial- so I made up myself.

> Believe me when I say I've been there. Picture this, you wanted to start a new Typescript project you were going to abandon anyway in a week, and you wanted a clean workflow, so you spent way too long setting up your perfect environment. Soon, you realized that the configuration files weren't working, and so you abandoned the whole project.

## Assumptions

- [Visual Studio Code](https://code.visualstudio.com/download) installed
- A Package Manager installed (Personally, I like [Yarn](https://yarnpkg.com/) 🧶)
- You have a new empty project folder created and opened in VSCode

## Installation

Open a terminal, cd to your project folder, and execute the following:

    yarn add -D eslint prettier eslint-config-prettier eslint-config-standard eslint-plugin-prettier eslint-plugin-import eslint-plugin-node eslint-plugin-promise @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript ts-node-dev

Depending on how bad your internet speed is, you might want to get a coffee before you fall asleep waiting. 😴

## Setup

In your workspace open `package.json` (create it if it doesn't already exist) and insert the following object:

```JSON
"scripts": {
    "dev": "ts-node-dev --respawn -- src/",
    "build": "tsc"
},
```

Create a `.eslintrc.js` file in the root directory of the project and paste the following:

```Javascript
module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  extends: [
    'standard',
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:promise/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 2015,
    sourceType: 'module',
  },
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'comma-dangle': ['error', 'always-multiline'],
    'no-empty-pattern': ['off'],
    'no-undef': ['error'],
    'no-var': ['error'],
    'object-curly-spacing': ['error', 'always'],
    indent: ['off'],
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
      },
    ],
  },
  env: {
    // change as necessary
    node: true,
  },
};
```

> Feel free to add or remove rules, but personally I think they're perfect. Also, [Here's a list](https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments) of the environments (env) you can provide ESLint.

Next, create a `.eslintignore` file so you don't blow up your computer trying to lint all those files in `node_modules` and add the following to it:

```txt
node_modules
dist
```

Now update your VSCode settings to allow the ESLint to format code. You could complete this step using the GUI, but I am going to just directly edit the `settings.json` file for efficiency.

To open `settings.json` press `f1`, type "`open settings JSON`", and press `enter`. If the file didn't open, [use this to locate it](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations).

Once open, add the following:

```JSON
{
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "eslint.format.enable": true,
    "eslint.packageManager": "yarn",
    "eslint.run": "onSave",
    "editor.formatOnSave": true,
}
```

> You don't technically need `"editor.formatOnSave": true"`, but it helps you from wasting time and typing commands to format your code. 🙄

Finally, create an `src` folder and put an `index.ts` file into it. Type some code in it like an idiot and then save it to see your code be beautifully formatted. 🧹✨

During development use the `dev` script to watch Typescript files and have them auto-executed every time you save. To start this, in a terminal execute:

    yarn dev

For a production build, use the `build` script to transpile the code into a dist folder. To do this, run:

    yarn build

That's about it. I like to keep things simple.

## Finishing Up

At this point, everything should just work. If it's not working properly it's probably your fault (I tested this tutorial 3 times lol). To fix this, restart the tutorial or [just Google it](https://www.google.com/search?q=Why+am+I+bad+at+following+instructions).

From here, you can go ahead and install [DefinitelyTyped](https://www.npmjs.com/search?q=%40types) definitions for whatever packages you use. I'd suggest at least installing `@types/node`:

    yarn -D @types/node

This will give you typed definitions for Node.js. 

## Conclusion

Well, that's it. Thanks for reading my post and consider following me on Instagram [@nabeelahmed_](https://www.instagram.com/nabeelahmed_/).

~ Nabeel Ahmed