.vscode 扩展配置

雅痞yuppie

已于 2025-07-25 12:08:14 修改

阅读量278

点赞数 3

CC 4.0 BY-SA版权

分类专栏：代码片段与案例开发文章标签： vscode ide 编辑器

于 2025-07-17 10:49:54 首次发布

本文链接：https://blog.csdn.net/cypking/article/details/149416562

代码片段与案例开发专栏收录该内容

8 篇文章

订阅专栏

一、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 为所有文件默认格式化器
}