目次
1. 問題解決の経緯
2. 開発環境
3. 解決方法
4. 実証
5. おわりに
1. 問題解決の経緯
備忘録として記事を書きます。
動画を見ながらNext.jsの勉強をしていた時です。
VSCodeでJSXを記述していると以下のような補完が効きませんでした。
1-1. JSX中のHTMLでの補完
1-2. コンポーネントでの補完
2. 開発環境
- Visual Studio Code 1.76.1
- React 18.2.0
- Next.js 13.2.3
- 編集するファイルの拡張子が"jsx"であること
3. 解決方法
以下のコマンドで@types/reactをインストールしたら補完が効くようになりました。
> npm install --save @types/react
# または
> yarn add @types/react
2023/12/12追記
@types/reactは、TypeScriptプロジェクトでReactライブラリを使用する際に役立つ、Reactの型定義（TypeScriptの型情報）を提供するnpmパッケージです。これにより、TypeScriptを使用してReactコンポーネントを記述する際に、コード補完や型の安全性などが向上します。
4. 実証
実際にインストール前後で確認してみましょう！
4-1. プロジェクトの作成
まず、Next.jsのプロジェクトを作成します。(プロジェクト名は任意)
> npx create-next-app@latest
# または
> yarn create next-app
今回、筆者は「sample01」というプロジェクト名にしました。
# 以下、任意の選択でOK
> ? What is your project named? › sample01
> ? Would you like to use TypeScript with this project? › No
> ? Would you like to use ESLint with this project? › Yes
> ? Would you like to use `src/` directory with this project? › Yes
> ? Would you like to use experimental `app/` directory with this project? › No
> ? What import alias would you like configured? › ~/*
作成できたら、プロジェクトに移動してVSCodeを開きます。
> cd sample01
> code .
4-2. 補完機能の確認(@types/reactインストール前)
以下のHTMLタグとコンポーネントをindex.jsxに追加します。
src/pages/index.jsx
<button></button>
<Link></Link>
そして、以下を試してみてください。
- buttonの開始タグ内に「onClick」と入力する。
- Linkコンポーネントの開始タグ内に「prefetch」と入力する。
すると、筆者の環境では、"onc"まで入力しても補完候補が表示されません。
また、Linkコンポーネントでも同様に補完候補が表示されません。
表示されているのはスニペットです。
4-3. 補完機能の確認(@types/reactインストール後)
3. 解決方法で述べたように、@types/reactをインストールしたら補完が効くようになりました。
> npm install --save @types/react
# または
> yarn add @types/react
package.jsonに追加されます。
package.json
{
"dependencies": {
"@types/react": "^18.0.28",
}
}
再度、以下を試してみてください。
- buttonの開始タグ内に「onClick」と入力する。
- Linkコンポーネントの開始タグ内に「prefetch」と入力する。
すると、補完候補が表示されるようになりました！
5. おわりに
どのパッケージが必要なのか、判断・理解できるようになるのは、まだまだ先になりそうです。。
以上です。