Vue标准eslint规则修改

1.单独的文件

通过查看vue-cli 3.0项目生成的package.json文件，在devDependencies选项中有”@vue/eslint-config-standard”: “^4.0.0”,表明使用的是eslint标准配置,打开项目目录下的node_modules/@vue/eslint-config-standard/index.js,其中require.resolve(‘eslint-config-standard’)，表明eslint引用了这个文件，打开node_modules/eslint-config-standard/eslintrc.json,可以查看全部的eslint规则。如果安装了其他的Airbnb或者Prettier，可以使用类似方法寻找。通过覆盖项目文件夹下的.eslintrc.js文件中的rules规则，可以达到覆盖规则的目的。不同的标准，所采用的规则也不一样。根据个人需要修改。
1.”space-infix-ops”: “error”,
默认是在操作符周围必须有空格的，比如“=”前后都要有一个空格，使用”space-infix-ops”: ‘off’关闭

2.”no-trailing-spaces”: “error”,
默认是最多只能有一个空行相邻，通过 “no-trailing-spaces”: [“error”,{“skipBlankLines”: true}], 跳过空行，allows trailing whitespace on empty lines(允许在空行上尾随空行)

3.”eol-last”: “error”,
默认是在文件的最后必须有且仅有一个空白行，通过”eol-last”: ‘off’关闭检查。

4.”no-unused-vars”: [“error”, { “vars”: “all”, “args”: “none”, “ignoreRestSiblings”: true }],
默认是不允许出现声明后未使用的变量的。

5.”spaced-comment”:
默认的注释斜杠之后必须有一个空格的，”spaced-comment”: ‘off’关掉

6.”semi”: [“error”, “never”],
默认的javascript语句的结尾是不允许有分号的。是不是需要分号，官网有这么一个解释，有说必须加，有人说不能家，不一而足。
“In the debate over ASI, there are generally two schools of thought. The first is that we should treat ASI as if it didn’t exist and always include semicolons manually. The rationale is that it’s easier to always include semicolons than to try to remember when they are or are not required, and thus decreases the possibility of introducing an error.”
如果想关掉这个注释就用 “semi”: “off”,如果想要结尾必须加上一个分号就用 “semi”: [“error”, “always”]

7.”semi-spacing”: [“error”, { “before”: false, “after”: true }],
默认在分号前后强制间距（半间距）,关闭就用：”semi-spacing”: ‘off’

8.”comma-dangle”
require or disallow trailing commas(要求或禁止使用尾随逗号)。错误表现：”Unexpected trailing comma(意外的尾随逗号).”

9.”space-before-function-paren”: [“error”, “always”]
Require or disallow a space before function parenthesis (space-before-function-paren)，在函数括号之前需要或不允许空格（space-before-function-paren）

10.”key-spacing”
enforce consistent spacing between keys and values in object literal properties (key-spacing).在对象文字属性（键间距）中强制键和值之间的一致间距

11.”keyword-spacing”
enforce consistent spacing before and after keywords(在关键字前后强制执行一致的间距)，关键字之后强制空一格。

12.”no-multiple-empty-lines”
disallow multiple empty lines(禁止多个空行)

13.”no-tabs”
disallow all tabs(禁止所有标签),某些样式指南根本不允许使用制表符，包括注释中的字符。

14.”space-before-blocks”
Require Or Disallow Space Before Blocks(在块之前需要或不允许空间)，此规则将强制执行块之前的间距一致性，它仅适用于不在新行上开始的块。

15.”indent”: [“error”, 2] or “indent”: [“error”, “tab”]
enforce consistent indentation(强制执行一致的缩进),这个操作还是比较不好做的，特别是在VScode中，就算你设置了用空格代替tab键，还是不行，老老实实的用两个空格写代码吧。设置方法：
方法一： command + shift + p ，然后输入indent usingspace 并可以修改 sapce 大小，将tab替换为space的大小可以修改设置里的 tabSize 参数。
方法二： 或者直接在下方视图点击空格修改。
方法三：点击设置->输入tab ->光标移动到 “editor.tabSize”: 4,这一行->点击左侧的笔图标->点击在设置中替换，右侧个人设置中就会自动添加 “editor.tabSize”:

16.”quotes”
enforce the consistent use of either backticks, double, or single quotes(强制一致使用反引号，双引号或单引号),”double”、”single”、”backtick”

17.”no-extra-semi”
disallow unnecessary semicolons(不允许使用不必要的分号)

18.”semi”
require or disallow semicolons instead of ASI(要求或不允许使用分号而不是ASI)

