vue2项目eslint配置

ESLint结合Webpack使用

• 一、安装
• 二、后续配置

一、安装

webpack集成ESLint并不是以插件的方式来完成的，而是通过loader机制。

yarn add eslint eslint-loader --dev

初始化eslint配置文件

yarn eslint --init

配置webpack.config.js中的rules

{
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: {
          loader:'eslint-loader',
          options:{
            fix: true
          }
        },
        enforce: "pre"
      },

通过enforce: "pre"设置匹配到js文件优先执行这个loader，通过options中的fix，设置自动处理代码风格问题。

正常执行webpack打包就会触发eslint检测代码，如此就能在webpack中使用eslint检测代码问题了。

二、后续配置

我的打包入口文件内容如下，

import React from 'react'
import ReactDOM from 'react-dom'
import './global.css'
import App from './components/App'
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

执行webpack打包后

提示React从未使用，从代码本身分析，这个React确实没有被用到，但是这个React是JSX编译过后必须用到的，所以像这种特殊的情况， eslint就必须靠一些额外的插件来实现。社区中专门为React这种语法提供了一个插件，那就是eslint-plugin-react。

yarn add eslint-plugin-react --dev

安装过后可以打开这个插件中的对应的模块。

这个模块中定义了很多校验规则，而这些规则都是针对于react项目的。我们要使用这些规则，就直接在.eslintrc.js中通过plugins属性进行配置。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  	// 需要在plugins中配置"react"才可以使用这些规则
  	"react/jsx-uses-react":2, // 这里用数字2 代替error，这个规则的作用就是用来避免React定义了却没有使用的报错
    "react/jsx-uses-vars":2 // 解决App从未使用的报错
  },
  // plugins是一个数组，在其中可以直接指定我们去使用一些插件，我们要使用eslint-plugin-react插件
  plugins:[
  	"react" // 因为这里的插件名会去掉eslint-plugin的前缀，配置之后其中的所有规则我们都可以使用了 
  ]
}

此时再去执行webpack打包，就不会有React和App的报错了。

不过对于大多数的eslint插件来说，一般都会去提供一个共享的配置，从而降低我们使用的成本，我们这里使用的eslint-plugin-react，其中就导出了共享的配置，分别是recommended和all，我们现在要使用的就是recommend。插件中提供了共享配置，我们就可以直接通过继承去使用，不过在继承的时候需要去遵守它的语法规则。就是plugin:插件名/具体配置名称

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {}
}

执行打包，eslint检测代码没有任何问题了。

以上就是ESLint结合Webpack使用的大致流程了。