vscode---格式化设置setting配置以及一键生成vue片段

下载的插件

auto close tag
anto rename tag
bertter comments
chatGPT
chinese
code setting sync 
element ui snippets
element ui helper
error lens
gitlens 
gltf
horla light theme
Iconify interllisense
javascript code snippets
leetcode 
material icon theme
nested commtens
night owl 
noctis 
open in browser
prettier
SynthWave '84
tabnine
vetur
vue-helper

格式化内容，setting中 

{
    "vetur.format.options.tabSize": 4,
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            "printWidth": 200
        },
        "prettier": {
            "singleQuote": true,
            "printWidth": 300,
            "proseWrap": "never",
            "trailingComma": "all"
        }
    },
    "prettier.semi": true,
    "prettier.printWidth": 300,
    "prettier.proseWrap": "never",
    "prettier.singleQuote": true,
    "vetur.validation.template": false,
    "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.colorTheme": "Quiet Light",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "security.workspace.trust.untrustedFiles": "open",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.iconTheme": "material-icon-theme",
    "window.zoomLevel": -1,
    "gitee.gist": "9rc7l3ouwq2ntf6ia0shj25",
    "gitee.access_token": "7ef5eda6c53d0234cc2ba7bcea86c7a9"
}

vue init 代码用户片段   v2和v3

{
  "Print to console": {
    "prefix": "vueinit",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div class='app-container'></div>",
      "</template>",
      "<script >",
      "export default {",
      "    data() {",
      "      return{",
      "          obj:{},",
      "      }",
      "    },",
      "    props:{",
      "      type:Object,",
      "      default: {},",
      "      require:true",
      "    },",
      "    components: {},",
      "    created() {",
      "    },",
	  "    watch:{",
      "       fun(){},",
      "    }",
      "    mounted() {",
      "    },",
      "    methods:{",
      "       fun(){},",
      "    }",
      // 生命周期 - 更新之前
      "     beforeUpdate() {},",
      // 生命周期 - 更新之后
      "     updated() {},",
      // 生命周期 - 销毁之前
      "     beforeDestroy() {},",
      // 生命周期 - 销毁完成
      "     destroyed() {},",
      // 如果页面有keep-alive缓存功能，这个函数会触发
      "     activated() {},",
      "  };",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

{
  // 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": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div class=\"container\">\n",
      "  </div>",
      "</template>\n",
      "<script lang=\"ts\">",
      "import {reactive,toRefs} from \"vue\"",
      " interface dataProps{\n",
      " }",
      "export default{",
      "  name:\"App\",",
      "  setup() {",
      "   const data = reactive({\n",
      "   })",
      "   const refData = toRefs(data)",
      "    return {",
      "	   ...refData",
      "    }",
      "  }",
      "}",
      "</script>\n",
      "<style lang=\"less\" scoped>",
      "</style>",
      "$2"
    ],
    "description": "Log output to console"
  }
}

好看的主题以及自动纠错的插件

1. Night Owl     2. Error len