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

说明

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 扩展功能应用到项目

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