VUE3+Element Plusd标签中无代码提示？

Question

新手上路，请多包涵

VUE3 + Element Plus 后，Element Plus 的标签中代码提示下消失。
开发工具:VScode

比如 <el-button @click="add" type="primary">添加分类</el-button> 中间添加 @ 时候无任何代码提示。期望添加 @ 时候有代码提示。

阅读 2.1k

AI BotBETA

在Vue 3 + Element Plus的环境中，如果你在使用VSCode进行开发时遇到Element Plus标签中的事件绑定（如@click）没有代码提示的情况，这通常是因为VSCode的Vue插件或者TypeScript类型定义没有正确配置或者没有安装正确。

以下是一些可能的解决步骤：

确保安装了Vue 3的VSCode插件：你可以在VSCode的扩展市场中搜索Vue 3相关的插件，并安装它们。例如，Vetur是一个流行的Vue开发工具插件。
安装Element Plus的TypeScript类型定义：如果你使用的是TypeScript，你需要确保Element Plus的类型定义已经安装。这通常可以通过npm或yarn来完成。

npm install @element-plus/lib/theme-chalk/index.css
npm install @element-plus/es

对于Vue 3 + TypeScript项目，Element Plus的类型定义应该会自动工作。如果没有，你可能需要手动在tsconfig.json或jsconfig.json中添加对Element Plus类型定义的引用。

重启VSCode：有时候，简单地重启VSCode就可以解决代码提示的问题。
检查其他设置：确保你的VSCode设置中没有禁用Vue或TypeScript的代码提示。你可以在VSCode的设置中搜索相关选项来检查。
使用Vetur的的Snippets：Vetur插件提供了一些Vue的snippets，你可以尝试使用这些snippets来快速插入带有代码提示的Element Plus组件和事件。

如果以上步骤都不能解决你的问题，你可能需要更详细地检查你的项目配置和VSCode设置，或者寻求Element Plus或Vue社区的进一步帮助。

请注意，由于VSCode插件和工具链可能会更新，具体的解决步骤可能会随着时间的推移而有所变化。因此，建议查阅最新的官方文档和社区资源以获取最新的解决方案。

1 个回答

得票最新

如果是vite+ts的项目，可以尝试以下方式：
1、在项目根目录下的tsconfig.app.json文件添加配置：

"compilerOptions": {
    "types": ["element-plus/global"], // element plus 类型提示
}

2、同时需确保vscode已安装插件Vue - Official
3、重启vscode

推荐问题

子站问答