Vue项目中ESlint规范示例代码

2020-06-14 06:26:32易采站长站整理

前言

eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到,本文就给大家分享了开发项目中使用的eslint校验规范,供参考:

示例代码


module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/essential', 'eslint:recommended'],
rules: {
// 等级分为三级: 0-不显示;1-显示警告warning; 2-显示错误error

////////////////////
///// vue.规范 /////
///////////////////
"vue/max-attributes-per-line": [1, { //多个特性的元素应该分多行撰写,每个特性一行
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": 0, // 在单行元素的内容前后需要换行符
"vue/multiline-html-element-content-newline": 0, // 在多行元素的内容之前和之后需要换行符
"vue/name-property-casing": [1, "PascalCase"], // JS/JSX中的组件名应该始终是帕斯卡命名法
"vue/no-v-html": 0,
"vue/prop-name-casing": [1, "camelCase"], // 在声明prop的时候,其命名应该始终使用驼峰命名
"vue/require-v-for-key": 1, // 给v-for设置键值,与key结合使用,可以高效的更新虚拟DOM
"vue/no-use-v-if-with-v-for": [2, {
"allowUsingIterationVar": false
}], // 不要把 v-if 和 v-for 用在同一个元素上——因为v-for 比 v-if 具有更高的优先级
"vue/order-in-components": [0, { // 组件/实例的选项的顺序
"order": [
"el",
"name",
"parent",
"functional",
["delimiters", "comments"],
["components", "directives", "filters"],
"extends",
"mixins",
"inheritAttrs",
"model",
["props", "propsData"],
"data",
"computed",
"watch",
"LIFECYCLE_HOOKS",
"methods",
["template", "render"],
"renderError"
] }],

////////////////////
///// js.规范 /////
///////////////////
'accessor-pairs': 2, // 在对象中强制使用getter/setter
'arrow-spacing': [2, { // 在箭头函数之前/之后需要空格
'before': true,
'after': true
}],
'block-spacing': [2, 'always'], // 在打开块之后和关闭块之前,禁止或强制执行块内部的空格
'brace-style': [1, '1tbs', { // 需要大括号样式
'allowSingleLine': true
}],
'camelcase': [0, { // 需要驼峰命名
'properties': 'always'
}],
'comma-dangle': [2, 'never'], // 要求或禁止使用尾随逗号;最后一个属性是不需要逗号
'comma-spacing': [2, { // 强制逗号旁边的间距: 左右一个空格