vscode之调试es6代码

2023-05-16

vscode不支持es6的代码调试,但是可以通过babel把es6代码转成es5之后,在进行调试。

步骤如下:

第一步:

在本地项目路径下npm init,之后会生成一个package.json文件

第二步:

之后再执行

本地安装babel命令行工具 -- 每个项目安装一个,尽量不要在全局安装一个babel。

npm install --save-dev babel-cli

如果你已经全局安装了babel,可以使用如下的命令进行卸载

npm uninstall --global babel-cli

执行完以后,package.json的显示内容

第三步:在命令行中调用babel

本地安装的babel是不能够在直接命令行中运行的,为了在命令行中运行babel,需要配置下package.json文件的scripts项。比如如下代码,配置了一个build命令,运行该命令(npm run build)的时候就会在命令行执行babel src -d build -s

{
  "name": "myjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d build -s"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1"
  }
}

第四部:创建.babelrc配置文件

 

 

第五步:

安装babel的转译器

这里我们以babel-preset-env为例。

在命令行中执行如下代码就会安装babel-preset-env转译器。

D:\webpack\demo\es6>npm install  --save-dev babel-preset-env

注意:babel命令行工具(babel-cli)跟babel转译器是两个不同的东西,命令行工具并不具有转译代码的功能,只是为了在命令行中使用babel。要转码必须安装转译器,比如babel-preset-env转译器或者babel-preset-react转译器。要转译的时候,还要在.babelrc文件或者命令行中配置这些转译器(presets)选项

第六步:配置.babelrc文件

.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件,presets用于配置我们所需要的转译器。

.babelrc不是必须的,我们在.babelrc中配置的选项都可以通过命令行添加,比如在命令行执行 babel src -d lib --presets=env 等价于在.babelrc中配置 "presets":["env"]。当然.babelrc要明显方便很多。

babel在转译代码的过程中会自动读取当前目录.babelrc配置文件,如果当前目录没有的话就遍历整个目录树去寻找,直到找到.babelrc文件或者含有"babel"字段的package.json文件,然后使用这些配置选项来转译代码。

关于.babelrc的注意点如下。

1、如果没有.babelrc文件,或者没有在其他文件中设置过babel的presets的配置选型,并且命令行中也没有配置--presets,那么代码是不会转译的。原es6代码什么样,转译后的代码还是什么样。

2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器(presets),代码就会报错

3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候,以.babelrc中的配置为准

 

{
    "presets": [
        "es2015",
        "stage-2"
    ]
}

 

安装其他的依赖:

    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015
  
    # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

 

第七步:

编写es6代码

新建两个文件:

 执行

npm run build

 开始调试:成功打上断点

 总结一下:

需要执行的命令:

1、npm init

2、npm install --save-dev babel-cli

3、npm install  --save-dev babel-preset-env

4、npm install --save-dev babel-preset-es2015

5、 npm install --save-dev babel-preset-stage-2

6、npm run build

需要修改的配置文件:

1、修改package.json  注意后面有个-s 是生存map的映射,不然无法打断点

 2、新建一个文件:

 3、launch.json的配置文件

 总结起来一句话,6个命令,3个配置文件修改,即可完成vscode 调试es6.

参考网址如下:

1、https://github.com/Monsoir/Notes/blob/master/Visual%20Studio%20Code/Visual%20Studio%20Code%20%E4%B8%AD%E8%B0%83%E8%AF%95%E4%BD%BF%E7%94%A8%20ES6%20%E7%89%B9%E6%80%A7%E7%9A%84%20Node.js.md

