版本

lines-around-comment

要求註解周圍有空行

🔧

此規則回報的某些問題可以透過 --fix 命令列選項自動修正

此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-js 中對應的規則。

許多程式碼風格指南要求在註解之前或之後有空行。這些規則的主要目標是使註解更容易閱讀並提高程式碼的可讀性。

規則詳情

此規則要求註解之前和/或之後有空行。它可以針對區塊 (/*) 和行 (//) 註解分別啟用。此規則不適用於與程式碼出現在同一行的註解，並且不要求在檔案的開頭或結尾有空行。

選項

此規則有一個物件選項

  • "beforeBlockComment": true (預設) 要求在區塊註解之前有空行
  • "afterBlockComment": true 要求在區塊註解之後有空行
  • "beforeLineComment": true 要求在行註解之前有空行
  • "afterLineComment": true 要求在行註解之後有空行
  • "allowBlockStart": true 允許註解出現在區塊語句、函式主體、類別、switch 語句和類別靜態區塊的開頭
  • "allowBlockEnd": true 允許註解出現在區塊語句、函式主體、類別、switch 語句和類別靜態區塊的結尾
  • "allowObjectStart": true 允許註解出現在物件字面值的開頭
  • "allowObjectEnd": true 允許註解出現在物件字面值的結尾
  • "allowArrayStart": true 允許註解出現在陣列字面值的開頭
  • "allowArrayEnd": true 允許註解出現在陣列字面值的結尾
  • "allowClassStart": true 允許註解出現在類別的開頭
  • "allowClassEnd": true 允許註解出現在類別的結尾
  • "applyDefaultIgnorePatterns" 啟用或停用規則預設要忽略的註解模式
  • "ignorePattern" 規則要忽略的自訂模式
  • "afterHashbangComment": true 要求在 hashbang 註解之後有空行

beforeBlockComment

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true }]*/

var night = "long";
/* what a great and wonderful day */
var day = "great"

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true }]*/

var night = "long";

/* what a great and wonderful day */
var day = "great"

afterBlockComment

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterBlockComment": true }]*/

var night = "long";

/* what a great and wonderful day */
var day = "great"

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterBlockComment": true }]*/

var night = "long";

/* what a great and wonderful day */

var day = "great"

beforeLineComment

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true }]*/

var night = "long";
// what a great and wonderful day
var day = "great"

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true }]*/

var night = "long";

// what a great and wonderful day
var day = "great"

afterLineComment

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterLineComment": true }]*/

var night = "long";
// what a great and wonderful day
var day = "great"

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

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterLineComment": true }]*/

var night = "long";
// what a great and wonderful day

var day = "great"

allowBlockStart

使用 { "beforeLineComment": true, "allowBlockStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true, "allowBlockStart": true }]*/

function foo(){
    // what a great and wonderful day
    var day = "great"
    return day;
}

if (bar) {
    // what a great and wonderful day
    foo();
}

class C {
    // what a great and wonderful day

    method() {
        // what a great and wonderful day
        foo();
    }

    static {
        // what a great and wonderful day
        foo();
    }
}

使用 { "beforeBlockComment": true, "allowBlockStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true, "allowBlockStart": true }]*/

function foo(){
    /* what a great and wonderful day */
    var day = "great"
    return day;
}

if (bar) {
    /* what a great and wonderful day */
    foo();
}

class C {
    /* what a great and wonderful day */

    method() {
        /* what a great and wonderful day */
        foo();
    }

    static {
        /* what a great and wonderful day */
        foo();
    }
}

switch (foo) {
  /* what a great and wonderful day */

  case 1:
    bar();
    break;
}

allowBlockEnd

使用 { "afterLineComment": true, "allowBlockEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterLineComment": true, "allowBlockEnd": true }]*/

function foo(){
    var day = "great"
    return day;
    // what a great and wonderful day
}

if (bar) {
    foo();
    // what a great and wonderful day
}

class C {

    method() {
        foo();
        // what a great and wonderful day
    }

    static {
        foo();
        // what a great and wonderful day
    }

    // what a great and wonderful day
}

使用 { "afterBlockComment": true, "allowBlockEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterBlockComment": true, "allowBlockEnd": true }]*/

function foo(){
    var day = "great"
    return day;

    /* what a great and wonderful day */
}

if (bar) {
    foo();

    /* what a great and wonderful day */
}

class C {

    method() {
        foo();

        /* what a great and wonderful day */
    }

    static {
        foo();

        /* what a great and wonderful day */
    }

    /* what a great and wonderful day */
}

switch (foo) {
  case 1:
    bar();
    break;

  /* what a great and wonderful day */
}

allowClassStart

使用 { "beforeLineComment": true, "allowClassStart": false } 選項時，此規則的不正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true, "allowClassStart": false }]*/

class foo {
    // what a great and wonderful day
    day() {}
};

使用 { "beforeLineComment": true, "allowClassStart": false } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true, "allowClassStart": false }]*/

class foo {

    // what a great and wonderful day
    day() {}
};

使用 { "beforeLineComment": true, "allowClassStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true, "allowClassStart": true }]*/

class foo {
    // what a great and wonderful day
    day() {}
};

使用 { "beforeBlockComment": true, "allowClassStart": false } 選項時，此規則的不正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true, "allowClassStart": false }]*/

class foo {
    /* what a great and wonderful day */
    day() {}
};

