vscode 使用ES6调试js

vscode 调试js使用ES6

vscode调试

vscode使用node.js调试，默认是不支持ES6语法的，所以解决方案也十分简单，对ES6语法进行转换即可。对ES6语法转换我们可以通过babel这个js编译器对ES6语法进行转换即可。

什么是 Babel？

Babel 是一个 JavaScript compiler，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+（ES6） 代码转换为 JavaScript 向后兼容版本的代码。

解决方案

安装Babel

安装babel十分简单，使用npm进行安装即可

npm install babel-cli babel-preset-env babel-preset-es2015 -D
1

修改package.json

在package.json中添加以下两个选项，scripts用于添加脚本命令，平时的npm run build都是寻找package.json文件并执行里面设置的脚本命令。

  "scripts": {
    "js:test": "babel src -d build -s", //babel的脚本指令
  },
  "babel": { //对babel的设置
    "presets": [  //要处理的语法
      "es2015"
    ],
    "sourceMaps": true, //生成映射文件.map
    "retainLines": true
  }
1
2
3
4
5
6
7
8
9
10

下面对这个babel命令进行解析

// src代表源文件命令 
// build代表要编译文件存放目录 
// -d代表编译文件存放目录不存在时自动创建
// -s代表生成.map文件，调试时需要的文件
babel src -d build -s
1
2
3
4
5

在终端通过npm运行脚本命令

/**
  *发现目录下生成一个build文件夹
  *文件夹有两类文件，.js文件和.js.map文件
  *.js文件为编译后文件（已经将里面的import等语法进行传化了，是vscode能运行的文件）
  *.js.map文件是映射文件将编译后的.js文件和源.js文件进行关联，打断点时能调试。
*/
npm run test
1
2
3
4
5
6
7

配置vscode

配置launch.json

在项目目录下的.vscode文件中创建一个叫launch.json文件。

注意点：

• **“program”**为运行程序路径，应该写编译后的.js文件地址，因为调试时，我们都是直接对源文件进行调试的，所以这里的文件执行路径等于：工作目录+打包文件路径+源文件名称
• **“preLaunchTask”**要运行的脚本任务名称，在tasks.json中配置，配置这个的原因是：你每次改源代码时都需要重新编译ES6语法形成新的.js文件，所以我们需要配置能在命令行上运行的任务
• **“sourceMaps”**代表有映射文件存在（.js.map）

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
        // 多个独立的配置项
    "configurations": [  
        {
            "type": "node", //类型
            
            "request": "launch",
            
            "name": "es6",
            
            //${workspaceFolder}当前工作目录,${fileBasename}当前运行文件名称
            //这里必须设置文编译后的js文件，因为vscode不认ES
            //测试运行文件
            "program": "${workspaceFolder}/build/${fileBasename}",
            
            // 如果存在SourceMap就使用
            "sourceMaps": true,  
			
            // 调试之前要做的任务名(运行tasks.json文件里面的脚本任务)
            "preLaunchTask": "jstest",   
            
            // 是否启动后自动停止程序
            "stopOnEntry": false,  

            // 生成的代码中，如果无法映射回源代码，就自动单步执行
            "smartStep": true, 
        	
            //编译文件输出地址
            "outFiles": [
                "${workspaceFolder}/build/**"
            ]
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

配置tasks.json

配置任务，每次对文件测试时会运行改任务，重新编译工程src下的源文件

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "jstest",  // 该任务的名字，只需要增加这一条即可
            "type": "npm",
            "script": "js:test",  //任务等价于 npm run js:test
            "problemMatcher": []
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11