vscode task

토글


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start json server",
      "type": "shell",
      "command": "cd json-server-exam && json-server --watch db.json --port 3001",
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "^(.*)$",
          "file": 1,
          "location": 2,
          "message": 3
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*",
          "endsPattern": ".*"
        }
      }
    },
    {
      "label": "start npm",
      "type": "shell",
      "command": "cd shop && npm start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "^(.*)$",
          "file": 1,
          "location": 2,
          "message": 3
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*",
          "endsPattern": ".*"
        }
      }
    },
    {
      "label": "start servers",
      "dependsOn": ["start json server", "start npm"],
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

msw, storybook, nextjs → vscode task


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Next.js Dev Server",
      "type": "shell",
      "command": "npm run dev",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Storybook",
      "type": "shell",
      "command": "npm run storybook",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "msw",
      "type": "shell",
      "command": "npm run mock",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run All",
      "dependsOn": ["Next.js Dev Server", "Storybook", "TSX Watch"],
      "group": "build"
    }
  ]
}


[
  {
    "key": "ctrl+alt+t",
    "command": "workbench.action.tasks.runTask",
    "args": "start servers",
    "when": "editorTextFocus"
  }
]

vscode 키바인드가 제대로 동작하지 않는 문제가 있음

cmd+p > run task를 열고 시작할 taks label을 선택해줘야함..

start.ps1


Start-Process "powershell" -ArgumentList "npm run storybook"
Start-Process "powershell" -ArgumentList "npm run mock"
Start-Process "powershell" -ArgumentList "npm run dev"


"scripts" :  {
	"start-all": "powershell -File ./start.ps1"
}

파워쉘 스크립트로 실행하는법,

외부 파워셸로 실행되기 때문에 단점일수도 장점일수도있음.

맥에서는 sh 파일로 만들어줘야함

npm: concurrently

Run commands concurrently. Latest version: 8.2.2, last published: 7 months ago. Start using concurrently in your project by running `npm i concurrently`. There are 1682 other projects in the npm registry using concurrently.

https://www.npmjs.com/package/concurrently


"scripts" : {
	"local": "concurrently \"next dev\" \"storybook dev -p 6006\" \"npx tsx watch ./src/mocks/http.ts\"",
}

concurrently 라이브러리 : 한 쉘에서 병렬로 스크립트를 실행하기때문에 내가 원하는 방향은 아니지만

이또한 장점이, 단점이 될 수 도 있음.

js에서 커멘드 실행하기 → 잘안댔음.


const { exec } = require('child_process');
const os = require('os');

const isWindows = os.platform() === 'win32';
console.log('isWindows', isWindows);
const commands = {
  windows: ['start cmd /k "npm run storybook"', 'start cmd /k "npm run mock"', 'start cmd /k "npm run storybook"'],
  unix: [
    'gnome-terminal -- bash -c "npm run next-dev; exec bash"',
    'gnome-terminal -- bash -c "npm run storybook-dev; exec bash"',
    'gnome-terminal -- bash -c "npm run tsx-watch; exec bash"',
  ],
};

const selectedCommands = isWindows ? commands.windows : commands.unix;

selectedCommands.forEach(command => {
  exec(command, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error executing command: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`Error output: ${stderr}`);
      return;
    }
    console.log(`Command output: ${stdout}`);
  });
});