VScode-最常用的插件 - - 必备

常用插件：

如果喜欢中文就安装中文，如果不喜欢就自动忽略.

chinese

 

一、Open-In-Browser

这个是必须安装的 打开浏览器看效果使用的 快捷键是alt+b

二、Quokka

Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。

三、CSS Peek

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

四、HTML Boilerplate

通过使用 HTML模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。 --如果不安装这个插件也可以直接使用内置的 !+tab

五、Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！

快捷键是 shift+alt+f

六、Color Info

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

七、TODO Highlight

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

八、Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

九、Minify

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

十、Themes

当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：

 

十一、HTML Snippets

超级使用且初级的H5代码片段以及提示

十二、HTML CSS Support

让HTML标签上写class智能提示当前项目所支持的样式

十三、JQuery Code Snippets

jquery提示工具

 

十四、Path Intellisense 

自动路径补全、默认不带这个功能

十五、Npm Intellisense

require 时的包提示

 

十六、Document this 

Js的注释模板

十七、ESlint

ESlint接管原声js提示，可以自定制体会规则。这个比较高玩

十八、Project Manager

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

十九、Typings Installer

安装vscode 的代码提示依赖库，基于typtings的，比如提示angular或者jQuery只能感知、至于什么是typtings自己去百度。

二十、Bootstrap 4 Sinnpet

常用bootstrap的可以下

二十一、Auto Rename Tag

修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

 

二十二、JavaScript Atom Grammar

使用atom风格的语法高亮、对于习惯浏览atom风格代码高亮的人实用。 

这个看个人需求吧。不是一定需要下载的

二十三、code runner

这个是好东西，且用且珍惜。

二十四、Easy less

使用less的盆友一定要安装这个，不要安装错了。

 

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

二十六、Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

二十七、Image preview

悬停时显示图像预览

 

如果需要开发小程序 可以安装一下这些插件， 

但是我还是建议大家去使用HBuilder...

二十八 koroFileheader 

自动生成文件注释

效果如下图：

可以自定义设置 如下：

1-进入设置（setting）

2-在搜索框输入 fileheader

3-找到Fileheader: Custom Made -> 点开 settings.json  自己看清楚名字

4-如下图：

复制下面代码 记得把 "Autor": "改成自己的名字",

"fileheader.customMade": {
        // 此处为头部注释
        "Autor": "XiaoMin",
        "Description": "project ...",
        "Version": "2.0",
        "Date": "Do not edit",
        "LastEditors": "Seven",
        "LastEditTime": "Do not edit",
        "FilePath":""
    },

 "fileheader.configObj": {
        // 此处为函数注释
        "description":"",
        "param": "",
        "return": "",
        "author":"XiaoMin"
    }

 

二十八 vscode代码片段

https://www.cnblogs.com/susu-yee/p/11533546.html

二十九 自定义代码颜色  下面是代码 自行复制

   "editor.tokenColorCustomizations": {
        "comments": "#82e0aa", // 注释
        "keywords": "#0a0", // 关键字
        "variables": "#EAC863", // 变量名
        "strings": "#e2d75dbd", // 字符串
        "functions": "#EF3D26", // 函数名
        "numbers": "#AE81FF" // 数字
      },
       // 选中高亮的颜色
         "workbench.colorCustomizations": {
         "editor.selectionBackground": "#aa0000"
      }