Setting up Typescript with ESLint+Prettier on VSCode

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 installed
• A Package Manager installed (Personally, I like Yarn 🧶)
• 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:

"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:

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 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:

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.

Once open, add the following:

{
    "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.

From here, you can go ahead and install DefinitelyTyped 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_.

~ Nabeel Ahmed