前言

最近一直在配之前写的脚手架，从最初最简单的的react脚手架，到dev，production分开配置，到更为方便的热更新，到ts支持，less支持，eslint支持等等，其中最难受的就是配eslint了。

eslint规则繁多，和webpack、ts一起配合使用时需要另外进行配置，又要去翻各种文档，或安装各种plugin等等。如果没有在eslint中另外配置，在ts、js以便捷的形式（比如省略.ts，.tsx，.js，jsx，使用文件夹路径别名@src，@components等等）引入各种模块就很容易引起eslint“报错”。

代码运行并没有问题，只是eslint中没有相应的配置。如果eslint中又已经配置了预先设定的一些extends，他们的rules就会检验模块的引入问题，常见会有如下“报错”：

// 后缀省略
Unable to resolve path to module './components/TsCom'.  eslintimport/no-unresolved)

// 别名路径
Unable to resolve path to module '@const/index'  .eslintimport/no-unresolved)

虽然不会影响代码运行，但红线的“错误”浮在那着实很烦。

本文记录了eslint对webpack resolve的配置，经过配置之后，eslint直接支持webpack resovle中的设定，比如文件路径别名（alias），后缀省略（extensions）。

// webpack.common.js
  resolve: {
    // 支持缩写
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    // 别名
    alias: {
      '@': path.join(__dirname, 'src'), // "@表示src目录，即\src"
      '@source': path.join(__dirname, 'src', 'source'), // 静态资源
      '@com': path.join(__dirname, 'src', 'components'), // 组件目录
      'react-dom': '@hot-loader/react-dom',
    },
  },

解决

找了很久的解决方法和文档，支持缩写配置很快就找到了，别名配置一直找不到。。

直到发现以下包，可以直接将webpack resolve配置匹配到eslint，使用方法也非常简单，快捷，不需要两个文件多次写配置。

安装eslint-import-resolver-webpack。

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

在eslin配置的setting中添加对应的webpack文件路径即可

// 这里我含有resolve配置的webpack文件为"webpack.common.js"
    "settings": {
        "import/resolver": {
            "webpack":{
                "config":"webpack.common.js"
            }
        }
    }

完成

参考资料

eslint-import-resolver-webpack——npm

eslint error showing with webpack alias——StackOverflow

eslint添加webpack resolve配置

前言

解决

参考资料