文章目录一、基础环境搭建二、核心插件配置浏览器调试一、基础环境搭建安装 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教程
文章目录一、基础环境搭建二、核心插件配置浏览器调试一、基础环境搭建安装 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教程
