有时候开发初期,为了缩短开发周期,创建项目的时候会直接去掉esLint。
后面代码优化的时候需要加上去,这时候要怎么将esLint加到项目中呢
1.安装下面esLint所需要的依赖,记住安装到 devDependencies 下
"babel-eslint"
"eslint",
"eslint-friendly-formatter
"eslint-loader"
"eslint-plugin-import"
"eslint-plugin-node"
"eslint-plugin-vue"
2.配置webpack:打开build/webpack.base.conf.js 在module=>rules下添加下面的规则
module: {
rules: [
......
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
......
3.在项目中新建.eslintrc.js文件,并添加如下代码:
module.exports = {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
/**
* "off"或者0 //关闭规则关闭
* "warn"或者1 //在打开的规则作为警告(不影响退出代码)
* "error"或者2 //把规则作为一个错误(退出代码触发时为1)
*/
"rules": {
"no-console": process.env.NODE_ENV === "production" ? "off" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "off" : "off"
},
}
这时候就可以校验代码了
.eslintrc.js里面的代码校验规则,可以自己添加修改
具体可以查看文档:https://cn.eslint.org/docs/rules/
如何忽略某个文件
在根目录下新增.eslintignore文件添加如下代码:
src/assets/* // src/assets下的文件不校验