Быстрый предварительный просмотр проекта Localhost с возвышенным текстом

Во время разработки мы часто переключались между браузерами и редакторами кода для просмотра результатов нашего кода. Если вы работаете в Sublime Text, вы обнаружите, что файлы будут открываться в браузерах с протоколом file: //.

Но если вы разрабатываете сайт на основе PHP, вы должны просматривать свой сайт по протоколу HTTP, поэтому file: // в этом случае работать не будет. То же самое требуется, когда вы хотите проверить свой веб-сайт в Adobe Edge Inspect в противном случае вы не сможете просматривать сайт на мобильных устройствах.

Рекомендуемое чтение: работа с фрагментами кода в возвышенном тексте

Если вы используете Sublime Text, мы хотели бы дать вам быстрый совет, который может упростить ваш рабочий процесс при работе над проектом. Вы можете быстро просмотреть свой сайт в браузере по протоколу HTTP. Давайте проверим это.

SidebarEnhancement

Первое, что вам нужно сделать, это установить SidebarEnhancement, Это плагин Sublime Text, который добавляет несколько новых функций в боковой панели SublimeText. Вы можете установить этот плагин с Контроль пакетов,

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

cd ~ / Библиотека / Приложение Поддержка / Sublime Text 3 / Пакеты
git clone https://github.com/titoBouzout/SideBarEnhancements.git

После установки вы найдете несколько новых опций, если щелкнуть правой кнопкой мыши на боковой панели. Вы можете просмотреть свой проект в браузере, выбрав Открыть в браузере. Это откроет файлы в браузере с протоколом file: //, как уже упоминалось.

Чтобы изменить его, чтобы он открывался по протоколу HTTP, щелкните правой кнопкой мыши папку проекта и выберите «Проекты»> «Изменить URL-адреса предварительного просмотра». Откроется файл JSON с именем SidebarEnhancements.json на новой вкладке.

В этом файле мы укажем несколько вещей: путь проекта, тестовый URL и рабочий URL. вот пример:

{
“/ Пользователи / thoriq / Сайты / Проект”: {
“Url_testing”: “HTTP: // локальный / проект”,
“Url_production”: “http://www.project.com”
}
}

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

Наконец, url_production указывает производственный URL-адрес, это URL-адрес, который переводит веб-сайт в оперативный режим и позволяет получить к нему доступ через Интернет.

Кроме того, вы также можете добавить несколько проектов, например, так.

{
// 1-й проект
“/ Пользователи / thoriq / Сайты / Проект”: {
“Url_testing”: “HTTP: // локальный / проект”,
“Url_production”: “http://www.project.com”
}

// 2-й проект
“/ Users / thoriq / Sites / project2”: {
“Url_testing”: “HTTP: // локальный / project2”,
“Url_production”: “http://www.project2.com”
}

// 3-й проект
"/ Users / thoriq / Sites / project2": {

“Url_testing”: “HTTP: // локальный / project3”,
“Url_production”: “http://www.project3.com”
}
}

Сочетания клавиш
Существуют горячие клавиши, чтобы сделать это проще: нажмите F12, чтобы открыть файлы проекта в тестовом URL, и Alt + F12, чтобы открыть проект в рабочем URL.

Чтобы изменить ключи (в случае конфликта при использовании), перейдите в «Настройки»> «Настройка пакета»> «Боковая панель»> «Привязки клавиш» – «Пользователи» и внесите в них изменения. Добавьте следующие коды и измените значения в строке «keys».

[
{ “keys”: [“F12”],
“команда”: “side_bar_open_in_browser”,
“арг”: { “дорожка”:[], “тип”: “тестирование”}
},
{“ключи”: [“alt+F12”],
“команда”: “side_bar_open_in_browser”,
“арг”: { “дорожка”:[], “type”: “production”}
}
]

Например:

[
{ “keys”: [“command+shift+r”],
“команда”: “side_bar_open_in_browser”,
“арг”: { “дорожка”:[], “тип”: “тестирование”}
},
{“ключи”: [“command+shift+d”],
“команда”: “side_bar_open_in_browser”,
“арг”: { “дорожка”:[], “type”: “production”}
}
]

Это оно. Теперь вы можете быстро открыть свой проект в браузере по протоколу HTTP с помощью сочетаний клавиш. Просто убедитесь, что ваш локальный сервер работает. Если каким-то образом вы не можете выполнить эту работу или испытываете затруднения в применении этого учебника, не стесняйтесь задавать свой вопрос в комментариях ниже.