如何同时使用不同的 eslint 配置 lint JS 和 TS 文件?

Posted

技术标签:

【中文标题】如何同时使用不同的 eslint 配置 lint JS 和 TS 文件?【英文标题】:How to lint JS and TS files with different eslint configs at the same time? 【发布时间】:2020-07-01 13:02:34 【问题描述】:

我们正在从 es6 迁移到 TSX。 JS 文件使用扩展airbnb config.eslintrc 进行linted,而TSX 使用扩展react/recommended@typescript-eslint/recommendedprettier/recommended.eslintrc.js 进行linted。

我们如何设置 eslint 将 JS 规则应用于 JS-only 文件和 TS(X) 规则应用于 TS-only 文件?

我在网上搜索过,一些建议暗示了覆盖,但我无法理解如何将插件集成在一起。

.eslintrc 用于 JS:


   
    "env": 
        "browser": true,
        "es6": true
    ,
    "extends": "airbnb",
    "rules": 
        "indent": ["error", 4,  "SwitchCase": 1 ],
        "no-alert": "error",
        "no-debugger": "error",
        "no-console": "off",
        "no-shadow": "off",
        "no-plusplus": "off",
        "no-empty-pattern": "off",
        "no-underscore-dangle": "off",
        "no-case-declarations": "off",
        "no-else-return": "off",
        "padded-blocks": "off",
        "no-tabs": "off",
        "default-case": "error",
        "comma-dangle": "error",
        "no-nested-ternary": "off",
        "consistent-return": "off",
        "no-param-reassign": "off",
        "no-use-before-define": "off",
        "brace-style": ["error", "stroustrup",  "allowSingleLine": true ],
        "import/prefer-default-export": "off",
        "max-len": ["error",  "code": 120 ],
        "object-curly-newline": ["error",  "multiline": true, "consistent": true ],
        "arrow-body-style": "off",
        "arrow-parens": ["error", "as-needed"],
        "quotes": ["error", "single"],
        "prefer-arrow-callback": "off",
        "no-new-object": "off"
    ,
    "settings": 
        "import/resolver": "webpack"
      

.eslintrc.js 用于 TSX:

module.exports = 
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    parserOptions: 
        ecmaversion: 2018,
        sourceType: 'module',
        ecmaFeatures: 
            jsx: true,
        ,
    ,
    settings: 
        react: 
            version: 'detect',
        ,
    ,
    rules: 
        '@typescript-eslint/no-explicit-any': 'off'
    

【问题讨论】:

【参考方案1】:

您需要覆盖“.eslintrc.js”文件中的 ts、tsx 文件。尝试下一个参数:

module.exports = 
  //  parser: 'babel-eslint',
  //  "parserOptions": 
  //    "ecmaVersion": 6,
  //    "sourceType": "module",
  //    "ecmaFeatures": 
  //      "jsx": true,
  //      "experimentalObjectRestSpread": true
  //    
  //  ,
  "extends": "airbnb",
  "env": 
    "browser": true,
    "es6": true
  ,
  "settings": 
    "import/resolver": "webpack"
  ,
  "rules": 
    "indent": ["error", 4,  "SwitchCase": 1 ],
    "no-alert": "error",
    "no-debugger": "error",
    "no-console": "off",
    "no-shadow": "off",
    "no-plusplus": "off",
    "no-empty-pattern": "off",
    "no-underscore-dangle": "off",
    "no-case-declarations": "off",
    "no-else-return": "off",
    "padded-blocks": "off",
    "no-tabs": "off",
    "default-case": "error",
    "comma-dangle": "error",
    "no-nested-ternary": "off",
    "consistent-return": "off",
    "no-param-reassign": "off",
    "no-use-before-define": "off",
    "brace-style": ["error", "stroustrup",  "allowSingleLine": true ],
    "import/prefer-default-export": "off",
    "max-len": ["error",  "code": 120 ],
    "object-curly-newline": ["error",  "multiline": true, "consistent": true ],
    "arrow-body-style": "off",
    "arrow-parens": ["error", "as-needed"],
    "quotes": ["error", "single"],
    "prefer-arrow-callback": "off",
    "no-new-object": "off"
  ,
  overrides: [
    files: ["*.ts", "*.tsx"],
    parser: "@typescript-eslint/parser",
    plugins: ["@typescript-eslint"],
    extends: [
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:prettier/recommended'
    ],
    parserOptions: 
      ecmaversion: 2018,
      sourceType: 'module',
      ecmaFeatures: 
        jsx: true,
      ,
    ,
    settings: 
      react: 
        version: 'detect',
      ,
    ,

    /**
     * Typescript Rules
     */
    rules: 
      '@typescript-eslint/no-explicit-any': 'off'
    
  ]

【讨论】:

您为什么在此答案中包含已评论的babel-eslint?我正在使用 babel,想知道是否应该取消注释?

以上是关于如何同时使用不同的 eslint 配置 lint JS 和 TS 文件?的主要内容,如果未能解决你的问题,请参考以下文章

设置Jenkins使用Karma和Eslint进行单元测试和Lint检查

如何配置 package.json 在 js 和 jsx 文件上运行 eslint

使用eslint+prettier+husky+lint-staged+commitlint+stylelint规范项目格式

如何使用私有方法正确配置 ES6 类的 eslint?

如何配置 package.json 来运行 eslint 脚本

eslint 常用配置