安装
// vsCode 安装eslint扩展
// 全局安装
npm i -g eslint babel-eslint
//项目安装eslint依赖项
yarn add eslint babel-eslint eslint-plugin-vue -D
//安装npx
npm install -g npx
//在项目里同过npx 初始化eslint配置【按选项配置】
npx eslint --init
ESLint vs code 配置
打开插件 =====》点击扩展设置
添加配置
每次在保存的时候就可以根据 .eslintrc.js 文件里你配置的ESLint规则 来处理不符合规则的代码;
例如:配置了禁止分号,代码写了分号,保存时自动将分号干掉。
代码
eslintrc里有对应规则配置和解释
.eslintignore 文件
/node_modules/
/public/
.vscode
.idea
.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential"
],
"parserOptions": {
"ecmaVersion": 13,
"sourceType": "module"
},
"plugins": [
"vue"
],
/**
* 这个选项是配置eslint 的验证规则的对象,[进入链接随便点击一个就是这个路径的配置]
* https://eslint.bootcss.com/docs/rules/
*/
"rules": {
"semi": [2, 'never'],
"no-multiple-empty-lines": [
"error", {
"max": 2,
"maxEOF": 1
}
],
"for-direction": "error",
/**
* eslint-plugin-vue 对vue的配置规则
*/
// https://eslint.vuejs.org/rules/multi-word-component-names.html
'vue/multi-word-component-names': [
"error", {
// ignores要忽略的组件名称。将组件名称设置为允许, 其他非驼峰命名则错误
ignores: [
'index'
]
}
],
}
}
过程问题
module’ is not defined
"env": {
"node": true // 这个配置让文件支持 module.exports ,否则会 'module' is not defined.
},
使用方式
其中 配置文件中使用 extends": "eslint:recommended 来启用推荐的规则,再安装是初始化的配置项就启动了
// "eslint:recommended" 初始化时就开启了
module.exports = {
"extends": [
"eslint:recommended",
],
}
例如点击 for-direction
其中注释就写好语法了
"rules": {
"for-direction": "error",
}
BUG
Cannot find module ‘babel-eslint’ 找不到模块 ‘babel-eslint’
解决:
npm i -g eslint babel-eslint
BUG2
使用eslint的时候每次都有这么多格式问题,一个个找起来又很浪费时间
解决:
根目录建立目录: .vscode/ extensions.json
{
"recommendations": ["johnsoncodehk.volar"]
}
其他问题
基本可以根据报错的eslint规则在文档找到原因