使用 { "beforeBlockComment": true, "allowClassStart": false } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true, "allowClassStart": false }]*/

class foo {

    /* what a great and wonderful day */
    day() {}
};

使用 { "beforeBlockComment": true, "allowClassStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true, "allowClassStart": true }]*/

class foo {
    /* what a great and wonderful day */
    day() {}
};

allowClassEnd

使用 { "afterLineComment": true, "allowClassEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterLineComment": true, "allowClassEnd": true }]*/

class foo {
    day() {}
    // what a great and wonderful day
};

使用 { "afterBlockComment": true, "allowClassEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterBlockComment": true, "allowClassEnd": true }]*/

class foo {
    day() {}

    /* what a great and wonderful day */
};

allowObjectStart

使用 { "beforeLineComment": true, "allowObjectStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true, "allowObjectStart": true }]*/

var foo = {
    // what a great and wonderful day
    day: "great"
};

const {
    // what a great and wonderful day
    foo: someDay
} = {foo: "great"};

const {
    // what a great and wonderful day
    day
} = {day: "great"};

使用 { "beforeBlockComment": true, "allowObjectStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true, "allowObjectStart": true }]*/

var foo = {
    /* what a great and wonderful day */
    day: "great"
};

const {
    /* what a great and wonderful day */
    foo: someDay
} = {foo: "great"};

const {
    /* what a great and wonderful day */
    day
} = {day: "great"};

allowObjectEnd

使用 { "afterLineComment": true, "allowObjectEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterLineComment": true, "allowObjectEnd": true }]*/

var foo = {
    day: "great"
    // what a great and wonderful day
};

const {
    foo: someDay
    // what a great and wonderful day
} = {foo: "great"};

const {
    day
    // what a great and wonderful day
} = {day: "great"};

使用 { "afterBlockComment": true, "allowObjectEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterBlockComment": true, "allowObjectEnd": true }]*/

var foo = {
    day: "great"

    /* what a great and wonderful day */
};

const {
    foo: someDay

    /* what a great and wonderful day */
} = {foo: "great"};

const {
    day

    /* what a great and wonderful day */
} = {day: "great"};

allowArrayStart

使用 { "beforeLineComment": true, "allowArrayStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeLineComment": true, "allowArrayStart": true }]*/

var day = [
    // what a great and wonderful day
    "great",
    "wonderful"
];

const [
    // what a great and wonderful day
    someDay
] = ["great", "not great"];

使用 { "beforeBlockComment": true, "allowArrayStart": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "beforeBlockComment": true, "allowArrayStart": true }]*/

var day = [
    /* what a great and wonderful day */
    "great",
    "wonderful"
];

const [
    /* what a great and wonderful day */
    someDay
] = ["great", "not great"];

allowArrayEnd

使用 { "afterLineComment": true, "allowArrayEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterLineComment": true, "allowArrayEnd": true }]*/

var day = [
    "great",
    "wonderful"
    // what a great and wonderful day
];

const [
    someDay
    // what a great and wonderful day
] = ["great", "not great"];

使用 { "afterBlockComment": true, "allowArrayEnd": true } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "afterBlockComment": true, "allowArrayEnd": true }]*/

var day = [
    "great",
    "wonderful"

    /* what a great and wonderful day */
];

const [
    someDay

    /* what a great and wonderful day */
] = ["great", "not great"];

ignorePattern

預設情況下，此規則會忽略以以下單字開頭的註解：eslint、jshint、jslint、istanbul、global、exported、jscs。

此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error"]*/

foo();
/* jshint mentioned in this comment */
bar();

若要忽略預設值以外的更多註解，請將 ignorePattern 選項設定為一個字串模式，該模式將傳遞給 RegExp 建構函式。

ignorePattern 選項的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "ignorePattern": "pragma" }] */

foo();
/* jshint mentioned in this comment */
bar();

foo();
/* a valid comment using pragma in it */

ignorePattern 選項的不正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "ignorePattern": "pragma" }] */

1 + 1;
/* something else */

applyDefaultIgnorePatterns

即使提供了 ignorePattern，也會套用預設的忽略模式。如果您想省略預設模式，請將此選項設定為 false。

使用 { "applyDefaultIgnorePatterns": false } 選項時，此規則的正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "ignorePattern": "pragma", applyDefaultIgnorePatterns: false }] */

foo();
/* a valid comment using pragma in it */

使用 { "applyDefaultIgnorePatterns": false } 選項時，此規則的不正確程式碼範例

在線上試驗場開啟
/*eslint lines-around-comment: ["error", { "applyDefaultIgnorePatterns": false }] */

foo();
/* jshint mentioned in comment */

afterHashbangComment

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

在線上試驗場開啟
#!foo
var day = "great"

/*eslint lines-around-comment: ["error", { "afterHashbangComment": true }] */

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

在線上試驗場開啟
#!foo

var day = "great"

/*eslint lines-around-comment: ["error", { "afterHashbangComment": true }] */

何時不該使用

許多人喜歡更簡潔的程式碼風格，並且不介意註解與程式碼緊鄰。如果您屬於這種情況，則此規則不適合您。

版本

此規則已在 ESLint v0.22.0 中引入。

資源

編輯此頁面
© OpenJS 基金會與 ESLint 貢獻者，www.openjsf.org。內容以 MIT 許可證 授權。
變更語言