Oxlintとは
JavaScriptのLintツールといえばESLintが定番ですが、最近はより高速なツールとしてOxlintが注目されています。
OxlintはRust製のJavaScript/TypeScript用Lintツールで、以下の特徴があります。
- ESLintより数十倍高速
- 設定がシンプル
- モダンなJavaScriptに最適化されている
- CIの高速化に貢献
特に大規模プロジェクトでは、処理時間が大幅に短縮されます。
ESLintの代わりにOxlintのインストール
ESLintの代わりにOxlintをインストールする場合は、まずpackage.jsonに記載されているESLintのパッケージをすべてアンインストールします。
npm uninstall eslint @eslint/js eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint代わりにOxlintを以下のコマンドでインストールします。
npm i -D oxlint oxlint-tsgolintOxlintでTypeScriptのLintを行うためのoxlint-tsgolintもインストールしています。
package.json内のnpm run lintのscriptsはoxlintに書き換えます。
"lint": "eslint ."
↓
"lint": "oxlint ."ESLintの設定ファイル (例: eslint.config.js) は削除して、代わりにOxlintの設定ファイルを以下のコマンドで追加します。
npx oxlint --initこの記事では試しに「配列の要素にdeleteを使用することを禁止するルール」を以下のように追加してみます。
// Oxlintで配列の要素にdeleteを使用するのを禁止する
const arr = [1, 2, 3]
delete arr[0]{
"plugins": ["react", "typescript"],
"categories": {},
"rules": {
"no-array-delete": "error"
},
"settings": {
"jsx-a11y": {
"polymorphicPropName": null,
"components": {},
"attributes": {}
},
"next": {
"rootDir": []
},
"react": {
"formComponents": [],
"linkComponents": [],
"version": null,
"componentWrapperFunctions": []
},
"jsdoc": {
"ignorePrivate": false,
"ignoreInternal": false,
"ignoreReplacesDocs": true,
"overrideReplacesDocs": true,
"augmentsExtendsReplacesDocs": false,
"implementsReplacesDocs": false,
"exemptDestructuredRootsFromChecks": false,
"tagNamePreference": {}
},
"vitest": {
"typecheck": false
}
},
"env": {
"builtin": true
},
"globals": {},
"ignorePatterns": []
}この状態で「npm run lint」を実行すると、エラーとして検出できます。
$ npm run lint
> my-react@0.0.0 lint
> oxlint .
× typescript-eslint(no-array-delete): Using the `delete` operator with an array expression is unsafe.
╭─[src/App.tsx:11:3]
10 │ const arr = [1, 2, 3]
11 │ delete arr[0]
· ─────────────
12 │
╰────VS CodeまたはCursorを使用している場合はOxcの拡張機能をインストールすれば、エディタ上でリアルタイムでエラー箇所がわかるので、インストールを推奨します。
※ エラーが表示されない場合はVS CodeまたはCursorを再起動してください。
Oxc - Visual Studio Marketplace
Oxfmtもオススメ
OxfmtというPrettierのような高速なフォーマットツールもあるので、ついでにこちらも追加することをオススメします。
やり方は「npm i -D oxfmt」のあと、「oxfmt --init」で.oxfmtrc.jsonファイルを生成して、以下のように設定するだけで「oxfmt」コマンドでコードをフォーマットできます。
pm i -D oxfmt
oxfmt --init{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"printWidth": 80,
"singleQuote": true,
"semi": false,
"ignorePatterns": [".oxlintrc.json"],
}VS CodeまたはCursorを使用している場合は先程のOxcの拡張機能がインストールされていれば、以下をエディタのsettings.jsonで設定すればファイルを保存するたびに自動的にコードをフォーマットできます。
{
// 中略
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnSave": true
}OxfmtはPrettierの30倍高速なので、Prettierを使用しているならOxfmtに切り替えたほうが良いです。
