VSCode插件如何深度简化js代码开发步骤-VSCode-PHP中文网

code runner 默认在output面板运行js文件，不支持process.stdin等交互式输入，需设code-runner.runinterminal为true方可启用终端交互；其快捷键为ctrl+alt+n，右键“run code”效果相同。

vscode插件如何深度简化js代码开发步骤 - php中文网

Code Runner 一键运行 JS 文件，但别忽略它的默认限制

它确实能让你点一下 ▶ 就执行 node filename.js，但默认在 OUTPUT 面板运行，不是终端 —— 这意味着 process.stdin、readline 或任何需要交互式输入的代码会卡住或报错 TypeError: process.stdin.setRawMode is not a function。

如果只是测试数组方法、函数返回值这类无交互逻辑，Code Runner 完全够用；但一旦涉及 prompt()（需搭配 node -e 或第三方库）或读取用户输入，就得切到终端手动运行，或者改用 VS Code 内置调试器。

右键菜单里也有“Run Code”，效果和点击 ▶ 一样
快捷键 Ctrl+Alt+N（Windows/Linux）或 Cmd+Alt+N（macOS）可快速触发
想让它走终端而不是 OUTPUT，得在设置里加配置："code-runner.runInTerminal": true

ESLint + Prettier 自动校验+格式化，但配置冲突很常见

装了插件不等于自动生效。常见问题是 ESLint 报 Missing semicolon，而 Prettier 又把它删掉 —— 这是因为两者规则打架。关键不是“都装上”，而是让 Prettier 负责格式，ESLint 负责逻辑检查。

必须做三件事：启用保存时格式化、指定 Prettier 为默认格式器、关掉 ESLint 里和格式相关的规则。

在 settings.json 中写入："editor.formatOnSave": true 和 "editor.defaultFormatter": "esbenp.prettier-vscode"
项目根目录加 .eslintrc.js，且 extends 里包含 'prettier'（不是 'prettier/react' 等子集）
避免在 .prettierrc 里设 "semi": false，同时又在 ESLint 里开 semi: ["error", "always"]

Live Server 解决本地 HTML+JS 跨域问题，但 JS 不能直接双击打开

写带 DOM 操作的 JS，比如 document.getElementById，双击 HTML 文件用浏览器打开会触发跨域限制，报错 Access to script at 'file:///...' from origin 'null' has been blocked。这不是代码错，是浏览器策略。

Json Schema Toolkit

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

下载

Live Server 启一个本地 HTTP 服务（默认 http://localhost:5500），让页面以 http:// 协议加载，JS 就能正常访问 DOM 和发起 fetch 请求。

右键 HTML 文件 → “Open with Live Server”，不要右键 → “Open in Default Browser”
如果端口被占，可在 settings.json 改："liveServer.settings.port": 3000
它不处理纯 JS 文件（如 script.js），只服务 HTML 入口文件

调试器（Run and Debug）比“运行”更接近真实 Node 环境

点 ▶ 运行和按 F5 调试，表面都是执行 JS，但底层差异很大：Code Runner 是 shell 调用 node，而调试器启动的是带 inspector 的 Node 实例，支持断点、变量监视、调用栈回溯 —— 这才是排查异步、闭包、this 绑定问题的正确姿势。

首次使用会生成 .vscode/launch.json，里面 "console": "integratedTerminal" 表示输出打到终端；若改成 "internalConsole"，就回到类似 Code Runner 的 DEBUG CONSOLE，但依然能打断点。

调试时按 F9 打断点，F5 启动，F10 单步跳过，F11 单步进入函数
想测环境变量？在 launch.json 的 env 字段加："NODE_ENV": "development"
调试 Express 服务时，加 "autoAttachChildProcesses": true 才能进路由回调里

真正省步骤的地方，不在“多装一个插件”，而在让每个工具各司其职：Code Runner 快速验证表达式，Live Server 查 DOM 行为，调试器查执行流，ESLint/Prettier 守住代码底线。插件堆得多不如配得准 —— 尤其是 launch.json 和 .eslintrc.js 这两个文件，改错一行，整个流程就卡住。