Setup a TypeScript project with ESLint and Prettier

TS_ESLINT_PRETTIER.md

Project Setup

Setup ESLint to work with TypeScript

1. Install the Dev Dependencies

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

2. Create .eslintrc file and write the following in it:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    
  }
}

Adding Prettier

1. Install Dev Dependencies

yarn add prettier eslint-config-prettier eslint-config-prettier -D

2. Create .prettierrc fule and right a few rules like this:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "bracketSpacing": true
}

3. Update .eslintrc file

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "rules": {}
}