eslint-config-zm-vue
v1.1.11
Published
zhangmen eslint config for vue
Downloads
3
Readme
前端 eslint 规范
如何使用
** 安装 **
npm i -D eslint eslint-plugin-import eslint-plugin-vue vue-eslint-parser eslint-config-zm-vue
** 使用 **
extends: ['eslint-config-zm-vue/vue']
常见问题
- 事例 1
var show =()=> {
console.log("hello word");
};
会有如下错误
warning: Unexpected var, use let or const instead (no-var) at src/eslint-demo/eslint-js.js:1:1:
> 1 | var show =()=> {
| ^
2 | console.log("hello word");
3 | };
4 |
error: 'show' is assigned a value but never used (no-unused-vars) at src/eslint-demo/eslint-js.js:1:5:
> 1 | var show =()=> {
| ^
2 | console.log("hello word");
3 | };
4 |
error: Operator '=' must be spaced (space-infix-ops) at src/eslint-demo/eslint-js.js:1:10:
> 1 | var show =()=> {
| ^
2 | console.log("hello word");
3 | };
4 |
error: Missing space before => (arrow-spacing) at src/eslint-demo/eslint-js.js:1:12:
> 1 | var show =()=> {
| ^
2 | console.log("hello word");
3 | };
4 |
应该写成
// 注意: console.log 和 debugger 在项目中也会给出警告,调试完成后及时删除哦!
const show = () => {
console.log("hello word");
};
show();
- 事例 2
let arr = [1,2,3,4,5];
arr = ['abc','def','mes'];
console.log(arr);
会有如下错误
error: A space is required after ',' (comma-spacing) at src/eslint-demo/eslint-js.js:7:19:
6 |
> 7 | let arr = [1,2,3,4,5];
| ^
8 | arr = ['abc','def','msg'];
9 | console.log(arr);
10 |
error: A space is required after ',' (comma-spacing) at src/eslint-demo/eslint-js.js:8:13:
6 |
7 | let arr = [1,2,3,4,5];
> 8 | arr = ['abc','def','msg'];
| ^
9 | console.log(arr);
10 |
应该写成
// 只有当引用类型的值被重新赋值的时候用 let,否则一律用 const
let arr = [1, 2, 3, 4, 5];
arr = ['abc', 'def', 'msg'];
console.log(arr);
- 事例 3
const myArr = [1, 2, 3, 4];
const tep = false;
const show = () => {
console.log(flag);
if(tep){
var flag = 'say hi';
return;
}else{
const newArr = myArr.map(item => item + 1);
console.log(newArr);
return newArr;
}
};
show();
错误提示
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'flag' was used before it was defined (no-use-before-define) at src/eslint-demo/eslint-js.js:4:15:
2 | const tep = false;
3 | const show = () => {
> 4 | console.log(flag);
| ^
5 | if(tep){
6 | var flag = 'say hi';
7 | return;
error: 'flag' used outside of binding context (block-scoped-var) at src/eslint-demo/eslint-js.js:4:15:
2 | const tep = false;
3 | const show = () => {
> 4 | console.log(flag);
| ^
5 | if(tep){
6 | var flag = 'say hi';
7 | return;
warning: Expected space(s) after "if" (keyword-spacing) at src/eslint-demo/eslint-js.js:5:3:
3 | const show = () => {
4 | console.log(flag);
> 5 | if(tep){
| ^
6 | var flag = 'say hi';
7 | return;
8 | }else{
warning: Unexpected var, use let or const instead (no-var) at src/eslint-demo/eslint-js.js:6:5:
4 | console.log(flag);
5 | if(tep){
> 6 | var flag = 'say hi';
| ^
7 | return;
8 | }else{
9 | const newArr = myArr.map(item => item + 1);
error: Unnecessary return statement (no-useless-return) at src/eslint-demo/eslint-js.js:7:5:
5 | if(tep){
6 | var flag = 'say hi';
> 7 | return;
| ^
8 | }else{
9 | const newArr = myArr.map(item => item + 1);
10 | console.log(newArr);
warning: Expected space(s) before "else" (keyword-spacing) at src/eslint-demo/eslint-js.js:8:4:
6 | var flag = 'say hi';
7 | return;
> 8 | }else{
| ^
9 | const newArr = myArr.map(item => item + 1);
10 | console.log(newArr);
11 | return newArr;
warning: Expected space(s) after "else" (keyword-spacing) at src/eslint-demo/eslint-js.js:8:4:
6 | var flag = 'say hi';
7 | return;
> 8 | }else{
| ^
9 | const newArr = myArr.map(item => item + 1);
10 | console.log(newArr);
11 | return newArr;
error: Arrow function expected no return value (consistent-return) at src/eslint-demo/eslint-js.js:11:5:
9 | const newArr = myArr.map(item => item + 1);
10 | console.log(newArr);
> 11 | return newArr;
| ^
12 | }
13 | };
14 |
应该写成
/*
注意点:
1, if 、else 前端后有空格
2, return 后面要接数据,没有数据写个 null;
3, 不能在代码块中定义变量,在块外部引用。
4, 变量在函数内部定义;
*/
const show = () => {
const myArr = [1, 2, 3, 4];
const flag = 'say hhi';
const tep = false;
if (tep) {
console.log(flag);
return null;
}
const newArr = myArr.map(item => item + 1);
console.log(newArr);
return newArr;
};
show();
- 事例 4
function todo(name,age) {
const obj = {
name: 'zhangsan',
age: 19,
name: 'lisi',
};
const books = [, , 'dom 编程艺术', '你不知道的javascript'];
switch (name){
case 'zhangsan':
console.log('study js');
break;
case 'lisi':
return age;
}
try {
const reslut = 100 / 0;
console.log(reslut);
} catch (e) {
throw e;
} finally {
console.log(books);
return obj;
}
};
todo('zhangsan', 18);
错误提示
Module Warning (from ./node_modules/eslint-loader/index.js):
error: A space is required after ',' (comma-spacing) at src/eslint-demo/eslint-js.js:1:19:
> 1 | function todo(name,age) {
| ^
2 | const obj = {
3 | name: 'zhangsan',
4 | age: 19,
error: Duplicate key 'name' (no-dupe-keys) at src/eslint-demo/eslint-js.js:5:5:
3 | name: 'zhangsan',
4 | age: 19,
> 5 | name: 'lisi',
| ^
6 | };
7 | const books = [, , 'dom 编程艺术', '你不知道的javascript'];
8 | switch (name){
error: Unexpected comma in middle of array (no-sparse-arrays) at src/eslint-demo/eslint-js.js:7:17:
5 | name: 'lisi',
6 | };
> 7 | const books = [, , 'dom 编程艺术', '你不知道的javascript'];
| ^
8 | switch (name){
9 | case 'zhangsan':
10 | console.log('study js');
warning: Expected a default case (default-case) at src/eslint-demo/eslint-js.js:8:3:
6 | };
7 | const books = [, , 'dom 编程艺术', '你不知道的javascript'];
> 8 | switch (name){
| ^
9 | case 'zhangsan':
10 | console.log('study js');
11 | break;
error: Unsafe usage of ReturnStatement (no-unsafe-finally) at src/eslint-demo/eslint-js.js:23:5:
21 | } finally {
22 | console.log(books);
> 23 | return obj;
| ^
24 | }
25 | };
26 |
error: Unnecessary semicolon (no-extra-semi) at src/eslint-demo/eslint-js.js:25:2:
23 | return obj;
24 | }
> 25 | };
| ^
26 |
27 | todo('zhangsan', 18);
28 |
应该写成
/*
1,json 对象内的key 不能有重复
2,函数有多个形参时,逗号后面有分号
3,定义数组时每项key都要有值
4,swatch 内要有 default
5, finally 代码块内不能有 return
6, 定义 function 函数后面不能有多余有 分号;
7, 此函数是有 return 的,最后一定是有返回值的
*/
function todo(name, age) {
const obj = {
name: 'zhangsan',
age: 19,
};
const books = ['dom 编程艺术', '你不知道的javascript'];
switch (name){
case 'zhangsan':
console.log('study js');
break;
case 'lisi':
return age;
default:
break;
}
try {
const reslut = 100 / 0;
console.log(reslut);
return null;
} catch (e) {
throw e;
} finally {
console.log(books);
console.log(obj);
}
}
todo('zhangsan', 18);
// 建议 函数 如下字义最好
const todo = (name, age) => {
const obj = {
name: 'zhangsan',
age: 19,
};
const books = ['dom 编程艺术', '你不知道的javascript'];
switch (name){
case 'zhangsan':
console.log('study js');
break;
case 'lisi':
return age;
default:
break;
}
try {
const reslut = 100 / 0;
console.log(reslut);
return null;
} catch (e) {
throw e;
} finally {
console.log(books);
console.log(obj);
}
};
todo('zhangsan', 18);
- 事例 5
const show = (who, flag) => {
const arr = new Array(1, 2, 3, 4),
isYes = flag === 1 ? true : false;
let sum = 0;
if (isYes) {
for(let i=0,len=arr.length;i<len;i++){
sum+=arr[i];
}
console.log(who, sum);
}
console.log('hi ', who, 'no message');
};
show('zhangsan', 18);
错误提示
error: Split 'const' declarations into multiple statements (one-var) at src/eslint-demo/eslint-js.js:2:3:
1 | const show = (who, flag) => {
> 2 | const arr = new Array(1, 2, 3, 4),
| ^
3 | isYes = flag === 1 ? true : false;
4 | let sum = 0;
5 | if (isYes) {
error: The array literal notation [] is preferable (no-array-constructor) at src/eslint-demo/eslint-js.js:2:15:
1 | const show = (who, flag) => {
> 2 | const arr = new Array(1, 2, 3, 4),
| ^
3 | isYes = flag === 1 ? true : false;
4 | let sum = 0;
5 | if (isYes) {
error: Expected indentation of 4 spaces but found 8 (indent) at src/eslint-demo/eslint-js.js:3:1:
1 | const show = (who, flag) => {
2 | const arr = new Array(1, 2, 3, 4),
> 3 | isYes = flag === 1 ? true : false;
| ^
4 | let sum = 0;
5 | if (isYes) {
6 | for(let i=0,len=arr.length;i<len;i++){
error: Unnecessary use of boolean literals in conditional expression (no-unneeded-ternary) at src/eslint-demo/eslint-js.js:3:30:
1 | const show = (who, flag) => {
2 | const arr = new Array(1, 2, 3, 4),
> 3 | isYes = flag === 1 ? true : false;
| ^
4 | let sum = 0;
5 | if (isYes) {
6 | for(let i=0,len=arr.length;i<len;i++){
warning: Expected space(s) after "for" (keyword-spacing) at src/eslint-demo/eslint-js.js:6:5:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
error: Operator '=' must be spaced (space-infix-ops) at src/eslint-demo/eslint-js.js:6:14:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
error: A space is required after ',' (comma-spacing) at src/eslint-demo/eslint-js.js:6:16:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
error: Operator '=' must be spaced (space-infix-ops) at src/eslint-demo/eslint-js.js:6:20:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
warning: Missing whitespace after semicolon (semi-spacing) at src/eslint-demo/eslint-js.js:6:31:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
error: Operator '<' must be spaced (space-infix-ops) at src/eslint-demo/eslint-js.js:6:33:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
warning: Missing whitespace after semicolon (semi-spacing) at src/eslint-demo/eslint-js.js:6:37:
4 | let sum = 0;
5 | if (isYes) {
> 6 | for(let i=0,len=arr.length;i<len;i++){
| ^
7 | sum+=arr[i];
8 | }
9 | console.log(who, sum);
error: Operator '+=' must be spaced (space-infix-ops) at src/eslint-demo/eslint-js.js:7:10:
5 | if (isYes) {
6 | for(let i=0,len=arr.length;i<len;i++){
> 7 | sum+=arr[i];
| ^
8 | }
9 | console.log(who, sum);
10 | }
error: More than 2 blank lines not allowed (no-multiple-empty-lines) at src/eslint-demo/eslint-js.js:13:1:
11 | console.log('hi ', who, 'no message');
12 | };
> 13 |
| ^
14 |
15 |
16 | show('zhangsan', 18);
应该写成
/*
1, 定义变量时不能一行定义,只为了方便维护
2, 定义数组请用 [] , 不能用 Array 来创建函数。
3, 避免没有用的三元运算
4, 逗号后面有空格
5, 空行不能太多
6, 中缀操作符周围有空格 (+ - * / % < > = += ......)
*/
const show = (who, flag) => {
const arr = [1, 2, 3, 4];
const isYes = flag === 1;
let sum = 0;
if (isYes) {
for (let i = 0, len = arr.length; i < len; i++){
sum += arr[i];
}
console.log(who, sum);
}
console.log('hi ', who, 'no message');
};
show('zhangsan', 18);
- 案例 6
<template>
<div id="app">
<textarea>{{mesg}}</textarea>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<button v-on:click="testClick">点击1</button>
<button v-on:click.aaa="testClick2">点击2</button>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: 'hello word',
arr: [1, 2, 3, 4],
$el: 'root',
};
},
computed: {
getSum() {
this.arr.reduce((bef, after) => bef + after);
},
},
methods: {
testClick() {
alert('hi');
},
testClick2() {
alert('你好');
},
},
};
</script>
错误提示
error: Unexpected mustache. Use 'v-model' instead (vue/no-textarea-mustache) at src/App.vue:3:15:
1 | <template>
2 | <div id="app">
> 3 | <textarea>{{mesg}}</textarea>
| ^
4 | <ul>
5 | <li v-for="item in arr">{{item}}</li>
6 | </ul>
error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src/App.vue:5:7:
3 | <textarea>{{mesg}}</textarea>
4 | <ul>
> 5 | <li v-for="item in arr">{{item}}</li>
| ^
6 | </ul>
7 | <button v-on:click="testClick">点击1</button>
8 | <button v-on:click.aaa="testClick2">点击2</button>
error: 'v-on' directives don't support the modifier 'aaa' (vue/valid-v-on) at src/App.vue:8:13:
6 | </ul>
7 | <button v-on:click="testClick">点击1</button>
> 8 | <button v-on:click.aaa="testClick2">点击2</button>
| ^
9 | <router-view />
10 | </div>
11 | </template>
error: Key '$el' is reserved (vue/no-reserved-keys) at src/App.vue:19:7:
17 | msg: 'hello word',
18 | arr: [1, 2, 3, 4],
> 19 | $el: 'root',
| ^
20 | };
21 | },
22 | computed: {
error: Expected to return a value in "getSum" computed property (vue/return-in-computed-property) at src/App.vue:23:11:
21 | },
22 | computed: {
> 23 | getSum() {
| ^
24 | this.arr.reduce((bef, after) => bef + after);
25 | },
26 | },
warning: Unexpected alert (no-alert) at src/App.vue:29:7:
27 | methods: {
28 | testClick() {
> 29 | alert('hi');
| ^
30 | },
31 | testClick2() {
32 | alert('你好');
warning: Unexpected alert (no-alert) at src/App.vue:32:7:
30 | },
31 | testClick2() {
> 32 | alert('你好');
| ^
33 | },
34 | },
35 | };
应该写成
/*
1, textarea 中用 v-mode
2, v-for 一定要加 key
3, 注意指令的应用
4, 不能声明vue内置的变量
5, computed 一定要有返回值
*/
<template>
<div id="app">
<textarea v-mode="msg"></textarea>
<ul>
<li v-for="item in arr" :key="item">{{item}}</li>
</ul>
<button @click="testClick">点击1</button>
<button @click.stop="testClick2">点击2</button>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: 'hello word',
arr: [1, 2, 3, 4],
el: 'root',
};
},
computed: {
getSum() {
return this.arr.reduce((bef, after) => bef + after);
},
},
methods: {
testClick() {
console.log('hi');
},
testClick2() {
console.log('你好');
},
},
};
</script>
- 注意文件大小 1 文件最大 1200 行代码,如果超过,请另创建文件 2 函数最大行数是 400 行,超过会给出警告 3 单行最大字符数是 120,超过会给出警告
开启的规则
es6 开启的规则
// 箭头函数的箭头前后各留一个空格
'arrow-spacing': ['error', { before: true, after: true }]
// 子类的 construtor 中必须使用 super,非子类的 construtor 中不能使用 super
'constructor-super': 'error'
// 禁止对类声明变量重新赋值
'no-class-assign': 'error',
// 避免箭头函数与比较操作符产生混淆
// 正确事例如下
// var x = a => (1 ? 2 : 3);
// var x = (a) => (1 ? 2 : 3);
// var x = a => { return 1 ? 2 : 3; };
// var x = (a) => { return 1 ? 2 : 3; };
'no-confusing-arrow': ['error',{allowParens: true}]
// 禁止修改 const 声明的变量
'no-const-assign': 'error',
// 避免重复的类成员命名
'no-dupe-class-members': 'error',
// 在 constructor 中,禁止在调用 super() 前使用 this 或 super 关键字
'no-this-before-super': 'error',
// 对象的属性名不要使用无必要的计算属性
'no-useless-computed-key': 'error',
// 避免不必要的 construtor
'no-useless-constructor': 'error',
// 禁止在解构/import/export时进行无用的重命名
'no-useless-rename': ['error',{ignoreDestructuring: false,ignoreImport: false,ignoreExport: false}]
// 使用 const 或 let 声明变量,不要使用 var
'no-var': 'warn',
// 使用对象属性和方法的简写语法
'object-shorthand': ['error','always',{ignoreConstructors: false,avoidQuotes: true}],
// 回调函数使用箭头函数而不是匿名函数
'prefer-arrow-callback': ['error',{allowNamedFunctions: false,allowUnboundThis: true}],
// 优先使用 const,只有当变量会被重新赋值时才使用 let
'prefer-const': ['error',{destructuring: 'any',ignoreReadBeforeAssign: true}],
// 剩余和扩展操作符与操作对象间不应有空格
'rest-spread-spacing': ['error', 'never']
最佳实践
// 某些数组方法的回调函数中必须包含 return 语句
'array-callback-return': ['error', { allowImplicit: true }],
// 把 var 语句看作是在块级作用域范围之内,不能在块外使用
'block-scoped-var': 'error',
// 要求 return 语句要么总是指定返回的值,要么不指定
'consistent-return': 'off',
// 多行语句必须用大括号包裹,单行语句推荐用大括号包裹
curly: ['error', 'multi-line'],
// switch 语句需要始终包含 default 分支
'default-case': ['warn', { commentPattern: '^no default$' }],
// 统一在点号之前换行
'dot-location': ['error', 'property'],
// 禁止使用 arguments.caller 和 arguments.callee
'no-caller': 'error',
// 不要在解构中出现空模式,即 {} 或 []
'no-empty-pattern': 'error',
// 禁止使用 eval
'no-eval': 'warn',
// 禁止扩展原生对象
'no-extend-native': 'error',
// 禁止不必要的 label
'no-extra-label': 'error',
// 不要让 case 语句落空
'no-fallthrough': 'error',
// 不要省略小数点前或小数点后的 0
'no-floating-decimal': 'error',
// 禁止对原生对象或只读的全局对象进行赋值
'no-global-assign': ['error', { exceptions: [] }],
// 禁止使用类 eval 的方法,如 setTimeout 传入字符串
'no-implied-eval': 'warn',
// 禁止使用 __iterator__ 属性
'no-iterator': 'error',
// 禁止使用不必要的代码块
'no-lone-blocks': 'error',
// 禁止在循环中的函数内出现外部作用域中定义且会发生变化的变量,以防止闭包副作用
'no-loop-func': 'error',
// 禁止出现多个连续空格
'no-multi-spaces': ['error',{ignoreEOLComments: false}],
// 禁止使用多行字符串
'no-multi-str': 'error',
// 禁止单独 new 一个构造函数而不用于赋值或比较
'no-new': 'error',
// 禁用八进制字面量
'no-octal': 'error',
// 禁止在字符串字面量中使用八进制转义序列,如 var foo = 'Copyright \251';
'no-octal-escape': 'error',
// 禁止使用 __proto__ 属性
'no-proto': 'error',
// 不要重复声明变量和函数
'no-redeclare': 'error',
// 禁止在 return 语句中赋值
'no-return-assign': ['error', 'always'],
// 禁止不必要的 return await
'no-return-await': 'error',
// 禁止使用 javascript:url,如 location.href = 'javascript:void(0)';
'no-script-url': 'error',
// 禁止自我赋值
'no-self-assign': 'error',
// 禁止自我比较
'no-self-compare': 'error',
// 禁止使用逗号操作符,除非用于 for 循环条件或明确用小括号包裹
'no-sequences': 'error',
// 禁止出现未使用的表达式
'no-unused-expressions': ['error',{allowShortCircuit: true,allowTernary: true,allowTaggedTemplates: true}],
// 禁止未使用的标签
'no-unused-labels': 'error',
// 禁止不必要的字符串拼接
'no-useless-concat': 'error',
// 禁止不必要的转义字符
'no-useless-escape': 'error',
// 禁止多余的 return; 语句
'no-useless-return': 'error',
// 不要使用 void 运算符
'no-void': 'error',
// 禁止使用 with
'no-with': 'error',
// 禁止使用不带 await 表达式的 async 函数
'require-await': 'error',
// 将立即执行函数表达式(IIFE)用小括号包裹,即:var x = (function () { return { y: 1 };})(); // wrapped function expression
'wrap-iife': ['error', 'any', { functionPrototypeMethods: false }],
可能的错误或逻辑错误
// getter 需要有返回值
'getter-return': ['error', { allowImplicit: true }],
// 不要与负零进行比较
'no-compare-neg-zero': 'error',
// 不要在循环中使用 await,应使用 Promise.all()
'no-await-in-loop': 'error',
// 不要在条件表达式中使用赋值语句
'no-cond-assign': ['error', 'always'],
// 函数的参数列表中禁止出现重复命名的参数
'no-dupe-args': 'error',
// 对象中禁止出现重复命名的 key
'no-dupe-keys': 'error',
// switch 语句中禁止出现重复的 case
'no-duplicate-case': 'error',
// 不要出现空代码块
'no-empty': 'error',
// 禁止对 catch 的入参重新赋值
'no-ex-assign': 'error',
// 避免不必要的布尔值类型转换
'no-extra-boolean-cast': 'error',
// 禁止不必要的分号
'no-extra-semi': 'error',
// 不要对函数声明重新赋值
'no-func-assign': 'error',
// 不要在块中使用函数声明
'no-inner-declarations': 'error',
// 禁止在 RegExp 构造函数中使用无效的正则表达式
'no-invalid-regexp': 'error',
// 禁止不规则的空白符
'no-irregular-whitespace': 'error',
// 禁止在正则表达式中出现多个连续空格
'no-regex-spaces': 'error',
// 禁用稀疏数组,如 var items = [,,];
'no-sparse-arrays': 'error',
// 避免令人困惑的多行表达式,多是由不加分号导致
'no-unexpected-multiline': 'error',
// 不要在 return 等语句之后出现不可达的代码
'no-unreachable': 'error',
// 禁止在 finally 中出现控制流语句,如 return, throw, break 或 continue
'no-unsafe-finally': 'error',
// 使用 Number.isNaN(),而不是直接与 NaN 进行比较
'use-isnan': 'error',
// 同 typeof 表达式结果进行比较的值必须是有效的字符串,即 'undefined', 'object', 'boolean', 'number', 'string', 'function' 或 'symbol'
'valid-typeof': ['error', { requireStringLiterals: true }]
代码风格
// 方括号内部两侧无空格-数组
'array-bracket-spacing': ['error', 'never'],
// 单行代码块的大括号内部两侧有空格
'block-spacing': ['error', 'always'],
// 大括号换行风格:one true brace style 风格,且单行代码块可不换行
'brace-style': ['error', '1tbs', { allowSingleLine: true }],
// 使用小驼峰命名风格
// TODO 这个暂时没有指定
// camelcase: ['warn',{ properties: 'always', ignoreDestructuring: true }],
camelcase: 'off',
// 用逗号分隔的多行结构,始终加上最后一个逗号(单行不用)
'comma-dangle': ['error', 'always-multiline'],
// 逗号的前面无空格,后面有空格
'comma-spacing': ['error', { before: false, after: true }],
// 用逗号分隔的多行结构,将逗号放到行尾
'comma-style': ['error', 'last'],
// 方括号内部两侧无空格-计算属性
'computed-property-spacing': ['error', 'never'],
// 函数名与调用它的括号间无空格
'func-call-spacing': ['error', 'never'],
// 隐式返回的箭头函数体不要换行
'implicit-arrow-linebreak': ['error', 'beside'],
// 使用 2 个空格缩进
indent: ['error',2]
// 定义对象字面量时,key, value 之间有且只有一个空格
'key-spacing': ['error', { beforeColon: false, afterColon: true }],
// 类成员之间保留一个空行
'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: false }],
// 使用大驼峰风格命名类和构造函数
'new-cap': ['error',{newIsCap: true,newIsCapExceptions: [],capIsNew: false,capIsNewExceptions: ['Immutable.Map', 'Immutable.Set', 'Immutable.List']}],
// 禁止在调用构造函数时省略小括号
'new-parens': 'error',
// 在长方法链式调用时进行换行,每行最多连续 6 个链式调用
'newline-per-chained-call': ['error', { ignoreChainWithDepth: 6 }],
// 不要使用 new Array() 和 Array() 创建数组,除非为了构造某一长度的空数组。
'no-array-constructor': 'error',
// 不要混用空格和 tab
'no-mixed-spaces-and-tabs': 'error',
// 禁止连续赋值
'no-multi-assign': ['error'],
// 禁止出现多个(大于 2 个)连续空行
'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1 }],
// 行尾不要留有空格
'no-trailing-spaces': ['error',{skipBlankLines: false,ignoreComments: false]}],
// 避免不必要的三元表达式
'no-unneeded-ternary': ['error', { defaultAssignment: false }],
// 禁止属性调用前有空格
'no-whitespace-before-property': 'error',
// 省略大括号的单行语句前不要换行
'nonblock-statement-body-position': ['error', 'beside', { overrides: {} }],
// 对象的属性需遵循一致的换行风格:即所有属性要么都换行,要么都写在一行
'object-property-newline': ['error',{allowAllPropertiesOnSameLine: true}],
// 一条声明语句声明一个变量
'one-var': ['error', 'never'],
// 对象字面量的属性名不要用引号包裹,除非包含特殊字符
'quote-props': ['error', 'as-needed', { keywords: false, unnecessary: true, numbers: false }],
// 使用分号
semi: ['error', 'always'],
// 分号必须写在行尾
'semi-style': ['error', 'last'],
// 函数声明时,对于命名函数,参数的小括号前无空格;对于匿名函数和 async 箭头函数,参数的小括号前有空格
'space-before-function-paren': ['error',{anonymous: 'always',named: 'never',asyncArrow: 'always'}],
// 小括号内部两侧无空格
'space-in-parens': ['error', 'never'],
// 中缀操作符两侧有空格
'space-infix-ops': 'error',
// 一元操作符两侧无空格,包括 -、+、--、++、!、!!
'space-unary-ops': ['error',{words: true,nonwords: false,overrides: {}}],
// 注释内容和注释符之间需留有一个空格
'spaced-comment': ['error','always',{line: {exceptions: ['-', '+'],markers: ['=', '!']},block: {exceptions: ['-', '+'],markers: ['=', '!'],balanced: true}}],
和变量声明有关
// 禁止 delete 变量
'no-delete-var': 'error',
// 禁止标签与变量同名
'no-label-var': 'error',
// 禁止变量与外层作用域已存在的变量同名
'no-shadow': 'error',
// 禁止使用保留字命名变量
'no-shadow-restricted-names': 'error',
// 禁止使用未声明的变量
'no-undef': 'error',
// 不要将变量初始化成 undefined
'no-undef-init': 'error',
// 声明的变量必须被使用
'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
// 不要在声明前就使用变量
'no-use-before-define': ['error', { functions: false, classes: false, variables: false }]
node 有关
关闭全部和 node 有关的一切选项
import 相关
// import 一个文件时,禁止 default import 的名字跟文件内的命名 export 相同
'import/no-named-as-default': 'error',
// import 语句需要放到模块的最上方
'import/first': 'error',
// 不要用多个 import 引入同一模块
'import/no-duplicates': 'error',
// 不要产生自引用
'import/no-self-import': 'error',
// 不要产生循环引用
'import/no-cycle': ['error', { maxDepth: Infinity }],
VUE 相关
// 给 template 提供 eslint-disable 的能力,支持如下注释:
// eslint-disable,eslint-enable,eslint-disable-line,eslint-disable-next-line
'vue/comment-directive': 'error',
// 本条是对JS规约 no-unused-vars 的补充,防止变量被错误地标记为未使用
'vue/jsx-uses-vars': 'error',
// 组件的 data 必须是一个函数
'vue/no-shared-component-data': 'error',
// Prop 定义类型应该是构造函数
'vue/require-prop-type-constructor': 'error',
// Prop 的默认值必须匹配它的类型
'vue/require-valid-default-prop': 'error',
// 为 v-for 设置键值
'vue/require-v-for-key': 'error',
// 避免 v-if 和 v-for 用在一起
'vue/no-use-v-if-with-v-for': 'warn',
// 计算属性禁止包含异步方法
'vue/no-async-in-computed-properties': 'error',
// 禁止在对象字面量中出现重复的键
'vue/no-dupe-keys': 'error',
// 禁止出现重复的属性
'vue/no-duplicate-attributes': 'error',
// 禁止出现语法错误
// https://html.spec.whatwg.org/multipage/parsing.html#parse-errors
'vue/no-parsing-error': ['error', {'x-invalid-end-tag': false,'invalid-first-character-of-tag-name': false}],
// 禁止使用 vue 中的关键字
'vue/no-reserved-keys': 'error',
// 禁止在计算属性中对属性修改
'vue/no-side-effects-in-computed-properties': 'error',
// 禁止在 <textarea> 中出现 {{message}}
'vue/no-textarea-mustache': 'error',
// render 函数必须有返回值
'vue/require-render-return': 'error',
// 计算属性必须有返回值
'vue/return-in-computed-property': 'error',
// 检查指令的合法性
'vue/valid-template-root': 'off',
'vue/valid-v-bind': 'error',
'vue/valid-v-cloak': 'error',
'vue/valid-v-else-if': 'error',
'vue/valid-v-else': 'error',
'vue/valid-v-for': 'error',
'vue/valid-v-html': 'error',
'vue/valid-v-if': 'error',
'vue/valid-v-model': 'error',
'vue/valid-v-on': 'error',
'vue/valid-v-once': 'error',
'vue/valid-v-pre': 'error',
'vue/valid-v-show': 'error',