WebDev Extension Box

一个为前端开发者精心挑选的 VS Code 插件包。一键安装，即可获得 Vue、React、UniApp、Prettier、ESLint 等现代 Web 开发所需的全部工具。

包含的插件

核心开发工具

Vue 开发

Vue UI 框架

React 开发

小程序 / UniApp

样式开发

数据可视化

测试工具

文件格式支持

效率工具

主题和外观

推荐配置

将以下配置复制到你的 .vscode/settings.json 或用户设置中：

{
  // 编辑器基础配置
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Prettier 配置
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 100,

  // ESLint 配置
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],

  // Vue 配置
  "vue.inlayHints.missingProps": true,

  // SCSS 配置
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },

  // 主题配置
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro"
}

使用方法

方式一：手动复制配置

1. Cmd/Ctrl + Shift + P → "Preferences: Open Settings (JSON)"
2. 复制上面的推荐配置
3. 保存即可

方式二：工作区配置

1. 在项目根目录创建 .vscode/settings.json
2. 复制推荐配置到该文件
3. 配置仅对当前项目生效

系统要求

• VS Code 版本 1.74.0 或更高

许可证

MIT