在使用VSCode进行JSX编码时，如果没有显示属性的自动补全选项时，可以采取以下解决方法

2 年 ago

文, 翔

1 minute

Table of Contents (目录)

1. 问题解决的经过 de
2. 开发环境
3. 解决方法
4. 实证
5. 结束语 yǔ)

1. 问题解决的经过

我会写一篇文章作为备忘录。
当我在观看视频学习Next.js时，遇到了以下问题：在VSCode中编写JSX时，自动补全功能不起作用。

1-1. 在JSX中对HTML进行补全

1-2. 在组件中的补全

2. 开发环境

Paraphrased in Chinese:

2. 开发环境

編集するファイルの拡張子が”jsx”であること

3. 解决办法

(Alternative phrasing: 3. 解决方案)

当我使用以下命令安装了@types/react后，自动补全功能就可以正常使用了。

> npm install --save @types/react
# または
> yarn add @types/react

2023/12/12更新
@types/react是一个npm包，用于在TypeScript项目中使用React库时提供React的类型定义（TypeScript的类型信息）。这样，在使用TypeScript编写React组件时，可以提供代码补全和类型安全性等功能的提升。

4. 实证 (Shí

让我们在安装之前和之后实际检查一下！

创建项目

首先，我们创建一个 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文件中。

<button></button>
<Link></Link>

请试着尝试以下内容。

Linkコンポーネントの開始タグ内に「prefetch」と入力する。

4-3. 在安裝@types/react之後，確認補完功能。

通过按照解决方法所述，一旦安装了@types/react，就可以实现补全功能。

> npm install --save @types/react
# または
> yarn add @types/react

在package.json中被添加。

{
  "dependencies": {
    "@types/react": "^18.0.28",
  }
}

请尝试再次以下操作。

Linkコンポーネントの開始タグ内に「prefetch」と入力する。

结束

预计还需要很长时间才能判断和理解哪个软件包是必要的。

以上是所有的内容。