vscode utilise ES6 pour déboguer js

vscode débogage js en utilisant ES6

débogage vscode

vscode utilise node.js pour le débogage. Il ne prend pas en charge la syntaxe ES6 par défaut , la solution est donc très simple. Convertissez simplement la syntaxe ES6. Pour la conversion de la syntaxe ES6, nous pouvons utiliser babel, le compilateur js, pour convertir la syntaxe ES6.

Qu’est-ce que Babel ?

Babel est un compilateur JavaScript principalement utilisé pour convertir le code ECMAScript 2015+ (ES6) en une version rétrocompatible de JavaScript dans les navigateurs ou environnements actuels et anciens .

solution

Installer Babel

L'installation de Babel est très simple, utilisez simplement npm pour l'installer.

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

Modifier package.json

Ajoutez les deux options suivantes dans package.json scriptspour ajouter des commandes de script. Habituellement, npm run buildvous trouvez le fichier package.json et exécutez les commandes de script qui y sont définies.

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

Analysons cette commande babel :

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

Exécutez la commande de script via npm dans le terminal

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

Configurer le vscode

Configurer launch.json

Créez un fichier appelé fichier .vscode dans le répertoire du projet launch.json.

point important:

**"programme"** est le chemin du programme en cours d'exécution. Vous devez écrire l'adresse du fichier .js compilé. Parce que lors du débogage, nous débogueons directement le fichier source, donc le chemin d'exécution du fichier ici est égal à : répertoire de travail + Chemin du fichier d'empaquetage + nom du fichier source
**"preLaunchTask"**Le nom de la tâche de script à exécuter est configuré dans Tasks.json. La raison de cette configuration est la suivante : chaque fois que vous modifiez le code source, vous devez recompiler la syntaxe ES6 pour former un nouveau .js. fichier, nous avons donc besoin de configurer les tâches qui peuvent être exécutées sur la ligne de commande
**"sourceMaps"** signifie qu'un fichier de mappage existe (.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/**"
            ]
        }
    ]
}

Configurer tâches.json

Configurer les tâches. Chaque fois qu'un fichier est testé, la tâche sera exécutée et les fichiers sources sous le src du projet seront recompilés.

{
    
    
    "version": "2.0.0",
    "tasks": [
        {
    
    
            "label": "jstest",  // 该任务的名字，只需要增加这一条即可
            "type": "npm",
            "script": "js:test",  //任务等价于 npm run js:test
            "problemMatcher": []
        }
    ]
}