自动完成反应JSX属性 - VS Code

在反应项目中，写JSX代码是很常见的，但是当你需要添加属性时，手动输入每个属性是非常麻烦的。这时，VS Code中的自动完成功能可派上用场。

设置自动完成功能

在使用自动完成功能前，需要打开VS Code的设置，检查一下是否安装了以下插件：

• ES Lint
• Prettier
• Reactjs code snippets
• Auto Close Tag
• Auto Rename Tag

如果没有安装这些插件，可以到VS Code的插件市场中找到它们并安装。

自动完成属性

在编辑JSX标签时，输入<后开始输入标签名，比如div，VS Code会自动列出所有可用的属性。如下所示：

在列表中选择属性，然后使用Tab键或者鼠标单击选择属性后，VS Code会自动填充属性的值。如果属性需要一个布尔值，则只需输入属性名称即可。

如果需要添加自定义属性值，只需输入属性名称，然后按下空格键，VS Code会自动添加""。

自动完成组件名

当在JSX中编写组件名称时，像<App>这样的大写字母组件名可能会非常繁琐。但是，你可以使用VS Code的自动完成功能来解决这个问题。只需要在输入<后输入组件的小写字母名称即可。比如，如果你要在项目中使用<App>组件，只需在输入<后键入app，VS Code会自动完成组件名。

如下所示：

结论

VS Code的自动完成功能可以大大提高在反应项目中编写代码的速度和准确性。通过安装并使用上述列出的插件，你可以快速编写干净、整洁的代码。