VSCode 插件推荐
VSCode 是 VUP 项目的推荐编辑器。以下配置与仓库当前的 .vscode 配置保持一致。
推荐插件
esbenp.prettier-vscode- 代码格式化dbaeumer.vscode-eslint- ESLint 代码检查ms-vscode.vscode-typescript-next- TypeScript 语言服务ms-vscode.vscode-json- JSON 语言支持bradlc.vscode-tailwindcss- Tailwind CSS 智能提示vue.volar- Vue 3 语言服务pflannery.vscode-versionlens- 依赖版本提示
推荐配置
仓库根目录已提供 .vscode/extensions.json：
json
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"ms-vscode.vscode-typescript-next",
"ms-vscode.vscode-json",
"bradlc.vscode-tailwindcss",
"vue.volar",
"pflannery.vscode-versionlens"
]
}仓库根目录已提供 .vscode/settings.json：
json
{
"editor.codeActionsOnSave": {
"source.organizeImports": "never",
"source.removeUnusedImports": "never",
"source.fixAll.eslint": "never"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSaveMode": "file",
"editor.tabSize": 2,
"files.eol": "\n",
"typescript.preferences.importModuleSpecifier": "relative",
"scss.lint.unknownAtRules": "ignore",
"eslint.enable": true,
"eslint.validate": ["javascript", "typescript", "vue"],
"eslint.workingDirectories": [".", "apps/*"],
"typescript.preferences.includePackageJsonAutoImports": "auto",
"typescript.suggest.autoImports": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.organizeImports": {
"enabled": false
}
}安装方式
自动安装
打开项目后，VSCode 会根据 .vscode/extensions.json 自动提示安装推荐插件。
命令行安装
bash
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension ms-vscode.vscode-json
code --install-extension bradlc.vscode-tailwindcss
code --install-extension vue.volar
code --install-extension pflannery.vscode-versionlens常见问题
- ESLint 未生效：确认已安装
dbaeumer.vscode-eslint，并重启 VSCode - 格式化未生效：确认默认格式化器是
esbenp.prettier-vscode - Vue 提示异常：确认启用
vue.volar，并避免与 Vetur 冲突