1.安装插件Vetur
结果 ---> .vue代码识别彩标
2.配置.vue文件模板，以便快速一键生成格式化
2.1新建代码片段
File->Preferences->User Snippets-->New Global Snippets file... -->取名vue.json
2.2删除其中的代码片段
2.3黏贴.vue配置代码
{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）", "//例如：import 《组件名称》 from '《组件路径》';", "", "export default {", "//import引入的组件需要注入到对象中才能使用", "components: {},", "data() {", "//这里存放数据", "return {", "", "};", "},", "//监听属性 类似于data概念", "computed: {},", "//监控data中的数据变化", "watch: {},", "//方法集合", "methods: {", "", "},", "//生命周期 - 创建完成（可以访问当前this实例）", "created() {", "", "},", "//生命周期 - 挂载完成（可以访问DOM元素）", "mounted() {", "", "},", "beforeCreate() {}, //生命周期 - 创建之前", "beforeMount() {}, //生命周期 - 挂载之前", "beforeUpdate() {}, //生命周期 - 更新之前", "updated() {}, //生命周期 - 更新之后", "beforeDestroy() {}, //生命周期 - 销毁之前", "destroyed() {}, //生命周期 - 销毁完成", "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发", "}", "</script>", "<style lang='scss' scoped>", "//@import url($3); 引入公共css类", "$4", "</style>" ], "description": "Log output to console" } }
结果 --->保存好之后，新建.vue结尾的文件，在文件中输入vue并按下Tab键，则一键生成同模板的.vue文件代码段
3.根据eslint保存自动修复配置
3.1安装插件eslint和prettier
3.2配置settings
File->Preferences->Settings -->黏贴设置代码
{ "editor.formatOnPaste": true, //粘贴时格式化 "eslint.autoFixOnSave": true /**eslint保存自动校验不全*/, "eslint.alwaysShowStatus": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], // "window.zoomLevel": 1, // 窗口大小比例 // "editor.tabSize": 2, "editor.detectIndentation": false, "emmet.triggerExpansionOnTab": true, // "update.channel": "none", "editor.formatOnSave": true, // eslint保存格式化 "javascript.format.enable": false // 不启动JavaScript格式化 // "prettier.eslintIntegration": true // 让prettier遵循eslint格式美化 }