ESLint 是 Nicholas C. Zakas 於 2013 年作為開源專案發佈的 JavaScript 語法檢查工具。
ESLint 具有靈活的規則配置，並且公開了許多規則集。
Cybozu還發佈了名為「@cybozu/eslint-config」的ESLint規則集。

本文將對ESLint和@cybozu/eslint-config的設置方法以及kintone JavaScript文件的檢查方法進行說明。

https://github.com/cybozu/eslint-config

MIT 授權

https://github.com/cybozu/eslint-config/blob/master/README.md

ESLint 需要 Node.js 和 npm（一個包管理工具）才能運行。
安裝 Node.js 時，會自動安裝 npm。

1. Node.js 從官方網站下載安裝程式。
   Node.js官方網站
   若要確定所需的Node.js版本，請確認package.json的 engines 屬性。
   package.json
   例如，以下要求Node.js版本 14 或更高版本。

   1 2 3

   "engines": { "node": ">=14" },

2. 運行下載的安裝程式並按照畫面上的說明進行設置。

安裝ESLint和 @cybozu/eslint-config。

1. 創建工作目錄。在此示例中，目錄名稱為「works」。

   1	mkdir works

2. 轉到您建立的工作目錄。

3. 安裝ESLint和 @cybozu/eslint-config。

   1 2 3 4

   cd works npm init -y npm install --save-dev eslint@8 npm install --save-dev @cybozu/eslint-config@23

   您將看到安裝 TypeScript 和 Prettier 的警告。
   此Quickstart示例不使用 TypeScript 或 Prettier，因此會忽略警告。
   如果您需要 TypeScript 或 Prettier，請相應地安裝它。

   1 2 3 4

   # 安裝 TypeScript npm install --save-dev typescript # 安裝 Prettier npm install --save-dev prettier

4. 確保已安裝 ESLint 和 @cybozu/eslint-config。
   @ 後面的數位是已安裝的ESLint或 @cybozu/eslint-config 的版本號。

   1 2 3 4

   npm ls --depth=0 works ├── @cybozu/eslint-config@17.0.0 └── eslint@8.9.0

在工作目錄中，輸入創建一個名為「.eslintrc.js」的檔。
檔案名開頭必須是"."

1
2
3
4
5
6

module.exports = {
  extends: [
    '@cybozu',
    '@cybozu/eslint-config/globals/kintone'
  ]
};

準備要使用 ESLint 檢查的 JavaScript 檔。
在此示例中，我們將創建一個包含以下內容的 JavaScript 檔「sample.js」。
此 JavaScript 檔旨在在應用 ESLint 時導致錯誤。

1
2
3
4
5
6
7

(() => {
  'use strict'
  const func = (a, b) => {
    return a+ b;
  };
  const result = func(1, 3);
})();

運行ESLint。

1

npx eslint sample.js

當您運行它時，您將看到類似於以下內容的消息：

1
2
3
4
5
6
7
8
9

npx eslint sample.js

/Users/test/work/sample.js
  2:15  warning  Missing semicolon                            semi
  4:13  warning  Operator '+' must be spaced                  space-infix-ops
  6:9   error    'result' is assigned a value but never used  no-unused-vars

✖ 3 problems (1 error, 2 warnings)
  0 errors and 2 warnings potentially fixable with the `--fix` option.

在這種情況下，您可以看到「sample.js」包含以下錯誤：

• warning 缺少分號。
• warning 操作員前後必須有一個空格。
• error 不使用值「result」。

如果顯示錯誤，請根據錯誤級別（error/warning）修改 JavaScript 檔。
有關錯誤內容的更多資訊，請查看ESLint官方網站上的規則。
ESLint官方網站規則

• error：請務必修復它。JavaScript 可能無法正常工作或可能出現意外行為。
• warning：最好修復它，但不是必需的。

如果在沒有錯誤的檔上運行它，則不會顯示任何消息。

1

npx eslint sample.js

有些錯誤可以自動更正。
如果要自動更正錯誤，請使用--fix 該選項運行它。

1

npx eslint sample.js --fix

該命令修改 JavaScript 檔。
如果有任何無法自動更正的剩餘錯誤，則會顯示無法更正的錯誤的詳細資訊。

1
2
3
4

npx eslint sample.js --fix

/Users/test/work/sample.js
  6:9  error  'result' is assigned a value but never used  no-unused-vars

如果您遇到無法自動更正的錯誤，您可以自行修復，具體取決於錯誤是什麼。

在Quickstart中，我們為在ES2015（ES6）或更高版本中開發kintone自定義的人員使用了規則集。
@cybozu/eslint-config 提供了可用於其他場景的規則。 如有必要，重寫「.eslintrc.js」。

以下是一些最常見的模式：
有關所有規則，請參閱 GitHub 上的README。
README

使用ES5開發kintone定製時

1
2
3

module.exports = {
  extends: '@cybozu/eslint-config/presets/kintone-customize-es5'
};

在Node.js中自定義kintone的開發

1
2
3
4
5
6

module.exports = {
  extends: [
    '@cybozu/eslint-config/presets/node',
    '@cybozu/eslint-config/globals/kintone'
  ]
};

ES2015 （ES6） 及以上版本的通用編碼

1
2
3

module.exports = {
  extends: '@cybozu'
};

Node.js中的通用編碼

1
2
3
4
5

module.exports = {
  extends: [
    '@cybozu/eslint-config/presets/node'
  ]
};

• 2018年12月21日
  • 將軟體包名稱從「eslint-config-kintone」變更為「@cybozu/eslint-config」
• 2019年8月30日
  • 將過程從全域安裝方法變更為本地安裝方法。
• 2023年2月1日
  • 由於Cybozu產品不再支援Internet Explorer，因此在ES2015（ES6）及之後，規則集已變更為kintone自定義規則集。