no-irregular-whitespace

禁用不規則空白

無效或不規則的空白會導致 ECMAScript 5 解析器出現問題，並且會使程式碼更難除錯，其性質與混用 Tab 和空格類似。

程式設計師可能會因錯誤輸入各種空白字元，例如從複製或鍵盤快捷鍵輸入。例如，在 macOS 上按下 Alt + 空格會加入一個不斷行的空格字元。

解決這個問題的一個簡單方法是從頭開始重寫有問題的行。這也可能是文字編輯器引入的問題：如果重寫該行沒有解決問題，請嘗試使用不同的編輯器。

這些空格導致的已知問題

• 歐甘空格符號
  • 是有效的符號分隔符號，但在大多數字體中呈現為可見的字形，這可能會在原始碼中造成誤導。
• 蒙古語母音分隔符號
  • 自 Unicode 6.3 以來，不再被視為空格分隔符號。當用作一般符號分隔符號時，會在目前的解析器中產生語法錯誤。
• 行分隔符號和段落分隔符號
  • 這些一直是有效的空白字元和行終止符號，但在 ECMAScript 2019 之前被認為在字串文字中非法。
• 零寬度空格
  • 不被視為符號的分隔符號，並且通常被解析為 Unexpected token ILLEGAL。
  • 不會在現代瀏覽器中顯示，因此程式碼儲存庫軟體預期會解決視覺化的問題。

在 JSON 中，此規則列為不規則空白的所有字元都不能出現在字串之外。

規則詳情

此規則旨在捕捉不是一般 Tab 和空格的無效空白。其中一些字元可能會在現代瀏覽器中造成問題，而其他字元將會是除錯時很難發現的問題。

此規則禁止下列字元，除非選項允許

\u000B - Line Tabulation (\v) - <VT>
\u000C - Form Feed (\f) - <FF>
\u00A0 - No-Break Space - <NBSP>
\u0085 - Next Line - <NEL>
\u1680 - Ogham Space Mark - <OGSP>
\u180E - Mongolian Vowel Separator - <MVS>
\ufeff - Zero Width No-Break Space - <BOM>
\u2000 - En Quad - <NQSP>
\u2001 - Em Quad - <MQSP>
\u2002 - En Space - <ENSP>
\u2003 - Em Space - <EMSP>
\u2004 - Three-Per-Em - <THPMSP> - <3/MSP>
\u2005 - Four-Per-Em - <FPMSP> - <4/MSP>
\u2006 - Six-Per-Em - <SPMSP> - <6/MSP>
\u2007 - Figure Space - <FSP>
\u2008 - Punctuation Space - <PUNCSP>
\u2009 - Thin Space - <THSP>
\u200A - Hair Space - <HSP>
\u200B - Zero Width Space - <ZWSP>
\u2028 - Line Separator - <LS> - <LSEP>
\u2029 - Paragraph Separator - <PS> - <PSEP>
\u202F - Narrow No-Break Space - <NNBSP>
\u205f - Medium Mathematical Space - <MMSP>
\u3000 - Ideographic Space - <IDSP>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

選項

此規則具有用於例外的物件選項

• "skipStrings": true (預設) 允許在字串文字中使用任何空白字元
• "skipComments": true 允許在註解中使用任何空白字元
• "skipRegExps": true 允許在正規表示式文字中使用任何空白字元
• "skipTemplates": true 允許在樣板文字中使用任何空白字元
• "skipJSXText": true 允許在 JSX 文字中使用任何空白字元

skipStrings

使用預設 { "skipStrings": true } 選項時，此規則的不正確程式碼範例

/*eslint no-irregular-whitespace: "error"*/

var thing = function() /*<NBSP>*/{
    return 'test';
}

var thing = function( /*<NBSP>*/){
    return 'test';
}

var thing = function /*<NBSP>*/(){
    return 'test';
}

var thing = function /*<Ogham Space Mark>*/(){
    return 'test';
}

var thing = function() {
    return 'test'; /*<ENSP>*/
}

var thing = function() {
    return 'test'; /*<NBSP>*/
}

var thing = function() {
    // Description <NBSP>: some descriptive text
}

/*
Description <NBSP>: some descriptive text
*/

var thing = function() {
    return / <NBSP>regexp/;
}

var thing = function() {
    return `template <NBSP>string`;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

使用預設 { "skipStrings": true } 選項時，此規則的正確程式碼範例

/*eslint no-irregular-whitespace: "error"*/

var thing = function() {
    return ' <NBSP>thing';
}

var thing = function() {
    return '​<ZWSP>thing';
}

var thing = function() {
    return 'th <NBSP>ing';
}
1
2
3
4
5
6
7
8
9
10
11
12
13

skipComments

使用 { "skipComments": true } 選項時，此規則的其他正確程式碼範例

/*eslint no-irregular-whitespace: ["error", { "skipComments": true }]*/

function thing() {
    // Description <NBSP>: some descriptive text
}

/*
Description <NBSP>: some descriptive text
*/
1
2
3
4
5
6
7
8
9

skipRegExps

使用 { "skipRegExps": true } 選項時，此規則的其他正確程式碼範例

/*eslint no-irregular-whitespace: ["error", { "skipRegExps": true }]*/

function thing() {
    return / <NBSP>regexp/;
}
1
2
3
4
5

skipTemplates

使用 { "skipTemplates": true } 選項時，此規則的其他正確程式碼範例

/*eslint no-irregular-whitespace: ["error", { "skipTemplates": true }]*/

function thing() {
    return `template <NBSP>string`;
}
1
2
3
4
5

skipJSXText

使用 { "skipJSXText": true } 選項時，此規則的其他正確程式碼範例

/*eslint no-irregular-whitespace: ["error", { "skipJSXText": true }]*/

function Thing() {
    return <div>text in JSX</div>; // <NBSP> before `JSX`
}
1
2
3
4
5

何時不使用

如果您決定要在應用程式的字串外部使用 Tab 和空格以外的空白。

版本

此規則是在 ESLint v0.9.0 中引入的。

延伸閱讀

註釋 ES5
es5.github.io

JSON：不是 JavaScript 子集的 JavaScript - Timeless
web.archive.org

U+1680 歐甘空格符號：  – Unicode – 字碼點
codepoints.net

資源

• 規則來源
• 測試來源