【工具提效篇】设置vscode针对vue3+ts项目自动检查语法类型

为了在VSCode中设置针对Vue 3 + TypeScript 项目的自动语法检查，你需要确保已经安装了必要的扩展和配置了tsconfig.json和jsconfig.json文件。

1. 确保安装了以下扩展：

   • Vetur：Vue工具集成，提供Vue文件的语法高亮、片段、Emmet等。
   • TypeScript Vue Plugin (Volar)：提供Vue文件中的TypeScript支持。
   • ESLint：可选，代码质量和格式检查。
   • TypeScript：必须，TypeScript语言支持。
2. 确保你的项目中有tsconfig.json和jsconfig.json文件。如果没有，可以通过以下命令生成：

npx vue-tsc --init

这将生成一个tsconfig.json文件，你可能需要根据项目需求进行一些自定义配置。

3. 在jsconfig.json中，确保包括Vue文件的路径：

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    },
    "jsx": "preserve",
    "types": ["vue/setup-compiler-macros"]
  },
  "include": ["src/**/*", "src/*", "typings/**/*.d.ts", "vue.config.js"],
  "exclude": ["node_modules"]
}

4. 如果你使用ESLint，确保在package.json中配置了eslint脚本，并且有一个有效的.eslintrc.js配置文件。
5. 在VSCode设置中启用保存时自动格式化和检查：

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
  }
}

确保你已经安装了所有必要的扩展，并且tsconfig.json和jsconfig.json文件配置正确。这样，当你保存文件时，VSCode将自动进行语法检查并应用任何可用的代码修复。