2、https://blog.csdn.net/zhangshab/article/details/83684824

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode之调试es6代码 的相关文章

  • cesium很全的入门教程-翻译官网和加入自己理解

    Cesium WorkShop cesium快速入门教程 快速入门教程基本涵盖了大多数的CesiumJS API概念 主要用于Cesium基本入门 对Cesium有全面基本的了解和使用 一 概述 本教程会一步一步教会你做一个项目 主要介绍如
  • 多维数组变成一维数组

    这个问题来源于一个朋友曾经问过我的问题 当时是一个二维数组变成一维数组 后面我想整理一下 整理一个多维 并且是不定维的数组 一 二维数组变成一维数组 1 遍历数组 将元素一个个放入新数组 结果 如果元素不是数组 将会报错 下面是改良版 这样
  • VSCODE 系列(三)Settings Sync插件,多人开发同步配置。

    文章目录 前言 一 安装 二 配置 下载 上传 个人应用 团队应用 共享配置 令牌token失效处理 引用 借鉴文章 前言 该插件已被VSCODE弃用 下载在VSCODE上已经无法下载该插件 可以通过在vscode上登录github或微软账
  • Visual Studio Code 1.35更新:远程开发终于来啦

    前段时间大家可能看过一个新闻 微软为VSC开发一款名为Remote Development的扩展程序 可以让我们使用本地VSC开发和调试远程机器上的代码 这个功能对于我这个不会使用vim等linux工具的人来说 简直是一个重大消息 可惜的是
  • 怎么用vscode进行单步调试

    1 修改launch文件 version 0 2 0 configurations name gdb Launch type cppdbg request launch program workspaceFolder build my cm
  • vscode 中使用鼠标Ctrl+滚轮放大缩小

    1 使用鼠标Ctrl 滚轮放大缩小 打开 文件 gt 首选项 gt 设置 gt 用户 gt 下面的JSON 2 3 点击在settings json中编辑 4 添加下面一行 editor mouseWheelZoom true 5 最后保存
  • Ant Design Pro从零到一(认识AntD)

    废话 在我们第一次接触AntD的时候 会遇到两个东西 一个是Ant Design 另一个是Ant Design Pro 他们的官网分别是 Ant Design 一套企业级 UI 设计语言和 React 组件库 Ant Design Pro
  • [VScode]终端回应“pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。“解决思路

    问题概述 遇到问题 在VScode终端输入pnpm install有错误提示 pnpm 无法将 pnpm 项识别为 cmdlet 函数 脚本文件或可运行程序的名称 请检查名称的拼写 如 果包括路径 请确保路径正确 然后再试一次 所在位置 行
  • vscode: Downloading package ‘C/C++ language components (Linux / x86_64)‘ Failed.

    使用vscode远程连接docker容器 进入容器后报错 Updating C C dependencies Downloading package C C language components Linux x86 64 Failed R
  • vscode使用手册

    VS Code Visual Studio Code 是一款轻量级 跨平台的源代码编辑器 支持语法高亮 自动补全 调试 Git 版本控制等功能 下面是一些使用 VS Code 的基本操作 安装和启动 在官网上下载并安装 VS Code 打开
  • 办公小技巧:VSCode无法安装插件怎么办?

    Visual Studio Code是Microsoft开发的一款开源免费的现代化轻量级代码编辑器 它体积小 启动快 系统内存占用率低非常适合搭建IDE VSCode不仅支持几乎所有主流的开发语言的语法高亮 智能代码补全 自定义热键 括号匹
  • vscode乱码

    vscode中文乱码怎么解决 vscode是一款跨平台源代码编辑器 能够在桌面上运行 并且能够用途windows macOS以及Linux 但是有不少小伙伴们在使用vscode时 输入输出的却是中文代码 也不知道如何解决 那么今天小编就来告
  • vscode配置clangd和clang-format

    vscode安装和配置 如何安装和配置vscode以搭建c 开发环境 可以查看我的另一篇博客 Windows上最轻量的vscode C 开发环境搭建 在这篇博客中 详细介绍了如何安装vscode以及应该安装哪些插件 这里不再赘述 vscod
  • vscode网页版code-server搭建和使用

    主力编辑器是vscode 手上正好也有台闲置的服务器 如果把vscode搞到浏览器中 那么在一些没有vscode的设备上也可以愉快的敲代码了 code server它可以让有浏览器的设备访问服务器上运行的vscode 这篇文章记录下code
  • 3WebGL shader准备工具

    VSCode安装 VSCode 全称 Visual Studio Code 是一款由微软开发且跨平台的免费源代码编辑器 该软件支持语法高亮 代码自动补全 又称 IntelliSense 代码重构 查看定义功能 并且内置了命令行工具和 Git
  • VMware--配置php debug环境之PHPStudy+VSCode Xdebug php调试

    目录 1 win配置php环境 1 1 配置PHPStudy 1 1 1 下载phpstudy 1 1 2 配置phpstudy 1 1 3 测试phpstudy是否配置完成 1 2 配置环境变量 1 2 1 打开环境变量 添加配置 1 2
  • vscode调试mit6s081Lab

    环境 mit6 s081的实验环境 gdb multiarch 用于gdb调试 vscode调试实质上就是提供个图形化页面 底层还是这个 安装 gdb multiarch sudo apt get install gdb multiarch
  • 人工智能计算机视觉:解析现状与未来趋势

    导言 随着人工智能的迅速发展 计算机视觉技术逐渐成为引领创新的关键领域 本文将深入探讨人工智能在计算机视觉方面的最新进展 关键挑战以及未来可能的趋势 1 简介 计算机视觉是人工智能的一个重要分支 其目标是使机器具备类似于人类视觉的能力 这一
  • VUE实践优化:轮询机制与代码结构升级

    前言 我们之前探讨过 对于包含处理状态的表格数据 我们可以通过轮询的方式进行处理 轮询更新进度条 JavaScript中的定时器和异步编程技巧 然而 当我们离开页面时 定时器仍会继续触发请求 这会造成资源的浪费 因为返回的数据并没有被渲染出
  • VScode配置mingw C语言环境变量

    C语言IDE VScode VScode是个人比较喜欢的一款IDE软件 鄙人曾同时在VScode软件中运行三个终端 开发Python Golang和C语言 下载地址如下 code visualstudio com VScode配置mingw

随机推荐