[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💡.

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

Оцените статью
Procodings.ru
Добавить комментарий