为js代码提供强力支持的VSCode插件合集-VSCode-PHP中文网

必须配eslint-config-prettier，因为它自动禁用eslint中所有与prettier冲突的格式规则（如semi、quotes），避免保存时反复格式化、光标乱跳；需安装并将其加入.eslintrc.js的extends末尾。

为js代码提供强力支持的vscode插件合集

ESLint 为什么必须配 `eslint-config-prettier`

不加这个包，ESLint 和 Prettier 会打架：一个说“分号必须有”，另一个说“分号可删”，保存时反复格式化又报错。真实场景里，你改完代码一保存，光标乱跳、行尾突然多出分号、又瞬间消失——不是编辑器卡，是规则冲突。

实操建议：

运行 npm install eslint-config-prettier --save-dev 安装
在 .eslintrc.js 的 extends 数组末尾加上 'prettier'
确保 Prettier 不作为 ESLint 插件启用（即不要用 eslint-plugin-prettier），否则仍可能嵌套冲突

`JavaScript (ES6) code snippets` 的快捷键别只记 `for` 和 `clg`

这个插件真正省时间的地方，在于它覆盖了现代 JS 开发高频但容易手误的结构。比如 raf 生成 requestAnimationFrame 循环，imr 插入 import React from 'react'（注意不是 impt，后者是旧版），fre 展开 for...of 带 const 声明。

容易踩的坑：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

多个 snippet 插件共存时（比如同时装了 JavaScript Snippet Pack），触发词可能重复，优先级由插件启用顺序决定，建议禁用冗余插件
useState、useEffect 等 React Hook 片段默认不包含，需额外装 JavaScript (ES7+) code snippets 或 TypeScriptReactcode snippets
片段插入后光标位置固定，但如果你习惯用 Tab 切换占位符，需确认插件设置中 editor.suggest.snippetsPreventQuickSuggestions 为 false

路径补全不止靠 `Path Intellisense`，`Alias` 才解决真实项目痛点

在 Vite 或 Webpack 项目里写 import Header from '@/components/Header.vue'，光有路径提示没用——Path Intellisense 只能补全物理路径，不认识 @/ 这种别名。这时候 Alias 插件才真正起作用，它读取 vite.config.ts 或 webpack.config.js 中的 resolve.alias 配置，把 @ 映射到 src/，再做智能补全和跳转。

关键点：

插件本身不自动读配置，需手动在 VSCode 设置里填 alias 映射，例如：{"@": "./src"}
如果项目用了多层别名（如 @@/utils 指向 src/utils），Alias 默认不支持嵌套，得配合 Path Autocomplete 或改用 Volar（Vue 项目）
Auto Import 插件能自动补全 import 路径，但它依赖 TypeScript 的类型系统，纯 JS 项目需开启 javascript.suggestionActions.enabled

`Error Lens` 和 `ESLint` 显示位置不一致？这是设计使然

Error Lens 把错误直接印在代码行尾，而 ESLint 默认只在问题下方划波浪线。这不是 bug，是两者的职责不同：ESLint 提供语义检查结果，Error Lens 负责渲染方式。但这也带来一个隐藏问题：当同一行既有 ESLint 错误又有 TypeScript 类型错误时，Error Lens 默认只显示第一个，容易漏掉关键提示。

调优建议：

在 settings.json 中设置 "errorLens.showAllDiagnostics": true，强制显示所有诊断信息
若使用 TypeScript，确保 typescript.preferences.includePackageJsonAutoImports 为 "auto"，否则 import 补全可能滞后
Error Lens 的高亮颜色可能和主题冲突（比如深色主题下红底白字看不清），需手动调整 errorLens.errorColor 等 color token