ESLintとは?
JavaScriptのための静的検証ツール。コード実行前にバグを見つけたり、カッコやスタイルと統一したりするために使う。Node.js8.10.0以降を利用して実行できる。
特徴
全ての検証ルールを自由にon/offできる。
自分のプロジェクトに合わせてカスタムルールを作れる。
豊富なビルドインルールに加えて、多くのプラグインがある。
ES6以降を標準でサポートしている。
JSX記法をサポートしている。
Babelと連携することで新しい構文に対応できる。
スタイルガイド
Google JavaScript Style Guide
Googleによる代表的なスタイルガイド、Closure LinterというGoogle製のlinterを利用することで統一がしやすくなる。
jQuery JavaScript Style Guide
jQueryによるスタイルガイド
Airbnb JavaScript Style Guide
民泊サービスが有名なAirbnbのスタイルガイドです。GitHub上で最も人気のあります。ESlintでは第一候補に挙がるほどです。
Node.js Style Guide
GitHub上で最も人気のあるスタイルガイド
インストール
1 |
npm install -g eslint |
設定
.eslintrc.jsonというファイルを作成します。
ルール | 説明 |
---|---|
extends | |
plugins | |
parserOptions | ES6以降の構文を有効にできる。(デフォルトはES5) |
env | 静的検証の前提条件を設定できる。(例えば、ブラウザで実行するコードかどうかなど) |
globals | グローバル変数を追加定義できる。 |
rules | ルールを追加できる。 |
実行
node_modules内はデフォルトで無視されます。
1 |
eslint <対象ファイル> |
プラグイン
ESlintには大きく3種類のパッケージがあります。PluginとConfigは似ているが、Pluginはルール、Configはルールを一まとめにしたものという違いがある。
Parser
開発言語の構文を解析
@typescript-eslint/parser
TypeScriptを解析。ESlintにTypeScriptを理解させるために使います。
Plugin
Eslintにルールを追加
eslint-plugin-react
Reactのルール
@typescript-eslint/eslint-plugin
TypeScriptのルール
eslint-plugin-import
ES Modulesのルール
eslint-plugin-jsx-a11y
JSXのルール
eslint-plugin-react-hooks
React Hooksのルール
Config
複数のルールをまとめて適用
eslint-config-airbnb
Airbnbスタイルをルールとしてまとめたもの
この記事へのコメントはありません。