vscode实用插件

1. Auto Close Tag 自动添加HTML / XML关闭标
2. Bracket Pair Colorizer 颜色识别匹配括号
3. Code Runner 非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
   安装完成后，右上角会出现：▶

4.ESLint EsLint可以帮助我们检查Javascript编程时的语法错误

5. HTML Snippets 代码自动填充
6. Indenticator 突出目前的缩进深度
7. Live Server浏览器实时刷新
8. npm Intellisenserequire 时的包提示
9. Path Intellisense路径自动补全
10. Vetur Vue 语法高亮显示, 语法错误检查, 代码自动补全
    (配合 ESLint 插件效果更佳)
11. vscode-icons 左侧文件目录的文件夹和文件都会显示相应的图标
12. Npm Intellisense 自动路劲补全，默认不带这个功能的，赶紧装
13. HTMLHint html代码检测
14. Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。
15. Import Cost 引入包大小计算,对于项目打包后体积掌握很有帮助
16. JavaScript(ES6) snippets JavaScript(ES6) snippets
17. Node.js Modules Intellisense 为JavaScript和TypeScript模块自动补全import语句。
18. Beautify Beautify是jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML一键格式化。
19. JS Refactor 提供了许多重构JavaScript 代码的方法，例如提取代码中的变量和方法，将函数转换为使用箭头函数或模板字面量和将函数导出。
20. cssrem 将css中的px自动转换为rem.再也不用计算器了（大漠大神推介）
21. View In Browser 迅速通过浏览器打开html文件
22. ES7 快速template,js生成插件 scc,src。
    23： vue保存时，自动化格式。

  实现保存时自动代码格式化：
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true

"vetur.format.defaultFormatter.html": "js-beautify-html",
    "editor.codeActionsOnSave": {
        "source.fixAll ": true,
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    //autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": [
        "javascript",
        "vue",
        "html"
    ],
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 120,
            "wrap_attributes": "true",
            "end_with_newline": false
        }
}

24： vue快速生成模板
设置 - 用户代码片段 - 搜素vue

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    "Print to console": {
        "prefix": "sc",
        "body": [
            "<template>",
            "  <div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  components: {},",
            "  data() {",
            "    return {",
            "",
            "    };",
            "  },",
            "  computed: {},",
            "  watch: {},",
            "  methods: {",
            "",
            "  },",
            "  created() {",
            "",
            "  },",
            "  mounted() {",
            "",
            "  },",
            "};",
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}