React+ESLint+Prettier+VSCode
VSCodeでReactのESLintとPrettierを設定する方法です。春先に下書きして投稿し忘れていた記事ですが、せっかくなので投下しておきます。
⚠以降の注意点
- あらかじめReactの開発環境を整えてあるものとします
- 開始時はVSCodeのsetting.jsonにある自動フォーマットを切っておいてください
- カレントディレクトリがプロジェクトのルートにいるとして解説しています
ESLint
ESLintはJavaScriptのLinterです。プログラムのスタイルを分析します🔎
まずESLintをグローバルにインストールします。初期化を行うとディレクトリ内に.eslintrc
が作成されますが、このグローバルコマンドの実行時に、プロジェクト用のeslintパッケージも自動でインストールしてくれます。
# インストール
yarn add global eslint
# 初期化・対話式で進む(各々の環境に合わせて答えます)
eslint --init
.eslitrc
を設定します。
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
es6: true,
jest: true
},
extends: ["airbnb"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly"
},
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: "module"
},
plugins: ["react"],
rules: {
/* jsx, jsを許可 */
"react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
/* thisを介したpropsの警告無効化 */
"react/no-this-in-sfc": 0,
/* propsなどを直接使用可能にする */
"react/destructuring-assignment": 0,
/* jsxを1行で記述しなくてもよくする */
"react/jsx-one-expression-per-line": 0,
/* prop-typesによるバリデーション */
"react/prop-types": 0,
// devDependencies(外部モジュール)のインポートをコードに含めるのを許可
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
}
};
デフォルトルールはeslint: recommended
という規約ですが、広く使われているAirbnbのスタイルガイドをインストールします。
yarn add babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev
Lint自体は以下で実行できます。
## ローカルパッケージのeslintを使う場合
./node_modules/.bin/eslint [filename]
## グローバルパッケージのeslintを使う場合
eslint [filename]
Prettier
Prettierはコードフォーマッターです。グローバルにインストールします。
yarn global add prettier
これでprettier --write [file]
でファイルを整形できます。
次にPrettierにESLintのルール(Airbnb)を使用して、Linterを実行したときにPritteirのエラーも表示できるようにします。
yarn add eslint-config-prettier eslint-plugin-prettier --dev
.eslintrc.js
を編集します。extends
とplugin
とrules
を編集しました。
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
es6: true,
jest: true
},
extends: ["airbnb", "prettier", "prettier/react"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly"
},
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: "module"
},
plugins: ["prettier", "react"],
rules: {
/* prittierのルール */
"prettier/prettier": ["error"],
/* jsx, jsを許可 */
"react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
/* thisを介したpropsの警告無効化 */
"react/no-this-in-sfc": 0,
/* propsなどを直接使用可能にする */
"react/destructuring-assignment": 0,
/* jsxを1行で記述しなくてもよくする */
"react/jsx-one-expression-per-line": 0,
/* prop-typesによるバリデーション */
"react/prop-types": 0,
// devDependencies(外部モジュール)のインポートをコードに含めるのを許可
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
}
};
.prettierrc
を作成して以下を記述します。Prittierの整形ルールです。
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 70,
}
これで、eslint [filename]
と実行すれば、ESLintに加えてPrettierの整形ルールにあっていないものもエラーとして表示されるようになります。
VSCode
現状はターミナルからコマンドを実行する必要があり、利便が悪いです。VSCodeを使い効率を良くしましょう。
方法は簡単で、ESLintとPrettierの拡張をインストールするだけです!これでコマンド不要で開いているファイルすべてをLinterに介してくれます。
更に保存時に自動でフォーマットさせるには、settings.json
に以下を追加します。
/**
* Prettier
* @formatOnSave 保存時にフォーマットするのを許可
*/
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true
},
以上です。vim拡張を入れている場合、:w
で保存するときに稀にフォーマットされないことがありますが、エディタ自体の保存ctrl + s
を有効にしておくことで自分は対処しています。