外观主题这里我分享两款主题：

• Material Theme
  

效果如图：

Material Theme

• An Old Hope Theme
  

效果如图：

An Old Hope Theme
图标

• Material Icon Theme 当然，这两款主题的文件管理器（左侧）的 icon 小图标使用的是 Material Icon Theme
  

字体及其他其他和外观相关的设置如下：
{    "editor.multiCursorModifier": "ctrlCmd",    "editor.formatOnPaste": false,    "workbench.activityBar.visible": false,    "workbench.iconTheme": "eq-material-theme-icons-darker",    "workbench.colorCustomizations": {},    "materialTheme.cache.workbench.settings": {        "themeColours": "Darker",        "accentPrevious": "Acid Lime"    },    "workbench.colorTheme": "Material Theme Darker",    "material-icon-theme.angular.iconsEnabled": true,    "material-icon-theme.folders.icons": "specific",    "editor.lineHeight": 24,    "editor.fontLigatures": true,    "editor.fontFamily": "FiraCode-Medium"}复制代码特别注意的是 "editor.lineHeight": 24, 和 "editor.fontFamily": "FiraCode-Medium" 。
"editor.lineHeight": 24, ： 设置代码的行间距，这里比默认的稍大些，就这一点小小的改变，让代码看起来清爽整洁。
"editor.fontFamily": "FiraCode-Medium" ： 设置字体，这种字体会让代码看起来更形象生动，如下

FiraCode-Medium字体
红色竖线左边是使用了 FiraCode-Medium 字体的效果，红色竖线右边是没有使用 FiraCode-Medium 字体的效果
关于 FiraCode-Medium 字体更多效果可查阅 github.com/tonsky/Fira… 地址。
代码管理格式化

• Beautify ：格式化的时候，给出格式化文本选项，如下
  

Beautify

• Prettier ：个人比较喜欢这个，看起来代码更清晰，如下
  

Prettier

当然，大家可以自定义快捷键，也可以按 ⌘ - ⇧ - P  来搜索相关命令

代码检查

• ESLint ：检查 js 语法规范，你可以使用不同的规范，如 airbnb 、standard 、google。
• TSLint ：检查 typescript 语法规范。
• Stylelint ：检查 CSS/SCSS/Less 语法规范。
• Markdownlint ：检查 markdown 语法规范。
  

自动补全以下插件点击链接可以查看gif动图，详细了解具体功能。

• Emmet ：大家应该很熟悉这个插件了（很好用），VS Code 已经内置了，很到位。
• Auto Close Tag ：自动闭合 html 等标签 （</...>）。
• Auto Rename Tag ：修改 html 标签时，自动修改闭合标签。
• Path Intellisense ：自动提示补全路径。
  

代码片段

• snippets ：搭建可以自己安装各种代码片段（vue、react、angular等），这里就不列举。
  

功能扩展以下的功能扩展插件大部分都有gif动图，可点击链接了解详细功能

• Bracket Pair Colorizer ：让代码的各种括号呈现不同的颜色。
• Code Runner ：可以在编辑器里直接运行代码，查看结果。
• Color Picker ：可以直接在编辑器里打开色板，选择各种模式的颜色。
• Document This ：可以给函数、类等自动的加上详细的注释。
• Git History ：方便的查看git版本管理的详细信息。
• Live Server ：可以一键在本地启动服务器。
• Settings Sync ：重点介绍下这个插件，如果你有两台电脑（比如，家里和公司）都使用 VS Code ，可是在公司或家里对 VS Code 安装了插件或者修改了配置，回到家或公司又要重新弄一次，这个插件就能解决问题，同步多台电脑设置。
  

只需要把配置上传到GitHub，在另一个地方下载配置即可，如下

Settings Sync

• gi ：可以给 .gitignore 文件添加各种语言忽略文件配置。
• Polacode ：可以把代码生成图片（有些地方发代码结构会乱也没有代码高亮，这时候就可以生成图片再发）。
  

编辑技巧光标

• 把光标移到文件的首部活尾部
  

⌘ - ↑ 或 ⌘ - ↓

• 把光标移动到行的首部或者尾部
  

⌘ - ← 或 ⌘ - →

• 按单词移动
  

⌥ - ← 或 ⌥ - →

• 按单词大小写分解移动光标
  

⌥ - ⌃ - ← 或 ⌥ - ⌃ - →
选择

• 选择行以上或以下全部内容
  

⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓

• 选择到行首或行尾的内容
  

⇧ - ⌘ - ← 或 ⇧ - ⌘ - →

• 按字母或单词选择
  

• ⇧ - ← 、 ⇧ - → 按字母选择
• ⇧ - ⌥ - ← 、 ⇧ - ⌥ - → 按单词选择
  

⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、 ⇧ - ⌥ - →

• 伸缩选择
  

⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →

• 选择匹配单词
  

⌘ - D 或 ⌘ - U
行

• 向上或向下移动行
  

⌥ - ↑ 或 ⌥ - ↓

• 复制或删除行
  

⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K

• 多行合并成一行
  

⌘ - J

• 缩进或伸缩行
  

⌘ - [ 或 ⌘ - ]

• 在当前行之上或下插入行
  

⌘ - ↩ 或 ⌘ - ⇧ - ↩
多行

• 鼠标点击，多行编辑
  

按 ⌘ 选择编辑点，按 ⎋ 退出多行编辑

⌘

• 使用快捷键多行编辑
  

⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑

• 在所选择的行的结尾插入编辑点
  

⇧ - ⌥ - I

• 选择栏位
  

按 ⇧ - ⌘ 再选择栏位

⇧ - ⌘
高级

• 查看类或方法的定义
  

• 按 ⌥ 点击，可以在新页面查看
• 按 ⇧ - ⌥ - ⌘ 点击，可以在新组查看
• 按 ⇧ - F12 点击，可以在当前页面查看
  

查看定义

• 折叠代码
  

⌥ - ⌘ - ] 或 ⌥ - ⌘ - [

• 去掉选择行的尾部空格
  

⌘ - K 、 ⌘ - X

• 定位到指定行号
  

⌃ - G

• 在文件里查找类或方法
  

@
最后，如果记不住这些快捷键，可以按 ⌘ - K 、 ⌘ - S 搜索对应快捷键绑定

搜索快捷键

【转载】
作者：子木_lsy
链接：https://juejin.im/post/5bc55606e51d450e853075c9