002 vue3-admin项目的目录及文件说明之.vscode目录

说明

“001 vue3-admin项目说明与创建”  章节创建了项目。此章节对其进行简单说明。目录结构如下：

.vscode 目录及其文件

.vscode目录说明

.vscode 目录用于存放项目的工作区配置文件，帮助团队成员保持一致的开发环境（vscode集成开发环境）

extensions.json文件

通过VS Code 扩展安装的插件，都在此处，确保开发环境一致性

其内容基本结构/格式：

{
  "recommendations": [
    // 推荐安装的扩展列表
  ],
  "unwantedRecommendations": [
    // 不推荐的扩展列表
  ]
}

 Vue 3 项目推荐扩展配置：

{
  "recommendations": [
    // Vue 官方扩展
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    
    // TypeScript 支持
    "ms-vscode.vscode-typescript-next",
    
    // ESLint 相关
    "dbaeumer.vscode-eslint",
    
    // Prettier 格式化
    "esbenp.prettier-vscode",
    
    // 代码片段
    "hollowtree.vue-snippets",
    
    // Git 工具
    "eamodio.gitlens",
    
    // 图标主题
    "PKief.material-icon-theme",
    
    // 颜色选择器
    "anseki.vscode-color",
    
    // 括号配对
    "CoenraadS.bracket-pair-colorizer-2",
    
    // 自动闭合标签
    "formulahendry.auto-close-tag",
    
    // 自动重命名标签
    "formulahendry.auto-rename-tag",
    
    // 路径智能提示
    "christian-kohler.path-intellisense",
    
    // CSS 智能提示
    "mrmlnc.vscode-scss",
    
    // 导入排序
    "amatiasq.sort-imports"
  ],
  "unwantedRecommendations": [
    // 避免与 Volar 冲突的扩展
    "octref.vetur"
  ]
}

 

在 VS Code 中向 extensions.json 文件添加内容有多种方法：

方法一：通过命令面板

1. 打开命令面板：
   • Windows/Linux: Ctrl+Shift+P
   • macOS: Cmd+Shift+P
2. 输入命令：
   • 输入 Extensions: Configure Recommended Recommended Extensions
   • 或 Preferences: Configure Recommended Extensions
3. 编辑文件：
   • 选择工作区或用户级别
   • 在打开的 extensions.json 文件中添加扩展 ID

 

 

方法二：手动创建 / 编辑文件

工作区级别（推荐）

1. 在项目根目录创建 .vscode 文件夹
2. 在 .vscode 文件夹中创建 extensions.json 文件
3. 添加以下内容：

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "vue.volar",
    "antfu.unocss",
    "rvest.vs-code-prettier-eslint",
    "ritwickdey.liveserver"
  ]
}

 如何添加其内容：打开vs code扩展插件按钮-->搜索需要添加的插件-->安装（如果没有安装的话）-->右键-->添加到工作区建议

查看文件内容：增加了eslint的扩展功能

 

 

vs code 扩展功能应用到项目

打开vs code扩展插件按钮-->搜索需要添加的插件-->安装（如果没有安装的话）-->右键将扩展应用与所有配置文件