精选VSCode插件构建js代码学习工作流-VSCode-PHP中文网

eslint 与 prettier 职责不同：eslint 检查逻辑错误，prettier 统一代码格式；需 eslint-config-prettier 协调冲突，并配合 jsconfig.json、javascript and typescript nightly 等插件提升开发体验。

精选vscode插件构建js代码学习工作流

为什么 ESLint + Prettier 组合不能只装一个

只装 ESLint 会格式混乱，只装 Prettier 会漏掉逻辑错误——两者职责根本不同。ESLint 检查 undefined 变量、for 循环中未声明的 i、console.log 残留等运行时隐患；Prettier 只管缩进用空格还是 tab、单引号还是双引号、对象末尾要不要逗号。它们冲突常见于 semi 和 quotes 规则，必须用 eslint-config-prettier 关闭 ESLint 的格式类规则。

实操建议：

安装插件：ESLint（必）、Prettier（必）、eslint-config-prettier（npm 包，非插件）
项目根目录放 .eslintrc.cjs，内容包含 extends: ['eslint:recommended', 'prettier']
VS Code 设置里禁用 javascript.format.enable，让 Prettier 全权接管格式化
保存即修复：在 settings.json 中启用 "editor.codeActionsOnSave": {"source.fixAll.eslint": true}

Live Server 不是“打开 HTML 就行”，关键在端口和跨域配置

直接双击 index.html 打开，JS 加载本地图片或调用 fetch 会触发浏览器 CORS 错误，报错信息通常是 Access to script at 'file:///...' from origin 'null' has been blocked。Live Server 启动的是 http://127.0.0.1:5500/ 这类地址，绕过 file:// 协议限制。

容易踩的坑：

默认端口被占用时不会自动换端口，需手动改配置：在 settings.json 加 "liveServer.settings.port": 3000
想用手机访问调试，得关掉防火墙并启用局域网共享，在设置里开 "liveServer.settings.AdvanceCustomBrowserCmdLine": ["--host-rules=MAP * 192.168.x.x"]（实际 IP 替换）
加载 assets/ 下资源时路径写错，比如 img.src = "assets/cat.jpg"，但文件实际在 ./src/assets/，路径必须与服务器根目录对齐

JavaScript and TypeScript Nightly 插件不是“锦上添花”，而是补全 JS 基础能力

VS Code 自带的 JS 支持对现代语法响应迟钝：解构赋值里的嵌套默认值、?? 空值合并、Promise.withResolvers()（2024 年标准）等，不装这个插件就无提示、无跳转、无类型推导。它本质是把最新 TS Server 编译器能力反向注入 JS 文件，不需要写 .ts 或配 jsconfig.json 也能生效。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

使用场景明确：

写 const { data: { list = [] } = {} } = response; 时，鼠标悬停能显示 list 类型为 any[]
Array.from({ length: 5 }, (_, i) => i ** 2) 中的 i 能正确识别为 number
F12 跳转到 fetch 定义时，看到的是 MDN 标准签名，而非空定义
禁用它之后，document.querySelector('.btn').addEventListener 的链式调用会中断提示

别忽略 jsconfig.json —— 它是 JS 项目的“类型锚点”

没 jsconfig.json，VS Code 默认把每个 JS 文件当独立模块处理，跨文件变量引用不提示、import 路径不自动补全、别名路径（如 @/utils）直接报红。它不是 TypeScript 专属，纯 JS 项目也极度依赖。

最小可用配置只需三行：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}

注意点：

baseUrl 必须是相对路径，不能写 ./src，否则路径解析失效
include 不写会导致 node_modules 里类型也参与检查，拖慢性能
改完要重启 VS Code 窗口，热重载不生效
搭配 Import Sorter 插件，import { debounce } from '@/utils' 才能自动补全并归类排序

真正卡住 JS 学习进度的，往往不是语法本身，而是编辑器反馈延迟、路径报错不明、类型提示消失这类“无声故障”。这些插件组合不是堆功能，而是把 JS 语言能力一层层透出来——从可运行，到可读，再到可推导。