1.安装vscode
https://code.visualstudio.com/
2.安装开发vue所需插件:
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中
代码,两个Ctrl需要同时按着)
![](https://img-blog.csdnimg.cn/direct/e188dc265b3449108997fdcd815de75f.png)
EsLint —— 语法纠错
Auto Close Tag —— 自动闭合HTML/XML标签
![](https://img-blog.csdnimg.cn/direct/93654511ef3d44bba04a9a6f5503fdb6.png)
Auto Rename Tag —— 自动完成另一侧标签的同步修改
![](https://img-blog.csdnimg.cn/direct/e08bda1c2a794483a57107fe1b64c53b.png)
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外
还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的
时间
![](https://img-blog.csdnimg.cn/direct/7b528017d2cf4ff2b91af6bd8ed015eb.png)
Path Intellisense —— 自动路径补全
![](https://img-blog.csdnimg.cn/direct/8e8d38b84eba492db12b594f0c2b5aab.png)
HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的
样式
![](https://img-blog.csdnimg.cn/direct/659e9e6c966b4f4380b00441fcb2131d.png)
Bracket Pair Colorizer——给括号加上不同的颜色,便于区分不同的区块,使
用者可以定义不同括号类型和不同颜色
![](https://img-blog.csdnimg.cn/direct/96e4667c65144e8a9eb06f1db0d48c01.png)
open in browser——直接右键项目单击启动
![](https://img-blog.csdnimg.cn/direct/1d1bce5fd3c847e2b2f5ef64b83c6964.png)
chinese ——中文汉化
![](https://img-blog.csdnimg.cn/direct/94bdc314159d44d2bfdfbae14c1e10d2.png)
3.安装开发nodejs所需环境
下载node并安装: https://nodejs.org/dist/v12.14.0/node
v12.14.0-x64.msi ;
检测是否安装成功
![](https://img-blog.csdnimg.cn/direct/9d670ca7ebca468a94b8860d935db9e6.png)