VSCode配置js教程及VS Code常用教程-北京尧图网络

文章目录一、基础环境搭建二、核心插件配置浏览器调试一、基础环境搭建安装 Node.js npm从 Node.js 官网下载 LTS 版本安装包安装时勾选自动配置环境变量选项自定义安装位置一直到最后安装其它不要勾选。验证安装node -v # 查看 Node.js 版本 npm -v # 查看 npm 包管理器版本winR输入cmd回车以系统管理员运行防止权限不够附:Node.js的更新去官网下载最新的稳定版本推荐安装向导进行安装一般会自动覆盖原先的版本程序安装时自动先移除原先的版本再进行新版本的安装安装 VSCode从官网下载安装支持 Windows/macOS/Linux默认安装即可。二、核心插件配置插件名称功能描述配置要点ESLint代码质量检查与风格规范安装后需在项目根目录创建.eslintrc.js配置文件推荐使用 Airbnb 规范模板Path Intellisense智能路径补全自动提示模块导入路径减少手动输入错误Prettier自动代码格式化配置.prettierrc文件定义缩进/引号等规则与 ESLint 配合时需安装eslint-config-prettierDebugger for Chrome(已经弃用VS Code中有内置的不用管)浏览器调试工具在.vscode/launch.json中配置 Chrome 调试参数支持断点调试和变量监控Live Server本地开发服务器右键 HTML 文件选择 “Open with Live Server” 实现实时预览HTML CSS Support浏览器调试Visual Studio Code 编辑器支持调试在 Microsoft Edge 和 Google Chrome 中运行的 JavaScript。配置好后以后可以直接按 F5键来直接调试通用的launch.json,运行多个HTML而不用修改其参数{version:0.2.0,configurations:[{type:msedge,//Edge打不开可以设置为chrome浏览器或者安装相应的edge插件见下面图片//即type: chrome,//或者把launch.json文件删除重新配置//或者手动指定Edge浏览器路径//有时候VS Code无法自动找到Edge需要我们明确告诉它浏览器在哪// runtimeExecutable: C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exerequest:launch,name:调试当前HTML文件,file:${file},webRoot:${workspaceFolder}}]}安装edge插件如图安装后按F5键可以运行网页删除实测也可以运行代码片段的参数含义请前往浏览器调试以下是特定于浏览器调试的常见 launch.json 属性的参考。webRoot - 源代码的根目录。大多数情况下默认情况下webRoot 是您的工作区文件夹。此选项用于源映射解析。 outFiles - 用于查找生成的 JavaScript 文件的 glob 模式数组。请参阅 Source maps 部分。 smartStep- 尝试自动单步跳过未映射到源文件的源代码。请参阅 Smart stepping 部分。 skipFiles - 自动跳过这些 glob 模式覆盖的文件。请参阅跳过不感兴趣的代码部分。 trace - 启用诊断输出。这些属性仅适用于请求类型 launch 的启动配置url - 启动浏览器时自动打开的 URL。 runtimeExecutable - 要使用的浏览器可执行文件的绝对路径或要使用的浏览器版本。有效版本包括 stable默认、Canary、beta 和 dev。 runtimeArgs - 启动浏览器时传递的可选参数。这些属性仅适用于请求类型 attach 的启动配置url - 如果给定VS Code 将附加到具有此 URL 的选项卡。如果未提供它将附加到所有浏览器选项卡。 port - 用于远程调试浏览器的端口与启动浏览器时使用的 --remote-debugging-port 匹配。请参阅附加到浏览器部分。 address - 调试的浏览器正在侦听的 IP 地址或主机名。请参阅附加到浏览器部分。更多教程请前往VS Code官方教程附几个常用的VSCode教程JavaScriptVS Code基础功能的配置语言、布局、键盘快捷键、设置、扩展、主题、命令行界面等代码编辑操作技巧调试技巧终端使用技巧python教程

VSCode配置js教程及VS Code常用教程

相关推荐

私网IP地址范围解析与应用指南

taskt 免费开源 Windows RPA 自动化工具：不写代码，跑通第一个 Excel 自动化流程

【LightSail误区】绑定域名相关

更多资讯

英辰朗迪AI获客每日AI精选（2026.10.04）

计算机网络篇4：socket 编程接口与 sockaddr 通用结构的设计

MP4本地能播放网页为什么还要等

桂花鸡头米炖桃胶：食材清单、炖煮避坑与适饮人群

开源轻量级工业物联网平台UNIHH-IOT：设备数据采集与可视化实战

基于STM32单片机直流无刷电机PID控制温度PWM调速编码器蓝牙无线APP/WiFi无线APP/摄像头视频监控/云平台设计S457

今日更新

声子晶体仿真：三角晶格与六角晶格的能带计算实战

度假村安保定岗定编：岗位梳理、编制测算与排班设计

COMSOL等离子体模块实战：氩气双层DBD仿真建模全解析

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？