その js の設定ファイル補完効くかもよ
はじめに
Next.js のプロジェクトを作成すると、設定ファイルの next.config.js にこんな記述があります。
/** @type {import('next').NextConfig} */
const nextConfig = {};
この JSDoc コメントの @type タグは値に型を付与することができます。
import('next').NextConfig 部分はインポート型と呼ばれ TypeScript の型定義ファイルから型をインポートして取得することができます。
このコメントがあるおかげでエディタは宣言された変数の型を認識し、補完を出してくれます。[1]
JSDoc 自体は本来ドキュメント生成のツールですが、 TypeScript は JSDoc コメントを認識し、型情報のヒント(もしくは型チェック[2])に利用することができます。
開発で利用する様々なツールの設定ファイルはデフォルトで js 形式であることも多いかと思います。その設定ファイルも補完が効いたらいいなと思いませんか？
今回は上記方法で設定ファイルの補完を利かすことのできるフロントエンドの代表的なツールのコード例をまとめてみました。
補完を利かすことのできる js 設定ファイル
ESLint
ESLint は v9 系から新しい設定ファイル方式(Flat Config)がデフォルトになりました。
今回は旧設定ファイル方式(v8)と新設定ファイル方式(v9 Flat Config)の両方紹介します。
旧設定ファイル(v8)
v8 系の eslint パッケージは型定義ファイルが同包されていないので、あらかじめ @types/eslint パッケージをインストールしておく必要があります。
$ npm install --save-dev @types/eslint@8
/** @type {import('eslint').Linter.Config} */
module.exports = {
...
}
デモ
新設定ファイル(v9 Flat Config)
/** @type {import('eslint').Linter.Config[]} */
export default [
...
];
デモ
※ v9 は ts 形式の設定ファイル(experimental)にも対応しています。筆者が試したところ、主要なプラグイン(typescript-eslint、eslint-plugin-reactなど)で型エラーが発生しうまく解決することができませんでした。ts 形式の設定ファイルはまだ様子を見たほうが良いかも？
Prettier
/** @type {import('prettier').Config} */
export default {
...
};
デモ
Storybook
今回は Storybook を React & Vite で利用するパターンで紹介します。
/** @type {import('@storybook/react-vite').StorybookConfig} */
export default {
...
};
※ import('@storybook/react-vite') 部分は利用している Framework に対応した import 文に置き換える必要があります。もし、React & Webpack を利用してるなら、import('@storybook/react-webpack5') となります。
/** @type {import('@storybook/react').Preview} */
export default {
...
};
デモ
※ Storybook は ts 形式の設定ファイルにも対応しています。変更はそこまで労力はかからないので ts 形式に変えちゃうのもありかもしれません。
Tailwind CSS
今回は Vite プロジェクトで PostCSS のプラグインとして Tailwind CSS を利用するパターンで紹介します。
/** @type {import('tailwindcss').Config} */
export default {
...
};
/** @type {import('postcss-load-config').Config} */
export default {
...
};
デモ
まとめ
いかがだったでしょうか？
今回は JSDoc コメントの @type タグを利用して、エディタに型を認識させ補完を出す方法を紹介しました。
ぜひ、あなたのプロジェクトでも試してみてください。こんな PR が来たら少しは喜ばれるかも？
Discussion