ESLint和Prettier是前端项目启动时必须配置的基础依赖，ESLint负责代码质量检查，Prettier专注格式化，二者需通过eslint-config-prettier消除冲突规则、项目级.prettierrc统一格式、VSCode禁用重复自动修复以实现协同工作。
ESLint 和 Prettier 不是“可选”，而是前端项目启动时就该装上的基础依赖。没它们，代码质量靠人盯，问题发现滞后，协作成本翻倍。
ESLint 配置必须关掉与 Prettier 冲突的规则
很多人装了 ESLint 和 Prettier 后发现保存时格式乱跳、报错反复出现，根本原因是两者在格式层面打架。比如 semi（是否加分号）、quotes（单双引号）这类规则，Prettier 管格式，ESLint 也想管——结果就是互相覆盖。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends中把它放在最后：extends: ['airbnb', 'prettier']（注意顺序） - 不要在 ESLint 里再手动写
'semi': ['error', 'never']这类格式规则，全交给 Prettier - 检查是否启用了
editor.formatOnSave，但别让 ESLint 的eslint.autoFixOnSave也开着——它会和 Prettier 抢着改，导致保存两次
Prettier 的 .prettierrc 必须项目级存在，不能只靠全局设置
VSCode 全局配置（settings.json）里的 prettier.semi 或 prettier.singleQuote 只影响未设本地配置的项目。一旦团队成员本地配置不一致，合并代码时就会出现大量无意义的格式变更。
- 在项目根目录新建
.prettierrc，内容用 JSON 或 JS 格式均可，例如：{"semi": false, "singleQuote": true, "tabWidth": 2} - 同时配一个
.prettierignore，排除node_modules、dist、build等生成目录，避免 Prettier 扫描卡顿 - 如果用的是 TypeScript，确保
prettier版本 ≥ 2.8.0，否则对type和interface的换行支持不稳
Path Intellisense 要配合 jsconfig.json / tsconfig.json 才能跳转别名路径
@/components/Button.vue 这种写法在编辑器里点不进去？不是插件没装，是路径映射没声明。VSCode 默认不认识 @，它只是个字符串。
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录确认有
jsconfig.json（JS 项目）或tsconfig.json（TS 项目） - 里面必须包含
"compilerOptions.baseUrl"和"compilerOptions.paths"，例如：{"baseUrl": ".", "paths": {"@/*": ["src/*"]}} - 改完配置后重启 VSCode，或执行
Developer: Restart TS Server命令 - 别依赖插件自己的 alias 配置项（如
path-intellisense.mappings），它只补全、不跳转，且容易和 TS 的路径解析冲突
Auto Rename Tag 在 JSX/Vue 中失效？检查 language mode 是否正确
在 .vue 文件里改 <div> 不同步闭合标签，或在 .tsx 里 rename 标签没反应——大概率是当前文件被识别成了 Plain Text 或 HTML，而不是 Vue 或 TypeScript React。
- 右下角状态栏看当前 language mode，点击它，手动选成
Vue或TypeScript React - 如果是 Vue SFC，确保已安装官方
Volar插件（非旧版 Vetur），Volar 才提供完整的<template>区域支持 - React 项目中，
Auto Rename Tag对jsx有效，但对tsx需要额外开启：在settings.json加"auto-rename-tag.activationOnLanguage": ["javascript", "typescriptreact"]
插件装得再多，如果 ESLint 规则没关冲突、Prettier 没项目级配置、路径映射没声明、language mode 没切对，那所有功能都只是摆设。这些不是“高级技巧”，而是开箱即用前必须核对的硬性条件。
