Setting ESLint and Prettier for TypeScript projects

README.md

Setting eslint and prettier for TypeScript projects

1. Install dev dependencies:

$ yarn add --dev eslint prettier
$ yarn add --dev eslint-plugin-prettier eslint-config-prettier

or

$ npm install eslint --save-dev
$ npm install prettier --save-dev
$ npm install eslint-plugin-prettier --save-dev
$ npm install eslint-plugin-import@latest --save-dev    
$ npm install eslint-config-prettier --save-dev 
$ npm install eslint-config-airbnb-base --save-dev  
$ npm install @typescript-eslint/eslint-plugin@latest --save-dev
$ npm install @typescript-eslint/parser --save-dev

2. Create .eslintrc.json with this content:

{ 
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {}
}

3. Create .prettierrc.json with this content:

{
  "semi": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none"
}

Notes

• For some Prettier versions, .prettierrc file must be JSON formatted.
• .eslintrc.json file can also be created with the eslint --init command.
• It's not neccesary to extend "airbnb-base" rules.
• The order of elements in "extends" array is important and "prettier" must be the last element (more information in this post)

Useful links

• Prettier Official Site
• Prettier configuration
• Usar ESLint y Prettier en proyectos TypeScript