[VSCode] Автоматический запуск среды разработки

[VSCode] Запуск среды разработки автоматически

Это довольно неожиданно, но в мире есть два типа разработчиков: разработчики, которые всегда держат среду разработки поднятой, и разработчики, которые каждый раз ее сбрасывают.

Для разработчиков, которые сбрасывают каждый раз, включая меня, это мучение — каждый раз открывать несколько терминалов и набирать множество команд в каждом из них.

Поэтому в этой статье я расскажу, как автоматически запускать среду разработки при открытии проекта в VSCode!

Если вы даже настроите Alfred, что я покажу вам в качестве бонуса, вы сможете запускать среду разработки одной командой, и она будет выглядеть примерно так!

Поехали!

Версия VSCode и ОС для писателя

• VSCode: 1.66.0
• macOS Monterey

Здравствуйте, пользовательская задача

Для автоматического выполнения команд при открытии проекта в VSCode можно использовать пользовательские задачи.

Практика делает совершенным.

Сначала определим задачу, которая отображает Hello Custom Task в вашем терминале.

Определите задачу

1. Создайте пустой каталог и создайте в нем .vscode/tasks.json.

$ mkdir ~/hellovscode-tasks                    
$ mkdir ~/hellovscode-tasks/.vscode            
$ touch ~/hellovscode-tasks/.vscode/tasks.json

1. Откройте проект (необходимо установить команду code)

code ~/hellovscode-tasks

1. Определите пользовательскую задачу, отредактируйте файл .vscode/tasks.json, созданный в шаге 1, следующим образом

{
  "version": "2.0.0",
  "tasks": [
    {
      // Display name
      "label": "Hello Custom Task",
      // Type of task。shell or process
      "type": "shell",
　　　 // 🌟 Command to execute
      "command": "echo Hello Custom Task", 
      // Write over default properties when executed in windows
      "windows": {
        "command": "echo Hello Custom Task(Windows)"
      },
　　　 // Group of task belongs to。test、build、none
      "group": "none",
　　　 // Specify how to display execution results
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": {
    // 🌟 When the command execlutes
        "runOn": "folderOpen"
      }
    }
  ]
}

Важной частью является часть, отмеченная 🌟.

Более подробно вы можете посмотреть в схеме tasks.json

Затем, я думал, что это запустится, если я снова открою папку, но этого не произошло.

Это большой подводный камень.
Для работы "runOn": "folderOpen", вам нужно разрешить выполнение, запустив команду вручную.

Разрешить выполнение заданий

1. Выберите Cmd+P > Задачи: Run Task
   

2. Выберите определенную вами задачу HelloCustomTask.
   

3. После этого в правом нижнем углу экрана появится тост с вопросом, хотите ли вы разрешить автоматическое выполнение при открытии папки.
   

Вот и все, вы определили свою задачу!

Давайте проверим ее работоспособность, закрыв и снова открыв проект!

Испытайте это на реальном проекте

Теперь, когда вы поняли основы пользовательских задач, давайте опробуем их на реальном проекте.

На этот раз в качестве примера я буду использовать среду разработки Nitte, системы планирования услуг, которую я разрабатываю лично.

Пожалуйста, замените команду на свою собственную среду разработки!

Определите задачи для каждой команды

Следующие две команды должны быть выполнены при запуске моей среды разработки.

• yarn run serve: запустить сервер
• yarn ngrok: запустить ngrok

Поэтому сначала я определяю задачи для выполнения этих двух команд в .vscode/tasks.json..

{
  "version": "2.0.0",
  "tasks": [
    // yarn serve command
    {
      "label": "yarn serve",
      "type": "shell",
      "command": "yarn serve",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    // yarn ngrok command
    {
      "label": "yarn ngrok",
      "type": "shell",
      "command": "yarn ngrok",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

Объединение нескольких задач в одну задачу с помощью dependsOn

Затем определите задачу, которая объединяет созданные вами задачи в одну задачу.

Чтобы объединить несколько задач в одну, используйте свойство dependsOn.
Несколько задач можно объединить вместе, описав метки объединяемых задач в виде массива.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "yarn serve",
      ...
    },
    {
　　　 "label": "yarn ngrok",
      ...
    },
　　　// To combine multiple tasks
    {
      "label": "dev",
      "type": "shell",
      // Describe the labels of the tasks to be grouped as an array.
      "dependsOn": [
        "yarn serve",
        "yarn ngrok"
      ],
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

💡 По умолчанию задачи, записанные в «dependsOn», выполняются параллельно.
Чтобы указать порядок выполнения, укажите «dependsOrder»: «sequence».💡

Затем, как и раньше, разрешите выполнение один раз из Tasks: Run Task..

Проверим работоспособность, Все нормально, если все определенные задачи выполняются и среда разработки запускается простым открытием папки.

(Бонус) Давайте подключимся к Alfred, чтобы сделать это еще проще.

Это уже намного проще, но для меня все еще хлопотно каждый раз открывать терминал и набирать текст.

code path/to/project

Итак, мы используем Alfred Workflows, чтобы сделать это проще.

⚠️Workflowを使うにはPowerPack(有料)が必要です。⚠️

1. На вкладке Workflows в Alfred выберите + > Blank Workflow в нижней правой части экрана.

1. Введите имя и выберите Create.
   

2. В представлении рабочего процесса щелкните правой кнопкой мыши > Входы > Ключевое слово
   

3. Введите ключевое слово для вызова рабочего процесса. Измените значение на No Argument и выберите Save.
   

4. Выберите проекцию, выходящую из узла ключевого слова > Actions > RunScript
   

5. Напишите сценарий для открытия проекта VSCode и Save.

# Backend
/usr/local/bin/code /Users/matsumoto.kazuya/ghq/github.com/WombatTechnology/nitte-backend/functions
# Frontend
/usr/local/bin/code /Users/matsumoto.kazuya/ghq/github.com/WombatTechnology/nitte-frontend
# Open Browser
/usr/bin/open -a "/Applications/Google Chrome.app" 'http://localhost:8080'

💡Когда я запускал bash из Alfred, почему-то не было указано пути, поэтому я запустил его с полным путем /usr/local/bin/code вместо code💡.

Теперь все работает в среде разработки с помощью одной команды, как в видео в начале!
Мы сделали это 🎉