vscode项目配置

// .vscode/extensions.json
{
  "recommendations": [
    "editorconfig.editorconfig", // editorconfig
    "dbaeumer.vscode-eslint", // eslint
    "vue.volar", // vue语言插件
    "ms-vscode.vscode-typescript-next", // ts语言插件
    "esbenp.prettier-vscode", // prettier代码格式化
    "mhutchie.git-graph", // git记录图
    "donjayamanne.githistory", // git历史
    "eamodio.gitlens", // git插件
    "waderyan.gitblame", // git注释
    "syler.sass-indented", // sass
    "michelemelluso.code-beautifier", // css
    "antfu.unocss", // unocss
    "bradlc.vscode-tailwindcss", // tailwindcss
    "zignd.html-css-class-completion", // css提示
    "naumovs.color-highlight", // css颜色
    "pucelle.vscode-css-navigation", // css导航
    "pranaygp.vscode-css-peek" // css查看
  ]
}

// .vscode/settings.json
{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll": "explicit"
  },
  // 把prettier设置为vscode默认的代码格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vue文件的默认格式化工具选择prettier
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "vetur.validation.script": false
}

{
  "Vue ts": {
    "prefix": "vt",
    "body": [
      "<template>",
      "  <div>",
      "\t",
      "  </div>",
      "</template>",
      "\t",
      "<script setup lang=\"ts\">",
      "defineOptions({",
      "  name: '$1'",
      "})",
      "</script>",
      "\t",
      "<style lang=\"scss\" scoped>",
      "</style>",
      ""
    ]
  },
  "Vue ts component": {
    "prefix": "vtc",
    "body": [
      "<template>",
      "  <div>",
      "\t",
      "  </div>",
      "</template>",
      "\t",
      "<script setup lang=\"ts\">",
      "const props = withDefaults(",
      "defineProps<{",
      "  name: string",
      "}>(),",
      "{",
      "  name: '11'",
      "}",
      ")",
      "</script>",
      "\t",
      "<style lang=\"scss\" scoped>",
      "</style>",
      ""
    ]
  }
}