初始化开发环境vscode

为你整理了一套 VS Code 本机开发插件清单，覆盖了前端（HTML5/Sass/TS/JS/Vue3）和 PHP 全栈开发场景，可以快速搭建起顺手的开发环境。

🎯 核心推荐清单

你可以直接在 VS Code 扩展市场（Ctrl+Shift+X）搜索安装以下插件：

HTML / CSS / Sass

• Live Sass Compiler：实时编译 Sass/SCSS 为 CSS，支持保存自动编译和浏览器前缀自动添加。
• Auto Rename Tag：修改 HTML/XML 标签时，自动同步修改配对的闭合标签，避免手动遗漏。
• Color Highlight：在代码中直接可视化 CSS 颜色值，方便快速识别和调试。
• CSS Peek：支持从 HTML 的 class 或 id 快速跳转到对应的 CSS 定义处，方便在大型项目中定位样式。

JavaScript / TypeScript

• ESLint：代码质量检查工具，集成后可在编写时实时提示语法错误和风格问题。
• Auto Import：针对 TS/TSX 项目，自动处理模块导入，输入组件名时可自动补全导入语句。

Vue 3

• Vue - Official：Vue 官方插件，提供 Vue 3 语法高亮、Composition API 智能提示、组件跳转等核心功能（注意：使用此插件时需禁用 Vetur）。

PHP

• PHP (DEVSENSE)：全功能 PHP 支持插件，包含智能感知、调试、格式化、语法检查等。
• PHP Intelephense：高性能的 PHP 代码智能提示插件，常用于替代基础 PHP 插件以获得更快的响应速度。

通用效率工具

• Prettier - Code formatter：业界通用的代码格式化引擎，支持 HTML/CSS/JS/TS/Vue 等几乎所有前端语言，建议开启“保存时自动格式化”。
• Code Runner：一键运行多种语言的代码片段（Node.js、PHP、Python 等），无需离开编辑器即可快速测试逻辑。
• 别名路径跳转：支持 @/ 等路径别名的智能跳转，在大型项目中快速定位导入文件。
• Chinese (Simplified)：VS Code 简体中文语言包。

⚙️ 快速配置建议

安装完插件后，建议进行以下基础配置，让编码体验更流畅：

1. 保存自动格式化：打开 VS Code 设置（Ctrl + ,），搜索 Format On Save 并勾选，或者搜索 Editor: Default Formatter 选择 Prettier。这样每次 Ctrl + S 保存时，代码会自动排版整齐。
2. 别名路径映射：如果你使用 @/ 指向 src 目录，需要在 VS Code 的 settings.json 中配置别名路径跳转插件的映射规则（如 "alias-skip.mappings": { "@": "./src" }），否则路径跳转功能可能不生效。

💡 一点补充

VS Code 对 HTML、CSS、JavaScript 和 TypeScript 本身已内置了基础的语言支持（语法高亮、基础补全），因此上述插件主要是在编译（Sass）、格式化（Prettier）、检查（ESLint）和框架支持（Vue/PHP） 上做增强，安装后能显著减少重复操作。