在 Typescript 项目中集成eslint和prettier

settings.json 配置

根目录新建.vscode文件夹，然后新建settings.json文件

{
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    },
}

接着：

1. 打开vscode的eslint plugin，让上述的保存自动fix的code action生效。
2. 如已开启vscode的prettier plugin，需要将其关闭，避免跟npm的prettier冲突。

安装 devDependencies

执行 npx eslint --init，根据项目需求安装依赖即可。

或者执行

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-config-prettier eslint-plugin-prettier typescript

• eslint：eslint核心库
• prettier：prettier核心库
• @typescript-eslint/eslint-plugin：提供了一套专门针对Typescript的eslint规则集
• @typescript-eslint/parser：可以让eslint对Typescript进行linting的parser
• eslint-config-prettier：禁用可能跟prettier产生冲突的eslint规则
• eslint-plugin-prettier：将prettier作为eslint的规则来运行

如果是react项目，还需要安装eslint-plugin-react这一eslint插件

.prettierrc配置

具体配置项可参考prettier.io/docs/en/opt…

{
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "printWidth": 100
}

.eslintrc配置

如果是react项目，需要在plugins列表里添加plugin:react/recommended

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