Visual Studio安装插件

安装插件

方法① 点击编辑器左侧边栏的扩展

方法② 使用快键键：Ctrl + Shift + X

方法③ Ctrl + P 之后输入 ext install [插件名]

搜索或选择插件安装

Chinese (Simplified) Language Pack for Visual Studio Code：适用于 VS Code 的中文（简体）语言包

vetur ：代码提示，高亮

    "emmet.syntaxProfiles":{
            "vue-html":"html",
            "vue":"html"
      }

Bracket Pair Colorizer ：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

open in browser：在编辑器中打开浏览器

Debugger for Chrome ：映射vscode上的断点到chrome上，方便调试

HTML Snippets ：智能提示HTML标签，以及标签含义

HTML Boilerplate：html代码片段

Beautify ：格式化代码

HTML CSS Support ：智能提示CSS类名以及id 

Path Intellisense ：文件路径自动提示

Auto Rename Tag ：自动完成同一标签的另一侧标签的同步修改

Auto Close Tag ：自动闭合HTML/XML标签

File Peek ：路径跳转

Vue 2 Snippets ：自动补全vue代码

使用：

import ：import ... from ...

data ：data() { return {} }

template ：

script ：

VueSet ：Vue.set( target, key, value )

vscode-vue-snippets：vbase

ESLint ： 代码错误检查     
    ESLint不是安装后就可以用的，还需要一些环境和配置。   
     首先，需要全局的ESLint，可以使用cnpm install -g eslint来安装。   
     其次，vue文件是类HTML的文件，为了支持对vue文件的ESLint，需要eslint-plugin-html这个插件。可以使用npm install -g eslint-plugin-html来安装。   
    接着， 还需要在vscode中配置下ESLint：  

         "eslint.validate": [
                 "javascript",
                 "javascriptreact",
                 {
                     "language": "html",
                     "autoFix": true // HTML自动修复，
                 },
                 {
                     "language": "vue",
                     "autoFix": true   // vue 自动修复
                 }
             ],
             "eslint.autoFixOnSave": true  // 文件保存时自动修复

打开插件配置

方法一：在菜单栏中点击

方法二：在插件中点击右键

快速整理代码格式

ctrl + A ：选中所有

Ctrl  +  [      和   Ctrl  +  ]     实现文本的向左移动或者向右移动；

ctrl + D ： 选择相同代码段

点击右键（格式化代码） 或者 Shift+Alt + F