• 配色：Solarized Dark/Darcula Theme/Atom One Dark Theme

• 图标：VSCode Great Icons/Material Icon Theme/vscode-icon，给不同类型的文件配置不同的图标，非常直观；

• 字体：Fira Code，自从发现并开始使用 Fira Code，我就再也没多看自其它字体一眼，字体如果比较优雅，尤其是对数学运算符的处理，写代码时你真的会感觉在写诗，哈哈，Fira Code 的安装过程稍微复杂点，但是效果绝对是值当的；

配色、图标、字体以及其他外观配置项具体如下（注意，如果不安装上述插件，部分配置项如果直接使用是无效的）：

{"editor.cursorStyle": "block","editor.fontFamily": "Fira Code","editor.fontLigatures": true, "editor.fontSize": 16, "editor.lineHeight": 24, "editor.lineNumbers": "on", "editor.minimap.enabled": false, "editor.renderIndentGuides": false, "editor.rulers": [120], "workbench.colorTheme": "Solarized Dark", "workbench.iconTheme": "vscode-great-icons" }

外观增强

• Guides 缩进参考

{"guides.normal.color.dark": "rgba(91, 91, 91, 0.6)","guides.normal.color.light": "rgba(220, 220, 220, 0.7)","guides.active.color.dark": "rgba(210, 110, 210, 0.6)", "guides.active.color.light": "rgba(200, 100, 100, 0.7)", "guides.active.style": "dashed", "guides.normal.style": "dashed", "guides.stack.style": "dashed", }

风格检查

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false insert_final_newline = true indent_style = space indent_size = 2  [{*.yml,*.json}] indent_style = space indent_size = 2复制代码

代码格式化插件

• Beatufy：一个jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML。可通过.jsbeautifyrc文件自定义。它是最流行的格式化工具，目前有230万的下载量。

• Prettier Code Formatter：利用Prettier的支持JavaScript、TypeScript和CSS的插件，目前有超过150万的下载量。

• JS Refactor：提供许多重构JavaScript代码的实用方法和操作，例如抽取变量和方法，把现有代码转为使用箭头函数和模板字符串的等价形式，导出函数等。

• JavaScript Booster：一款了不起的代码重构工具。拥有需要代码操作，比如把var转为const或者let，去除多余的else语句，合并声明和初始化。其灵感大量源于WebStorm的启发。源码：vscode-javascript-booster。

代码片段

英文叫做 Snippets，市面上主流的编辑器也都支持，其基本思想就是把常见的代码模式抽出来，通过 2~3 个键就能展开 N 行代码，代码片段的积累一方面是根据个人习惯，另一方面是学习社区里

面积累出来的好的编码模式，如果觉得不适合你，可以改（找个现有的插件依葫芦画瓢），我常用的代码片段插件如下：

• HTML Snippets，各种 HTML 标签片段，如果你 Emmet 玩的熟，完全可以忽略这个；

• Javascript (ES6) Code Snippets，常用的类声明、ES 模块声明、CMD 模块导入等，支持的缩写不下 20 种；

• Javascript Patterns Snippets，常见的编码模式，比如 IIFE；

Node插件

• Node.js Modules IntelliSense：提供JavaScript和TypeScript导入声明时的自动补全。源码：vscode-node-module-intellisense。

• View Node Package：利用此插件可快速查看Node包源码，让你直接在VS Code中打开Node包的代码库或文档。

• Search node_modules：通常node_modules文件夹不在默认的搜索范围内，这个插件允许你搜索它。源码：vscode-search-node-modules。

• Import Cost：显示导入的包的大小。源码：import-cost。

功能增强

在效率提升方面除了上面的代码片段、自动补全之外，我还安装了下面几个插件，方便快速的浏览和理解代码，并且在不同项目之间切换。

• Color Highlight/colorize，识别代码中的颜色，包括各种颜色格式；

• Color Info，这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了

• Bracket Pair Colorizer，识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情况下却有些力不从心；

• fileheader，顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

• Project Manager，项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢；

• Git Lens， 把 VSCode 结合 Git 的使用体验优化到了极致，能让我们在不离开编辑器，不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。官方的介绍也是非常的牛叉；

• Code Outline， 能在单独窗口中列出当前源代码中大额各种符号，比如变量名、类名、方法名等，并支持快速跳转，有点类似于Vim里面大额ctags，翻看你老代码、开源项目代码时非常有用；

• Document This， 能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等；

• jQuery Code Snippets，jquery 重度患者必须品

• TODO HightLight，这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。在vscode命令行中输入to do使用

• Minify，这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和html-minifier，与 JavaScript、CSS 和HTML 协同工作。

• SCSS IntelliSense Preview， SCSS智能提醒，配置强大

• Version Lens，可以及时看到package.json内部版本的变动，很实用

• Output Colorizer ，可以终端日志输出着色，实用

• Enki Theme (Material Design Inspired)，当前用的代码高亮，个人感觉很赞

• SVG Viewer，此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI模式的选项

• Embrace ，快速的在选中代码两边添加各种引号、括号，不用来回移动光标，不过还是没有 Vim 中的 Surrounding 插件强大；

