如何为包含.d.ts文件的JavaScript项目配置lint解决eslint报错

默认ESLint使用的Espree解析器不支持TypeScript专属语法，而你配置的lint命令eslint src/**会匹配src目录下所有文件，包含新增的.d.ts类型声明文件，因此触发解析错误。

提供两种适配不同需求的方案：

方案1：忽略.d.ts文件（无需新增依赖，操作最简单） #

适合不需要对类型声明文件做校验的场景，任选一种操作即可：

• 修改package.json中的lint命令，仅扫描JS文件：

  "scripts": {
    "lint": "eslint src/**/*.js"
  }
  

• 项目根目录新增.eslintignore文件，添加一行配置：

  *.d.ts
  

方案2：配置ESLint支持.d.ts语法解析 #

适合需要对类型声明文件做校验的场景：

1. 安装必要依赖：

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

2. 修改.eslintrc配置，新增overrides字段仅对.d.ts文件启用TypeScript解析器，不影响原有JS文件的校验规则：

   {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": "2018"
    },
    "extends": [
        "eslint:recommended"
    ],
    "plugins": [
        "import"
    ],
    "settings": {
        "import/extensions": [
            ".js"
        ]
    },
    "overrides": [
        {
            "files": ["*.d.ts"],
            "parser": "@typescript-eslint/parser",
            "plugins": ["@typescript-eslint"],
            "extends": ["plugin:@typescript-eslint/recommended"],
            "rules": {
                // 可根据需求关闭不需要的d.ts校验规则
                "@typescript-eslint/no-unused-vars": "off"
            }
        }
    ]
   }
   

3. 根目录新增最小配置的tsconfig.json文件，避免TypeScript解析器告警：

   {
     "compilerOptions": {
        "allowJs": true,
        "noEmit": true
     },
     "include": ["src/**/*"]
   }
   

内容的提问来源于stack exchange，提问作者Yanick Rochon