vscode常用插件推荐 vscode常用插件有哪些-VSCode-PHP中文网

eslint、prettier、auto rename tag、path intellisense、gitlens这5款插件精准解决代码检查不准、格式混乱、标签不同步、路径易错、git溯源难五大高频问题，覆盖前端开发核心场景，配置后开箱即用。

vscode常用插件推荐 vscode常用插件有哪些 - php中文网

如果您正在使用 Visual Studio Code 进行日常开发，却发现代码补全不准、格式混乱、路径手输易错、Git 修改溯源困难或文件类型难以快速识别，则很可能是缺少一套经过真实项目高频验证的常用插件组合。以下是当前主流开发场景中广泛采用且持续维护的 VSCode 常用插件方案：

一、ESLint

该插件提供 JavaScript/TypeScript 代码的实时静态分析能力，依据可配置规则检测潜在错误、未定义变量、安全漏洞及风格不一致问题，并支持保存时自动修复部分违规项，保障团队代码质量基线统一。

1、打开 VSCode 命令面板（Cmd+Shift+P 或 Ctrl+Shift+P）。

2、输入 Extensions: Install Extensions 并回车。

3、在搜索框中键入 ESLint，选择由 Microsoft 发布的官方插件并点击 Install。

4、在项目根目录下创建 .eslintrc.cjs 文件，配置 parserOptions 与 rules 项。

5、启用 “Format on Save” 并在 settings.json 中添加 "eslint.format.enable": false，确保其仅执行检查而非格式化。

二、Prettier - Code formatter

作为通用代码格式化引擎，Prettier 可消除人工格式争议，对 HTML、CSS、JS、TS、Vue、React 等文件实现一键标准化排版，与 ESLint 协同构成“检查+修复”闭环。

1、在扩展市场搜索 Prettier - Code formatter。

2、安装后进入设置（Cmd+,），搜索 format on save。

3、勾选 “Editor: Format On Save” 选项。

4、在工作区 settings.json 中添加 "editor.defaultFormatter": "esbenp.prettier-vscode"。

5、创建 .prettierrc 文件，定义 tabWidth、semi、singleQuote 等关键参数。

三、Auto Rename Tag

该插件解决 HTML、Vue 或 JSX 中标签手动同步修改易出错的问题，当编辑开始标签时，对应结束标签自动重命名，避免结构破坏与渲染异常，尤其适用于嵌套较深的模板结构。

VSCode 1.118

微软正式发布 Visual Studio Code 1.118 版本。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控。

下载

1、扩展市场搜索 Auto Rename Tag。

2、安装后无需额外配置，默认启用。

3、在任意 HTML 文件中将

改为

，观察

是否同步变为。

4、如需启用 Vue 或 JSX 支持，可在 settings.json 中添加 "auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"]。