当前位置：首页 > news >正文

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

news 2026/6/17 15:54:25

说明

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 文件添加内容有多种方法：

方法一：通过命令面板

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

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

工作区级别（推荐）

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

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