Learn TypeScript Linting
Tags: typescript, eslint, prettier, javascript
Published: 2019-06-06 21:43:04

---
title: Learn TypeScript Linting
published: true
description: Linting in TypeScript is easier than you thought. Follow this detailed tutorial on how to set up ESLint as well as integrate popular code formatters Standard and Prettier
tags: typescript, eslint, prettier, javascript
---


> This post is an adaptation of a more detailed version found on my personal blog [Mountain Top](https://blog.matterhorn.dev). It is recommended that you read the original [Learn TypeScript Linting](https://blog.matterhorn.dev/posts/learn-typescript-linting-part-1) post series as it has much more granular details, examples, and even a follow along repository.

## ESLint

### 1. Install ESLint & @typescript-eslint

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

### 2. Create eslint configuration file

```bash
touch .eslintrc.json
```

Copy the following text into the new `eslintrc` file
```json
{
  "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:

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

### 4. Run!

Run the new linting command:

```bash
npm run lint
```

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

```bash
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](https://blog.matterhorn.dev/posts/learn-typescript-linting-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](https://standardjs.com/) opinionated formatter. 

One of my favorite things to share about the Standard library is their response to the [_can I configure rule x_](https://standardjs.com/index.html#i-disagree-with-rule-x-can-you-change-it) question:

> No. The whole point of standard is to save you time by avoiding [bikeshedding](https://www.freebsd.org/doc/en/books/faq/misc.html#bikeshed-painting) 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
```bash
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.
```json
{
  "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](https://prettier.io/) library. 

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

### 1. Install Prettier
```bash
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.

```diff
{
- "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](https://blog.matterhorn.dev/posts/learn-typescript-linting-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](https://twitter.com/ArrowoodTech)).