如何让ESLint识别VS Code中jsconfig.json的baseUrl与paths配置？

我懂你现在的情况——已经靠jsconfig.json里的paths配置实现了清爽的短路径导入，代码构建也完全没问题，但ESLint还在揪着导入路径报错，挺闹心的对吧？别慌，咱们几步就能搞定这个问题。

方法一：手动配置路径映射（基础方案） #

1. 安装依赖包 #

首先得给ESLint装两个能解析路径别名的插件：

npm install eslint-import-resolver-node eslint-import-resolver-alias --save-dev

用yarn的话就换成：

yarn add eslint-import-resolver-node eslint-import-resolver-alias --dev

2. 修改ESLint配置文件 #

找到你的.eslintrc.js（或者.eslintrc.json），添加settings字段，把jsconfig.json里的路径规则同步过去：

如果是.eslintrc.js：

module.exports = {
  // 你的其他ESLint规则...
  settings: {
    'import/resolver': {
      node: {
        paths: ['./src'] // 和jsconfig里的baseUrl对应
      },
      alias: {
        map: [
          ['components/*', './src/components/*'] // 复刻jsconfig里的paths配置
        ],
        extensions: ['.js', '.jsx', '.json'] // 根据你项目的文件类型调整
      }
    }
  }
};

如果是.eslintrc.json：

{
  // 你的其他ESLint规则...
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["./src"]
      },
      "alias": {
        "map": [
          ["components/*", "./src/components/*"]
        ],
        "extensions": [".js", ".jsx", ".json"]
      }
    }
  }
}

方法二：直接关联jsconfig.json（省心方案） #

不想重复写路径映射？可以用eslint-import-resolver-typescript（别被名字骗了，它完美支持JS项目），让ESLint直接读取jsconfig.json的配置：

1. 安装依赖 #

npm install eslint-import-resolver-typescript --save-dev

2. 修改ESLint配置 #

module.exports = {
  // 你的其他ESLint规则...
  settings: {
    'import/resolver': {
      typescript: {
        project: './jsconfig.json' // 直接指定jsconfig文件路径
      }
    }
  }
};

这个方案不用手动同步路径，ESLint会自动读取jsconfig.json里的baseUrl和paths，省心不少。

最后一步：验证生效 #

配置完之后，重启一下VS Code的ESLint服务（或者直接重启编辑器），再看你的导入语句，比如import MyComponent from 'components/MyComponent'，ESLint应该就不会再报错啦。

内容的提问来源于stack exchange，提问作者Evaldas Buinauskas