ESLint/Prittier入門
今回は、JavaScriptにおけるリンターである「ESLint」と、フォーマッターである「Prettier」について解説していきます。
フロントエンド開発においては必須のツールと言っても過言ではないので、ぜひこの機会に身につけましょう。
ESLint
まずESLintとは、JavaScriptにおけるリンターです。
具体的には、JavaScript(TypeScript)の構文がスタイルガイドラインなどの指定したルールに違反してないかをチェックして、違反してたら指摘してくれたり、修正してくれたりします。
なのでこれを使うことで、未然にバグを防げたり、チーム全体で同じ質のコードを書くことができます。
導入方法は簡単で、次のコマンドを実行して、自分のプロジェクトに合わせて質問に答えるだけです。
npm init @eslint/config
そうすることで、設定ファイルが生成され、必要なパッケージもインストールしてくれます。
今回作成された、設定ファイルは次の通りです。
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard-with-typescript"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
}
次に、この設定ファイルについて詳しく解説していきます。
plugins
pluginsは、 リンターのルールを追加する項目です。
pluginsの項目にルールを登録しても、ルールのオン/オフは指定されていないので、ルールはまだ適用されていない状態です。
適用させるには、さらにrulesに記述を追加する必要があります。
ちなみに、外部のルールのeslint-plugin-xxxというパッケージを導入する場合、eslint-plugin-の部分を省略できます。
extends
extendsは、 ルールの設定をしてくれる項目です。
つまり、他の人が作ってくれたルールのオン/オフを適用させることができます。
ちなみに、ルール設定が重複している場合、後から書いた方が優先になります。
また、eslint-config-xxxというパッケージを導入する場合、eslint-config-の部分は省略できます。
プラグインを追記する場合も少し変化があり、例えばeslint-plugin-reactというプラグインを、extendsに追記する場合は、"plugin:react/recommended" となります。
rules
rulesは、個別のルールの設定を登録する項目です。
元からあるESLintのルールをオンにしたり、インポートしたプラグインのルールをオンにしたり、extendsで設定されたルールのオン/オフを切り替えたりできます。
ベースとなるextendsを選定し、個別に無効にしたいルールや例外パターンのルールを、rulesに追記する感じで書くのが一般的です。
env
プログラムの実行環境を指定します。
今回の例で言うと、es2021を使い、ブラウザを使用する設定となっています。
parserとparserOptions
parserは、ESLintがプログラムの構文解析してくれる時に使われます。
例えば、TypeScriptが対象の場合は、parser:'@typescript-eslint/parser'を指定する必要があります。
parserOptionsは、parserの細かいオプションを指定するプロパティです。
最終的にこのようなコードとなります。
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"next/core-web-vitals",
"standard-with-typescript",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react"],
"rules": {}
}
実行
次のコマンドで、リンターがおかしな所がないか検知してくれます。
yarn lint
そして次のコマンドで、リンターが検知したおかしな所を修正してくれます。
yarn lint --fix
ちなみに、自動で直せないところもあるので、そこは適宜手動で修正しましょう。
また、リントしたくないファイルは、.eslintignoreに書けばOKです。
Prettier
Prettierは、コードをフォーマットしてくれるツールです。
例えば、インデントを揃えたり、表記揺れを修正してくれたりします。
一応、ESLintでもある程度のフォーマットはできますが、Prettierにしかできないこともあります。
なので、フォーマットに関してはESLint側であまりやらず、Prettierに任せるのが一般的です。
ちなみに、ESLintとPrittierは競合する設定もあるので、別途eslint-config-prettierなどのライブラリのインストールが必要です。
設定の内容についてはこちらの記事がめちゃめちゃ分かりやすいかったので、参考にどうぞ。
今回は次のような設定を使っていきます。
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"quoteProps": "as-needed",
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"singleAttributePerLine": false
}
実行方法
実行方法については次のコマンドを実行するだけです。
yarn prettier --write ./
ちなみに、こちらも.prittierignoreに無視したいファイルを書くことができます。
自動化
確かにこれらのツールは便利なのですが、いちいち実行するのは面倒ですよね？
また、人によっては実行を忘れてしまうこともあるでしょう。
なので、別のツールを使って、gitのコミット時にこれらのリントやフォーマットを実行させるのが一般的となっています。
そして、その時に使うパッケージがlint-stagedです。
こちらをインストールし、package.jsonに設定を追記します。
{
...
"lint-staged": {
"*.{js,ts}": "eslint --fix",
"*.{js,ts,css,md}": "prettier --write"
}
}
ちなみに、この時のパスの指定にはGlobのパスパターンというものが使われています。
そして、githooksの設定をし、precommitファイルに次のように記述すればOKです。
#!/usr/bin/env zsh
npx lint-staged
yarnを使っている場合は、yarn lint-stagedにすればOKです。
githooksの詳しい設定はこちらで解説しているので、参考にどうぞ。
ネットだとどの記事もhasckyというライブラリを使って設定していたのですが、なくても普通に設定できます。
導入する理由は管理のしやすさなのかなと思いますが、正直良く分からないです。
また、prettireはコード保存時に実行されるようにしてしまいましょう。
VSCodeを使っている場合は、次の記事を参考にどうぞ。
まとめ
今回は、フロントエンドのリンターとフォーマッターの設定について解説してきました。
恐らく、これらのツールはほぼどの現場でも採用されているので、知っておいて損はないです。
ぜひ、これを機を学んでみましょう。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion