Zenn
🐇

PrettierとESLint(Flat Config)で最低限の設定をする

2024/11/26に公開
JavaScript
Node.js
ESLint
Prettier
tech

概要

2024年11月現在、初学者向けのESlintのFlat Config(eslint.config.js)とPrettierを組み合わせた設定方法がなかった(見つけられなかった)のでハンズオン形式で紹介します。

ESLint(Flat Config)とは

ESLintの設定ファイルはこれまで.eslintrcを使用してきましたが、バージョン9以降eslint.config.jsで設定するようになりました。このeslint.config.jsで設定することをFlat Configと呼ぶそうです。
ただし、.eslintrcとeslint.config.jsでは設定の記述方法が異なるため、これからESLintを使う人は.eslintrcで設定しないようにしましょう

Prettierとeslint-config-prettier

多くの人はESLintとPrettierを併用していると思います。また、ESLintとPrettierの機能ががコンフリクト(衝突)しないようにeslint-config-prettierをインストールしてESLintの設定ファイルで使用できるように設定していると思います。
本記事ではeslint.config.jsで設定する方法を紹介します。

設定と検証のフロー

今回は適当なjavascriptファイルを作成しESLintとPrettierを構築し動作確認を行います。

  1. 任意のフォルダに検証用ファイルapp.jsを作成(ファイルの中身は空欄でいい)
  2. package.jsonを作成
  3. ESLintをインストール
  4. Prettierをインストール
  5. eslint-config-prettierをインストール
  6. .prettierrcを作成
  7. eslint.config.jsを編集
  8. app.jsで検証用コードを編集
  9. Prettierの動作確認
  10. ESLintの動作確認

設定と検証

任意のフォルダにapp.jsを作成(ファイルの中身は空欄でいい)

任意の場所にフォルダを作りapp.jsを作成します。
app.jsは後ほど検証用コードを記述するので中身は空欄でOKです。

package.jsonを作成

下記コマンドを実行してpackage.jsonを作成します。

npm init -y

ESLintをインストール

ESLintの公式サイトのとおりコマンドを実行します

npm init @eslint/config@latest

対話形式で設定を行いますが、それぞれの環境に合わせて変更してださい。
ここでは">"を選択しました。

? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? ...
  React
  Vue.js
> None of these

? Does your project use TypeScript? ...
> No
  Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

The config that you've selected requires the following dependencies:
eslint, globals, @eslint/js

? Would you like to install them now? » No / Yes  // Yesを選択

? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm
  bun

eslint.config.mjsが作られたことを確認します。設定はPrettierをインストールした後に行います。

Prettierをインストール

Prettierのインストールページに従いインストールします。

npm install --save-dev --save-exact prettier

eslint-config-prettierをインストール

eslint-config-prettierのGithubに従いインストールします

npm install --save-dev eslint-config-prettier

.prettierrcを作成

prettierの設定ファイルを作成します。設定値は特に説明不要だと思うので省略します。

.prettierrc
{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false
}

eslint.config.jsを編集

それではESLintの設定を行います。今回は以下の2点を独自ルールに設定しいます。

  1. 未使用変数警告にする(デフォルトはエラー)
  2. console.logの使用箇所を警告にする

設定前のeslint.config.js

npm init @eslint/config@latestのコマンド実行で作成されたeslint.config.jsです。
実際のファイルはコード整形していないのでご留意ください。

eslint.config.js
import globals from 'globals'
import pluginJs from '@eslint/js'

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  pluginJs.configs.recommended,
]

設定前のeslint.config.js

設定のポイント:

  • pluginJs.configs.recommended,をexport default [の下に移動します。これはpluginJs.configs.recommended,で設定したルールを個別ルールrules:で上書きするためです。逆にpluginJs.configs.recommended,をrules:の後ろに記述すると、rules:で設定した個別ルールがpluginJs.configs.recommended,のルールで上書きされます。
  • 独自ルールはexport default内にrules:を追加して記述します。no-unused-varsが未使用変数、no-consoleがconsole.logの使用です。それぞれESLintが検知したときにwarn(警告)を出すように設定しています。
  • eslint-config-prettierをインポートして設定ファイルの最後で実行します
eslint.config.js
import globals from 'globals'
import pluginJs from '@eslint/js'
import eslintConfigPrettier from 'eslint-config-prettier'

/** @type {import('eslint').Linter.Config[]} */
export default [
  pluginJs.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
    },
  },
  eslintConfigPrettier,
]

app.jsで検証用コードを編集

PrettierとESLintの動作検証用のコードをapp.jsに記述します

app.js
const hoge = "Hello ESlint";   // 文字列にダブルクォーテーション、文末にセミコロン
    hoge = 234                 // constの書き換え、インデント位置がおかしい
console.log(hoge)              // console.logの使用
const fuga = 'ABC'             // 変数未使用

Prettierの動作確認

ターミナルからPrettierを実行して、コード整形を検証します。

Prettier実行

--writeオプションはコード整形後に上書き保存をします。

npx prettier --write app.js

動作結果

app.js
const hoge = 'Hello ESlint'   // 文字列がシングルクォーテーション、セミコロン削除
hoge = 234                    // インデント位置の変更
console.log(hoge)

ESLintの動作確認

ターミナルからESLintを実行して、コードにエラーや警告がないか確認します

ESLint実行

npx eslint app.js

動作結果

  • 2:1 constに値を入れたためエラーになっています
  • 3:1 console.logは独自ルールのとおり警告表示をしています
  • 4:7 未使用の変数に警告表示をしています
C:\xxxxx\eslint-test2\app.js
  2:1  error    'hoge' is constant                         no-const-assign
  3:1  warning  Unexpected console statement               no-console
  4:7  warning  'fuga' is assigned a value but never used  no-unused-vars

✖ 2 problems (1 error, 1 warning)

留意点や感想など

  • VSCodeを使っている人は、毎回PrettierやESLintをコマンド入力して実行するのは面倒なので、拡張機能でPrettierとESLintをインストールすると楽です。また、setting.jsonに"editor.formatOnSave": trueを追加することで、保存時に自動でコード整形を行います。
  • ここまでたどり着くのに3日かかりました...初学者向けの解説が少ないので苦労しました

Discussion