VS CODE

开篇

为什么选择vscode,之前作者有使用过webstorm，说说使用webstorm的感受，首先webstorm是需要收费的，而且webstorm有很多内置插件，电脑配置不够往往就是卡顿；相比之下，vscode是开源的，而且它轻量级，对cpu友好，简单说就是电脑差也不会卡，而且需要什么功能就选择什么插件，vscode插件社区很活跃。webstorm能做到的，vscode也能做到，所以赶紧下载vscode吧。

1.安装并设置成中文环境

先在界面的左侧的扩展extensions的输入框中输入chinese,安装；

Ctrl+shift+P,打开命令行，输入display,选择已经安装的语言包简体中文。

2.常见插件安装（界面的左侧--“扩展”）

2.1更新网页

view-in-browser：用于打开网页；

2.2emmet语法

请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

“首选项”-->"设置"，输入框内搜索emmet,在setting.json中输入“emmet.triggerExpansionOnTab”：true;

可以发现已经可以使用emmet语法了。

2.3自动完成另一侧标签的同步修改

Auto Rename Tag

2.4自动闭合HTML/XML标签

Auto Close Tag

2.5括号高亮

Bracket Pair Colorizer —— 括号高亮

2.6格式化

Beautify —— 格式化

F1-->bea,確定，當前文件就被格式化。

2.7guides

显示代码对齐辅助线

2.8code spell checker

代码拼写检查器

2.8ES6智能语法提示

JavaScript(ES6) code snippets

2.10自动路劲补全

Path Intellisense

2.11映射vscode上的断点到chrome上，方便调试

Debugger for Chrome

2.12eslint

代码检查工具

2.13生成注释（不需要插件）

快捷键：ctrl + alt + i 生成头部注释

快捷键：ctrl + alt + t 生成函数注释

2.14code Runner

执行代码

2.15 Live Sass

编译Sass

2.15 对函数描述的注释

document this

2.16 debugger for chrome

直接进行调试js文件

https://blog.csdn.net/weixin_40965293/article/details/80525317

2.17 vue

Vetur:Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

2.18小程序

minapp :微信小程序标签和属性的智能补全

wechat-snippet：代码片段自动完成

wxml:格式化wxml代码和高亮显示。

vscode-icons:将vscode中的目录样式变成微信开发者工具一样。

3.新建项目

步骤1：在任意地方新建文件夹;

步骤2：使用vs“打开文件”，选择目标文件夹，利用鼠标上移后出现的图标，新建一个拓展名为html的文件;

步骤3：在html文件中使用 ！ +tab快速生成文件

步骤4：使用插件view-in-browser打开

（以下是其他用处）
4.markdown

5.vue项目

6.git

vscode

原文：https://www.cnblogs.com/listenMao/p/13132415.html