VS Code：让你工做效率翻倍的23个插件和23个编辑技巧

总结了一些平时经常使用且好用的 VS Code 的插件和编辑技巧分享出来。html

文章详情可查阅个人博客：lishaoy.net ，欢迎你们访问。vue

外观

主题

这里我分享两款主题：react

Material Theme

效果如图：git

An Old Hope Theme

效果如图：github

图标

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

字体及其余

其余和外观相关的设置以下：typescript

{
    "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" 。npm

"editor.lineHeight": 24, ：设置代码的行间距，这里比默认的稍大些，就这一点小小的改变，让代码看起来清爽整洁。json

"editor.fontFamily": "FiraCode-Medium" ：设置字体，这种字体会让代码看起来更形象生动，以下服务器

红色竖线左边是使用了 FiraCode-Medium 字体的效果，红色竖线右边是没有使用 FiraCode-Medium 字体的效果markdown

关于 FiraCode-Medium 字体更多效果可查阅 github.com/tonsky/Fira… 地址。

代码管理

格式化

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

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 安装了插件或者修改了配置，回到家或公司又要从新弄一次，这个插件就能解决问题，同步多台电脑设置。