@typescript-eslint/parser或者@babel/eslint-parser如何配合eslint的内置规则

当使用 @typescript-eslint/parser 或 @babel/eslint-parser 时，仍然可以使用 ESLint 自带的规则，但有些规则可能需要适配或替换。以下是如何在不同的解析器下使用 ESLint 自带的规则的方法。

使用 @typescript-eslint/parser

@typescript-eslint/parser 专门为 TypeScript 设计，完全支持 ESLint 的自带规则，并提供了一些额外的 TypeScript 特有规则。

• 安装：

  npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
  

• 配置：

  在 .eslintrc.js 中：

  module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
    ],
    parserOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      ecmaFeatures: {
        jsx: true, // 如果你在项目中使用了 JSX 语法
      },
      project: './tsconfig.json', // 指定 TypeScript 配置文件
    },
    rules: {
      // 自定义规则
      'no-unused-vars': 'off', // 关闭 ESLint 的 no-unused-vars 规则
      '@typescript-eslint/no-unused-vars': ['error'], // 启用 typescript-eslint 的 no-unused-vars 规则
    },
  };
  

使用 @babel/eslint-parser

@babel/eslint-parser 可以解析 TypeScript 以及其他非标准或实验性语法。你可以结合 Babel 配置使用 ESLint 的自带规则。

• 安装：

  npm install --save-dev @babel/eslint-parser @babel/preset-typescript
  

• 配置：

  在 .eslintrc.js 中：

  module.exports = {
    parser: '@babel/eslint-parser',
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
    ],
    parserOptions: {
      requireConfigFile: false,
      babelOptions: {
        presets: ['@babel/preset-typescript'],
      },
    },
    rules: {
      // 自定义规则
      'no-unused-vars': 'off', // 关闭 ESLint 的 no-unused-vars 规则
      '@typescript-eslint/no-unused-vars': ['error'], // 启用 typescript-eslint 的 no-unused-vars 规则
    },
  };
  

处理规则冲突

当使用 @typescript-eslint/parser 或 @babel/eslint-parser 时，某些 ESLint 自带的规则可能与 TypeScript 相关的规则冲突。在这种情况下，可以关闭 ESLint 自带的规则并启用对应的 typescript-eslint 规则。例如：

• no-unused-vars：可以使用 @typescript-eslint/no-unused-vars 替代。
• no-shadow：可以使用 @typescript-eslint/no-shadow 替代。
• no-use-before-define：可以使用 @typescript-eslint/no-use-before-define 替代。

配置示例

以下是一个综合配置示例，使用 @typescript-eslint/parser 并处理规则冲突：

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error'],
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
  },
};

通过这种方式，你可以继续使用 ESLint 自带的规则，同时利用 TypeScript 特有的规则来提高代码质量和一致性。