TypeScript ESLint

typescript-eslint is a tool for using ESLint and Typescript together without needing to worry about implementation detail differences wherever possible.

Migrating from TSLint? We recommend removing existing lint packages & configurations, starting fresh before proceeding with the steps below.

Installing TypeScipt ESLint

yarn add --dev \
  eslint \
  @types/react \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint-config-react \
  eslint-plugin-react \
  eslint-config-prettier \
  eslint-plugin-prettier \
  prettier

Add config

//.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "prettier/prettier": ["error", { "semi": false, "singleQuote": true }]
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}
//.tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules"]
}

Add scripts

// package.json
{
  "scripts": {
    "prettier": "prettier-eslint --list-different 'src/**/*.js'",
    "prettier:fix": "prettier-eslint --write 'src/**/*.js'",
    "lint": "eslint './src/**/*.{ts,tsx}'"
    "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix"
  }
}

Gotchas to take note of

  • Don't forget to rename file extensions MyButton.tsx

VS Code

To integrate with VS Code install the ESLint extension and update User Settings

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

References