VS Code是一款逐渐火热的编辑器。它的特点免费、开源、多平台，以及集成git，代码调试，插件丰富等有点，被大家逐渐熟知和认可。
VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。

配置中文界面

安装的VSCode软件默认使用的是英文语言环境，如需要改成中文，可在扩展中安装中文语言包，安装后重启软件即可。

自动保存

File -> AutoSave(中文界面下“文件”->“自动保存”) 或者 Ctrl+Shift+P，输入 auto

前端常用插件

Auto Close Tag

自动闭合HTML/XML标签

Auto Rename Tag

自动重命名配对的HTML / XML标签

HTML Snippets

智能提示HTML标签，以及标签含义

HTML CSS Support

CSS 自动补齐

HTML Boilerplate

提供生成标准HTML样板代码。在html文件中输入!+Tab即可生成HTML样板代码

HTMLHint

对 HTML 代码文件进行静态代码检查,从而提高 HTML 代码编写的规范和质量

JavaScript(ES6) code snippets

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

Beautify

格式化 HTML,JavaScript ,css

Prettier

格式化JavaScript / TypeScript / CSS

Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

Css Peek

能在源代码中的字符串中找到对应的css（类和ID）。显示在那个css文件里，还有在第几行。

Csscomb

css 、less、sass 的代码排序、格式化。

Path Intellisense

文件路径提示。

open in browser

支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

Debugger for Chrome

js调试的插件，前端项目在Chrome中运行起来之后，可以直接在VSCode中打断点、查看输出、查看控制台，详细配置见插件说明。

调试方法戳这

ESLint

检查Javascript编程时的语法错误。

Color-Highlight

在编辑器中高亮显示颜色。

Color Picker

代码的颜色选择器。

Color Info

在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息

Project Manager

在多个项目之前快速切换的工具

filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

注释

Document This

为js文件生成文档的代码注释。将光标放置于function上面，中选 点鼠标右键，在菜单Document This，快捷键是 Ctrl+Alt+D 加 Ctrl+Alt+D。

vscode-fileheader

给js文件生成头部注释的插件,每次修改js文件之后会自动修改的时间和作者
快捷键： ctrl+alt+i

VS Code CSS Comments

css代码注释。

视图

vscode-icons

文件图标,让 vscode 资源树目录加上图标

Guides

代码的标签对齐线。

功能扩展

Bookmarks

Bookmarks 是一个书签工具，你是否已经厌倦了无休止地滚动代码，或者使用“Ctrl+F”来找到你想要修改的那行代码？这个 VSCode 书签拓展工具能够让你快速平顺的创建和跳转书签。

jQuery Code Snippets

jQuery代码智能提示

Lodash

lodash 函数提示。

Bootstrap 4 & Font awesome snippets

bootstrap4和font awesome 快速引用和代码生成。

Npm Intellisense

require 时的包提示

Import Cost

显示导入的包的大小

GitLens

方便查看git日志，git重度使用者必备

Settings Sync

编辑器设置同步，包括插件，配置等。

Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

markdownlint (推荐)

markdown语法纠错

Vue插件

Vetur

语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

VueHelper

vue代码提示

常用快捷键

显示所有命令： Ctrl+shift+P或F1,弹出命令行
转到文件： Ctrl+P
开始调试：F5
切换终端：Ctrl + `

查找替换

查找: Ctrl+F
查找替换: Ctrl+H
在文件中查找：Ctrl+shift+F
在文件中查找替换：Ctrl+shift+H

编辑器与窗口管理

新建文件: Ctrl+N
文件之间切换: Ctrl+Tab
打开一个新的VS Code编辑器: Ctrl+Shift+N
关闭当前窗口: Ctrl+W
关闭当前的VS Code编辑器: Ctrl+Shift+W
切出一个新的编辑器窗口（最多3个): Ctrl+
切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3
全屏显示(再次按则恢复): F11
放大或缩小(以编辑器左上角为基准): Ctrl +/-
侧边栏显示或隐藏： Ctrl+B
显示资源管理器(光标切到侧边栏中才有效): Ctrl+Shift+E
显示搜索(光标切到侧边栏中才有效): Ctrl+Shift+F
显示(光标切到侧边栏中才有效): Git Ctrl+Shift+G
显示 Debug: Ctrl+Shift+D
显示 Output: Ctrl+Shift+U

代码编辑

跳转到行数，也可以 Ctrl+G 直接进入
代码行向左或向右缩进: Ctrl+[ 、 Ctrl+]
复制或剪切当前行/当前选中内容: Ctrl+C 、 Ctrl+V
代码格式化: Shift+Alt+F
向上或向下移动一行: Alt+Up 或 Alt+Down
向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行: Ctrl+Enter
在当前行上方插入一行: Ctrl+Shift+Enter
手动保存: Ctrl+S
撤销上一步操作: Ctrl+Z

光标

光标移动到行首: Home
光标移动到行尾: End
光标移动到文件结尾: Ctrl+End
光标移动到文件开头: Ctrl+Home
移动到光标所在标识符定义处: F12
查看光标所在标识符定义处缩略图(只看一眼而不跳转过去): Alt+F12
选择从光标到行尾的内容: Shift+End
选择从光标到行首的内容： Shift+Home
删除光标右侧的所有内容(当前行): Ctrl+Delete
扩展/缩小选取范围： Shift+Alt+Right 和 Shift+Alt+Left
多行编辑(列编辑): Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up
同时选中所有匹配编辑(与当前行或选定内容匹配): Ctrl+Shift+L
下一个匹配的也被选中: Ctrl+D
回退上一个光标操作: Ctrl+U

重构代码

找到所有的引用: Shift+F12
同时修改本文件中所有匹配的: Ctrl+F2
跳转到下一个 Error 或 Warning: 当有多个错误时可以按 F8 逐个跳转

参考资料：
https://blog.****.net/jiandan1127/article/details/85957003