Learn TypeScript Linting

This post is an adaptation of a more detailed version found on my personal blog Mountain Top. It is recommended that you read the original Learn TypeScript Linting post series as it has much more granular details, examples, and even a follow along repository.

ESLint

1. Install ESLint & @typescript-eslint

npm i -D eslint @typescript-eslint/{eslint-plugin,parser}

2. Create eslint configuration file

touch .eslintrc.json

Copy the following text into the new eslintrc file

{
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "env": { "node": true },
  "parserOptions": {
    "ecmaVersion": 5,
    "sourceType": "module"
  },
  "rules": {}
}

3. Add lint npm script

In package.json, add a new script:

{
  "scripts": {
    "lint": "eslint 'src/**/*.ts'"
  }
}

4. Run!

Run the new linting command:

npm run lint

If you want to automatically fix linting issues pass the --fix flag:

npm run lint -- --fix

5. Congrats 🎉

Great work! Your TypeScript is now configured with ESLint.

If you are interested in further configuring ESLint and learning about some of specific properties found in .eslintrc.json check out Part 1 of the Learn TypeScript Linting series over at Mountain Top blog. This post dives into details such as specifying environments & ecmaVersion, configuring rules like semicolon usage and indentation style, and covers one of the most common issues when converting a JavaScript project to TypeScript (no-unused-vars error).

Up next are sections about integrating popular formatters Standard and Prettier with ESLint.

Standard

This section covers how to install and configure the new ESLint set up with the popular Standard opinionated formatter.

One of my favorite things to share about the Standard library is their response to the can I configure rule x question:

No. The whole point of standard is to save you time by avoiding bikeshedding about code style. There are lots of debates online about tabs vs. spaces, etc. that will never be resolved. These debates just distract from getting stuff done. At the end of the day you have to ‘just pick something’, and that’s the whole philosophy of standard — its a bunch of sensible ‘just pick something’ opinions. Hopefully, users see the value in that over defending their own opinions.

1. Install Standard

npm i -D eslint-config-standard eslint-plugin-{standard,promise,import,node}

2. Modify eslint configuration

In .eslintrc.json add "standard" to the end of the "extends" list.

{
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "standard"],
}

3. Run and evaluate the new output

Run the lint command using npm. The output should be slightly different as new rules have now been configured incorporating Standard's opinionated formatting. Remember to use the --fix option to automatically fix certain issues.

Prettier

This section will cover how to install and set up the very popular Prettier library.

I recommend using either Standard or Prettier, but not both at the same time!

1. Install Prettier

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

2. Update eslint configuration

First add "plugin:prettier/recommended" to the "extends" list, then add "prettier" to the "plugins" list.

{
- "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+ "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
  "parser": "@typescript-eslint/parser",
- "plugins": ["@typescript-eslint"],
+ "plugins": ["@typescript-eslint", "prettier"],
  "env": { "node": true },
  "parserOptions": {
    "ecmaVersion": 5,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "@typescript-eslint/indent": ["error", 2]
  }
}

3. Run, evaluate, and fix

Just like in the previous two sections, use the npm script lint to try out the new linting rules. Use the --fix flag to automatically fix errors.

🎉 Congrats again! Now your TypeScript project is not only configured with ESLint but it also is configured with a snazzy formatter.

If you want to learn more about integrating the formatters and even configuring Prettier-specific rules check out Part 2 of the Learn TypeScript Linting series over at Mountain Top blog.

Thank you for reading this post; I hope you enjoyed it! I'd be happy to chat about linting and formatters in the comments below or over on Twitter (@ArrowoodTech).