vscode中eslint与prettier协同配置的关键在于职责分离与冲突消解：eslint负责代码质量检查（如no-unused-vars），prettier专注格式化（缩进、引号等）；须通过eslint-config-prettier禁用eslint中重叠的格式规则，并将"prettier"置于.eslintrc.js的extends末尾，同时统一配置.prettierrc文件，vscode仅启用官方eslint和prettier插件并设默认格式化工具为prettier。
VSCode 本身不提供模块化开发能力，所有模块化支持都依赖插件与项目配置协同生效。光装插件没用，关键得配对、配准、配路径。
Path Intellisense 能否自动补全 @/src/components/ 这类别名路径？
能，但必须先在项目中声明别名，插件才认得出来。
-
jsconfig.json或tsconfig.json中需明确配置"paths"和"baseUrl"，例如：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - 插件默认只识别相对路径和 node_modules，不读取 webpack alias 或 Vite alias 配置
- 如果项目用的是 Vite，且 alias 写在
vite.config.ts里，Path Intellisense 不会自动感知——必须同步写进tsconfig.json - 补全触发方式是
Ctrl+Space（Windows）或Cmd+Space（macOS），不是输入@就自动弹
ESLint + Prettier 组合下 import 排序总出错，怎么调？
这不是插件 bug，而是规则冲突导致的格式打架。
-
eslint-plugin-import的import/order规则控制 import 顺序，而 Prettier 默认不管这个 - 常见错误：启用了
import/order却没关掉 Prettier 的prettier/prettier规则，结果 ESLint fix 后又被 Prettier 格式化回乱序 - 解决路径：在
.eslintrc.js中显式禁用 Prettier 对 import 的干预："prettier/prettier": "off", "import/order": ["error", { "groups": ["builtin", "external", "internal", "parent", "sibling", "index"] }] - 若用 TypeScript，还需确认
import/order的pathGroups是否覆盖了@/别名路径，否则别名导入会被排到最后
Vue / React 项目里 import 组件时，为什么 auto-import 不生效？
auto-import 不是“装了插件就自动导”，它依赖语言服务 + 类型定义 + 显式启用三者到位。
- Vue 项目必须装
Volar（非旧版 Vue Language Features），且关闭内置的HTML Language Features插件，否则类型推导会失效 - React 项目需确保
jsconfig.json或tsconfig.json中"jsx": "react-jsx"已设置，否则 JSX 文件不被识别为模块上下文 -
vue.components.autoimport是 Volar 的配置项，不是全局开关；必须在 VSCode 设置里手动开启，或写进settings.json："vue.components.autoimport": true
- 组件没导出 default 或具名 export，auto-import 也找不到——比如
export const Button = defineComponent(...)是具名导出，import { Button }才能被识别
模块化开发的坑不在插件功能多寡，而在配置边界模糊：插件管路径补全，构建工具管运行时解析，TS/JS 语言服务管类型推导。三者路径不一致，auto-import 就成摆设，import order 就反复打架。动手前先盯住 tsconfig.json 和 vite.config.ts 里的 alias 是否对齐，比狂装插件有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
