VSCode中提升前端开发质量的实用插件-VSCode-PHP中文网

eslint与prettier协同需禁用eslint格式规则并设prettier为默认格式化器，否则保存时会因quotes、semi等冲突导致代码反复格式化；须在.eslintrc.js extends末尾加"prettier"，安装eslint-config-prettier，并在settings.json中配置"editor.defaultformatter": "esbenp.prettier-vscode"。

vscode中提升前端开发质量的实用插件

ESLint 插件是前端代码质量的第一道防线，装了不配等于没装。

ESLint 配置必须关掉重复规则，否则和 Prettier 对着干

常见错误现象是保存后代码被反复格式化、缩进错乱、引号来回切换。这是因为 ESLint 默认启用的 quotes、semi 等规则和 Prettier 冲突。

在 .eslintrc.js 的 extends 数组里，把 prettier 放在最后，例如：['airbnb', 'prettier']
显式安装并引入 eslint-config-prettier，它会把所有与格式相关的规则设为 off
别依赖插件自动识别配置——VSCode 的 ESLint 插件只读项目根目录下的配置文件，node_modules 里的规则不会被自动合并

Prettier 保存时格式化要配合 editor.defaultFormatter

很多人开了 editor.formatOnSave 却没生效，根本原因是没指定默认格式化器。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

在 settings.json 中必须设置："editor.defaultFormatter": "esbenp.prettier-vscode"
prettier.semi 和 prettier.singleQuote 这类配置只在 Prettier 自身配置缺失时才起作用；优先级顺序是：.prettierrc > settings.json > 插件默认值
Vue 文件中 template 部分默认不被 Prettier 处理，需额外安装 prettier-plugin-vue 并在 .prettierrc 中加入 "plugins": ["prettier-plugin-vue"]

JavaScript Booster 的 light bulb 不是装饰，是重构入口

这个插件的黄色灯泡图标常被忽略，但它能安全完成大量手动易错的重构操作。

光标停在 var name = 'xxx' 上，点灯泡可一键转 const 或 let，同时自动补分号、修复缩进
选中一个函数体（包括 function 关键字），灯泡提供 Convert to arrow function，且会保留原有返回逻辑，不破坏闭包
对 if/else 块触发时，Replace with ?: 选项只在无副作用前提下生效——比如变量未在 else 外被引用，否则选项压根不出现

Path Intellisense 的 alias 跳转依赖 jsconfig.json 正确声明

写了 @/components/Button 却 Ctrl+Click 跳不到文件？问题大概率出在路径映射没被识别。

jsconfig.json 必须放在项目根目录，且 compilerOptions.baseUrl 要设为 "."
paths 中的 key 必须带通配符，例如 "@/*": ["src/*"]，写成 "@/": ["src/"] 就无法匹配子路径
TypeScript 项目用 tsconfig.json，但 Path Intellisense 默认只读 jsconfig.json；如需支持 TS，得手动在插件设置里勾选 Path Intellisense: Include Tsconfig