webpack高级应用篇(三):ESLint

目录

    • 1. 安装 eslint
    • 2. Webpack + ESlint 实现实时报错提示
    • 3. 在编辑器中提示
      • 3.1 Vscdoe
      • 3.2 WebStorm
    • 4. 快捷修复
      • 4.1 命令行
      • 4.2 Vscode
      • 4.3 WebStorm
    • 5. .eslintignore
    • 6. overlay
    • 7. Git Hooks 与 Husky —— git commit 时规范代码
    • 8. 报错修复
      • 8.1 Parsing error: 'import' and 'export' may only appear at the top level

1. 安装 eslint

npx eslint --init

webpack高级应用篇(三):ESLint_第1张图片
在这里插入图片描述
webpack高级应用篇(三):ESLint_第2张图片
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
webpack高级应用篇(三):ESLint_第3张图片

  • 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


webpack高级应用篇(三):ESLint_第4张图片
在这里插入图片描述

安装完成后生成一个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能够实时正确检查代码格式了
webpack高级应用篇(三):ESLint_第5张图片


3. 在编辑器中提示

3.1 Vscdoe

在插件市场中找到eslint插件,安装。重启vscode,你可以看到红红的一片代码格式错误 ̄□ ̄||
webpack高级应用篇(三):ESLint_第6张图片
webpack高级应用篇(三):ESLint_第7张图片


3.2 WebStorm

webpack高级应用篇(三):ESLint_第8张图片
webpack高级应用篇(三):ESLint_第9张图片


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:(不推荐)
webpack高级应用篇(三):ESLint_第10张图片

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

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

方法2:(推荐)
webpack高级应用篇(三):ESLint_第11张图片

优点:

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

缺点:

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

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默认认为 importexport 只能出现在顶层,但是 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 模块)
  },
};

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

你可能感兴趣的:(Webpack,前端工程化,ESlint,webpack,eslint,webstorm,eslint,vscode,eslint,eslint-loader)