VSCode中前端开发不可或缺的插件-VSCode-PHP中文网

不能。ESLint负责代码逻辑与潜在错误检查（如no-unused-vars），Prettier专司格式统一（如缩进、引号），二者职责不同；强行用ESLint --fix处理格式易引发规则冲突及TS类型安全风险，需通过eslint-config-prettier禁用冲突规则并交由Prettier主导格式化。

vscode中前端开发不可或缺的插件

ESLint 能否替代 Prettier？

不能。ESLint 检查代码逻辑和潜在错误，比如 no-unused-vars、no-console；Prettier 只管格式，比如缩进、引号、换行。两者职责不同，强行用 ESLint 的 --fix 去处理格式，容易和团队规则冲突，还可能破坏类型安全（尤其在 TS 中）。

常见错误现象：eslint-config-prettier 没装或没启用，导致 ESLint 报一堆格式类警告，比如 quotes、semi，而你根本不想手动修。

必须在 .eslintrc.js 的 extends 里加入 'prettier'（来自 eslint-config-prettier）
VSCode 设置中关闭 ESLint 的自动格式化：设 "editor.formatOnSave": false，把格式化交给 Prettier
Prettier 配置优先级高于 ESLint，所以 .prettierrc 里的 semi: false 不会被 ESLint 覆盖

Path Intellisense 为什么补全不了 @/components/？

它本身不识别别名，只认真实文件路径。要支持 @/ 这类别名，必须配合项目级路径映射配置。

使用场景：Vue/React 项目中大量使用 import Button from '@/components/Button.vue'，但插件默认只提示 ./components/ 这种相对路径。

阿拉丁·前端工程工坊｜脚手架·组件·规范落地·构建优化·性能与可访问性一体

阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria

下载

在项目根目录加 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目）
写入 "baseUrl": ".", "paths": { "@/*": ["src/*"] }
重启 VSCode 或执行 Developer: Reload Window
确认插件设置里启用了 path-intellisense.mappings 自动读取 tsconfig/jsconfig

Auto Rename Tag 在 Vue SFC 里失效？

默认只对 HTML/XML 文件生效，Vue 单文件组件的区块需要显式启用支持。

常见错误现象：改了

但

没同步，或标签对不响应。

打开 VSCode 设置，搜索 auto rename tag
找到 Auto Rename Tag: Enable Auto Rename Tag 并开启
关键一步：在 settings.json 里加这一行："auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"]
如果用了 Volar（Vue 3 推荐），确保没和旧版 Vetur 冲突——禁用 Vetur 后重启

Live Server 和 Debugger for Chrome 能否共存？

能，但端口和 sourcemap 配置必须错开，否则调试器连不上实际运行的页面。

性能影响：Live Server 默认用 :5500，Debugger for Chrome 默认尝试连 :3000 或 :8080；若两者绑同一端口，一个会启动失败。

Live Server 端口在 .vscode/settings.json 设："liveServer.settings.port": 5501
Debugger 的 launch.json 中 url 必须匹配 Live Server 实际地址，例如 "http://localhost:5501/index.html"
webRoot 指向源码目录（如 "${workspaceFolder}"），不是构建产物目录
务必开启 "sourceMaps": true，否则断点打在打包后代码上，无法对应到原始 .vue 或 .tsx