Prettierからoxfmtに乗り換えてimport sortの設定をする
こんばんは、情報システム部の夏目です。
先日個人的にViteでのwebアプリを作ろうとしたときに、create-viteのデフォルトリンターがoxlintに変わったことを知りました。
oxlintの開発元の開発している別のツールでoxfmtがあることを知り、import sortに対応しているので、プラグインを使ってimport sortをしているPrettierから乗り換えることにしました。
Oxc (The JavaScript Oxidation Compiler)
Rustで書かれたJS, TS向けの高速ツール群の総称です。
ここで開発されたリンターがoxlintで、フォーマッターがoxfmtです。
oxfmt
Prettier互換の高速フォーマッターです。
公式サイトによると、Prettierの30倍、Biomeの3倍の速さで動くと言っています。
自分がこれに乗り換えようと思った最大の理由が、import sortに組み込みで対応しているからです。
デフォルトでは無効化されていますが、設定を書くだけで有効化できます。
試してみる
環境を作る
ViteでReactのAppを作り試してみます。
(tsconfig.jsonを自力で書けないので)
$ npm create vite@latest
npm create vite@latest
> npx
> "create-vite"
│
◇ Project name:
│ trial-oxfmt
│
◇ Select a framework:
│ React
│
◇ Select a variant:
│ TypeScript + React Compiler
│
◇ Use ESLint instead of Oxlint?
│ No (Oxlint)
│
◇ Install with npm and start now?
│ No
│
◇ Scaffolding project in /Users/yuta/space/node/trial-oxfmt...
│
└ Done. Now run:
cd trial-oxfmt
npm install
npm run dev
作成したReact Appに入って、 npm install しておきます。
$ cd trial-oxfmt
$ npm install
インストール
$ npm install -D oxfmt
$ npx oxfmt --init
Created `.oxfmtrc.json`.
oxfmtをインストールするだけで大丈夫です。
また npx oxfmt --init をするとデフォルト設定の設定ファイルが生成されます。
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"ignorePatterns": []
}
デフォルト設定なので、特に何も書いてありません。
import sortの設定をする
oxfmtでは設定をしないとimport sortはできません。
prettierでは @trivago/prettier-plugin-sort-imports を使っていて、次のような設定にしていました。
plugins:
- "@trivago/prettier-plugin-sort-imports"
importOrderSeparation: true
importOrderSortSpecifiers: true
importOrderGroupNamespaceSpecifiers: true
importOrder:
- "<BUILTIN_MODULES>"
- "<THIRD_PARTY_MODULES>"
- "@/(.*)$"
- "^\\.\\./(.*)$"
- "^\\./(.*)$"
これに近くなるようにoxfmtを設定すると次のようになりました。
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"ignorePatterns": [],
"sortImports": {
"newlinesBetween": true,
"customGroups": [
{
"groupName": "alias",
"elementNamePattern": ["@/**"]
}
],
"groups": [
"builtin",
"external",
"alias",
"parent",
"sibling",
"index",
"unknown"
]
}
}
sortImportsの項目があるとimportをsortしてくれるようになります。
sortImports.newlinesBetween- これを
trueにするとsortしたとき、グループとグループの間にスペースを入れてくれます
- これを
sortImports.customGroups- これは
import {} from "xxx";のxxx部分で識別する任意のグループを作成できます - pathsで
@/**を使っているのですが、組み込みのグループにはないのでaliasというグループを作成しています
- これは
sortImports.groups- ここでsort順を設定します
- グループには何があるかなどは ドキュメント を参照してみてください
試してみる
次のファイルを用意します。
export type Data = {
id: string
name: string
}
export type Output = {
isError: boolean
}
export function call() {}
import {useRef} from "react";
import type {Data} from "./models/data"
import type {Output} from "@/usecases/call";
import {call} from "@/usecases/call";
function App() {
const input = useRef<HTMLInputElement | null>(null);
return (
<>
<h1>Trial</h1>
<p>
<input type="file" ref={input} />
</p>
</>
)
}
export default App;
ファイルの準備ができたら、oxfmtを実行します。
$ npx oxfmt
Finished in 1100ms on 16 files using 8 threads.
import { useRef } from "react";
import type { Output } from "@/usecases/call";
import { call } from "@/usecases/call";
import type { Data } from "./models/data";
function App() {
const input = useRef<HTMLInputElement | null>(null);
return (
<>
<h1>Trial</h1>
<p>
<input type="file" ref={input} />
</p>
</>
);
}
export default App;
importのsortができました。
oxfmtでは、Prettierと違って、パスしていなければ自動で対象ファイルを探してくれますし、ファイルを更新してくれます。
これが動いてくれたので、乗り換えできそうです。
まとめ
以上oxfmtを乗り換えたという話でした。
デフォルトでsort importしてくれるのはいいですね。Prettierでsort importのためのplugin
おまけ
$ npx oxfmt --migrate=<SOURCE>
PrettierやBiomeの設定ファイルがある場合、上記コマンドで設定をインポートできます。
Prettierの資産がある場合でも乗り換えやすそうです。
自分はPrettier本体の設定ではなく、pluginの設定だったのでうまく動きませんでした。
