How to use ESLint and Prettier in TypeScript Project

In this article, we will see How to use ESLint and Prettier in TypeScript Project.

if you are new to typescript, refer this to learn the typescript basics.

Mainly, Linting and Prettier are becoming more important tooling in developer's life.

There are two linting available for TypeScript. one is ESLint and another one is TSLint. But, TSLint can be only used for TypeScript, while ESLint can be used for Javascript and TypeScript.

Above all , In TypeScript 2019 Roadmap, the TypeScript core team explains the ESLint is more efficient that TSLint and they will focusing on ESLint hereafter

It can bring some standard to improve the code quality and code maintanence.

Since, TypeScript is popular nowadays. we will see how to integrate linting and prettier with typescript.

Setting up ESLint with TypeScript

Firstly, install the required dependencies,

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

• eslint - it is a Core ESLinting Library
• @typescript-eslint/parser - this library will allow eslint to parse TypeScript Code.
• @typescript-eslint/eslint-plugin - this library will contain rules for eslint - TypeScript specific.

After that, add an .eslintrc.js configuration file in the root project directory.

module.exports =  {
  parser:  '@typescript-eslint/parser',  //ESLint parser
  extends:  [
    'plugin:@typescript-eslint/recommended',
  ],
 parserOptions:  {
    ecmaVersion:  2018,  
    sourceType:  'module',  // Allows for the use of imports
  },
  rules:  {
   
  },
};

extends will contains all the plugin that we use with eslint. we can import all the plugin that we want to use with eslint.For example, prettier.

After that, parserOptions will contains the ecmaVersion and sourceType.

ECMAVersion defines the version that you want to parse.

Enabling ESLint with React and TypeScript

if you want to use ESLint with React and TypeScript. eslint-plugin-react should be installed and configured in the .eslintrc.js.

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions:  {
  ecmaVersion:  2018,  
  sourceType:  'module',  
  ecmaFeatures:  {
    jsx:  true,  // Allows for the parsing of JSX
  },
  },
  rules:  {
    
  },
  settings:  {
    react:  {
      version:  'detect',
    },
  },
};

Ultimately it's up to you to decide what rules you would like to extend from and which ones to use within the object in your .eslintrc.js file.

Adding Prettier to config

After that, Install the required dependencies to enable prettier.

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

• prettier - core prettier library.
• eslint-config-prettier - this library will disable all the eslint rules that might conflict with prettier.
• eslint-plugin-prettier - Runs prettier as an ESLint rule

In order to configure prettier, create a file .prettierrc.js at the root project directory and add the following code for configuration.

module.exports =  {
  semi:  true,
  trailingComma:  'all',
  singleQuote:  true,
  printWidth:  120,
  tabWidth:  4,
};

After that, update the .eslintrc.js with prettier plugin.

module.exports =  {
  parser:  '@typescript-eslint/parser',  //ESLint parser
  extends:  [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended' 
  ],
 parserOptions:  {
    ecmaVersion:  2018,  
    sourceType:  'module',  // Allows for the use of imports
  },
  rules:  {
   
  },
};

To sum up, Here's the complete configration to use ESLint and Prettier with TypeScript projects.

VSCode Setup

Above all, if you want to enable the linting and prettier on VSCode settings. you can do that too,

Enable the eslint --fix on VSCode which fix the linting on save.

"eslint.autoFixOnSave":  true,
"eslint.validate":  [
  "javascript",
  "javascriptreact",
  {"language":  "typescript",  "autoFix":  true  },
  {"language":  "typescriptreact",  "autoFix":  true  }
],

"editor.formatOnSave":  true,
"[javascript]":  {
  "editor.formatOnSave":  false,
},
"[javascriptreact]":  {
  "editor.formatOnSave":  false,
},
"[typescript]":  {
  "editor.formatOnSave":  false,
},
"[typescriptreact]":  {
  "editor.formatOnSave":  false,
},

That's how you can lint a TypeScript with ESLint. if you want to lint all the file while you commit to git, you can use lint-staged, which runs Eslint while you git commit.

Refer this to know more about Eslinting with TypeScript