• CSS Peek，使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

• ECMAScript Quotes Transformer，方便在字符串和变量混搭模式（String Concat）的代码和字符串模板（Template Literals）模式间来回转换，省去手动的移动光标、修改引号等操作；

• Code Spell Checker ，强烈推荐，对大部分非英语母语又不想写出四不像变量名的程序员来说，正确识记拼写各种单词还是有不小的挑战，比模棱两可时需要去查在线词典不同的是，这款插件能实时的识别单词拼写是否有误，并给出提示，不少 bug 都是因为拼写错误导致的。

• Live Server，以前使用 Live Server 都是 n p mNode 包管理器 下载的，而且使用的时候需要在控制台手动敲启动代码。还好 VSCode 有了相应的插件，现在只需要鼠标点几下就行了。这个插件基本功能是预览网页，但它的特点是：会将网页在本地服务器上预览，最重要的是代码保存之后，浏览器自动刷新，有多方便不用我说了吧？

　　  使用方法：

1、在 HTML 文件上右键

2、打开 HTML 文件，点击编辑器右下角 Go Live 按钮

 

• CSScomb，看名字应该可以联想到它的功能了吧？没错，正如其名，一把梳理 CSS 属性顺序的 “梳子”。CSS 属性书写顺序非常重要，一个合格的前端er 一定会有他遵循的 CSS 书写顺序规则。至于 CSS 属性书写顺序，这里我

　　   推荐腾讯 AollyTeam，团队的规范：http://alloyteam.github.io/CodeGuide/#css-declaration-order

下面简单说下这个插件怎么用。按照插件的文档说明：

在项目的根目录下创建一个名为：.csscomb.json / csscomb.json / .csscomb.js / csscomb.js 的文件，然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig

字段。至于添加的配置项，CSScomb提供了示例配置文件：https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json

其中的 sort-order 就是 CSS 属性书写顺序，可以按照自己遵循的规范设置，所以我直接替换成了腾讯的。

这个配置文件里面各个字段的作用可以戳这里查看：https://github.com/csscomb/csscomb.js/blob/master/doc/options.md

放一个效果图：

下面的 content 属性放在第一个是我的个人习惯，其他的顺序都和 AollyTeam 的规范保持一致。

• carbon-now-sh，将代码分享为图片（图片的格式可以为 png 和 svg），最最最重要的是： 图片逼格敲高 ↓↓↓

• CodeIf，CodeIf 是一个用来给变量命名的网站，你只要输入你想起的中文名，它就会给你提供很多建议的命名，可能很多人知道有 CodeIf 这么个网站，其实 VS Code 上有插件哦，是不是

　　   很神奇 :

• Turbo Console Log，快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。

  

简单说下这个插件要用到的快捷键:

• ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log

• alt + shift + c 注释所有 console.log

• alt + shift + u 启用所有 console.log

• alt + shift + d 删除所有 console.log

• LeetCode，看到这个名字是不是很熟悉？？？没错，它就是有名的刷题网站 LeetCode 啦。今天我是才知道 VS Code 中有插件，果断入手 (๑•̀ㅂ•́)و✧使用很简单输入用户名和密码就行了，看图：

是不是想着自己刷完 LeetCode，拿到大厂 offer 的样子已经激动地搓手手了呢 ？那就赶紧入手吧！

• Regex Previewer，实时预览正则表达式的效果。

• css-auto-prefix，自动添加 CSS 私有前缀。

• change-case，转换命名风格。

• vscode-json处理 JSON 文件，用法看图：

• HTML Boilerplate，虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式，但这个有另外的用处，看图：

• Settings Sync，在不同电脑间同步你的插件。安装了这么多插件，换了台电脑又得重新安装，所以，这个插件不考虑入手吗？

这里简述下这个插件怎么用:首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id

Token 就是你把插件上传到 github 上时, 让你保存的那段字符，Gist id 在你上传插件的那台电脑上保存着。

ps: 如果你没有保存Token，也不知道Gist id，不要慌, 可以这样获取:

在你上传 Sync 设置的 VSCode 里，按 F1, 然后输入 Sync，选择 Sync: 高级选项:

然后选择:

这样就会进入一个压缩的文件，然后鼠标右键整理一下文档格式如下:

这样就能看见你的 Token 了。

接下来就是获取你的 Gist id:

在 VSCode 里，依次打开: 文件 -> 首选项 -> 设置，然后输入 Sync 进行搜索:

这样就获取到你的 Gist id。

知道了 Token 和 Gist id，就能在不同设备间同步你的 VSCode 插件。

(当然，你也可以把 Token 和 Gist id 分享给别人，这样别人就能一键下载你用的 VSCode 插件!)

彩蛋2：
我的 Token 和 Gist id 分别是：
Token:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id:
ce3ff9d53df48d738f1e9e86fff55a8c

里面有我用的所有 VSCode 插件 : )

• ES7 React/Redux/GraphQL/React-Native snippets，React/Redux/GraphQL/React-Native 代码快捷生成。

• px to rem，像素转 rem。

• Minify，压缩 HTML、CSS、JS 代码。