.vscode 扩展配置

cypking2025-07-19 19:39

一、vue快捷键配置

在项目.vscode下新建vue3.0.code-snippets

每当输入vue3.0后自动生成代码片段

复制代码

{
  "Vue3.0快速生成模板": {
    "scope": "vue",
    "prefix": "Vue3.0",
    "body": [
      "<template>",
      "  <div>${1:test}</div>",
      "</template>",
      "",
      "<script lang=\"ts\">",
      "export default {",
      "  setup() {",
      "    return {};",
      "  },",
      "};",
      "</script>",
      "",
      "<style lang=\"scss\" scoped></style>",
      ""
    ],
    "description": "Vue3.0"
  }
}

vue3.2.code-snippets

复制代码

{
  "Vue3.2+快速生成模板": {
    "scope": "vue",
    "prefix": "Vue3.2+",
    "body": [
      "<script setup lang=\"ts\"></script>",
      "",
      "<template>",
      "  <div>${1:test}</div>",
      "</template>",
      "",
      "<style lang=\"scss\" scoped></style>",
      ""
    ],
    "description": "Vue3.2+"
  }
}

vue3.3.code-snippets

复制代码

{
  "Vue3.3+defineOptions快速生成模板": {
    "scope": "vue",
    "prefix": "Vue3.3+",
    "body": [
      "<script setup lang=\"ts\">",
      "defineOptions({",
      "  name: \"\",",
      "});",
      "</script>",
      "",
      "<template>",
      "  <div>${1:test}</div>",
      "</template>",
      "",
      "<style lang=\"scss\" scoped></style>",
      ""
    ],
    "description": "Vue3.3+defineOptions快速生成模板"
  }
}

二、自动调用.prettierrc格式化代码

settings.json

复制代码

{
  "editor.formatOnSave": true, // 保存格式化文件
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 为所有文件默认格式化器
}