前端开发工具Visual Studio Code（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 文件，用法看图：

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

实时预览正则表达式的效果。