create-react-app ts eslint設置

轉載原文 https://www.xtivia.com/advanced-linting-with-create-react-app-typescript-and-eslint/

 

Advanced linting with Create React App, Typescript, and ESLint

1：we need to install some dependencies: 安裝依賴包

npm i -S @typescript-eslint/eslint-plugin @typescript-eslint/parser cross-env eslint eslint-config-prettier eslint-config-react eslint-plugin-prettier eslint-plugin-sonarjs prettier

2：In package.json, I’ve defined my npm scripts like this:

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint": "eslint --ext .ts --ext .tsx .",
    "lint-warn": "eslint --ext .ts --ext .tsx . -c .eslintrc.warn.json",
    "eject": "react-scripts eject"
  },

3：Create a .prettierrc.json file:

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

 

4: If you use VSCode, create this .vscode/settings.json file: 如果使用vscode, 在項目根目錄新建 .vscode/settings.json

settings.json的內容設置如下：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "editor.renderWhitespace": "boundary",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

5：

For any file you don’t want linted (such as serviceWorker.ts), add this line to the top:

/* eslint-disable */