eslint 能自动修复部分代码问题，仅限格式类和可推断类错误（如 semi、quotes），逻辑或类型问题不支持；配合 prettier 需禁用冲突规则；auto import 依赖 ts 类型服务；vscode-icons 通过图标降低文件识别认知负荷，提升可维护性。

ESLint 能否自动修复代码问题？

能，但不是所有规则都支持 --fix。它只对格式类、可推断类错误生效，比如 no-unused-vars、semi、quotes；而逻辑错误（如 no-console）或类型问题（如 react/prop-types）不会被自动修复。

实操建议：

• 在项目根目录运行 npx eslint . --fix 可批量修复当前目录下支持的规则
• VS Code 中启用 editor.codeActionsOnSave 并配置 "source.fixAll.eslint"，保存时自动触发修复
• 注意：若项目同时用了 Prettier，必须安装 eslint-config-prettier 关闭 ESLint 的格式规则，否则会和 Prettier 冲突

Prettier 和 ESLint 同时启用会不会打架？

会，除非明确分工。Prettier 负责“怎么写好看”，ESLint 负责“怎么写正确”。两者默认规则重叠（比如缩进、引号、分号），不协调就会反复格式化又报错。

关键配置点：

• 在 .eslintrc.js 中 extends 加上 'prettier'，它会禁用所有与 Prettier 冲突的 ESLint 规则
• VS Code 设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode，避免其他 formatter 干扰
• 不要同时开启 editor.formatOnSave 和 editor.codeActionsOnSave 的 ESLint 修复——前者走 Prettier，后者走 ESLint，容易来回拉扯

Auto Import 插件在 TypeScript 项目里为什么没反应？

大概率是 TS 语言服务没加载成功，或者插件没识别到 tsconfig.json 路径。Auto Import 依赖 TypeScript 的类型信息来推导导入路径，不是纯文本匹配。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

排查步骤：

• 确认项目根目录存在有效的 tsconfig.json，且 compilerOptions.baseUrl 和 paths 配置正确（尤其用别名时）
• 在 VS Code 底部状态栏检查 TypeScript 版本是否显示“TypeScript 5.5+”；若显示“Loading…”或版本过低，重启 TS Server（Ctrl+Shift+P → “TypeScript: Restart TS server”）
• 插件设置中确认 auto-import.showMissingImports 开启，否则缺失导入不会提示
• JS 文件默认不启用 Auto Import，如需支持，得手动在 settings.json 中加 "javascript.suggest.autoImports": true

vscode-icons 对代码可维护性真有帮助？

有，而且是隐性但高频的帮助。它不改代码逻辑，但显著降低“找文件”的认知负荷——尤其在大型项目里，components/ 下混着 .vue、.tsx、.stories.tsx、.test.tsx 时，光靠后缀名扫一眼很难分辨用途。

实际效果：

• Vue 单文件组件显示 Vue 图标，普通 JS 文件显示齿轮图标，测试文件带火焰图标，一眼区分职责
：
• 配合 files.exclude 隐藏 node_modules 和 dist 后，剩余图标化的文件结构更易建立心理模型
• 团队新成员入职时，看到带图标的文件树，比纯文本列表更快理解项目分层意图

别小看这个细节：每天多花 3 秒定位一个文件，一年就是近 15 小时。可维护性不只体现在代码里，也藏在你打开编辑器后的前 10 秒。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！