vue VSCode 开发设置

EsLint 保存时自动自动格式化

Setting.json

"eslint.autoFixOnSave": true,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "vue",
        "autoFix": true
      }
    ]

html 标签自动补全

File -> Preference -> Setting ->搜索setting.json -> Edit in settings.json
settings.json

"emmet.triggerExpansionOnTab": true,
"files.associations": {"*.vue":"html"}

新建.vue文件时自动创建vue模板

File -> Preference -> User Snippers
vue.json文件，然后添加下面模板

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

然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置

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

如果你的Setting.json文件有"files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles冲突。
files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全，如果是要用.vue模板补全功能的话，html标签补全我们就用emmet.syntaxProfiles来设置。