vscode安装和使用前端工具

1、下载网址：https://visualstudio.microsoft.com/zh-hans/downloads/
2.安装程序如下
3.运行安装程序

4.接收协议

5.可选择修改默认安装路径

6.快捷方式设置

7.其他的设置

8.安装

9.等待完成

10.安装完成

VScode插件推荐

Auto Close Tag
自动添加HTML / XML关闭标签（必备）

Auto Rename Tag
自动重命名配对的HTML / XML标签(必备)

Beautify
格式化javascript，JSON，CSS，Sass，和HTML

Bootstrap 4 & Font awesome snippets
包含Bootstrap 4＆Font awesome 的代码片段

Bracket Pair Colorizer
颜色识别匹配括号

Class autocomplete for HTML
智能提示HTML class =“”属性（必备）

Code Runner
非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：

点击这个按钮就可以运行你的文件了（必备）

css peek
能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）
使用方法：将光标放在class里面的属性，右击

Dash
查文档必备，搭配 dash（不过似乎只有 mac 版）😁
快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档

Document This
添加注释块
设置：

“docthis.includeAuthorTag”: true,//出现@Author
“docthis.includeDescriptionTag”: true,//出现@Description
“docthis.authorName”: “shenzekun”,//作者名字
快捷键： 按两次Ctrl+alt+d

HTML CSS Support
在 html 标签上写class 智能提示当前项目所支持的样式（必备）
HTML Snippets
html 代码片段（必备）
htmlhint
html代码检测

vscode 快速生成html

第一步：在空文档中输入!

第二步：按下tab键。

VSCode中代码在浏览器中打开及实时刷新

实时刷新方法一：
在项目目录下运行命令：

browser-sync start --server --files “/*.css,/.html,**/.js”
实施刷新方法二：
装Live Server Preview插件，点击F1。

修改默认浏览器

选择文件—首选项—设置

输入open-in-browser.default，点击笔图标进行编辑

你会看到右侧多了工作区设置，比如你想默认谷歌打开，那就设置默认浏览器为chrome，如果是火狐，就设置firefox。设置完毕ctrl+s进行保存，就可了