typescript-eslint-prettier-config

Minimal Typescript, ESLint and Prettier configuration.

ESLint and Prettier configurations are pretty standard in Javascript world. The intention of this package is to create a minimal setup with recommendations for eslint and prettier from the authors. According to them, we don't even need advance plugins that tries to get the best of both the worlds. Typescript config is cherry on top and gels easily with them.

Installation

To install:

1npm i -D typescript eslint prettier typescript-eslint-prettier-config

or

1yarn add -D typescript eslint prettier typescript-eslint-prettier-config

How to use this package

1. To extend your existing Typescript configuration

**/tsconfig.json

1{
2    "extends": "**/node_modules/typescript-eslint-prettier-config/tsconfig.json",
3    "compilerOptions": {
4        ...
5    },
6    "exclude": ["**/node_modules/**", "build/**", "dist/**"],
7    "include": ["src"] // include your src folder or use default
8}

2. To extend your existing ESLint configuration

**/.eslintrc

1{
2    "root": true,
3    "extends": "**/node_modules/typescript-eslint-prettier-config/.eslintrc",
4    "parserOptions": {
5        "project": ["./tsconfig.json"] // this is your typescript configuration that you extended in the previous step
6    }
7}

3. To extend your existing Prettier configuration

**/.prettierrc.ts

1module.exports = {
2    ...require('**/node_modules/typescript-eslint-prettier-config/prettier.config'),
3};

Further ideas to use the setup optimally

VSCode

eslint --fix can be configured in the settings.json file in VSCode to automatically fix the linting errors. Also, adding formatOnSave runs Prettier every time you save.

1{
2  "editor.codeActionsOnSave": {
3    "source.fixAll.eslint": true,
4    "source.organizeImports": true
5  },
6  "editor.formatOnSave": true
7}

Lint staging

lint-staged in combination with husky can be used in package.json to avoid accidentally committing non-linted files on github.

1{
2  "husky": {
3      "hooks": {
4          "pre-commit": "lint-staged"
5      }
6  },
7  "lint-staged": {
8      "*.{js,jsx,ts,tsx}": [
9          "eslint --fix"
10      ],
11      "*.{js,jsx,ts,tsx,json,yml,yaml,css,html}": [
12          "prettier --write"
13      ]
14  }
15}

Inspiration and Thanks

• eslint-prettier-typescript-config
• Using ESLint and Prettier in a TypeScript Project
• How to use Prettier with ESLint and TypeScript in VSCode
• Enforcing Coding Conventions with Husky Pre-commit Hooks
• How to use ESLint with TypeScript