前端开发工具Visual Studio Code.
工欲善其事，必先利其器。只有熟练使用一款开发工具，才能优雅高效地编写代码。前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。网上有很多有关vscode的配置以及使用博客很多很多，不过只要看本文这么一篇就足够。
VScode下载安装
vscode属于开源软件，可以直接官网下载对应版本。
下载好直接点击exe文件打开软件
vscode编辑器界面
VScode中文设置
vscode默认的语言是英文，不过简单几步就可以将vscode设置成中文。
按快捷键“Ctrl+Shift+P”。
在“vscode”顶部会出现一个搜索框。
输入“configure language”，然后回车。
“vscode”里面就会打开一个语言配置文件。
将“en-us”修改成“zh-cn”。
按“Ctrl+S”保存设置。
关闭“vscode”，再次打开就可以看到中文界面了。
VScode用户设置
打开设置
文件== 》 首选项 ==》设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。
常用配置项：
（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;
（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;
（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；
禁用自动更新
文件 > 首选项 > 设置（macOS：代码 > 首选项 > 设置，搜索update mode并将设置更改为none。
VScode常用快捷键
高效的使用vscode,记住一些常用的快捷键是必不可少的
ps：windows的 Ctrl，mac下换成Command就行了
编辑器操作
通过Ctrl + ` 可以打开或关闭终端
Ctrl+P 快速打开最近打开的文件
Ctrl+Shift+N 打开新的编辑器窗口
Ctrl+Shift+W 关闭编辑器
词的操作
选中一个词：ctrl+ d
ctrl+ f ：搜索
ctrl+ alt + f： 替换
ctrl+ shift + f：在项目内搜索
行的操作
重开一行：光标在行尾的话，回车即可；不在行尾，ctrl+ enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
删除一行：光标没有选择内容时，ctrl+ x 剪切一行；ctrl +shift + k 直接删除一行
移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行
ctrl + z 回退
段落操作
Home 光标跳转到行头
End 光标跳转到行尾
Ctrl + Home 跳转到页头
Ctrl + End 跳转到页尾
Ctrl + Shift + [ 折叠区域代码
Ctrl + Shift + ] 展开区域代码
Ctrl + / 添加或取消行注释
Shift + Alt +A 块区域注释
VScode插件安装
在输入框中输入想要安装的插件名称，点击安装即可。安装后没有效果，可以重启vscode
1、View In Browser
在浏览器里预览网页必备。运行html文件
2、open in browser
通过快捷键快速浏览器中打开当前页面
3、CSS Tree
给选中的HTML/JSX生成css树
4、Auto Rename Tag
自动修改匹配的 HTML 标签。
5、Path Intellisense
智能路径提示，可以在你输入文件路径时智能提示。
6、CSS Peek
定位 CSS 类名。
7、vscode-json
处理 JSON 文件，用法看图：
https://vdn1.vzuu.com/SD/cd9d9236-2357-11eb-8654-d2d78b7a1889.mp4?disable_local_cache=1&auth_key=1621426246-0-0-842154ca8c0e4ccd031d0758348df660&f=mp4&bu=pico&expiration=1621426246&v=hw
8、Regex Previewer
实时预览正则表达式的效果。
