프로젝트를 열 때 VS 코드에서 명령을 자동으로 실행하는 방법

때때로, 내가 자바스크립트 프로젝트를 열 때, 나는 웹 패키지를 실행하는 것을 잊어버리는데, 이것은 나를 걸어 넘어뜨릴 수 있다.기본 설정은 웹 패키지에서 편집을 감시하고 자동으로 연결을 터치하는 것입니다.
보통 내가 아침에 혼미할 때, 나는 한 지경에 이르렀다. 나는 일부 출력이 이미 변화가 생겼으면 좋겠지만, 아무 일도 일어나지 않았다.나는 1분 동안 자신의 방위를 확정한 후에 그doh가 생겼다!순간, 나는 내가 아직 웹 패키지를 개발하지 못했다는 것을 깨달았다.🤦‍♂️
따라서 다시는 부끄러워하지 않도록 웹 패키지를 사용하는 자바스크립트 프로젝트를 열 때 웹 패키지를 시작하는 것이 좋습니다.VS 코드는 이 일에 임무를 내장했다.Tasks User Guide의 온전한 스킨니를 볼 수 있습니다.나는 당신에게 나의 용례를 어떻게 처리하는지 보여줄 것이다.
제 package.json 에서npm 스크립트를 실행하고 싶습니다.명령줄에서, 나는 실행할 것이다. npm run webpack너는 어떤 명령도 마음대로 실행할 수 있다.

 {
   // ...other stuff

   "scripts": {
    "webpack": "webpack --mode development --watch",
   }
 }

TLDR

작업공간 작업에 이 작업을 추가합니다.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run npm webpack on startup",
      "type": "shell",
      "command": "npm run webpack",
      "windows": {
        "command": "npm run webpack"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

자동 작업 허용 폴더의 자동 작업 허용 명령

작업 파일을 만드는 방법

프로젝트별 작업은 <project folder>/.vscode/tasks.json에 저장됩니다.직접 파일을 만들거나 작업: 작업 구성 명령을 실행하여 템플릿 파일을 구성할 수 있습니다.
파일을 만들기 전에 이 명령은 몇 가지 질문을 할 것입니다.

설정할 작업을 선택합니다. 이 작업을 건너뛰고 Enter를 클릭할 수 있습니다.

작업 템플릿 선택: 추가 옵션을 선택합니다.

이것은 기본 임무다.니가 얻은 제이슨.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

작업 작성 방법

그래서 우리는 새로운 임무 대상을 추가하고 싶다.당신은 이곳의 속성 목록을 클릭할 수 있습니다.

다음은 가장 중요한 작업 속성 목록입니다.

태그: 사용자 인터페이스에 사용되는 태그입니다.

유형: 사용자 정의 작업의 경우 Ctrl+Space 또는 shell일 수 있습니다.process 를 지정하면, 이 명령은 셸 명령으로 해석됩니다. 예를 들어 bash, cmd.shell를 지정하면 명령은 실행할 프로세스로 해석됩니다.우리는 선택하고 싶다process.

command: 실행할 실제 명령입니다.실행하고 싶습니다shell.

윈도우즈: 윈도우즈에 지정된 속성입니다.Windows 운영 체제에서 명령을 실행하면 기본 속성이 아닌 이 속성이 사용됩니다.이것도 npm run webpack 속성이 있습니다. 만약 당신이 Windows 사용자라면, 여기에서 명령을 다시 지정할 필요가 있는지 모르겠습니다.나는 이것이 너의 특수 명령에 달려 있다고 생각한다.넣을게요.

프레젠테이션: 터미널에서 작업 출력을 처리하는 방법을 정의합니다.다음과 같은 속성을 제공합니다.

표시: 통합 터미널 패널을 전면에 배치할지 여부를 제어합니다.유효한 값은 다음과 같습니다.

항상 - 패널이 항상 앞에 놓입니다.기본값입니다.나는 명령이 시작할 때 실행되는 것을 보는 것을 더 좋아한다. 그래서 이 옵션은 내가 원하는 것이다.

아니요 - 터미널 패널을 앞에 명시적으로 배치해야 합니다.

사운드 없음 - 스캔 오류와 경고가 없는 출력만 터미널 패널을 앞에 놓습니다.

패널: 터미널 인스턴스가 작업 실행 사이에서 공유되는지 여부를 제어합니다.가능한 값은 다음과 같습니다.

공유: 터미널을 공유하고 다른 작업이 실행하는 출력을 같은 터미널에 추가합니다.

전용: 터미널은 특정 작업에 전용입니다.이 작업을 다시 실행하면 터미널이 다시 사용됩니다.

새: 이 작업은 매번 새로운 깨끗한 터미널을 사용합니다.가장 좋은 것은 깨끗한 판넬이다.이거 봐!

runOptions: 작업의 실행 시간과 방식을 정의합니다.재산은 다음과 같습니다.

runOn: 작업의 실행 시간을 지정합니다.

command:run task 명령을 통해서만 작업을 실행할 수 있습니다.

default: 폴더가 포함된 폴더가 열릴 때 작업이 실행됩니다.이게 우리가 원하는 거야!

나의 임무

이것이 바로 나의 비결이다.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run npm webpack on startup",
      "type": "shell",
      "command": "npm run webpack",
      "windows": {
        "command": "npm run webpack"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

'folderOpen' 에서 실행되는 작업이 포함된 항목을 처음 열 때, 이 폴더에서 작업이 자동으로 실행될 수 있는지 묻는 알림을 받을 것입니다.난 몰라!
명령 tasks:Allow automatic tasks in Folder를 실행하여 자동 작업을 사용할 수 있습니다.

결과는요

다음에 항목을 열면 다음과 같이 작업이 자동으로 실행됩니다.

만세!한 가지 일을 생각하지 마라!😅
읽어주셔서 감사합니다!myRSS feed를 구독하시고 소셜미디어에서 본문을 공유하신 것을 환영합니다.💌 🙂