19.”import/newline-after-import”
这个是airbnb这个规则自己添加的，”Enforces having one or more empty lines after the last top-level import statement or require call. +(fixable) The –fix option on the [command line] automatically fixes problems reported by this rule.”，大意是：强制在最后一个顶级导入语句或需要调用之后有一个或多个空行。错误提示：Expected 1 empty line after import statement not followed by another import (import/newline-after-import)，要想去掉这个错误，在import语句的前后，都要加入一行空行

20.”comma-spacing”
Enforces spacing around commas(强制逗号旁边的间距),Spacing around commas improve readability of a list of items. Although most of the style guidelines for languages prescribe adding a space after a comma and not before it, it is subjective to the preferences of a project.

21.”func-names”
Require or disallow named function expressions(要求或禁止命名的函数表达式)

22.”object-shorthand”
Require Object Literal Shorthand Syntax(需要对象文字速记语法),”ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.”ECMAScript 6提供了一种用于定义对象文字方法和属性的简明形式,此语法可以使定义复杂的对象文字更加清晰.

1
2
3
4
5
6
7
8
9
10
11

var foo = {
    a: function() {},
    b: function() {}
};

//修改为
var foo = {
    a() {},
    b() {}
};

23.”import/no-extraneous-dependencies”
症状：’electron’ should be listed in the project’s dependencies, not devDependencies (import/no-extraneous-dependencies)。解决：import/no-extraneous-dependencies: [error, { devDependencies: true }]

24.”prefer-const”
Suggest using const(建议使用const).”If a variable is never reassigned, using the const declaration is better.const declaration tells readers, “this variable is never reassigned,” reducing cognitive load and improving maintainability.”(如果永远不会重新赋值变量，那么使用const声明会更好。const声明告诉读者，“这个变量永远不会被重新分配”，减少了认知负担并提高了可维护性。)

25.”prefer-destructuring”
Prefer destructuring from arrays and objects(更喜欢从数组和对象中解构).”With JavaScript ES6, a new syntax was added for creating variables from an array index or object property, called destructuring. This rule enforces usage of destructuring instead of accessing a property through a member expression.”(使用JavaScript ES6，添加了一种新语法，用于从数组索引或对象属性创建变量，称为解构。此规则强制使用解构而不是通过成员表达式访问属性。)
例如：

1
2
3
4
5
6
7
8
9

//错误的做法（ES5语法）
var foo = object.bar;
//正确的做法（ES6语法）
var { bar: foo } = object;

//错误
const $el=this.$el;
//正确
const { $el } = this;

26.”padded-blocks”
require or disallow padding within blocks(在块内要求或禁止填充).”Some style guides require block statements to start and end with blank lines. The goal is to improve readability by visually separating the block content and the surrounding code.”(某些样式指南要求块语句以空行开头和结尾。目标是通过可视地分离块内容和周围代码来提高可读性)。把块内多余的空行删除。

27.”object-curly-newline”
enforce consistent line breaks inside braces(在括号内强制执行一致的换行符).”A number of style guides require or disallow line breaks inside of object braces and other tokens.(许多样式指南要求或禁止对象括号和其他令牌内的换行符。)”,”Expected a line break before this closing brace.(预计在这个闭合支撑之前有一个换行符)”,这里提醒以下，airbnb的规则是，如果超过了三个逗号，就要出现换行符。
例如：

1
2
3
4
5
6
7
8
9
10

//错误的写法
import { Button, Container, Header, Main } from 'element-ui';

//正确的写法
//而且还要注意第一个括号后面不能有空格，第二个空格前面不能有空格，每一行的结尾要有逗号结尾，之后不能有空格。
//有时候你在编辑器中看起来可能没有个空格，但是实际上会有空格，最好的方法就是把鼠标移动相应位置，通过del键或者back键删除相应的空格。
import {
  Button, Container, Header,
  Main,
} from 'element-ui';

28.”max-len”
enforce a maximum line length (强制执行最大行长度).”Very long lines of code in any language can be difficult to read. In order to aid in readability and maintainability many coders have developed a convention to limit lines of code to X number of characters (traditionally 80 characters).(任何语言的代码都很长，难以阅读。为了有助于可读性和可维护性，许多编码人员已经开发出一种约定将代码行限制为X个字符（传统上为80个字符）的约定。)”

