Zenn
🙆

PrettierでJavascript / TypeScriptのimport文を自動ソートする方法

に公開
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

JavaScriptやTypeScriptで開発していると、ファイルの先頭にimport文がずらりと並ぶことがよくあります。これらの順序がバラバラだと、可読性や保守性が下がってしまいます。

この問題を解決するために、Prettierのプラグインprettier-plugin-sort-importsを使って、import文を自動で整理する方法を紹介します。

前提条件

Node.jsがインストールされている必要があります。

手順

  1. prettierとprettier-plugin-sort-importsをインストール
npm install --save-dev prettier prettier-plugin-sort-imports
  1. コードフォーマッター「Prettier」の設定ファイルprettier.config.cjsを作成する

プロジェクトのルートディレクトリに以下のコマンドで設定ファイルを作成します。

touch prettier.config.cjs

prettier.config.cjsファイルは、コードフォーマッタ「Prettier」の動作をカスタマイズする設定ファイルです。

以下のように設定を記述します。

/** @type {import("prettier").Config} */
module.exports = {
  plugins: ['prettier-plugin-sort-imports'],
  importOrder: [
    '^react$',
    '^@?\\w',
    '^@core/(.*)$',
    '^@server/(.*)$',
    '^@ui/(.*)$',
    '^[./]',
  ],
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  sortingMethod: 'lineLength',
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
};
  1. 整形したくないファイル（またはフォルダ）を除外する

.prettierignoreファイルをプロジェクトのルートディレクトリに作成します。

touch .prettierignore

以下のように.prettierignoreの中身を記述して除外対象を設定します。

node_modules
dist
build
  1. prettierを実行してコードを整形する

以下のコマンドで、プロジェクト全体のファイルに対してPrettierを実行します。

npx prettier --write .

特定のディレクトリや、ファイルだけに適用したい場合は、次のように対象を指定できます。

npx prettier --write src/**/*.ts

おわりに

なぜ設定ファイルprettier.config.cjsは拡張子がcjsなのか？

設定ファイルの拡張子がcjsの理由は、cjsは CommonJS モジュール形式を示す拡張子で、主に Node.js 環境で使われます。.js ファイルが type: "module" な環境では ES Modules 扱いになるため、CommonJS として明示したいときに .cjs を使います。

prettier-plugin-sort-imports を導入することで、チーム開発でも一貫性のあるimport文のスタイルを保つことができます。レビュー時の差分も減り、開発効率の向上にもつながるので、ぜひ導入してみてください。

Discussion