前端开发工具VScode 使用说明及技巧&插件推荐
前端开发工具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 文件，用法看图：
8、Regex Previewer
实时预览正则表达式的效果。
