前端项目中定义vs code要安装的插件

前端项目中定义vs code要安装的插件

 

我来帮你在前端项目中定义 VS Code 需要安装的插件。有两种主要方式：

方式一：使用 .vscode/extensions.json（推荐）

在项目根目录创建 .vscode 文件夹，然后创建 extensions.json 文件：

json

 

 

 

 

{
  "recommendations": [
    // 基础开发插件
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-typescript-next",
    
    // CSS/样式插件
    "mrmlnc.vscode-scss",
    "eamodio.gitlens",
    
    // 框架相关插件
    "vuevolar",
    "angularng-template",
    "msjsdiag.vscode-react-native",
    
    // 实用工具
    "streetsidesoftware.code-spell-checker",
    "formulahendryauto-close-tag",
    "formulahendryauto-rename-tag",
    
    // 调试工具
    "ms-vscode.js-debug-nightly",
    "ms-vscode.vscode-live-server"
  ]
}

 

方式二：使用 package.json 的 devDependencies

在 package.json 中添加：

json

 

 

 

 

{
  "devDependencies": {
    // 现有的依赖...
    
    // VS Code 插件推荐
    "vscode-eslint": "^210",
    "prettier-vscode": "^900",
    "volar": "^100",
    "code-spell-checker": "^2200"
  }
}

 

常用插件推荐列表

必装插件

json

 

 

 

 

{
  "recommendations": [
    // 代码质量
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    
    // Git 集成
    "eamodio.gitlens",
    "donjayamanne.githistory",
    
    // 代码提示
    "visualstudioexptteam.vscodeintellicode",
    "streetsidesoftware.code-spell-checker",
    
    // HTML/CSS
    "formulahendryauto-close-tag",
    "formulahendryauto-rename-tag",
    "ecmel.vscode-html-css",
    
    // 框架支持
    "vuevolar",
    "msjsdiag.vscode-react-native",
    "angularng-template"
  ]
}

 

插件说明

• ESLint: 代码质量检查
• Prettier: 代码格式化
• GitLens: Git 增强功能
• Auto Close Tag: 自动关闭标签
• Code Spell Checker: 拼写检查
• Volar/React Native/Angular: 框架特定支持

当团队成员打开项目时，VS Code 会提示安装这些推荐的插件，确保开发环境一致性。