React-Typescript 项目中 ESLint 配置

插件化的 JavaScript 代码检测工具 — ESLint

---

为了统一代码风格，防止重复造轮子,需要进过一下几个步骤才能完成集成

• 在 VSCode 中安装 ESLint 插件
• 安装依赖包
• eslint 配置文件生成
• vscode 配置

---

1.安装VSCode插件 —- ESLint(点击此可以查看插件文档文档地址)

• 此插件集成 eslint 到 vscode 中,插件本身不提供核心功能。
• 使用此插件需要在本地安装eslint,核心功能在此node_modules中

已经安装过Prettier插件的，请卸载掉

---

2.安装依赖包

使用 yarn 安装依赖包

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

或者使用 npm 安装

npm i eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier eslint-config-prettier --saev-dev

3.新增 .eslintrc.js 配置

在项目根目录创建此文件 .eslintrc.js
把下面代码copy进去

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  rules: {
    'prettier/prettier': 'error',
  },
};

4.新增 vscode 配置

文件位置

vscode配置文件位置在项目根目录,文件名是 .vscode/settings.json

文件内容

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": false
  }
}