vscode学习（一）之vscode开发中绝对让你惊艳的插件！！！(个人在用) 持续更新。。。。

识别模版引擎

• Apache Velocity ：识别Velocity(vm)

• Art Template Helper：识别artTemplate

点击路径跳转

• Laravel goto view

在浏览器中查看

• View In Browser

外观配置

• 配色：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 能够让你通过配置项来修改参考线的颜色、样式、缩进空白的背景色等，如果你愿意折腾，甚至能够配置出类似 Indent Rainbow 那样风格的参考线。下图是我使

用 Solarized Dark 主题时参考线的配置：

{
    "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",
}

• TODO Highlight，维护时间稍长的代码仓库免不了会有各种 TODO、FIXME、HACK 之类的标记，TODO Highlight 能够帮我们把这些关键词高亮出来，在你翻阅代码时非常醒目，就像是在大声提醒你尽快把他解决掉。支持自定义配置需要高亮的关键词，实际使用比较坑的地方是，TODO、FIXME 之类的后面必须加上冒号，否则无法高亮。

• Bracket Pair Colorizer给嵌套的各种括号加上不同的颜色。

• JavaScript Atom Grammar：它用Atom编辑器里的JavaScript语法高亮替换VS Code原来的。

• Babel JavaScript：支持ES201X、React、FlowType以及GraphQL的语法高亮。

• DotENV：支持.env文件语法高亮，在你使用Node时会非常有用。

• Highlight Matching Tag，高亮对应的 HTML 标签和标识出对应的各种括号的功能。

风格检查

• ESLint：插件式架构，有多种主流的编码风格规则集可供选择，典型的有 Airbnb、Google 等，你甚至可以攒个自己的，按下不表，它的规则在.eslintrc.json里配置；

• StyleLint，同样插件式架构的样式检查工具，不过我在配置其检查 react-native 中 styled-components 组件样式时确实费了不小的功夫，可以单独写篇文章了；

• TSLint：TypeScript 目前不是我的主要编程语言，但也早早的准备好了；

• MarkdownLint：Markdown 如果不合法，可能在某些场合导致解析器异常，因为 Markdown 有好几套标准，在不同标准间部分语法支持可能是不兼容的；

除上面列的 Lint 工具之外，非常值得拥有的还有 EditorConfig 插件，几乎所有主流 IDE 都有支持，我们可以通过简单的配置文件在不同团队成员、不同 IDE、不同平台下约定好文件的缩进方式、编码格式，避免出现混乱，下面是我常用的配置：

[*]
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复制代码

有了风格检查，自然就会产生按配置好的风格规则做文件格式化的需求，格式化的工具试用了好多，现在还在用的如下：

• Prettier，实际上已经是代码格式化的工具标准，支持格式化几乎所有的前端代码，并且类似于 EditorConfig 支持用文件来配置格式规则；

• Vetur，格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方维护者说没有比较好的工具支持，默认是不格式化的；

• JSHint：基于JSHint的代码检测插件。在项目跟目录下使用.jshintrc文件作为其配置。

• JavaScript Standard Style：零配置和严格规则的代码检测，强制使用StandardJS规则。

代码格式化插件

• 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；

自动补全

• Auto Close Tag，适用于 JSX、Vue、HTML，在打开标签并且键入 </ 的时候，能自动补全要闭合的标签；

• Auto Rename Tag，适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；

• Path Intellisense，文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成；

• NPM Intellisense，NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成；

• IntelliSense for CSS class names/IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS，CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示；

• Emmet，以前叫做 Zen Coding，我发现后，也是爱不释手，可以把类 CSS 选择符的字符串展开成 HTML 标签，VSCode 已经内置，官方介绍文档参见，你需要做的就是熟悉他的语法，并勤加练习；

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

• Local History ：个人感觉很有用 本地代码的一个保存日志，在没有git,svn，或者很长时间没有提交过代码的情况下，感觉挺实用，再也不怕代码回滚。

　  

• Git History
  

　  

　　功能：

1. 查看和搜索历史

2. 查看一个或所有分支的提交历史

3. 查看一个文件的提交历史

4. 查看一个文件一行代码的提交历史

5. 查看一个作者的提交历史

6. 比较分支

7. 比较提交

8. 跨提交比较分支

　　使用：

　　比较一个分支的当前提交和前一个提交

　　比较一个分支的当前提交和master分支的最后一个提交

• 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 代码。