背景
現在フロントエンドで Reactを使っているのですが、React初心者だったとのこともあり、
ESLintを使っていませんでした。
でも、以下の理由でESLintを導入してみることにしました。
- Reactに触って2ヶ月たって、書き方が大分わかった
- コード量もやばくなってきてそろそろ整理が必要
- VisualStduioCodeにエディタを乗り換えた(前回記事)
その時の記録と感想
導入
ESLintのインストール
まずはESLintをインストールします。-gを入れることでプロジェクトだけではなくPC全部に入れます。
$ npm install -g eslint
ESLintの設定、構文チェック
次に設定ファイルを作成します。 作成場所はプロジェクトのルートフォルダです。
$ touch .eslintrc.js
ここに、どんな構文チェックをさせるかのルール付けを書いていきます。
公式サイトにあるようにめちゃめちゃ量が多いです。
いちいちどれが必要かなんてみてられないです。
そこで、Airbnbがまとめた設定集を使います。
この設定集が使っている人が多いみたいです。(あとはGoogleのも有名みたいです。)
$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
.eslintrc.jsにairbnbの構文チェックが効くように設定を書きます。
module.exports = {
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
],
};
VisualStudioCodeでESLintを使えるようにする。
このままでもコンソールから叩けば使えますが、やっぱり書いてる時にエディタに反映されてほしい！
ということでVisualStudioCodeの拡張機能でエディタ上に反映されるように設定します。
VisualStudioCodeのインストール・拡張機能の追加は前回記事で
インストールが済んだらsetting.jsonに以下の設定を追加して使えるよにします。
eslint.autoFixOnSaveはファイル保存時に自動でESLintの構文に合わせて修正してくれるもの。
めっちゃ便利！！！
(これを知らずに手で1000行くらい直してました。。。)
"eslint.enable": true,
"eslint.autoFixOnSave": true,
これを設定することでESLintがVisualStudioCodeで動くようになります。
ファイルが真っ赤でめっちゃ怒られます。
(僕の場合は一つのファイルで100個くらい怒られる。それが50ファイルくらいでした。。。)
追加ルールの設定
airbnb製のチェックはかなり厳しいのと、使い勝手のよさの観点から以下の追加ルールを設定しました。
グローバル変数の許可
globalsはグルーバル変数を宣言するものです。
ESLintではimportせずに利用されているものはエラーで弾くようになってます。
なので、windowなどグローバル変数はあらかじめ許可をして置く必要あります。
今のプロジェクトで使っている以下のグローバル変数をリストに追加しました。
"globals": {
"window": true,
"location": true,
"document": true,
"SubmissionError": true,
"google": true,
},
ルール設定
プロジェクトとして既に動いている＋保守性より開発速度優先な実装のため
以下のルールは許可するようにしました。
ルール設定のくわえ方は以下の通りです。
"*変更したいルール*": [0=オフ、1=警告、2=エラー , {細かい設定}]
理由は後述します。
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/prefer-stateless-function": [0],
"no-useless-constructor": [0],
"import/no-unresolved": [0],
"import/extensions": [0],
"max-len": [1, 300, 2],
"import/prefer-default-export": [0],
"arrow-body-style": [0],
"react/jsx-no-bind": [0],
"yoda": [0],
"no-restricted-syntax": [0],
"react/require-default-props": [0],
}
###react/jsx-filename-extension
ReactのJSXという書き方を拡張子がJSXだけでなく、JSでも動くようにしたものです。
今更ファイル名をJSXに変更するのも面倒だったのでルールを変更しました。
react/prefer-stateless-function
reactのstateを持たないものは以下、pureComponentで書けって言われます。
後からstateがあるもの作ろーと思ってるときに怒られてしまって面倒なので外しました。
import/no-unresolved ,import/extensions
import時にパスが合っていないと怒られるもの
Reactの特徴として基本は相対パスでimportします。ただ、Utilクラスとか作ったり、imageフォルダなどからimportする時に
相対パスはさすがにしんどいです。
そこで、私は以下の記事を参考に、絶対パスで指定できるように追加設定をしています。
importを絶対パスで書く
ただ、これがeslintだと怒られてしまうため、やむなくオフにしています。
max-len
1ファイルあたりの行数です。
デフォルトは80ですが。既に200行くらいのファイルが合ったのでそこをリファクタするのが面倒だったので300に変更しました。
yoda
yoda記法を禁止するというもの、元Javaプログラマーとしてyoda記法が良いものと思ってるので使います。
あれ？でももしかしたらjsだとあんま意味ない？
###react/jsx-no-bind 、no-restricted-syntax、react/require-default-props
ここら辺はなんで入れたのかあまり覚えていません。
とりあえず前に進まなかったのでとりあえず許可したのかと思います。
後で見直してみます。
##プロジェクトで使ってるESLintの設定
まとめて今のプロジェクトで使っている設定は以下です。
module.exports = {
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
],
"globals": {
"window": true,
"location": true,
"document": true,
"SubmissionError": true,
"google": true,
},
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/prefer-stateless-function": [0],
"import/no-unresolved": [0],
"import/extensions": [0],
"max-len": [1, 300, 2],
"import/prefer-default-export": [0],
"arrow-body-style": [0],
"react/jsx-no-bind": [0],
"yoda": [0],
"no-restricted-syntax": [0],
"react/require-default-props": [0],
}
};
# ESLintの構文チェックを基にリファクタ
ESLintの導入が完了したのであとは怒られた赤い線を基に直していきます。
作業量としては100個×50ファイルで2日くらいかかりました。
こんだけかかった要因として、
- ESLintの構文エラーの理解に時間がかかった
- 自動修正機能を知らずに1000個くらいは手作業で直していた。
先ほども述べましたが、VisualStudioCodeのESLintの拡張機能は自動修正機能が付いており
(追記：ESLint単体でも自動修正機能があるみたいです。@mysticateaさんありがとうございます！)
以下の設定を追加すると自動修正を行ってくれます。
"eslint.enable": true,
"eslint.autoFixOnSave": true,
これを知ったら一気に10倍くらいのスピードで修正できるようになりました。
ESLintをまだ入れていないという方は必ず入れてみてください。
# 感想
最初はESLintの赤い線の多さに絶望としていましたが、自動修正機能を知ってからはスムーズに修正できました。
今から考えたら最初から導入しておけば良かったなとつくづく思います。
プライベートで開発だったとしても、ESLintはJS(特にES6)の勉強にもなるしとても良いものだなと感じました。
今はESLint無しで開発とか信じられないですね。。。
あとはTypeScriptを導入したいがまだそこまでは行けてないです。
次はやろう。。。