vsCode常用插件

一.vue专用。

vetur  目前比较好的Vue语法高亮，语法高亮、智能感知、Emmet等。

Vue Peek  — 查找vue组件文件

Vue 2 Snippets  Vue2 片段补全工具

VueHelper  Vue2代码段（包括Vue2 api、vue-router2、vuex2）

VueHelper 新建vue模板配置方法：

第一步：新建模板并保存

左上角 file --> Preferences --> User Snippets --> 输入vue，选择vue.json -->复制 第三步中的模板内容中内容保存

第二步：添加配置，让vscode允许自定义的代码片段提示出来（左上角 file -> Preferences->Settings->输入json->点击Edit  in settings.json->添加如下配置）

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true

第三步: 复制以下代码，保存重启vscode

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			" <div class=\"container\">\n",
			" </div>",
			"</template>\n",
			"<script>",
			"export default {",
			" name: '',",
			" components: {},",
			" data() {",
			" return {\n",
			" }",
			" },",
			" created(){},",
			" mounted(){},",
			" methods:{},",
			" computed:{},",
			" watch:{}",
			"}",
			"</script>\n",
			"<style scoped >",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	}
}

第四步:测试是否添加成功

测试方法： 新建vue后缀文件，输入vue，按下tab键，OK。缺点是：无法像sublime一样新建一个vue文件就可以自动带上对应的模板。

二.react专用。

Reactjs code snippets react的代码提示，如componentWillMount方法可以通过cwm直接获得。

React Redux ES6 Snippets 

React Native Tools 添加对 React Native项目的支持，快速书写es6以及jsx。

CSS Modules 对使用了css modules的jsx标签的类名补全和跳转到定义位置。

React-Native/React/Redux snippets for es6/es7 

JavaScript (ES6) code snippets es6代码片段

Typescript React code snippets 这是tsx的react组件片段

react的jsx中补全html标签，在首选项的设置中加入

 "emmet.includeLanguages": {
"javascript": "javascriptreact"
},

三.CSS。

cssrem — px值转rem

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

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

IntelliSense for CSS class names — CSS类名智能命名提示。

Sass 语法高亮，自动提示功能

Easy Sass — scss/sass文件保存可自动生成并同步编译成同名css文件

Easy WXLESS — 微信小程序WXSS文件专用，保存可自动生成并同步编译成同名css文件

四.Git。

Git Blame 在状态栏显示当前行的Git信息
Git History(git log) 查看git log
GitLens 显示文件最近的commit和作者，显示当前行commit信息

五.代码格式化插件

Beautify   安装量超过230万，Beautify是jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML一键格式化。

Prettier code Formatter  安装量超过150万，支持JavaScript、TypeScript和CSS的格式化，使用Prettier(一个深受大家喜爱的格式化插件)。

JS Refactor  提供了许多重构JavaScript 代码的方法，例如提取代码中的变量和方法，将函数转换为使用箭头函数或模板字面量和将函数导出。

JavaScript Booster  一个非常棒的重构工具，比如将var替换为const或则let，移除无用的else语句，将变量声明和变量初始化合并。应该说很大程度上受到Webstorm的启发。

六.代码风格检查插件

ESLint 是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则，你可以在.eslintrc.json中配置。

JSHint JSHint的代码风格检查插件。在项目的根目录下面，用.jshintrcfile配置。

JavaScript Standard Style  一个无需配置的自带非常严格规则的代码风格检查插件。它强制要求你所有代码要遵循标准规则。

JsLint JSLint的代码风格检查插件。

七.其他。

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

Auto Close Tag 自动闭合HTML标签

Auto Rename Tag 自动重命名标签，配合上面的插件使用，基本上能赶上IDEA系的功能了。

vscode-icons 文件图标，方便定位文件

Bracket Pair Colorizer 每一对括号用不同颜色区别 （括号强迫症必备），让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

Code Runner 运行选中代码段（支持大量语言，包括Node）

VS Code JavaScript(ES6) snippets 它是如今最流行的，安装了超过120万的插件。该插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。

JavaScript Snippet Pack  JavaScript代码片段集合。

Debugger for Chrome — 调试JavaScript

File Peek — 鼠标移到路径名按住ctrl可打开文件

Path Intellisense — 编辑器中输入路径时,自动补全

SVG Viewer — 预览SVG图片

npm — 运行npm命令

Open-In-Browser  由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项

HTML Boilerplate 通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

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

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

Path Intellisense 自动路劲补全，默认不带这个功能的。

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

background 自定义编辑器背景。【文件】-【首选项】-【设置】中，自定义以下内容

"background.enabled": true,//卸载插件开启
    "background.useDefault": false,
    "background.customImages":[
        "file:///D:/vscodebackground/vsbg1.jpg",
        "file:///D:/vscodebackground/vsbg2.jpg"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "0% 0%",
        "background-size": "cover",
        "background-repeat": "no-repeat",
        "opacity": 0.1
    },

 

八.检查url和检查响应

REST Client  作为 web 开发人员，我们经常需要使用 REST api。为了检查url和检查响应，使用了 Postman 之类的工具。但是，既然编辑器可以轻松地完成相同的任务，为什么还要使用不同的应用程序呢? REST Client 它允许你发送 HTTP 请求并直接在 Visual Studio 代码中查看响应。

九.主题

One Dark Pro  源于Atom,老版本的Atom One Dark主题可以扔了。

One Monokai 

Tiny Light 类似HBuilder浅绿色风格主题。

Light 或 Light+ 白色主题

Solarized Dark 青蓝色主题（个人最爱）