专业网站建设公司

VScode插件非常多，从提升写代码效率方面看，可以分为三类

第一种是每天写代码几乎都会用到的，或者不安装它会感觉缺点什么，时间久了逐渐变得烦躁，这类叫做必装插件；

第二种是十天半个月能用上一次的，或者没有它不影响写代码，但有了它能提升”幸福感“的，这类叫做常用插件；

第三种是偶尔，或特殊需求能用上的，叫做插件。

必装插件有下面这些：

1、Chinese (Simplified) (简体中文)

功能介绍：VScode下载后是英文版，需要变成中文的，不必多介绍了。

安装方法：在扩展商店中，搜索”Chinese“，找到”Chinese (Simplified) (简体中文)“，点击”安装“即可。

2、open in browser

功能介绍：可以直接在vscode中打开浏览器，预览页面效果。不需要再单独去项目文件中打开了。

安装方法：在扩展商店中，搜索”browser”，找到“open in browser”，点击“安装”即可。

使用方法：在html文件中，右键，点击“Open In Default Browser”。

3、Auto Rename Tag

功能介绍：自动补全标签。修改起始标签时，结束标签也跟着修改。虽然也可以通过选中某个标签，按F2修改也能实现。但相对来说，还是插件更直接更简单。

安装方法：在扩展商店中，搜索“auto”，找到“Auto Rename Tag”，点击“安装”即可。

使用方法：选中目标标签，直接修改即可。如图，把无序列表ul，改成有序列表ol。

4、node.js

功能介绍：用VScode编辑js文件时，查看输出效果，需要在浏览器中打开查看。安装node环境后，可以直接在VScode中查看效果。

安装方法：

1、到node中文官网 https://nodejs.org/zh-cn/ 下载。

2、双击node安装，一直next即可。到如图这一步的时候，有人犹豫要不要勾选，它的意思是“自动安装必要的工具”，建议勾选。

3、安装完成后，测试下。“功能键+R”打开运行，输入“cmd”，如下图，在工作台中输入“node -v”，输出版本号即安装成功。

4、安装“code runner”插件。在商店中搜索“runner”，找到“Code Runner”，点击“安装”即可。

使用方法：右键选择“Run Code”即可查看js输出结果。使用过程中有疑问见：VScode中node环境的基本设置和常见问题

五、 Vue - Official

功能介绍：当我们第一次打开后缀名为.vue的文件时，代码是没有着色的，不利于阅读。安装Vue - Official可以解决该问题。

安装方法：当我们第一次打开后缀名为.vue的文件时，右下角会弹出是否为该文件安装“Vue - Official”扩展，点击“安装”，立刻就有代码着色，不需要重启。