Lesson 3 — How to use ESLint with TypeScript

November 2020

This is the 3rd lesson in the series of “Fundamentals of programming”. You will learn how to setup ESLint in your TypeScript projects.

“Programming is a skill best acquired by practice and example rather than books.” — Alan Turing

Motivation

I literally lost my first job interview, because I didn’t have ESLint set up. But they loved my overall coding interview solution😍, they said it was one of the best!

Prerequisites

Make sure you understand the 2nd lesson, which covered the basics of TypeScript and node package manager. Check out articles at codegodzilla.com

Quick summary of ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

https://eslint.org/docs/user-guide/getting-started

In other words: It will transform your code and warn you, if a developer has been a dirty boi, based on rules defined in the config file.

“Talk is cheap. Show me the code” — Linus Torvalds

Task 1 (warm-up) — Getting Started with ESLint

Let’s understand the basics. (I expect you have the code from the previous lesson)

1. Create a new file “test.js” in /src folder

// test.js
console.log('hello world')

2. Install eslint with commandnpm install --save-dev eslint

3. Check if installation worked. Add a new script to package.json

"scripts": {
  "test-eslint": "eslint --version",
  ..
},

Run npm run test-eslint . My output is following

C:\Users\harri\myGit\lbs-to-kg>npm run test-eslint
> lbs-to-kg@1.0.0 test-eslint C:\Users\harri\myGit\lbs-to-kg
> eslint --version
v7.10.0

You can also check if eslint was installed in /node_modules/bin

4. Create a new file “.eslintrc.js” in project’s root folder

//.eslintrc.js
module.exports = {
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

5. Add a new script

"scripts": {
  "lint": "eslint src/test.js",
  ...
},

Command npm run lint should print

1:13 error Strings must use doublequote quotes
 1:27 error Missing semicolon semi
✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the ` — fix` option.

6. Automatically fix problems npm run lint -- --fix It will change the

console.log('hello world')
// to 
console.log("hello world");

7. Warm-up is done! Let’s get down to business! 💪

8. btw, delete src/test.js , we don’t need it anymore.

Task 2 (getting serious) — Lint TS files

Prerequisites: You solved task 1. That means, you have eslint installed, .eslintrc.js set up and you know the basics of fixing the code.

Objective: Make ESLint process TypeScript files

Solution:

1. Add a new script

"scripts": {
  "lint": "eslint src/calculator.ts",
  ...
},

npm run lint should not work, because ESLint does not know how to parse TypeScript files by default. For that you need to install typescript parser

2. Install necessary dependencies npm install --save-dev @typescript-eslint/parser

You can read more about this specific parser at https://github.com/typescript-eslint/typescript-eslint

3. Update .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

4. Run again npm run lint This time it should print out something like:

C:\Users\harri\myGit\lbs-to-kg\src\calculator.ts
   1:26  error  Strings must use doublequote  quotes
  11:2   error  Missing semicolon             semi
  13:13  error  Strings must use doublequote  quotes
  16:36  error  Missing semicolon             semi
✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

5. Congratulations, you are now able to lint TS files! 💃

Task 3 — How to use ESLint plugins?

Prerequisites: You solved task 2

Objective: At the moment we have only 2 rules: semi and quotes. Import typescript-eslint recommended rules.

Solution:

1. npm install --save-dev @typescript-eslint/eslint-plugin
2. Update .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
  ]
}

This will import long list of new rules. You can read more about them at https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules

3. npm run lint will output following:

1:18  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
✖ 1 problem (1 error, 0 warnings)

4. Fix the errors in the file “calculator.ts”

// this
const readline = require('readline');
// to
import * as readline from 'readline';

5. Congrats, now you know how to extend rules! 😻

Task 4 (final battle) — How to connect eslint, tsc and node?

Prerequisites: You solved task 3

Objective: Update npm run start script so that it will also lint the code, before starting the program.

Solution:

1. Update package.json

"scripts": {
  ...
  "start": "npm run lint && npm run compile && node lib/calculator.js",
 ...
},

npm run start should lints the code and if there are any errors during linting process then it will stop and therefore the calculator app will not start.

2. Profit! That was easy, wasn’t it?

3. Source code is available at https://github.com/programming-online-courses/lbs-to-kg/tree/lesson-3-how-to-use-eslint-with-typescript

Brain teasers

1. Name 2 typescript-eslint/recommendedrules and what they do?
2. What rule you would like to add?
3. Why we used --save-dev and not just --save ? What’s the difference?
4. Why we didn’t have to definepluginsproperty, but it clearly says we should in the official document https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md

Summary

Thank you for reading. Make sure you give a 👏 👏!

Read my next lesson which covers how to deploy an app to Heroku. Check out articles at codegodzilla.com

Ask me questions on Twitter

Cheers, ❤️