vscode之调试es6代码

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

vscode之调试es6代码相关推荐

lldb 调试php,linux系统下如何在vscode中调试C++代码
本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...
VSCode配置调试JavaScript代码
VSCode配置调试JavaScript代码官网说明调试 1.创建配置 launch.json 文件按照图示点击创建 LeetCode 是文件夹的名字,以文件夹配置选择Node.js调试器 Le ...
vscode 调试参数_如何通过vscode运行调试javascript代码
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 ...
【Js】【调试】VSCode中调试Js代码
以前调试一段js代码总是会将js代码嵌入html页面,然后利用浏览器的开发者工具打断点来调试js代码,感觉还是有一点麻烦,想着直接在vscode中调试一个js代码那不就很方便了吗. vscod ...
程序猿的武林秘籍,使用vscode一键调试代码
如何快速搭建vscode环境,调试C代码呢? 这篇文章将进行讲解,我们使用了ctestcode 编码助手工具,分为5个步骤. (1)选中需要调试的代码, 点击菜单编码助手->创建单元测 (2) ...
使用 vscode 调试前端代码
使用 vscode 调试前端代码今天我们以webpack项目为基础讲解配置复制代码 1. 安装插件 Debugger for Chrome 2. 修改 config/index.js 将devto ...
Visual Studio Code(VSCode) 编辑/编译/调试 C++ 代码
前言最近想要切换编辑工具,之前工作中使用过 Source Insight,Eclipse,CLion 来写 C++ 代码.目前来说 Source Insight 已经非常古老,只有编写代码还说得过去 ...
手把手教你用Vscode Debugger调试代码
http://shooterblog.site/2018/05/19/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%94%A8Vscode%20De ...
如何用vscode调试ts代码
如何用vscode调试ts代码准备工作:ts下载好,vscode下载好,node下载好,npm包安装好打开vscode,在拓展商店搜索"Code Runner",下载好, 编辑 ...

vscode之调试es6代码

vscode之调试es6代码相关推荐

最新文章

热门文章