vsCode配置（Vue）

前言

VsCode编辑器开发Vue代码提供便利

---

一、Vue开发常用配置插件

Vetur —— 语法高亮、智能感知、Emmet等
Chinese (Simplified) Language Pack for Visual Studio Code —— 汉化
EsLint —— 语法纠错
GitLens —— git仓库上库记录（每一行代码旁边都有日志）
Auto Close Tag —— 自动闭合HTML/XML标签
Auto Rename Tag —— 自动完成另一侧标签的同步修改
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense —— 自动路劲补全
vue vscode snippets 快捷键显示 —— vue组件模板；例如：vba
Bracket Pair Colorizer —— 括号着色器
HTML snippets(Visual Studio Code HTML snippets) —— 回车html标签闭合

二、用户代码片段（快速生成vue模版）

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script>",
            "",
            "export default {",
            "  name: '',",
            "  components: {},",
            "  props: {},",
            "  data () {",
            "    return {",
            "",
            "    }",
            "  },",
            "  mounted () {",
            "",
            "  },",
            "  watch: {",
            "",
            "  },",
            "  methods: {",
            "",
            "  }",
            "}",
            "</script>",
            "<style lang='less' scoped>",
            "",
            "</style>",
            ""
        ],
        "description": "Log output to console"
    }
}

三、保存自动fixAll格式化

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

总结

每个人都有自己代码习惯，本文仅供参考。