How to set up a TypeScript project with ESLint and Prettier?.md

Summary

All the information that you need are in the following links, in the given order:

• typescript-eslint installation
• typescript-eslint configuration
• eslint-plugin-prettier installation
• eslint-plugin-prettier recommended configuration
• TypeScript configuration

The exact steps that you need to follow are:

• mkdir project

• cd project

• echo '{ "private": "true" }' > package.json

• Run the following command, as specified in typescript-eslint installation:

  npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

• Create a file named .eslintrc in the root of your project and populate it with the following, as specified in:

  • typescript-eslint configuration
  • Linting with Type Information page of typescript-eslint
  • Recommended Configurations of typescript-eslint

  {
    "root": true,
    "plugins": ["@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:@typescript-eslint/strict"
    ],
  }

• Run the following command, as specified in eslint-plugin-prettier installation:

  npm install --save-dev eslint-plugin-prettier prettier

• Run the following command, as specified in eslint-plugin-prettier recommended configuration:

  npm install --save-dev eslint-config-prettier

• Append "plugin:prettier/recommended" to the extends array in the .eslintrc file, as specified in eslint-plugin-prettier recommended configuration.

• Create a file named tsconfig.json in the root of your project and populate it with the following:

  {
    "compilerOptions": {
      "esModuleInterop": true,
      "module": "CommonJS",
      "outDir": "dist",
      "skipLibCheck": true,
      "sourceMap": true,
      "strict": true,
      "target": "ES2019",
    }
  }

• Create a file named .gitignore in the root of your project and populate it with the following:

  # npm modules
  /node_modules/
  # TypeScript output
  /dist/
  

• That's it!

Details

To use ESLint in TypeScript, there is a project named typescript-eslint. The project definition as declared on the project page is:

The tooling that enables ESLint and Prettier to support TypeScript.

So, we need typescript-eslint in order to use ESLint with TypeScript.

Upon following the instructions in the getting started page of typescript-eslint, we:

• Install TypeScript
• Install and configure ESLint for TypeScript.

So after that moment, we are ready to use TypeScript with ESLint.

Now, the only remaining things are to configure TypeScript and install and configure Prettier. All the information for configuring TypeScript can be found in TypeScript configuration. A good starter TypeScript configuration is specified in the "Summary" section above.

To install and configure Prettier, we navigate to the Integrating with Linters page of Prettier, since we're using ESLint, which is a linter. This page recommends using eslint-config-prettier, but not eslint-plugin-prettier, stating that eslint-plugin-prettier is not necessary anymore.

However, one important point is getting editor support for Prettier. If we don't use eslint-plugin-prettier, we need to install the VSCode Prettier Extension for the editor support. However, this extension is poorly rated and hence, I was hesitant on using it. Besides, since we already need to use the VSCode ESLint Extension (since we're using ESLint via typescript-eslint), it would be great if there was a way to utilize the VSCode ESLint Extension for Prettier as well.

Luckily, the eslint-plugin-prettier gives us exactly that! That is, if we install and configure the eslint-plugin-prettier, the Prettier rules are run as if there were linter rules. This way, the VSCode ESLint Extension works for Prettier as well and saves us from installing yet another (and a poorly-rated) VSCode extension.

So, in order to avoid having to install the poorly-rated VSCode Prettier Extension, we utilize the eslint-plugin-prettier and follow the instructions specified in its documentation in order to set up and configure Prettier.