三、使用VSCode运行vue项目（VSCode插件设置）

Laygel

已于 2023-09-21 02:30:44 修改

阅读量2.6w

点赞数 26

文章标签： vue vscode

于 2021-08-10 14:20:35 首次发布

本文链接：https://blog.csdn.net/weixin_45681674/article/details/119567668

版权

本文介绍了如何在VSCode中配置Vue项目的开发环境，包括安装Vetur、ESLint、AutoCloseTag等必备插件，以及解决.vue文件报错和Vue3中引入Ant Design的问题。同时，提到了调试工具Debugger for Chrome和代码格式化插件Prettier的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 打开VSCode

1. 下载vetur插件

该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，
在这里插入图片描述

装好后点击文件->首选项->设置 ->打开设置界面，在设置界面右侧添加配置。

"emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      }

在这里插入图片描述

2. 下载eslint插件

它是一款智能错误检测插件
在这里插入图片描述

ESLint 不是安装后就可以用的，还需要一些环境和配置：

1.首先，需要全局的 ESLint , 如果没有安装可以使用CMD 输入npm install -g eslint来安装；

2.其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，

需要eslint-plugin-html这个插件。可以使用CMD输入： npm install -g eslint-plugin-html 来安装；

在这里插入图片描述

当上述两个都装好后，还需要在 vscode 中配置下 ESLint：在同vetur插件一样的地方进行配置

"eslint.validate": [
      "javascript",
       "gavesciptreact",
       "html",
       "vue"
   ],
   "eslint.options": {
       "plugins":["html"]
   },

在这里插入图片描述

3. Auto Close Tag 自动闭合HTML/XML标签

在这里插入图片描述

4. Auto Rename Tag 自动完成另一侧标签的同步修改

在这里插入图片描述

5. Debugger for Chrome

映射vscode上的断点到chrome上，方便调试
在这里插入图片描述

6. Prettier-Code formatter插件

代码格式化插件
在这里插入图片描述

2. 打开vue项目

在终端输入：npm install，先下载对应的依赖。

但是报错了！！
在这里插入图片描述
原因：此类原因是虽然在全局下安装了，但是可能vscode的终端模式是powershell模式，点击右面的+号，选择Command Prompt 模式，
我们就可以看到powershell转化为cmd执行

VSCode使用管理员身份打开！！！就可以了
在这里插入图片描述

然后输入：npm start，或者npm run dev运行项目：
在这里插入图片描述

2. 番外-使用VS Code构建VUE项目必备的几款常用插件：

1、Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样

2、Auto Close Tag 自动闭合HTML标签

3、Vscode-icons 让 vscode 资源目录加上图标

4、Vue 2 Snippets vue必备vue代码提示

5、Path Intellisense 自动路径补全、默认不带这个功能

6、Vue-color vue 语法高亮主题

解决.vue文件爆红问题：

{
“explorer.confirmDelete”: false,
//eslint插件配置
“eslint.validate”: [
“javascript”,
“gavesciptreact”,
“html”,
“vue”
],
“eslint.options”: {
“plugins”:[“html”]
},
//vetur配置
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
},
//解决.vue文件爆红问题
“files.associations”: {
“*.vue”:“html”
}
}

vue3引入Ant-design:

引入import ‘ant-design-vue/dist/antd.css‘时报错:

后来发现官方文档给的是错误的，css文件叫reset.css
改为：
import “ant-design-vue/dist/reset.css”;

Type annotations can only be used in TypeScript files

解决方法:ctrl+shipt+p 然后输入Preferences: Open User Settings或Preferences: Open Workspace Settings。选择找到settings.json文件
找到files.associations 把vue的html改成vue就不报错了