eslint插件必须配置.eslintrc.js文件，否则仅标红不报错；默认规则极简，需手动指定扩展规范（如react用plugin:react/recommended），并配合eslint-config-prettier避免与prettier冲突。

ESLint 插件必须配 .eslintrc.js，否则只标红不报错

装了 ESLint 插件但没配规则文件，undefined 变量或漏写 return 依然不会提示——插件默认只启用极简规则集。真实项目里得手动建 .eslintrc.js 并指定扩展规范。

• React 项目建议用 plugin:react/recommended + plugin:react-hooks/recommended
• Vue 3 项目优先选 plugin:vue/vue3-recommended，别用已废弃的 vue/essential
• rules 里关掉干扰项，比如 'no-console': 'warn' 比 'error' 更实际
• 如果用 Prettier，务必加 eslint-config-prettier，否则 semi 和 quotes 规则会打架

prettier.semi 和 prettier.singlequote 要和团队约定一致

VSCode 保存时自动格式化靠的是 prettier 插件读取 settings.json 里的配置。但 prettier.semi 设为 false 却没同步到团队，会导致 PR 里大量格式变更。

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 推荐把核心格式参数写进 .prettierrc 文件（而非仅 VSCode 设置），保证 CLI、CI、编辑器行为统一
• printWidth: 120 比默认 80 更适合现代屏幕，但需确认 linter 是否允许该宽度
• 若项目用 TypeScript，prettier 默认不处理 .ts 文件，要显式加 "prettier.enable": true 到 settings.json

调试时 launch.json 的 webRoot 必须指向源码目录

用 Debugger for Chrome 调试本地页面，断点打在 src/index.js 却跳转到 dist/bundle.js——这是 webRoot 配错的典型表现。VSCode 不会自动猜你源码在哪。

• "webRoot": "${workspaceFolder}" 适用于根目录即源码的项目
• 如果是 Create React App 或 Vite，默认构建产物在 dist，但源码在 src，就得写成 "webRoot": "${workspaceFolder}/src"
• 若用 webpack dev server，常需加 "sourceMaps": true 和 "sourceMapPathOverrides" 映射路径
• Chrome 启动失败报 Unable to launch browser，大概率是 url 没跑起来，先确认 http://localhost:3000 真的可访问

vscode-icons 不只是好看，它直接影响文件识别逻辑

图标插件不只是视觉美化。VSCode 内部依赖文件图标主题触发语言模式切换——比如 .vue 文件没显示 Vue 图标，很可能 vue 语法高亮根本没生效。

• 装完 vscode-icons 后，按 Ctrl+, 打开设置，搜 Icons Theme，选中 VSCode Icons 才真正启用
• macOS 用户若发现图标模糊，换 vscode-icons-mac，它适配了 Retina 屏缩放逻辑
• 某些自定义后缀（如 .api.ts）不显示对应图标？需要手动在 settings.json 里配 "files.associations"

实际项目里，插件之间不是装上就完事。ESLint 和 Prettier 的规则冲突、Debugger 的路径映射失效、vscode-icons 导致的语法识别失败——这些都不是报错信息明确指出的问题，而是“看起来正常，但功能不对劲”。关键在配置落地的细节，而不是插件数量。