ESLintとは

JavaScriptのコードが正しいかをチェックするツールの1つです。
エラーなどの問題が発生した場合は、自動で修正してくれることもあります。

 

ESLintの特徴

• 設定が簡単
  Node.jsとnpmだけあれば実行できます。Gruntもgulpもwebpackも難解な設定も必要ありません。

 

• 記述方式に統一感が出せる
  記述方式に統一感が出せることで、コードを読む速度が上がります。

 

• ルールをカスタマイズできる
  例えばhogeというワードを禁止にする場合は下記の通りになります。

   

  (事前にeslint-plugin-rulesdirをインストールしてください)

   

index.js
function call() {
console.log(“hoge”);
}
call();

 

.eslintrc.js

// ルールを追加するための準備
const rulesDirPlugin = require(“eslint-plugin-rulesdir”);
rulesDirPlugin.RULES_DIR = “.”;

module.exports = {
root: true,
// カスタマイズルールを使えるようにする
plugins: [“rulesdir”],
// カスタマイズルールを適用させるファイルを定義する
rules: {
“rulesdir/no-hoge”: “error”,
},
};

 

rule/no-hoge.js

// コードの中にhogeが含まれている場合、エラーを表示させる
module.exports = {
create: function (context) {
return {
Literal: function (node) {
if (/hoge/.test(node.value)) {
context.report({ node: node, message: “hoge使用禁止” });
}
},
};
},
};

 

結果
appurunoMacBook-Pro:fileName arsaga$ eslint index.js
hoge

/Users/arsaga/fileName/index.js
2:15 error hoge使用禁止 rulesdir/no-hoge

✖ 1 problem (1 error, 0 warnings)

 

ESLint関連の歴史

2002年頃: すべての JavaScript 構文チェッカーの元祖と言われる JSLint が導入される

 

2011年頃: JSLint派生としてJSHintが登場。ルールの融通が利かないJSLintのデメリットを解消。

 

2013年頃: ES6に対応したJavaScript用の構文チェッカーとしてESLintが登場。全てのルールでオンオフの切り替え可能で、カスタマイズ性が高いと判明し大流行。

 

Javascriptの他にもCSSや画像も圧縮することができるので、リクエストするファイルを減らしてくれます。結果、アプリケーションのパフォーマンス向上に繋がります。

 

現場の声

エディタ（VSCodeなど）に事前にエラーを出してくれるので、画面を読み込む前にエラーが発覚して余計な画面のリロード回数が減りました。コード整形ツールであるPrettierと一緒に使えば正確できれいなコードを一発で変換してくれます！

 

 

関連用語

Node.js
npm
Prettier
StyleLint

 

 

＜執筆・監修＞
アルサーガパートナーズ株式会社　DX技術用語集制作チーム　フロントdivision