英文地址：https://eslint.org/docs/rules/semi

JavaScript 在众多的类C语言中是独一无二的，因为它不需要你在每个语句的末尾添加分号。在多数情况下，JavaScript 引擎能够自行确定在某个位置是否需要分号，并在需要时为我们自动添加上分号。这一特性被称作自动分号插入（automatic semicolon insertion，简称 ASI），并且成为了JavaScript 中饱受争议的功能之一。例如，下面这两行声明语句都是有效的：

var name = "ESLint"
var website = "eslint.org";

在第一行，JavaScript引擎会自动在末尾插入分号，因此这不会被看成是一个语法错误。JavaScript 引擎还知道如何解释该行并知道行末尾就是语句的结束。

在关于ASI的辩论中，通常有两种思想流派。其中一个流派认为：我们应该将ASI视为不存在，并且始终手动地为每一个语句添加上分号。理论依据是，始终都加上分号总比去尝试记住它们何时需要或不需要容易多了，从而降低了引入错误的可能性。

但是，对于喜欢使用分号的人来说，ASI 机制有时会很棘手。例如，下面这段代码：

return
{name: "ESLint"
};

它可能字面上看起来更像是个返回一个对象的语句，但是，JavaScript 引擎会将这段代码解释为：

return;
{name: "ESLint";
}

实际上，在return语句后面插入的分号，导致了它后面的代码永远无法访问，效果类似下面这段代码。

function fn() {x = 1;return x;x = 3; // this will never execute
}

另外一个流派认为：既然 JavaScript 引擎会自动为我们插入分号，分号就是可选的，我们没必要去手动插入。但是，对于不使用分号的人来说，ASI机制也很棘手。例如，下面这段代码：

var globalCounter = { }(function () {var n = 0globalCounter.increment = function () {return ++n}
})()

在此示例中，分号会被插入到第一行的末尾（换行符会结束一个语句，就跟分号的效果一样），从而导致出现运行时错误（因为像调用函数一样去调用了一个空对象）。

虽然ASI允许更加自由的编码风格，但它偶尔也会使你的代码以意想不到的方式运行，无论你是否使用分号。因此，最好知道ASI何时发生或者不发生，并且让ESLint保护你的代码避免出现这些潜在的意外情况。简而言之，正如 Isaac Schlueter 曾经描述的那样，\n 换行符会结束一个语句，就跟分号的效果一样，除非满足下列条件之一：

语句含有未闭合的括号（例如：数组、对象）或以其他无效的结尾方式（例如：以","或"."结尾）结束。
该行是--或++（在这种情况下，它将递减/递增下一个标记）。
该行是一个 for()，while()，do-if()，或 else 语句，并且没有跟上 “{” 字符。
下一行以 “[”，“(”，“+”，“*”，“/”，“-”，“,”，“.”，或只能出现在同一个表达式中的两个标记之间一些其他二进制运算符开头。

规则细节

此规则强制使用一致的分号书写风格。

选项

此规则有两个选项，字符串选项和对象选项。

字符串选项：

"always" （默认值）在语句结尾处需要分号
"never" 不允许分号作为语句的末尾（不包括那些为了消除歧义以 [，(，/，+，或 - 开头的语句）

对象选项（应用 "always" 选项时可用）：

"omitLastInOneLineBlock": true 当语句块中的括号（包含括号中的内容）在同一行时，忽略块中的最后一个分号。

对象选项（应用 "never" 选项时可用）：

"beforeStatementContinuationChars": "any"（默认）如果下一行语句以 [，(，/，+，或 - 开头，忽略语句末尾的分号（或缺失分号），
"beforeStatementContinuationChars": "always" 如果下一行语句以 [，(，/，+，或 - 开头，在语句末尾需要添加分号。
"beforeStatementContinuationChars": "never" 如果该语句不会因为ASI而带来风险，那么即使它的下一行语句以 [，(，/，+，或 - 开头，也不允许在语句末尾添加分号。

always

使用 always 规则的错误代码示例：

/*eslint semi: ["error", "always"]*/var name = "ESLint"object.method = function() {// ...
}

使用 always 规则的正确代码示例：

/*eslint semi: "error"*/var name = "ESLint";object.method = function() {// ...
};

never

使用 never 规则的错误代码示例：

/*eslint semi: ["error", "never"]*/var name = "ESLint";object.method = function() {// ...
};

使用 never 规则的正确代码示例"never"：

/*eslint semi: ["error", "never"]*/var name = "ESLint"object.method = function() {// ...
}var name = "ESLint";(function() {// ...
})()import a from "a"
(function() {// ...
})()import b from "b"
;(function() {// ...
})()

omitLastInOneLineBlock

使用 "always", { "omitLastInOneLineBlock": true } 选项的正确代码示例：

/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */if (foo) { bar() }if (foo) { bar(); baz() }

beforeStatementContinuationChars

使用 "never", { "beforeStatementContinuationChars": "always" }选项的错误代码示例：

/*eslint semi: ["error", "never", { "beforeStatementContinuationChars": "always"}] */
import a from "a"(function() {// ...
})()

使用 "never", { "beforeStatementContinuationChars": "never" } 选项的错误代码示例：

/*eslint semi: ["error", "never", { "beforeStatementContinuationChars": "never"}] */
import a from "a";(function() {// ...
})()

ESLint语法检查--semi（分号）规则相关推荐

webstorm关闭烦人的eslint语法检查
使用了eslint语法检查之后发现JS代码里面处处是红线,通过右键菜单中的fix eslint problems选项又会发现页面代码的格式被eslint换行得不分青红皂白,索性关闭exlint语法检查 ...
关于Eslint语法检查报“error Extra semicolon semi”错误的解决办法
1."error Extra semicolon semi"错误在学习编写Vue3.0项目的时候,你可能还会发现,比如,用响应式模板创建的组件里的语句import { react ...
ESLint语法检查--indent（缩进）规则
英文地址:https://eslint.org/docs/rules/indent 嵌套的代码块或者语句需要具有一定的缩进,类似下面这样: function hello(indentSize, typ ...
关闭Vue Eslint语法检查
在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have 'v-bind:key' direct ...
VSCode设置ESLint语法检查
转载 "eslint.validate": ["javascript","javascriptreact","vue-html&q ...
如何在vuejs里禁用eslint语法检查工具
eslint好是好,可要求很苛刻,对于我这种写代码很糙的媛...... 搜索的时候有的说加入 /* eslint-disabled */(有用,但只是部分代码享受此待遇) 还有说删除.eslintrc ...
在Vue3中将eslint 语法检查关闭
解决步骤问题背景:我是用过vue-cli进行创建的项目,本来在vue.config.js中设置了lintOnSave: false但是还是没有作用. 1.找到package.json文件找到oes ...
关闭eslint语法检查
在vue.config.js中,加入: lintOnSave: false 如图:
摆脱令人抓狂的ESlint 语法检测配置说明
最近学习Vue,通过vue-cli脚手架创建的项目环境,写了段时间后,发现这个ESlint语法检测真是令人抓狂!!! 所以不得不停下手中的代码去学习下ESlint的规则配置. 其实我并不反对这些语法检 ...

ESLint语法检查--semi（分号）规则