vscode auto run task on save code & automatic debug All In One

save code & automatic run command script

VSCode Tasks API

Lots of tools exist to automate tasks like linting, building, packaging, testing, or deploying software systems.
Examples include the TypeScript Compiler, linters like ESLint and TSLint as well as build systems like Make, Ant, Gulp, Jake, Rake, and MSBuild.

https://code.visualstudio.com/docs/editor/tasks

task.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    }
  ]
}

package.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "lint",
      "problemMatcher": ["$eslint-stylish"]
    }
  ]
}

https://code.visualstudio.com/docs/editor/tasks#_task-autodetection

steps

Command + Shfit + P / Command + Shfit + B

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "type": "npm",
      "script": "test",
      "group": "test",
      "problemMatcher": [],
      "label": "npm: test",
      "detail": "node ./js-solutions/008\\ string-to-integer-atoi.js"
    }
  ]
}


{
  "name": "leetcode",
  "version": "1.0.0",
  "description": "leetcode",
  "main": "index.js",
  "scripts": {
    "test": "node ./js-solutions/008\\ string-to-integer-atoi.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xgqfrms/leetcode.git"
  },
  "keywords": [
    "leetcode"
  ],
  "author": "xgqfrms",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/xgqfrms/leetcode/issues"
  },
  "homepage": "https://github.com/xgqfrms/leetcode#readme"
}

node.js watch ❌

  "scripts": {
    "test": "node --watch ./js-solutions/008\\ string-to-integer-atoi.js"
  },

node.js watch file change by command line

fs.watchfile & fs.watch

md5 hash

https://thisdavej.com/how-to-watch-for-files-changes-in-node-js/

https://www.bezkoder.com/node-js-watch-file-changes/

https://stackoverflow.com/questions/36584637/nodejs-watch-directory-for-changes-in-background-and-perform-some-action

https://stackoverflow.com/questions/31583276/event-handler-on-file-change-and-get-changes-in-file-using-nodejs-file-system

automatic debug

launch.json

{
  // 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": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}"
    }
  ]
}

watch

https://code.visualstudio.com/docs/editor/debugging#:~:text=Variables and expressions can also be evaluated and watched in the Run view's WATCH section

https://code.visualstudio.com/docs/editor/debugging#_launch-configurations

extensions / plugins

Automatically Execute Bash Commands on Save in VS Code

https://betterprogramming.pub/automatically-execute-bash-commands-on-save-in-vs-code-7a3100449f63


// settings.json
{
  //...
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.pug$",
        "cmd": "pug ./ --doctype html --pretty"
      },
      {
        "match": "\\.ejs$",
        "cmd": "ejs-cli '*.ejs' --out dest/ --options options.json"
      }
    ]
  }
}


{
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": ".*",
        "isAsync": true,
        "cmd": "echo 'I run for all files.'"
      },
      {
        "match": "\\.txt$",
        "cmd": "echo 'I am a .txt file ${file}.'"
      },
      {
        "match": "\\.js$",
        "cmd": "echo 'I am a .js file ${file}.'"
      },
      {
        "match": ".*",
        "cmd": "echo 'I am ${env.USERNAME}.'"
      }
    ]
  }
}

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave#:~:text=Placeholder Tokens

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave#placeholder-tokens