【JavaScript】「ESLint」、プラグイン、configの種類など

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上で最も人気のあるスタイルガイド

インストール

設定

.eslintrc.jsonというファイルを作成します。

ルール	説明
extends
plugins
parserOptions	ES6以降の構文を有効にできる。(デフォルトはES5)
env	静的検証の前提条件を設定できる。（例えば、ブラウザで実行するコードかどうかなど）
globals	グローバル変数を追加定義できる。
rules	ルールを追加できる。

 

実行

node_modules内はデフォルトで無視されます。

プラグイン

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スタイルをルールとしてまとめたもの