目录
1. 安装 eslint
npx eslint --init
其他 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:
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
优点：
- 简洁高效
- 执行完成后能提示未修复的问题及位置
缺点：
- 部分问题无法修复，如冗余变量、代码等
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
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 模块)
},
};
如果有用，就点个赞吧(\*^▽^\*)