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
来设置。