zoukankan      html  css  js  c++  java
  • VSCode: Launch create-react-app and Chrome with launch.json

    原文:http://nealbuerger.com/2017/09/vscode-launch-create-react-app-and-chrome-with-launch-json/

    Developing React (with create-react-app) and Visual Studio Code you usually press ESC-` and then npm start. The script from create-react-app then automatically starts a Browser. That you then close. then reopen by pressing F5 to start Chrome in debug mode.

    Let’s make these steps a little quicker.

    Create a Task for npm start

    Press Ctrl-Shift- and Select “Tasks: Configure Default Test Task” This will create a tasks.json file.

    In the tasks.json file you need to add a couple of values:

    • isBackground: true - launch.json will not wait until the task completes
    • problemMatcher Needs to be defined to figure out when the task has completed its initialization phase and it is safe to continue with the next task 
    {
      // See https://go.microsoft.com/fwlink/?LinkId=733558
      // for the documentation about the tasks.json format
      "version": "2.0.0",
      "tasks": [
          {
              "type": "npm",
              "script": "start",
              "group": {
                  "kind": "test",
                  "isDefault": true
              },
              "isBackground": true,                       //This prevents the launch.json to wait for the completion of the task
              "problemMatcher": {
                  "owner": "custom",                      //This is not needed but, required by the problemMatcher Object
                  "pattern": {
                      "regexp": "^$"                      //This is not needed but, required by the problemMatcher Object
                  },
                  "background": {
                      "activeOnStart": true,
                      "beginsPattern": "Compiling...",    //Signals the begin of the Task
                      "endsPattern": "Compiled .*"        //Signals that now the initialization of the task is complete
                  }
              },
              "identifier": "Start Server"
          }
      ]
    }
    

      

    Configure create-react-app

    To prevent launching the browser you need to add in your .env-file following line:

    Configure the Launch.json file

    Press F5 and select Chrome and a launch.json file will be created.

    • Change the port to 3000 (create-react-app default)
    • Add a preLaunchTask to start the task we defined earlier     
    {
      "version": "0.2.0",
      "configurations": [ 
          {
              "name": "Chrome",
              "type": "chrome",
              "request": "launch",
              "url": "http://localhost:3000",         //Change to the create-react-app default 3000
              "webRoot": "${workspaceRoot}/src",
              "preLaunchTask": "npm: start"           //Add prelaunch Task npm: start (defined in tasks.json)
          }
      ]
    }
    

      

    Start Working

    Tadaa, now you press F5 and can start debugging directly in vscode. The background task will continue running even when you stop debugging.

    Stop Working

    You need to terminate the task via ctrl-shift-p > terminate Task. (Or you just close vscode)

  • 相关阅读:
    springboot整合mongdb
    自动垃圾收集机制
    类加载机制
    MacBook 虚拟机的选择
    Spark 学习之 spark-sql.sh的简单使用
    spark 学习之 hadoop搭建之 ssh免密码登录
    userdel account is currently in use
    linux 磁盘管理
    qt ui文件转换成python
    opensuse安装telegram客户端小计
  • 原文地址:https://www.cnblogs.com/panpanwelcome/p/14538455.html
Copyright © 2011-2022 走看看