ESLintとPrettierの設定手順備忘録

Blog

プロジェクトを立ち上げるたびに忘れるので備忘録残します。

前提

  • PCはMac
  • ターミナルのシェルはbash
  • ViteでReact+TypeScript+SWCのプロジェクト作成済み

私は以下のブログを参考にさせていただきました！（とてもわかりやすい）

ESLint + Prettier + React + TypeScript + Vite で開発環境を整える - Qiita
目的Vite を使うことで、ESLint + Prettier を有効にした TypeScript + React プロジェクトを迅速に作成することができる。今回はプロジェクトの作成から、ESLi…
qiita.com

というか説明部分などを割愛して簡単にしただけと言っても良い…

ESLintの構築手順

①作成したプロジェクトのルートディレクトリでパッケージをインストール

npm install eslint eslint-plugin-react --save-dev

「–save-dev」ですが、ESLintは本番環境では使わないパッケージなのでdev（開発環境）にsave（保存）するよ、というオプションです。

②「.eslintrc.cjs」というファイルに以下を追記

  1. 「’plugin:react/recommended’,」と「’plugin:react/jsx-runtime’,」をextendsに追記
  2. 「, ‘vite.config.js’」をignorePatternsに追記
  3. 「settings:~~~」を追記
  4. 「’@typescript-eslint/naming-convention’: [」を追記

全コピしてファイル内貼り替えてもOKです！
（今後バージョンアップなどで使えなくなる可能性はありますが）

// .eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended', // <---------- ❶追記
    'plugin:react/jsx-runtime', // <---------- ❶追記
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.js'], // <---------- ❷「, 'vite.config.js'」を追記
  settings: {        // <---------- ❸ここから
    react: {
      version: "detect",
    },
  },　　　　　　　　　　　　　　　　　　　　　// <---------- ❸ここまで追記
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
　　'@typescript-eslint/naming-convention': [      // <---------- ❹ここから
      'error',
      {
        selector: 'variable',
        format: ['camelCase'],
      },
      {
        selector: 'function',
        format: ['camelCase', 'PascalCase'],
      },
      {
        selector: 'parameter',
        format: ['camelCase'],
      },
      {
        selector: 'class',
        format: ['PascalCase'],
      },
      {
        selector: 'method',
        format: ['camelCase'],
      },
      {
        selector: 'property',
        format: ['camelCase'],
      },
      {
        selector: 'interface',
        format: ['PascalCase'],
      },
      {
        selector: 'typeAlias',
        format: ['PascalCase'],
      },
      {
        selector: 'typeParameter',
        format: ['camelCase'],
      },
      {
        selector: 'enum',
        format: ['PascalCase'],
      },
      {
        selector: 'enumMember',
        format: ['UPPER_CASE'],
      },
    ],                // <---------- ❹ここまで追記
  },
}

ESLintの動作確認をする方法もありますが、ここでは割愛します…！
（気になる人は一番上に載せておりますリンク先をご確認ください。）

Prettierの構築手順

①作成したプロジェクトのルートディレクトリでパッケージをインストール

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

「–save-exact」はバージョンを固定させるためのオプションだそうです。

②空のprettier設定ファイルを作成する

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

エディターや他のツールにPrettierを使用していることを知らせるために空の設定ファイルを作成しておきます。（後ほどこの中に設定を書いていきます！）

③プロジェクトのルートディレクトリ直下に「.prettierignore」ファイルを作成し、以下を記述

コマンドでファイル作成し、

touch .prettierignore

下のコードをコピペします

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Artifacts
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# JSON (Optional):
*.json

# Docs (Optional):
*.md

ESLintとPrettierの競合を解消する手順

①以下のパッケージをインストール

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

競合部分を解消するためのプラグインがPrettierから提供されているのでインストールしています。

⑤「.eslintrc.cjs」のextendsの配列の一番下に「’prettier’, 」追記

module.exports = {

  // 省略

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'prettier', // <---------- extendsの配列の一番下に追記
  ],

  // 省略

  },
};

Prettierの動作確認をする方法もありますが、ここでは割愛します…！
（気になる人は一番上に載せておりますリンク先をご確認ください。）

Prettierの詳細設定

・「.prettierrc」に自分好みの設置を記述（以下一例です）

{
	"trailingComma": "es5",
	"tabWidth": 4,
	"semi": true,
	"singleQuote": true,
	"useTabs": true,
	"bracketSpacing": true
}

ダブルクォーテーションじゃないとダメってエラー出ました！！！
調べるとJSONはシングルクォーテーション使えないそうです。

設定項目はPrettier公式ドキュメントに掲載されているので覗いてみてください！

VSCodeの設定

①VSCodeで拡張機能をインストール

②.vscodeのsetting.jsonに以下を記述

ちなみにsetting.jsonの開き方がわからない場合はこちらを参照してください。

【VSCode】settings.json の開き方
このページでは、VSCode（Visual Studio Code）における「settings.json の開き方」について解説していきます。 最近この settings.js ...
daeudaeu.com
 
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modificationsIfAvailable",
}

ダブルクォーテーションじゃないとダメってエラー出ました！！！
調べるとJSONはシングルクォーテーション使えないそうです。

これでファイル保存した時にPrettierが働いて自動整形してくれます！

ここまで長かったですが以上で構築手順は完了です！

豆知識

・ESLintとは？

まず「ES」はECMAScriptの頭文字です。

ECMAScriptはJavaScriptの仕様を標準化したもので、ECMAという団体が標準化を担っています。

昔JavaScriptが開発された当時はブラウザ間で仕様の差異がありました。

コードを書く側の人にとってはブラウザ毎にコード書かなきゃいけないから使いづらいよね、ということで
開発者はECMAに依頼し、仕様標準化を行いました。

今でも毎年仕様が公開されています。

特にES2015（ES6）からはモジュールが登場するなど著しい発展がなされ、これ以降を「モダンJavaScript」と呼んだりします！

ほな「Lint」ってなに？ってところですね。

Lintは静的解析ツールの一つとして生まれました。商品名みたいなもんですね。

コードの構文をチェックするだけではなく、「この変数定義されてるけど、どこにも使われてないよ〜！」など、
より詳しいチェックを行ってくれます。

Lintを使ってコードチェックを行うこと自体をLintと呼ぶようになり、今では総称として使われています。

つまりESLintとは「ESの仕様に則ってコードを詳しくチェックしてくれるツール」ということになります！

・Prettierとは

これは調べるまでなぜか気づかなかったのですが、

prettyの比較級！！！！！（どどんっ）

ということで、つまりは「コードをより美しく整えてくれるツール」という意味でした〜

本日も最後までお読みいただき、ありがとうございました。

コメント

タイトルとURLをコピーしました