Prettierの導入
公式サイト: Prettier
Prettierは、ソースコードを整形するためのツールです。
Prettierは、JavaScriptをはじめとした、さまざまなコードの整形に対応しています。
- JavaScript
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
次のコマンドでPrettierをインストールします。
npm i -D prettier
インストール後、次のコマンドでファイルの整形を行います。
npx prettier --write <ファイル名またはディレクトリ名>
実行例:
npx prettier --write hello.js
もしカレントディレクトリ以下にある複数のファイルを整形したい場合は、. を引数に指定します。
npx prettier --write .
このようにして、Prettierはコードの整形を行うことができます。
ESLintとの競合を避ける
ESLintでコードの整形を行うことがあり、その設定によってはPrettierで整形を行うことができない場合があります。
それを避けるには、ESLintの設定としてeslint-config-prettierをインストールし、これを使用します。
npm i -D eslint-config-prettier
// eslint.config.js
import js from "@eslint/js";
import prettier from "eslint-config-prettier";
export default [js.configs.recommended, prettier];
こうすることによって、Prettierで整形を行うことができない問題を回避することができます。必要に応じて行いましょう。