文章目录
- 一、基础环境搭建
- 二、核心插件配置
- 浏览器调试
一、基础环境搭建
- 安装 Node.js & npm
- 从 Node.js 官网
下载 LTS 版本安装包，安装时勾选自动配置环境变量选项，自定义安装位置，一直到最后安装，其它不要勾选。
验证安装：
node -v # 查看 Node.js 版本 npm -v # 查看 npm 包管理器版本，win+R输入cmd回车以系统管理员运行，防止权限不够附:Node.js的更新
去官网下载最新的稳定版本（推荐）安装向导，进行安装，一般会自动覆盖原先的版本（程序安装时自动先移除原先的版本再进行新版本的安装）
- 安装 VSCode
- 从 官网下载安装，支持 Windows/macOS/Linux，默认安装即可。
二、核心插件配置
| 插件名称 | 功能描述 | 配置要点 |
|---|---|---|
| ESLint | 代码质量检查与风格规范 | 安装后需在项目根目录创建.eslintrc.js配置文件，推荐使用 Airbnb 规范模板 |
| Path Intellisense | 智能路径补全 | 自动提示模块导入路径，减少手动输入错误 |
| Prettier | 自动代码格式化 | 配置.prettierrc文件定义缩进/引号等规则，与 ESLint 配合时需安装eslint-config-prettier |
| Debugger 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.exe""request":"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教程
JavaScript
VS Code基础功能的配置
语言、布局、键盘快捷键、设置、扩展、主题、命令行界面等
代码编辑操作技巧
调试技巧
终端使用技巧
python教程
