チーム開発をすると、各自のコーディングのスタイル(インデントやスペース、改行位置など)がバラバラになるのではないでしょうか(チーム開発したことないので、あくまで想定ですが。。)
本記事では、コードを自動成形する(Prettier)とついでにコード規約のチェック(ESLint)の導入をしたいと思います。
開発環境とディレクトリ構成は下記になります。
開発環境
- Edition: Windows 11 Home, Version: 22H2, OSビルド: 22621.1702
- WSL2
- Docker Desktop for Windows: 4.20.1 (110738)
- Docker Engine: 24.0.2
- Docker Compose: v2.18.1
- React : 18.2.0
- Typescript: 4.9.5
- ESLint: 8.44.0
- Prettier: 3.0.0
ディレクトリ構成
frontend
├app
│├.eslintrc.json
│├.prettierrc.json
│├node_modules
│├package.json
│├package-lock.json
│├src
│├public
│└tsconfig.json
└Dockerfile
前提
- VSCodeが導入されている
- npm(package.json)がインストールされている
プロジェクトの作成
ターミナル上で下記のコマンドを実行し、任意の場所にプロジェクトを作成します。
コマンドのapp部分は、適宜名前を変更して下さい。
プロジェクトが作成出来たら、ディレクトリに移動しておきます。
npx create-react-app app --template typescript
cd frontend/app
ESLint moduleのインストールと設定ファイルの作成
ESLint パッケージをインストールします。
ターミナル上で下記のコマンドを実行
npm install -D eslint
ルートディレクトリ(app)内にnode_modulesディレクトリが作成され、パッケージがインストールされています。
続けて、ESLint の設定ファイルを作成します。
下記、ESLintのサイトを確認し、Quick start項目に記載されているコマンドをターミナルで実施します。
npm init @eslint/config
コマンド実施後、対話形式で色々聞かれるので選択していきます。
開発環境にあった選択をして下さい。
//Prettierでコードスタイルを整えるので、"To check syntax and find problems"を選択。
? How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style
//"JavaScript modules (import/export)"を選択。
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
//"React"を選択
? Which framework does your project use? …
❯ React
Vue.js
None of these
//TypeScriptを使用するので、"Yes"を選択。
? Does your project use TypeScript? › No / Yes
//アプリはブラウザで動くので、"Browser"を選択。
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
//設定ファイルには、‘JSON’を選択。
? What format do you want your config file to be in? …
JavaScript
YAML
❯ JSON
//必要なものをインストールしてくれるので、"Yes"を選択。
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
? Would you like to install them now? › No / Yes
//パッケージマネージャに"npm"を使用
? Which package manager do you want to use? …
npm
❯ yarn
pnpm
ルートディレクトリ(app)内に.eslintrc.jsonが出来ていれば、設定完了です。
Prettier module のインストールと設定ファイルの作成
Prettier パッケージをインストールします。
npm install -D prettier
ルートディレクトリのnode_modulesディレクトリ内にパッケージがインストールされます。
続けて、ルートディレクトリ(app)内に.prettier.jsonファイルを作成します。
{
"printWidth": 150,// 自動折返し文字数
"trailingComma": "es5",// 複数行の場合、可能な限り末尾のコンマを出力
"tabWidth": 2,// タブサイズ
"semi": true,// ステートメントの最後にセミコロンを付与
"endOfLine": "auto",// 改行の文字コードを指定
"singleQuote": true // 二重引用符の代わりに単一引用符を使用
}
VSCodeにESLintプラグインを導入
VSCodeの拡張機能から次のプラグインをインストールします。
ESLint : dbaeumer.vscode-eslint
VSCodeにPrettierプラグインを導入
VSCodeの拡張機能から次のプラグインをインストールします。
Prettier - Code formatter : esbenp.prettier-vscode
VSCodeの設定
プラグインを導入出来たら、一度VSCodeを再起動します。
-
VSCodeの設定画面からeditor.defaultFormatterと検索し、DefaultFormatter項目でesbenp.prettier-vscodeを選択します。
この設定後にソースコードのコンテキストメニューからドキュメントのフォーマットを選択するとコードフォーマッティングが実行されます。 -
ファイル保存時に自動的にコードフォーマッティングを実行する場合は、VSCodeの設定画面からeditor.formatOnSaveと検索し、FormatOnSave項目にチェックを付けます。
完了
VSCodeでコードがかかれているファイルを保存すると成形されると思います。