28.”prefer-promise-reject-errors”
“require using Error objects as Promise rejection reasons.(要求使用 Error 对象作为 Promise 拒绝的原因)”。主要表现：”Expected the Promise rejection reason to be an Error.”。
“It is considered good practice to only pass instances of the built-in Error object to the reject() function for user-defined errors in Promises. Error objects automatically store a stack trace, which can be used to debug an error by determining where it came from. If a Promise is rejected with a non-Error value, it can be difficult to determine where the rejection occurred.”(在 Promise 中只传递内置的 Error 对象实例给 reject() 函数作为自定义错误，被认为是个很好的实践。Error 对象会自动存储堆栈跟踪，在调试时，通过它可以用来确定错误是从哪里来的。如果 Promise 使用了非 Error 的值作为拒绝原因，那么就很难确定 reject 在哪里产生。)

29.”quote-props”
“require quotes around object literal property names (quote-props)”(要求对象字面量属性名称使用引号 (quote-props)).错误表现：”Unnecessarily quoted property ‘访问用户’ found (quote-props)”.我觉得这个应该设置为consistent

30.”linebreak-style”
“enforce consistent linebreak style (linebreak-style)”(强制使用一致的换行符风格。)linux和widows换行符不一样，通过设置’linebreak-style’:0 强制一样。

31.”no-restricted-globals”
“Disallow specific global variables (no-restricted-globals)”(如果要通过启用环境来允许一组全局变量，但仍希望禁止其中某些变量，则禁止使用特定的全局变量非常有用。)意思就是说，你不能直接使用：

1
2
3
4

// 错误
history.pushState(null, null, '#gk');
// 正确
window.history.pushState(null, null, '#gk');

32.”prefer-template”
“Suggest using template literals instead of string concatenation. (prefer-template)” 建议使用模板文字而不是字符串连接。下面是正确的例子：

1
2
3
4
5
6
7
8
9

/*eslint prefer-template: "error"*/
/*eslint-env es6*/

var str = "Hello World!";
var str = `Hello, ${name}!`;
var str = `Time: ${12 * 60 * 60 * 1000}`;

// This is reported by `no-useless-concat`.
var str = "Hello, " + "World!";

33.”no-param-reassign”
“Disallow Reassignment of Function Parameters (no-param-reassign)“禁止对函数参数再赋值 (no-param-reassign)。”Assignment to variables declared as function parameters can be misleading and lead to confusing behavior, as modifying function parameters will also mutate the arguments object. Often, assignment to function parameters is unintended and indicative of a mistake or programmer error.” 对函数参数中的变量进行赋值可能会误导读者，导致混乱，也会改变 arguments 对象。通常，对函数参数进行赋值并非有意为之，更多的是程序员的书写错误做成的。当函数参数被修改时，该规则也可能会失效。由此造成的副作用可能导致不直观的执行流程，使错误难以跟踪。

比较常见的编码规范
1.Strings must use singlequote (quotes)，字符串必须要用一个单引号表示。
2.space-before-blocks,在代码块之前必须要有一个空格，即‘{}’的前面和前面的符合之间必须要空一个格。
3.key-spacing（Strings must use singlequote），在对象键冒号之后和值之间要有一个空格。
4.no-tabs，最好用两个空格代替tab键的输入。
5.no-trailing-spaces（Trailing spaces not allowed），文件的最后，要有一个空行，多了不行，少了不行,对象中括号中间也不要有莫名奇妙的空行。
6.Missing semicolon (semi)，要在对象的最后中括号结束之后加入分号，在对象键值对的最后一个加入一个额外的逗号，在import语句最后加入分号
7.’TitleBar’ is defined but never used (no-unused-vars),不要有声明了但是未使用的变量
8.在import语句集中的地方的最前面和最后面都加入一行空行
9.在逗号之后，括号之后添加一个空格
10.在vue文件中，定义函数时，使用a(){},代替a:function(){},这是ES6定义的新规则
11.尽量用const代替let
12.一行代码不要太长
13.在if语句等判断时使用===代替==

注意：如果修改了eslintrc.js文件后不生效，请重启yare serve

如果是从外部复制的js文件，可以禁用eslint校验，在代码顶部添加一行注释/* eslint-disable */，还可以在注释后加入详细规则，这样就能避开指定的校验规则了 /* eslint-disable no-new */

2.集成在package.json中

有人创建工程的时候，直接把eslint的配置放到了package.json中，这个时候package.json中就会多出一个eslintConfig配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

"eslintConfig": {
   "root": true,
   "env": {
     "node": true
   },
   "extends": [
     "plugin:vue/essential",
     "eslint:recommended"
   ],
   "parserOptions": {
     "parser": "babel-eslint"      
   },
   "rules": {
     "no-tabs": "off",
     "indent": [2, 2] // 代码缩进风格
   }
 },

于是就可以在rules针对需要的内容进行规则配置