您现在的位置是：首页 >技术教程 >react+ts配置eslint+prettier网站首页技术教程

因为项目是ts + react，所以需要额外安装ts和react的扩展，依赖的npm包如下。

"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"eslint-webpack-plugin": "^4.0.1",

没碰到特定版本的需求，目前安装的都是最新版本。

Eslint
      在文件根目录创建 .eslintrc.js 为配置文件，用来编辑相关检查规则及引用扩展。

eslint-config-prettier
      因为本身eslint就有自己的格式化设置，所以会有很多与prettier冲突的配置，所以需要此依赖，用来解决这些冲突。

eslint-plugin-import
        eslint的import扩展，用于在 .eslintrc.js 中定义文件的import规则，定义import的引入顺序及排序规则。

eslint-plugin-prettier
        与eslint-config-prettier功能类似，提供了一种更方便的方式，可以直接将prettier配置作为扩展在 .eslintrc.js 中进行注册，而无需创建.prettierrc.json文件。

eslint-plugin-react
        eslint的react规则扩展，用于检查react语法。

eslint-plugin-react-hooks
        eslint的react hooks规则扩展，用于检查react hooks语法。

@typescript-eslint/eslint-plugin
        eslint的ts规则扩展，用于检查ts语法。

@typescript-eslint/parser
        eslint配置的ts解析器，需要先配置上解析器，eslint才能正确对ts语法进行检查，需要先按照上解析器，@typescript-eslint/eslint-plugin才能使用。

eslint-webpack-plugin
        webpack的eslint插件，在webpack.config.js中注入该插件扩展，可以在webpack进行编译前，先进行eslint语法检查，将eslint的错误输出到终端，不会影响到webpack编译结果。

.eslintrc.js配置如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['import', 'react', 'react-hooks', '@typescript-eslint'],

  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    //  ----------------------------    代码执行方式 start ↓    -----------------------------

    // // 禁用 'semi' 规则
    // semi: "error",
    // // 使用 '@typescript-eslint/no-extra-semi' 规则 （强制单行结束必须要有分号结尾）
    // "@typescript-eslint/no-extra-semi": "off",

    // 对已声明未使用的变量报错
    '@typescript-eslint/no-unused-vars': 'error',
    'no-unused-vars': 'off',

    //  不允许if 和 else if判断相同
    'no-dupe-else-if': 'error',

    //  强制变量必须小驼峰命名规则
    camelcase: 'error',

    //  强制必须使用完全比较
    eqeqeq: 'error',

    //  禁止else语句中只包含 if语句，应该修改为 else if
    'no-lonely-if': 'error',

    //  允许ts指定类型为any
    '@typescript-eslint/no-explicit-any': 'off',

    //  允许对非null进行断言
    '@typescript-eslint/no-non-null-assertion': 'off',

    //  允许定义空接口
    '@typescript-eslint/no-empty-interface': 'off',

    //  禁止在函数中进行无意义的返回
    'no-useless-return': 'error',

    //  对于字符串拼接，限制只能使用字符串模板的方式 `hello ${name}`
    'prefer-template': 'error',

    //  限制模块导入不可重复
    'no-duplicate-imports': 'error',

    //  允许使用require引入模块
    '@typescript-eslint/no-var-requires': 'off',

    //  忽略提示react弃用方法
    'react/no-deprecated': 'off',

    //  暂时先关闭未使用setState更新的错误报警，后面统一处理
    'react/no-direct-mutation-state': 'off',

    // 重新配置 react-hooks 相关内容
    'react-hooks/rules-of-hooks': 'error',
    //  ----------------------------    代码执行方式 end ↑    -----------------------------

    //  ----------------------------    代码外观 start ↓    -----------------------------
    //  配置import模块进行分组
    'import/order': [
      'error',
      {
        groups: [
          ['builtin', 'external'],
          'internal',
          'parent',
          'sibling',
          'index',
        ],
        'newlines-between': 'always',
        pathGroups: [
          {
            pattern: '../**',
            group: 'parent',
            position: 'after',
          },
          {
            pattern: './*.scss',
            group: 'sibling',
            position: 'after',
          },
        ],
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],

    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
        semi: true,
        singleQuote: true,
        tabWidth: 2,
        trailingComma: 'es5',
      },
    ],
    //  ----------------------------    代码外观 end ↑    -----------------------------
  },
};

配置完成后，可以在当前目录执行命令对指定文件或目录进行eslint语法检查。

npx eslint ./src/ --ext .js,.jsx,.ts,.tsx --max-warnings 1000

可以使用以下命令对指定文件目录进行自动修复。

npx eslint --fix .src

使用以下命令对指定文件目录执行prettier格式化。

npx prettier --write .src

在webpack.config.js的plugins进行注册，注意只需要在开发环境注册。

 plugins: [
    isDevelopment &&
      new ESLintPlugin({
        // 指定 ESLint 配置文件的路径
        context: 'src',
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        exclude: ['node_modules'],
        // fix: true, // 如果可能，自动修复 ESLint 错误
      }),
  ].filter(Boolean),

在vscode编译器中安装eslint和prettier eslint扩展，这样在编辑器中就可以看到相关标红的错误提示。

修改当前项目的工作区配置，对应.vscode>serttings.json文件。

{
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
    "editor.formatOnPaste": false, // required 
    "editor.formatOnType": false, // required
    // "editor.formatOnSave": true, // optional 
    // "editor.formatOnSaveMode": "file", // required to format on save
    // "files.autoSave": "onFocusChange", // optional but recommended
    "vs-code-prettier-eslint.prettierLast": false // set as "true" to run 'prettier' last not first
}

指定当前工作区格式化扩展为prettier，代码中注释的三行为自动保存后自动格式化的相关配置。