从0开始搭建eslint配置
前言
为了提高代码可读性,以及团队风格统一。便于日后维护,代码风格统一就显得尤为重要。本文从0开始为生成的vue项目增加webpack,脚手架使用
webpack simple
1、准备工作
首先初始化项目,打开命令行执行vue init webpack-simple eslint-demo,接下来我们进入项目文件夹内。项目目前是没有eslint规范的。接下来我们一步步为这个项目添加eslint并依照我们团队的代码规范进行配置。
2、安装eslint
首先肯定要先安装eslint拉,npm i eslint -D ,安装完成之后,我们要接着初始化项目,执行eslint -init (之后一路next),会在当前项目下生成一个.eslintrc.js
文件如下:
module.exports = {
"env": {
"browser": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 5
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
当然这样的配置肯定是不行的,我们需要修改一些配置,首先dev属性下,我们将其加入{es6: true}
的配置,接着我们需要在"parserOptions"配置下加入"ecmaVersion": 2018,
(解析器的配置版本这里用的是2018版应该是最新的,你也可以根据需要来设置这个属性)。
3、rules
接下来就要开始最主要的设置规则环节了,我们先运行项目先来试试eslint起作用了没,我们打开main.js,会发现已经有错误警告了,在我们所有’'的地方都有错误提示,这是因为"quotes"配置的为“double”属性,我们平时开发由于用的是单引号这里给改成"single"就可以了,接下来我们就可以往rules里添加配置了,比如我们加入"eqeqeq": "error"
这个配置(比较运算符强制使用严格相等),接下来我们去main.js里输入console.log(1==2)就会发现已经有了报错了。(关于具体的rules请移步eslint中文官网查看)
4、为vue文件增加eslint检测
现在我们进入vue文件,会发现eslint并没有起作用,接下来我们就来配置vue文件的代码风格检测了。由于需要检测vue文件,所以我们需要安装些插件来支持npm - eslint-loader eslint-plugin-vue -D
安装需要的插件。接下来还需要配置下webpack,让eslint知道我们需要去检测哪些文件,接下来打开webpack.config.js
,在test中加入如下配置:
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve('src'), path.resolve('test')],
options: {
// formatter: require('eslint-friendly-formatter'),
emitWarning: false
}
}
意思就是告诉webpack,我们需要检测.vue文件。接着我们在.eslintrc.js
加入对vue的一些rules配置,我们重启项目后加入配置试一下’vue/no-shared-component-data’: “error”
,ok,你会发现vue文件也可以被检测了。还记不记得我们初始化vue项目自带的eslint会出现遮罩提示,有些同学如果不喜欢的话在刚才我们加入的test中,有个emitWarning设置为true,就会关闭这个功能。至此一个完整的增加eslint就配置好了。最后贴出我整理的配置。大部分是根据项目代码风格来配置的,如有不当可以一起修完完善。
{
"env": {
"browser": true,
"es6": true
},
extends: ['plugin:vue/essential'],
plugins: [
'vue'
],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"no-dupe-keys": "error",
"use-isnan": "error",
"block-scoped-var": "error",
"class-methods-use-this": "error",
"eqeqeq": "error", // 强制要求严格相等
"no-alert": "error", // 不允许出现alert
"no-else-return": "error",
"no-eval": "error",
"no-redeclare": "error", // 禁止重复生命变量
"no-self-assign":"error", // 禁止自我赋值
"no-self-compare":"error", // 禁止自我比较
"no-shadow":"error", // 禁止变量声明与外层作用域的变量同名
"no-unused-vars":"error", // 禁止出现未使用的变量
"no-use-before-define":"error", // 禁止在变量出现之前就用
"global-require":"error", // require必须出现在顶部
"array-bracket-spacing": ["error", "never"], // 禁止出现数组[]左右出现空格
"comma-dangle":"error", // 禁止末尾出现多余逗号
"comma-spacing":"error", // 逗号与元素要有空格
"comma-style":"error", // 逗号要在元素之后
"func-call-spacing":"error",
"function-paren-newline":"error",
"indent":["error", "tab"], // 强制tab缩进
"keyword-spacing":"error",
"key-spacing":["error"],
"line-comment-position": "error", // 强制代码注释在行上方
"new-cap": "error", // 构造函数首字母大写
"no-lonely-if": "error", // 禁止 if 作为唯一的语句出现在 else 语句中
"no-mixed-spaces-and-tabs": "error", // 禁止tab和空格的混合缩进
"no-inline-comments": "error", // 禁止在代码后放注释,应将其放置在代码上方
"no-trailing-spaces": "error", // 禁止行尾出现空格
"no-whitespace-before-property": "error", // 禁止属性前有空白
"object-curly-spacing": "error",
"object-property-newline": "error", // 强制将对象属性放在不同行上
"space-before-function-paren": "error",
"space-infix-ops": "error", // 操作符周围有空格
"arrow-spacing": "error", // 剪头函数用大括号
"arrow-body-style": "error", // 箭头函数参数圆括号
"arrow-parens": "error", // 箭头函数前后一致的空格
"constructor-super": "error", // 构造函数必须调用supper
"no-class-assign": "error", // 禁止修改class生命的变量
"no-const-assign": "error", // 禁止修改const变量
"no-dupe-class-members": "error", // 禁止类成员出现重复名称
"no-duplicate-imports": "error",
"no-var": "error",
"prefer-arrow-callback": "error", // 回调函数使用箭头函数
//vue
'vue/no-dupe-keys': "error",
'vue/no-parsing-error': "error", // 禁止出现语法错误
'vue/no-shared-component-data': "error", // 组件的 data 属性的值必须是一个函数
'vue/no-template-key': 'off', // 可以让 <template> 使用 key 属性
'vue/require-render-return': "error", // render 函数必须有返回值
'vue/require-valid-default-prop': "error", // prop 的默认值必须匹配它的类型
'vue/return-in-computed-property': "error",// 计算属性必须有返回值
'vue/valid-template-root': "error", // template 的根节点必须合法
'vue/valid-v-bind': "error", // v-bind 指令必须合法
'vue/valid-v-cloak': "error", // v-cloak 指令必须合法
'vue/valid-v-else-if': "error",// v-else-if 指令必须合法
'vue/valid-v-else': "error", // v-else 指令必须合法
'vue/valid-v-for': "error", // v-for 指令必须合法
'vue/valid-v-html': "error", // v-html 指令必须合法
'vue/valid-v-if': "error", // v-if 指令必须合法
'vue/valid-v-model': "error", // v-model 指令必须合法
'vue/valid-v-on': "error", // v-on 指令必须合法
'vue/valid-v-once': "error", // v-once 指令必须合法
'vue/valid-v-pre': "error", // v-pre 指令必须合法
'vue/valid-v-show': "error", // v-show 指令必须合法
'vue/valid-v-text': "error", // v-text 指令必须合法
'vue/html-end-tags': 'off',
'vue/no-async-in-computed-properties': "error", // 计算属性禁止包含异步方法
'vue/no-confusing-v-for-v-if': "error", // 禁止出现难以理解的 v-if 和 v-for
'vue/no-duplicate-attributes': "error", // 禁止出现重复的属性
'vue/no-textarea-mustache': "error", // 禁止在 <textarea> 中出现 {{message}}
'vue/order-in-components': ["error", { // 组件的属性必须为一定的顺序
"order": [
"el",
["name", "parent"],
"functional",
"delimiters",
["components", "directives", "filters"],
["extends", "mixins"],
["model", "props", "propsData"],
["data", "computed"],
["watch", "LIFECYCLE_HOOKS"],
"methods",
["template", "render", "renderError"]
]
}],
'vue/require-component-is': "error",// <component> 必须有 v-bind:is
'vue/require-prop-types': "error", // prop 必须有类型限制
'vue/require-v-for-key': "error", // v-for 指令的元素必须有 v-bind:key
'vue/v-bind-style': "error", // @fixable 限制 v-bind 的风格, 统一简写形式
'vue/v-on-style': "error", // @fixable 限制 v-on 的风格,统一简写形式
}
};