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

setting.json格式化内容        

{
    "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,
    "editor.formatOnPaste":false,
    "[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"
}

快速装插件：
    新电脑上的vscode，先去安装插件【code settings sync】
    在settings.json文件中，按照上面的【第四步】，把gistID、私人密钥复制进去
    使用快捷键 【Ctrl+Shift+P】在vscode的上面唤出命令行，输入  download setting 

 vue代码片段

{
	"Vue 2 Component Template": {
		"prefix": "vueinit",
		"body": [
			"<template>",
			"  <div class='$1-page-info'></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '$1',",
            "  components:  {},",
			"  props: {",
			"    initialData: {",
			"      type: Object,",
			"      default: () => ({}),",
			"      required: true",
			"    }",
			"  },",
			"  data() {",
			"    return {",
			"      title: '',",
			"    };",
			"  },",
			"  computed: {",
			"    itemCount() {",
			"      return this.items.length;",
			"    }",
			"  },",
			"  watch: {",
			"    initialData: {",
			"      handler(newVal) {",
			"        console.log('initialData changed:', newVal);",
			"      },",
			"      immediate: true,",
			"      deep: true",
			"    }",
			"  },",
			"  // 组件实例被创建后调用",
			"  created() {},",
			"  // 组件挂载到 DOM 后调用",
			"  mounted() {},",
			"  // 组件更新之前调用",
			"  beforeUpdate() {},",
			"  // 组件更新之后调用",
			"  updated() {},",
			"  // 组件销毁之前调用",
			"  beforeDestroy() {},",
			"  // 组件销毁之后调用",
			"  destroyed() {},",
			"  // 组件被激活时调用（使用 keep-alive 缓存时）",
			"  activated() {},",
			"  // 组件被停用时调用（使用 keep-alive 缓存时）",
			"  deactivated() {},",
			"  methods: {",
			"    handleClick() {",
			"    },",
			"  }",
			"};",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			".$1-page-info {",
			"  padding: 20px;",
			"}",
			"</style>"
		],
		"description": "Generate a minimal Vue 2 component template with a single outer div"
	}
}

{
	"Vue 3 Component Template": {
		"prefix": "vue3init",
		"body": [
			"<template>",
			"  <div class='$1-page-info'></div>",
			"</template>",
			"",
			"<script setup>",
			"import { ref, watch } from 'vue';",
			"",
			"const props = defineProps({",
			"  initialData: {",
			"    type: Object,",
			"    default: () => ({}),",
			"    required: true,",
			"  }",
			"});",
			"",
			"const title = ref('');",
			"const items = ref([]);",
			"",
			"// 监听 props 的变化",
			"watch(() => props.initialData, (newVal) => {",
			"  console.log('initialData changed:', newVal);",
			"}, {",
			"  immediate: true,",
			"  deep: true",
			"});",
			"",
			"// 组件实例被创建后调用",
			"// (可以在这里访问 props 或执行其他逻辑)",
			"",
			"// 组件挂载后的逻辑",
			"// (可以在这里执行 API 请求等)",
			"",
			"const handleClick = () => {",
			"  // 按钮点击处理逻辑",
			"};",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			".page-info {",
			"  padding: 20px;",
			"}",
			"</style>"
		],
		"description": "Generate a minimal Vue 3 component template with a single outer div"
	}
}

 下载的插件

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