<code>vitest</code> と <code>eslint-plugin-import</code> に依存している環境では、vitest.config.ts内で <code>vitest/config</code> をインポートすると <code>Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved)</code> というエラーが出る場合があります。
これはnode_modules/vitest以下にconfig.d.tsだけがある状態で、config.jsの実体はdist/config.jsにあることが元で発生するようです。ディレクトリ構造を示すと次のようになります。
<pre><code>/node_modules/vitest
|-- dist
| |-- config.cjs
| |-- config.d.ts
| |-- config.js
`-- config.d.ts
</code></pre>
vitest/config.d.tsの内容はvitest/dist/config.jsでexportしているものをそのままexportしています。
<pre class="language-typescript"><code class="language-typescript">export * from './dist/config.js'
</code></pre>
<h2>解決方法</h2>
ESLintの設定ファイルで <code>import/resolver</code> 内の <code>node.extensions</code> の値に <code>d.ts</code> を追加すると <code>d.ts</code> 内のモジュール読み込みが解決できるようになり、ESLintの <code>import/no-unresolved</code> のエラーが無くなります。
<pre class="language-javascript"><code class="language-javascript">settings: {
 'import/resolver': {
 node: {
 extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
 },
 },
}
</code></pre>

eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある

<a href="https://hatenablog.com/">はてなブログ</a>のMarkdownによる記事編集画面や<a href="https://esa.io/">esa - 自律的なチームのための情報共有サービス</a>のように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。
ですが、ブログで使っている<a href="https://microcms.io/">microCMS</a>の投稿画面や、普段使っているマークダウンエディターの<a href="https://obsidian.md/">Obsidian</a>にはプレビューを横並びにするようなオプションが無かったため、自分で記事を投稿するためのフォームを作ってみました。
技術スタックとしては次の通りです。仕事では使っていないものばかりですが、いろいろ使ってみたかったものを揃えてみました。
<ul>
<li><a href="https://lexical.dev/">Lexical · An extensible text editor framework that does things differently</a></li>
<li><a href="https://headlessui.com/">Headless UI - Unstyled, fully accessible UI components</a></li>
<li><a href="https://ja.vitejs.dev/">Vite | 次世代フロントエンドツール</a></li>
<li><a href="https://vitest.dev/">Vitest | A blazing fast unit test framework powered by Vite</a></li>
<li><a href="https://zustand-demo.pmnd.rs/">Zustand</a></li>
</ul>
実際の記事投稿画面は次の通りです。
<img src="https://blog-assets.kubosho.com/instant-blog-post-form.png" alt="記事の投稿フォームのスクリーンショット">
<h2>備えている機能</h2>
今回作った投稿フォームの特徴は次の通りです。
<ul>
<li>ページの左側に本文編集フォームがある</li>
<li>ページの右側にリアルタイムプレビューがある</li>
<li>下書き状態・公開状態の切り替えが可能
<ul>
<li>ただmicroCMSはPOST APIにクエリーを付けたい場合は<a href="https://microcms.io/pricing">Teamプラン</a>以上の契約が必要になる……（作った後の動作確認で気づいた）</li>
</ul>
</li>
<li>ページを再読み込みしてもタイトル・URLのパス・本文の状態が保持される</li>
</ul>
<h2>これから作りたい機能</h2>
いま考えていることとして、次に挙げる機能を作りたいと思っています。
<ul>
<li>記事を投稿するときに確認画面を表示する</li>
<li>記事の投稿が完了したら完了と分かるような表示を追加する</li>
<li>記事の投稿に失敗したら失敗と分かるような表示を追加する</li>
<li>タグの追加ができる</li>
<li>カテゴリーの追加ができる</li>
<li>プレビュー画面のスタイルを<a href="https://blog.kubosho.com/">https://blog.kubosho.com/</a>と同じものを適用する</li>
<li><a href="https://github.com/fukayatsu/esarea">fukayatsu/esarea</a>やesaの本文編集フォームのように、tabキーやenterキーを押したときにマークダウンの記法が自動で挿入される</li>
<li><a href="https://textlint.github.io/">textlint · The pluggable linting tool for text and markdown</a>を導入して、記事を書いているときにエラーを出す</li>
<li>何かしらのホスティングサービスにアップロードして、いろんなデバイスからアクセスできるようにする
<ul>
<li>認証機能を作る必要がある</li>
</ul>
</li>
<li>本文編集部分とプレビュー部分のスクロール同期をする</li>
<li>Vimモード</li>
<li>画像アップロード</li>
</ul>
<h2>まとめ</h2>
もしこの記事を見て良いなと思ったら、リポジトリへのstarとwatch登録お願いいたします。
<a href="https://github.com/kubosho/instant-blog-post-form">kubosho/instant-blog-post-form: Blog post form for https://blog.kubosho.com.</a>

学ぶ、考える、書き出す。

タグ「Vitest」の記事一覧