webpack高级应用篇（三）：ESLint

1. 安装 eslint

npx eslint --init

• Airbnb: https://github.com/airbnb/javascript
• Standard: https://github.com/standard/standard
• Google: https://github.com/google/eslint-config-google
• XO: https://github.com/xojs/eslint-config-xo

其他 eslint-config
vue 官方: eslint-config-vue
腾讯 AlloyTeam: eslint-config-alloy

安装完成后生成一个elsint配置文件.eslintrc.js

module.exports = {
    "env": { // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
        "browser": true, // 运行在浏览器
        "es2021": true // 支持es2021
    },
    "extends": [ // 使用的外部代码格式化配置文件
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 12, // ecmaVersion 用来指定支持的 ECMAScript 版本 。默认为 5，即仅支持es5
        "sourceType": "module"
    },
  	globals: {}, // 脚本在执行期间访问的额外的全局变量
    "rules": { // 启用的规则及其各自的错误级别。0(off)  1(warning)  2(error)
    }
};

rules:

ESLint-五虎战画戟的博客

腾讯云-ESLint

ESLint Rules

2. Webpack + ESlint 实现实时报错提示

执行npx eslint ./src/，可以看到会输出一些error或者waring

我们期望eslint能够实时提示报错而不必等待执行命令。 这个功能可以通过给自己的IDE(代码编辑器)安装对应的eslint插件来实现。 然

而，不是每个IDE都有插件，如果不想使用插件，又想实时提示报错，那么我们可以结合 webpack 的打包编译功能来实现。

npm i webpack webpack-cli babel-loader eslint-loader @babel/core webpack-dev-server -D

webpack.config.js

//... 
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node-modules/, // 排除编译 node_modules
        use: ['babel-loader', 'eslint-loader']
      },
    ]
  },
// ...

或者

{
  test: /\.js$/,
  exclude: /(node_modules)/, // 排除编译 node_modules
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime'],
      },
    },
    {
      loader: 'eslint-loader',
    },
  ],
},

执行npx webpack serve，如果你遇到下面的错误，那应该是你的eslint-loader需要的eslint版本没有正确安装

可以执行npm i，可以查看到

eslint-loader需要的eslint版本没有正确安装，那么按照他的要求安装即可

npm i eslint@^7.0.0 -D

安装完成后，执行npx webpack serve，可以看到eslint能够实时正确检查代码格式了

3. 在编辑器中提示

3.1 Vscdoe

在插件市场中找到eslint插件，安装。重启vscode，你可以看到红红的一片代码格式错误￣□￣｜｜

3.2 WebStorm

4. 快捷修复

4.1 命令行

npx eslint ./src/ --fix

或

npx eslint --ext .js --ext .vue ./src/ --fix 

优点：

• 简洁高效
• 执行完成后能提示未修复的问题及位置

缺点：

• 部分问题无法修复，如冗余变量、代码等

4.2 Vscode

vscode设置eslint保存文件时自动修复eslint错误

启动 vscode 打开项目，

windows: ctrl + shift + p 打开 搜索面板

MacBook: command + shift + p 打开 搜索面板

输入 settings.json，选择 .vscode 下的 settings.json

加入以下代码：

{
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

这个规则是在保存时按照你的项目中 eslint 配置 fix

注意你~/Library/Application Support/Code/User/settings.json 中的规则尽量不要与项目中的规则产生冲突

4.3 WebStorm

方法1:（不推荐）

优点： 保存时格式化能够做到实时格式化，避免忘记

缺点： 保存时修复代码格式错误，代码改变后折行会展开、代码行位置变化、，你需要重新找到你关注的代码行。这让人不爽

方法2:（推荐）

优点：

• 简洁高效
• 能够对文件、目录做代码格式修复

缺点：

• 部分问题无法修复，如冗余变量、代码等
• 执行完成后不能提示未修复的问题及位置，可以结合

5. .eslintignore

.eslintignore 能够帮助我们忽略我们不想使用 eslint 检查的文件、目录，如：

build/*.js
src/assets
public
dist

6. overlay

devServer.client.overlay 控制当出现编译错误或警告时，在浏览器中是否显示全屏覆盖。默认显示
boolean = true object: { errors boolean = true, warnings boolean = true }

关闭浏览器全屏覆盖提示
webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: false,
    },
  },
};

如果你只想显示错误信息：
webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },
};

7. Git Hooks 与 Husky —— git commit 时规范代码

请参阅Git Hooks 与 Husky

8. 报错修复

8.1 Parsing error: ‘import’ and ‘export’ may only appear at the top level

eslint默认认为 import 和 export 只能出现在顶层，但是 es6 模块语法是允许动态导入语法的, eslint 默认解析器可能不支持动态导入
如下代码：

const addButton = document.createElement('button')
addButton.addEventListener('click', () => {
  import('./math.js').then(({ add }) => {
    console.log(add(4, 5))
  })
})

解决

npm i babel-eslint -D

.eslintrc.js

module.exports = {
  // ...
  parser: 'babel-eslint', // 解析器，默认使用Espree
  parserOptions: {
    sourceType: 'module', // 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
  },
};

如果有用，就点个赞吧(\*^▽^\*)