IDE配置

配置 Visual Studio Code 开发环境以获得最佳 IndieShow 开发体验，包括必要扩展、推荐配置、调试设置和常见问题解决方案

本指南将帮助你配置 Visual Studio Code (VS Code) 开发环境，以获得最佳的开发体验。

安装 VS Code

访问 VS Code 官网下载安装包
根据你的操作系统选择对应的版本：
- Windows: .exe 安装包
- macOS: .dmg 安装包
- Linux: .deb/.rpm 包或 snap 安装

必装扩展

以下扩展是开发 IndieShow 项目必需的：

1. Vue 开发扩展

Vue Language Features (Volar)
- ID: Vue.volar
- 功能：Vue 3 语法高亮、智能提示、代码跳转
- 配置：禁用 Vetur（如果已安装）
TypeScript Vue Plugin (Volar)
- ID: Vue.vscode-typescript-vue-plugin
- 功能：Vue 文件的 TypeScript 支持
- 说明：与 Volar 配合使用

2. CSS 开发扩展

Tailwind CSS IntelliSense
- ID: bradlc.vscode-tailwindcss
- 功能：Tailwind CSS 类名提示
- 自动补全、语法高亮、悬停预览

3. 代码质量工具

ESLint
- ID: dbaeumer.vscode-eslint
- 功能：代码检查，确保代码质量
- 自动修复常见问题
Prettier - Code formatter
- ID: esbenp.prettier-vscode
- 功能：代码格式化
- 保持代码风格统一

4. 开发辅助工具

GitLens
- ID: eamodio.gitlens
- 功能：增强的 Git 功能
- 查看代码历史、作者信息
DotENV
- ID: mikestead.dotenv
- 功能：.env 文件语法高亮
- 环境变量配置支持

推荐配置

1. 工作区设置

创建 .vscode/settings.json 文件：

.vscode/settings.json

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
 
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.rules.customizations": [
    {
      "rule": "style/*",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "format/*",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-indent",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-spacing",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-spaces",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-order",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-dangle",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-newline",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*quotes",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*semi",
      "severity": "off",
      "fixable": true
    }
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "json5",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ],
  "i18n-ally.localesPaths": [
    "i18n",
    "i18n/locales",
    "types/i18n"
  ]
}

2. 调试配置

创建 .vscode/launch.json 文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Nuxt Dev",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": ["dev"]
    }
  ]
}

代码片段

1. Vue 组件模板

创建 .vscode/vue.code-snippets 文件：

{
  "Vue Setup Component": {
    "prefix": "vbase",
    "body": [
      "<script setup lang=\"ts\">",
      "// 类型导入",
      "import type { PropType } from 'vue'",
      "",
      "// Props 定义",
      "const props = defineProps({",
      "  ${1:propName}: {",
      "    type: ${2:String} as PropType<${3:type}>,",
      "    required: ${4:true}",
      "  }",
      "})",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    $5",
      "  </div>",
      "</template>",
      "",
      "<style scoped>",
      "$6",
      "</style>"
    ],
    "description": "Vue 3 组件基础模板"
  }
}

性能优化

为了获得更好的开发体验，建议：

排除大文件夹
{ "files.watcherExclude": { "**/node_modules/**": true, "**/.git/**": true, "**/dist/**": true } }
限制搜索范围
{ "search.exclude": { "**/node_modules": true, "**/dist": true, "**/.nuxt": true } }

IDE配置

安装 VS Code

必装扩展

1. Vue 开发扩展

2. CSS 开发扩展

3. 代码质量工具

4. 开发辅助工具

推荐配置

1. 工作区设置

2. 调试配置

代码片段

1. Vue 组件模板

性能优化

常见问题

下一步

代码规范

更新维护

站点配置

导航配置

目录

IDE配置

TypeScript 智能提示不工作

Tailwind CSS 提示不生效

ESLint 报错

其他问题

代码规范

更新维护

站点配置

导航配置

目录