Содержание
LiveReload для Sublime Text 3-не работает
Я настроил LiveReload для Sublime Text 3, следуя этому руководству .
Я установил плагин LiveReload для FireFox (он включен).
Я проверил его с помощью этого простого кода HTML:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>
По какой-то странной причине это не работает. Что может вызвать эту проблему?
sublimetext3
livereload
Поделиться
Источник
Robiow
25 апреля 2016 в 13:03
2 ответа
10
Решение:
- Откройте палитру команд с помощью
Ctrl + Shift + P - Тип LiveReload
- Когда будет выделено ‘Enable/disable плагина, нажмите Enter .
Или
- Перейдите в Настройки > Настройки пакета > LiveReload > Плагины > Включить/отключить плагины и нажмите Enter .
Поделиться
Robiow
25 апреля 2016 в 13:14
0
В случае chrome нажмите на три точки в правом верхнем углу браузера. Перейдите к more tools>extensions>find the live reload extension.Click в деталях, а затем разрешите доступ к файлу URL, как показано на фотографии
, После этого перейдите к sublime text. Перейдите в preferences>Package Settings>LiveReload>plugin и нажмите Включить/Отключить плагины.
(Если плагин был отключен, он будет включен, и наоборот)
Затем не забудьте закрыть браузер и sublime text и снова открыть оба.
Это должно сработать.
Поделиться
abhishek singh
25 февраля 2019 в 08:14
Похожие вопросы:
Sublime Text 3-японский IME вход не работает
Я установил японский IME в настройках клавиатуры на windows 7. С alt+shift он хорошо работает со встроенным текстовым редактором, но в sublime text 3 ничего не происходит. Затем я установил японский…
Как навсегда включить плагин Sublime Text 3 LiveReload
Недавно я установил плагин LiveReload для Sublime Text 3. Я также установил расширение LiveReload Chrome. Все работает отлично, однако остается одна головная боль. Мне нужно войти в управление…
Как установить LiveReload на Sublime Text 3?
Я использую Sublime Text 3 и хочу использовать LiveReload . У меня уже установлен браузерный плагин для Chrome. Node.js также установлен. Для Sublime Text 3 Live Reload этот плагин должен быть…
Sublime Text 2 — Как вызвать обновление LiveReload при внешнем изменении текущего редактируемого файла
Sublime Text 2 — Как вызвать обновление LiveReload, когда текущий редактируемый файл изменяется внешне (например, Visual Studio) Я установил LiveReload, и когда я активирую его в браузере, он может…
sublime text 3 ctrl backspace не работает
sublime text 3 Ctrl + Backspace не работает моя sublime keymap так, но все равно не работает { keys: [ctrl+backspace], command: delete_word, args: { forward: false } },
Возвышенный текст 3 и LiveReload Google Chrome extension
Я скачал новый Sublime Text 3 и не могу начать работать LiveReload Google Chrome extension Я знаю, что он работает для Sublime Text 2, но могу ли я использовать его с ST3?
Загрузка печени на Sublime Text 3
LiveReload, похоже, не работает над sublime text 3, Когда я загружаю его из элемента управления пакетами. Я нашел эту ссылку ( https://github.com/dz0ny/LiveReload-sublimetext2/tree/devel ) на…
Livereload не работает в Chrome с использованием Gulp, чего мне не хватает
Я пытаюсь использовать Livereload с помощью Gulp, Sublime Text 3 и Chrome, но по какой-то причине это не работает. Вот что я сделал. Установил расширение Livereload в Chrome. Установлен…
LiveReload для Sublime Text 3 был удален
Я хочу установить LiveReload для Sublime Text 3. Однако, когда я иду в Управление пакетами для установки, я понимаю, что LiveReload больше нет. Когда я посещаю этот сайт:…
Отладка Xdebug не работает на Sublime Text 3
У меня возникла проблема с тем, что Xdebug не работает с Sublime Text 3. Сервер, который я использовал, — это wampserver. Я использую мастер Xdebug, для которого я должен установить версию. Вот…
Как установить LiveReload на Sublime Text 3?
Я использую Sublime Text 3
и хочу использовать LiveReload . У меня уже установлен браузерный плагин для Chrome. Node.js также установлен.
Для Sublime Text 3 Live Reload этот плагин должен быть установлен:
https://github.com/dz0ny/LiveReload-sublimetext2
Как я могу установить его на Windows 7? Это просто говорит что-то о пользователях Linux и OSX.
sublimetext3
livereload
Поделиться
Источник
QJan84
17 сентября 2014 в 08:45
5 ответов
36
Платформа, которую я использовал: Linux Mint 17+
Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/ . Я смог запустить live reload на sublime text 3 с инструкциями на веб-сайте. Тем не менее, сайт написан на французском языке (я полагаю, — сказал Google translate), поэтому я подумал, что могу написать шаги здесь.
Сначала установите sublime text 3 отсюда http://www.sublimetext.com/3 или следуйте своим собственным путем, который вы предпочитаете (я сделал это с менеджером пакетов Linux mint).
Во-вторых, установите управление пакетами отсюда https://packagecontrol.io/installation#st3 (инструкция четко указана на веб-сайте, поэтому я не стал много объяснять).
В-третьих, откройте элемент управления пакетами (ярлык : Ctrl+Shift+P
) и найдите Package Control: Add Repository
Теперь в нижней части окна sublime text 3 появится область для ввода URL. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json
.
Снова откройте элемент управления пакетами и найдите Package Control: Install Package
, а затем найдите LiveReload
в следующем окне.
Настройте параметр пакета LiveReload на Preferences > Package Settings > LiveReload > Setting - Default
и вставьте это :
{ "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ] }
Теперь для вашего браузера установите плагин LiveReload, как показано ниже :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz
Не забудьте включить плагин LiveReload в браузере после его установки, чтобы сразу увидеть изменения кода, отраженные в браузере.
Примечание: Пользователи Chrome, чтобы LiveReload поддерживал file://
страниц, перейдите к chrome://extensions/
и отметьте Allow access to file URLs
.
Снимок сделан с Safari для Mac OSX:
Наслаждайтесь, Живая перезагрузка с Sublime Text 3.
Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/ .
Поделиться
Roshan Poudyal
29 октября 2015 в 08:55
- Как установить формат автоматического отступа HTML на Sublime Text 3?
У меня есть вопрос, когда я пишу код HTML на Sublime Text 3. Я просто хочу установить формат автоматического отступа HTML. Например, когда я пишу тег p, как в коде, отступ работает именно так. <p> Hello world! </p> Но я хочу писать как под кодом, а не выше. <p> Hello world!…
- Как установить плагин SFTP в Sublime Text 3 на Windows 7 64bit
Я не могу установить плагин SFTP ST3 на Windows 7 64bit. Он установлен, но все его меню серые, неактивны. Я читаю поддержку. Там написано:: Чтобы исправить это, выполните следующие действия: Откройте Настройки > Просмотр Пакетов… Перейдите в папку SFTP/ и откройте SFTP.py в Sublime. Я открываю…
4
Вместо живой перезагрузки я бы предложил синхронизацию браузера, которая делает то же самое, только лучше и без необходимости в раздражающих плагинах браузера.
Поделиться
marblewraith
18 сентября 2014 в 02:31
4
Плагин, упомянутый в комментариях, LiveReload
, доступен как для ST2, так и для ST3, как указано на графике по ссылке управления пакетом, которую я только что предоставил. Он также отлично работает на Windows, так как большинство его пользователей находятся на этой платформе. Репозиторий Github может быть назван » LiveReload-sublimetext2
«, но если вы читаете документацию, в ней также четко упоминается ST3. Инструкции Linux и OS X в файле readme предназначены для установки с использованием git
. Вы также можете использовать git на Windows (если он установлен), но автор, по-видимому, не хотел помещать явные инструкции в README. Вместо этого предпочтительным методом установки является управление пакетами, как описано выше пользователем DaV. Если его комментарий исчезнет, сделайте это:
- Откройте Sublime Text 3.
- Откройте палитру команд с Ctrl Shift P .
- Введите
pci
, чтобы вызватьPackage Control: Install Package
. Нажмите Enter . - Введите
livereload
и убедитесь, что выбран нужный пакет. Если нет, используйте клавиши со стрелками. Нажмите Enter . - Прочитайте документацию и либо добавьте соответствующий JavaScript в свои документы, либо загрузите плагин для браузера (что вы, похоже, уже сделали, так хорошо для вас).
- Иди развивайся.
Поделиться
MattDMo
17 сентября 2014 в 18:28
2
LiveReload Возвышенный текст3:
https://github.com/Grafikart/ST3-LiveReload
Но использование, похоже, изменилось:
Включите нужные плагины с помощью командной палитры (Ctrl+Shift+P), добавьте livereload.js в документ html.
Поделиться
Allen
11 июня 2015 в 04:06
2
Прошло много времени. Теперь, для sublime text 3, самый современный плагин LiveReload можно найти здесь .
Я столкнулся с этой проблемой, когда попытался настроить предварительный просмотр markdown файлов в реальном времени (я не тестировал другие типы файлов). Думаю, вам будет интересно.
Во-первых, вам нужно установить sublimetext-markdown-preview . Следуйте инструкциям по предварительному просмотру в brower .
используйте
cmd+shift+P
, затемMarkdown Preview
, чтобы показать следующие команды (вам будет предложено выбрать, какой парсер вы предпочитаете):- Markdown Предварительный просмотр: Предварительный просмотр в браузере
Используйте управление пакетами для установки LiveReload .
С Контролем Упаковки:
Выполните команду “Package Control: Install Package”, найдите и установите плагин LiveReload >.
Перезапустить редактор ST (при необходимости)Отредактируйте параметр пользователя плагина LiveReload в разделе
Preferences->Package Settings->LiveReload->Setting - User
, добавьте следующее:{
«enabled_plugins»: [
«SimpleReloadPlugin»
]
}
Теперь вы можете использовать livereload при редактировании файлов markdown.
Как найти точное имя плагина
В репозитории github неясно, как установить плагин в настройках пользователя, он просто дает список поддерживаемых плагинов без указания их фактических имен. После проверки пакета (см. Изображение ниже) я нашел точные названия этих плагинов:
- CompassPlugin
- LESSPlugin
- CoffeescriptPlugin
- SimpleReloadPlugin
- SimpleReloadPluginDelay
Поделиться
jdhao
17 декабря 2017 в 15:15
Похожие вопросы:
Sublime Text 3 — Как установить JSHint
Я использую Sublime Text 3, мне это нравится. И мне нравится JSHint, который помогает нам улучшить стандарты кодирования. В настоящее время я копирую свой код javascript в http://jshint.com/ и делаю…
Как навсегда включить плагин Sublime Text 3 LiveReload
Недавно я установил плагин LiveReload для Sublime Text 3. Я также установил расширение LiveReload Chrome. Все работает отлично, однако остается одна головная боль. Мне нужно войти в управление…
LiveReload для Sublime Text 3-не работает
Я настроил LiveReload для Sublime Text 3, следуя этому руководству . Я установил плагин LiveReload для FireFox (он включен). Я проверил его с помощью этого простого кода HTML: <!DOCTYPE HTML>…
как установить sublime text indent xml в sublime 3
Я пытаюсь установить https://github.com/alek-sys/sublimetext_indentxml в sublime text 3. Я читал В Sublime Text 3-клонируйте проект из папки Github в папку Packages. Кажется, это не работает. Я не…
Sublime Text 2 — Как вызвать обновление LiveReload при внешнем изменении текущего редактируемого файла
Sublime Text 2 — Как вызвать обновление LiveReload, когда текущий редактируемый файл изменяется внешне (например, Visual Studio) Я установил LiveReload, и когда я активирую его в браузере, он может…
Как установить формат автоматического отступа HTML на Sublime Text 3?
У меня есть вопрос, когда я пишу код HTML на Sublime Text 3. Я просто хочу установить формат автоматического отступа HTML. Например, когда я пишу тег p, как в коде, отступ работает именно так….
Как установить плагин SFTP в Sublime Text 3 на Windows 7 64bit
Я не могу установить плагин SFTP ST3 на Windows 7 64bit. Он установлен, но все его меню серые, неактивны. Я читаю поддержку. Там написано:: Чтобы исправить это, выполните следующие действия:…
Загрузка печени на Sublime Text 3
LiveReload, похоже, не работает над sublime text 3, Когда я загружаю его из элемента управления пакетами. Я нашел эту ссылку ( https://github.com/dz0ny/LiveReload-sublimetext2/tree/devel ) на…
LiveReload для Sublime Text 3 был удален
Я хочу установить LiveReload для Sublime Text 3. Однако, когда я иду в Управление пакетами для установки, я понимаю, что LiveReload больше нет. Когда я посещаю этот сайт:…
как установить пакеты в sublime text editor 3?
Я установил управление пакетами в sublime text editor 3 build 3114. Когда я пытаюсь установить новые пакеты / Плагины, они не устанавливаются. Ничего не показывает никакой message.Please скажите…
Как установить LiveReload на Sublime Text 3?
Platform I used: Linux Mint 17+
I want to thank http://anthozano.fr/livereload-pour-sublime-text-3/. I was able to run live reload on sublime text 3 with the instructions in the website. However, the website is written in French (i believe — Google translate said), so I thought I could write the steps here.
Сначала установите возвышенный текст 3 отсюда http://www.sublimetext.com/3 или следуйте по-своему вы предпочитаете (я сделал это с Linux mint Package manager).
Во-вторых, установите управление пакетом отсюда https://packagecontrol.io/installation#st3 (инструкция четко указана на веб-сайте, поэтому я не очень ее объяснил).
Third, open package control (Shortcut : Ctrl+Shift+P
) and search for Package Control: Add Repository
Теперь появляется область для ввода URL-адреса в нижней части окна возвышенного текста 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json
.
Снова откройте управление пакетом и выполните поиск Package Control: Install Package
, а затем найдите LiveReload
в предстоящем окне.
Configure LiveReload Package Setting at Preferences > Package Settings > LiveReload > Setting - Default
and paste this :
{ "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ] }
Now for your browser, install LiveReload plug in as below :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz
Не забудьте включить плагин LiveReload в браузере после его установки, чтобы сразу увидеть изменения кода, отображаемые в браузере.
Note: Chrome users, for LiveReload to support file://
pages, go to chrome://extensions/
, and check off Allow access to file URLs
.
Snapshot taken from Safari for Mac OSX:
Наслаждайтесь, Live Reload с Sublime Text 3.
Благодаря Энтони Лозано для http://anthozano.fr/ LiveReload-вылить-возвышенный-текст-3/.
LiveReload, плагины, фишки · GitHub
Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки · GitHub
Instantly share code, notes, and snippets.
Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки
00:46 — Установка Sublime Text 3 | |
02:06 — Установка Package Control | |
Ctrl+Shift+P | |
Install | |
03:55 — Установка Emmet | |
05:20 — Почему иногда не работает «Open in Browser» | |
07:33 — Первоначальная настройка Sublime Text | |
07:55 — Reindent по хоткею | |
20:37 — Установка и настройка LiveReload в Sublime Text 3 | |
25:48 — Установка и настройка SASS плагина для подсветки синтаксиса SASS | |
29:08 — Установка плагина Jade | |
29:52 — Установка и настрока плагина для работы с Gist Репозиторием | |
Ctrl+k+o -открытие списка gist | |
35:00 — brackethighlighter: подсветка тегов и скобок | |
36:26 — autofilename: автокомплит для подключения внешних файлов в верстку | |
38:07 — colorhighlighter: подсветка цвета | |
39:30 — BufferScroll: сохранение позиции курсора в документе | |
40:55 — Goto-CSS-Declaration: плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS | |
Key Win+Alt+. | |
44:37 — Смена темы в Sublime Text | |
45:25 — Множественное выделение в Sublime Text | |
47:04 — Инкремент и Декремент |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
Установка LiveReload в Sublime Text 2
Полная настройка Sublime text 3 для разработки сайтов и верстки. Эти фишки я нарабатывал долгое время, а сейчас делюсь просто так!
Installing
With Package Control:
- Run “Package Control: Install Package” command, find and install LiveReload plugin.
- Restart ST editor (if required)
Manual install, Linux users
cd ~/.config/sublime-text-3/Packagesrm -rf LiveReloadgit clone https://github.com/alepez/LiveReload-sublimetext3 LiveReload
Manual install, OSX users
cd ~/Library/Application Support/Sublime Text 3/Packages/rm -rf LiveReloadgit clone https://github.com/alepez/LiveReload-sublimetext3 LiveReload
Enable desired plug-ins via Command Palette (Ctrl+Shift+P) add livereload.js to you html document.
<script>document.write(‘<script src=”http://’ + (location.host || ‘${1:localhost}’).split(‘:’)[0] + ‘:${2:35729}/livereload.js?snipver=1″></’ + ‘script>’)</script>
You can also use one of the extensions listed here http://livereload.com/extensions/
Источник: http://github.com/alepez/LiveReload-sublimetext3
Настройка автообновлений в браузере Chrome
Первым делом нам нужно скачать расширение LiveReload для браузера Chrome.
Шаг 1. Переходим в Sublime Text и зажимаем клавиши “Ctrl+Shift+p”, после чего в поле вводим “Package Control”.
Шаг 2. Далее, откроется такое-же поле, в которое вводим “LiveReload” и так-же кликаем по плагину который нам нужен, как на картинке.
Шаг 3. Ждем пару секунд, должен будет открыться новый текстовый документ с сообщением что плагин установлен, после чего перезапускаем Sublime Text.
Шаг 4. Переходим в Chrome, в правом верхнем углу жмем на три точки выбираем “Дополнительные инструменты/Расширения”. Ищем ранее установленное расширение LiveReload и жмем кнопку “Подробнее”. Опускаемся в самый низ и включаем “Разрешить открывать локальные файлы по ссылкам”, как на картинке.
Шаг 5. Теперь нам нужно активировать загруженный плагин, переходим во вкладку “Preferences” если у вас на русском то во вкладку “Опции”, далее “Package Settings/LiveReload/Plugins/Enable/disable plugins”, жмем “Enable/disable plugins” и выбираем Enable – Simple reload.
Шаг 6. Переходим снова в Sublime text 3 во вкладку Preferences/Package Settings/LiveReload/Settings – User и вставляем этот код как на картинке.
{ “enabled_plugins”: [ “SimpleReloadPlugin”, “SimpleRefresh” ] } |
Шаг 7. Завершающий шаг. В браузере нажимаем на значок в правом верхнем углу LiveReload для синхронизации Sublime Text и браузера Google Chrome.
Источник: http://zonawmr.ru/1714-avtoobnovlenie-stranic-v-chrome-cherez-sublime-text-3-plagin-livereload.html
Visual Studio Code
Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.
VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.
Вот самые интересные возможности VS Code.
Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:
Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.
Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.
Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках
Найденные одинаковые слова и команды можно тут же заменить на другие
Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:
Сразу после установки VS Code не умеет показывать результаты работы кода, когда мы делаем веб-страницы. Это можно исправить с помощью расширения Live HTML Previewer. Для этого заходим в раздел «Extensions», щёлкая на последнем значке на панели слева или нажимая Ctrl+Shift+X, и начинаем писать «Live HTML Previewer» в строке поиска.
После установки и запуска расширения можно будет сразу видеть, как ваш HTML-код и CSS влияют на внешний вид и поведение страницы. Это особенно удобно, когда строишь сайт с нуля и хочешь сразу понимать, что происходит.
Источник: http://thecode.media/live-view/
Интерфейс программы
После того, как Вы в первый раз откроете текстовый редактор он будет выглядеть так:
Как ранее упоминалось в нем нет ничего лишнего. Многие ищут русификатор для Sublime Text 3, но на самом деле и без него все понятно. К тому же все англоязычные и русскоязычные мануалы написаны с учетом английского интерфейса.
Официальным разработчиком не поддерживается русская версия Sublime Text 3. В интернете можно скачать и установить русификатор, но не факт, что он будет работать на более новых версиях саблайма.
Настроить интерфейс можно через верхнее меню – VIEW, где:
- view – side bar –show side bar. Показывает левый сайд бар, по началу он пусто, но если мы создадим на рабочем столе папку: new project и просто перетащим ее в Sublime, то она там появится и далее мы сможем работать с проектом, который будет находиться в этой папке.
- View – show minimap. Показывает в правом сайд баре в каком месте кода вы находитесь. Очень удобно при работе с большими проектами.
- View – show tab Показывает все открытые вкладки
- View – show status bar. Показывает нижнее меню. Кстати в самом правом углу можно менять кодировки. Вообще в зависимости от открываемого файла Sublime Text 3 по расширению понимает, что это за файл и сразу его открывает, как надо, но иногда бывает, что нужно подсказать, что это PHP, Python, C++ или что-то еще. Чуть левее находится Индентация, с помощью нее можно менять табы на пробелы и наоборот приводя код в более структурированное состояние.
- View – hide menu. Нажали? Если да, то меню в Sublime у вас скрылось, для того, чтобы вернуть надо нажать ctrl+shift+p и набрать menu
- View – show console. Показать консоль
- Enter Full Screen и Enter Distraction Free Mode. Полноэкранный и еще более полноэкранный режим.
- Layout, Groups, Focus Group, Move File to Group. Разбивка экрана на 2-3-4 части для работы с несколькими файлами. Разбивать можно как вертикально, так и горизонталью.
Интерфейс (на 7 скриншотах)
Остальные вкладки рассматривать не будем, так как либо они входят в ранее рассмотренные настройки, либо ими почти никто не пользуется.
Источник: http://sublimetext3.ru/
Examples
- Simple Reload from http GET request, reloads page on visit to http://localhost:35729/callback/simplereloadplugincallback/on_post_compile
- Send content on change, sends file content to browser console
Источник: http://github.com/alepez/LiveReload-sublimetext3
Установка расширения LiveReload в Chrome
Плагин LiveReload работает совместно с одноименным расширением, которое устанавливается в браузер. В моем случае это будет Google Chrome. Приступаю к установке.
В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина — “LiveReload”:
Соглашаюсь со всем и жму кнопочку “Установить”. Перезагрузки браузера не требуется — в панели инструментов сразу появляется значок расширения в виде двух круговых стрелочек.
Установка расширения произведена.
Источник: http://window-10.ru/livereload-sublime-text-3-ne-rabotaet/
Лицензионный ключ для Sublime Text 3
Программа Sublime условно бесплатная, то есть ее можно просто скачать и начать использовать, никакого license key для ее активации не потребуется.
Изредка при сохрани документа она будет спрашивать не желаете ли вы оплатить? На что можно просто ответить нет. Кстати по статистике разработчики оплачивает лицензию как правило на 4 году использования Sublime, вот такой вот хороший, качественный и полезный продукт.
Источник: http://sublimetext3.ru/
Open-source
LiveReload browser extensions are open-sourced
Источник: http://livereload.com/extensions/
Все вопросы по теме package-control
Как убрать «URL-адрес JSON канала» из постоянного места в нижней части моего превосходного текстового редактора.
После установки управления пакетами я заметил, что это прикреплено к нижней части возвышенного….
У меня установлен пакет Emmet для Sublime Text 3 через Package Control. Я много редактирую Markdown в Sublime и заметил, что по мере увеличения размера файлов Markdown вставка вкладки путем нажатия кнопки Tab на клавиатуре становится все медленнее и медленнее. Однако, когда я отключаю Эммет, вклад….
Я знаю, что команды можно регистрировать, перейдя в консоль View -> Show Console и набрав
sublime.log_commands(True)
Однако команды, которые запускаются через палитру команд, не регистрируются, она просто показывает:
command: show_overlay {«overlay»: «command_palette»}
Есть ли способ регистрироват….
Я установил несколько пакетов. Но вдруг все перестало работать.
Даже сам пакетный контроль. Также серым цветом выделены несколько пунктов меню настроек. В массиве ingnore_packages ничего нет.
Вот что я делаю, может быть причиной этого.
Я синхронизировался с Dropbox, а затем удалил Dropbox. Загруз….
Примерно неделю назад я понял, что не могу устанавливать новые пакеты через Package Control. Я пробовал все, даже переустанавливая возвышенное, при этом очищая все файлы / Библиотеки / Поддержка приложений / все. Все та же проблема. Любые идеи?
ignored packages updated to: [«Emmet», «Vintage»]
reloa….
Я не могу использовать простой установочный код, потому что прокси блокирует мне выход. К сожалению, я просто не получил инструкций на веб-странице.
1. Click the Preferences > Browse Packages… menu
2. Browse up a folder and then into the Installed Packages/ folder
3. Download Package Control.sublim….
Я использую Sublime Text 3 в Ubuntu 14.04, и я просто разогреваюсь до Управления пакетами в Sublime. Я наткнулся на этот плагин Advanced CSV и установил его с помощью Package Control, но он говорит, что для этого требуется библиотека numPy установлен «в папке с пакетами». Теперь я немного озадачен т….
У меня проблема с установкой пакетов для Sublime Text 3. Я загрузил ST3 и следую инструкциям https://packagecontrol.io/installation. Я нажал «Управление пакетами» -> «Установить пакет» и получил ошибку… Sublime Console:
DPI scale: 1
startup, version: 3083 windows x64 channel: stable
executable:….
Я хочу установить Livereload для Sublime Text 3. Однако, когда я перехожу в управление пакетом для установки, я понимаю, что Livereload больше нет.
Когда я захожу на этот веб-сайт: https://packagecontrol.io/packages/LiveReload, он показывает, что «Пакет был удален и больше не доступен «.
Репозиторий….
Когда я открываю свой Sublime Text, я иногда получаю следующую ошибку, особенно на прошлой неделе.
Package Control
Error executing: /usr/bin/security dump-trust-settings -d
SecTrustSettingsCopyTrustSettings: The specified item could not be found in the keychain.
SecTrustSettingsCopyTrustSettings: ….
Информация о системе:
Ubuntu 14.04, 64-битная
Свежая установка Sublime Text 3083 (http://www.sublimetext.com/3), а затем следуйте инструкциям здесь: https://packagecontrol.io/installation#st3
Пробовал как «простой», так и «ручной». Sublime просто зависает при перезапуске. Под «замораживанием» я и….
Я установил sublime text 3, и мне нужно установить управление пакетами … поэтому, когда я ссылаюсь на this страница.
Я просто запуталась, что мне делать,
Может ли кто-нибудь помочь мне в руководстве этими документами?
Благодарность,….
Я пытаюсь установить управление пакетами в редакторе Sublime Text 3 на Ubuntu 14.04. Я следую простой инструкции из https://sublime.wbond.net/installation.
Но я получаю следующую ошибку:
Package Control: Error downloading channel. b’curl: (7) Failed to connect to sublime.wbond.net port 443: Network….
Многие пользователи Sublime Text 2 получают error (or) no action, когда хотят установить любой пакет Sublime Text 2 @via Package Control.
Когда меня нажимают на Package Control: Install Package из Ctrl+Shift+P.
Я получил эту ошибку ниже:
Нет пакетов для установки
Примечание. Иногда сообщение об….
LiveReload, похоже, не работает с возвышенным текстом 3, когда я загружаю его из элемента управления пакетом.
Я нашел эту ссылку (https://github.com/dz0ny/LiveReload-sublimetext2/tree/ devel) на github, но нет информации о том, как это сделать в Windows (я использую W7). Возможно ли это, и если да….
Возникли проблемы с Sublime Text 3 и Package Control . Не удается найти некоторые пакеты с помощью поиска (некоторые плагины находят, некоторые нет), например плагин Color Picker (https://sublime.wbond.net/packages/ColorPicker). Пытался переустановить Package Control и повторно добавить реп….
Как я могу изменить порог в моем BracketHighlighter, чтобы выделить скобки, которые находятся дальше друг от друга? Вместо того, чтобы отображать вопросительный знак на левой панели, я по-прежнему хочу иметь возможность находить скобки…..
Я пытаюсь установить Emmet через Package Control в Sublime Text 3, но всякий раз, когда я ищу его, он просто не отображается.
Любые идеи? Может быть, мне не хватает репозитория?….
Я использую Sublime Text 2 для Mac. Я установил Package Control для Sublime Text 2, следуя инструкциям из https://sublime.wbond.net/installation#st2 a> без проблем. Однако, когда я открываю Ctrl + Shif + P для поиска доступных пакетов, он их не показывает.
Смотрите скриншот изображения здес….
Я использую возвышенный текст 2. Я успешно установил Package Control. Теперь, когда Package Control установлен, как мне приступить к установке пакетов?….
Поэтому после перехода на Sublime Text в прошлом году он стал моим предпочтительным редактором, и я установил несколько разных пакетов с помощью отличного управления пакетами и в основном настроил все по своему вкусу. После пары месяцев нечастого использования я вернулся в проект, требующий интенси….
Я обновился до самой последней версии Package Control для Sublimetext 3 через Git, но ни одна из команд не работает. Пункты меню, как ни странно, остались. Когда я открываю журнал с помощью Ctrl+`, я вижу эту ошибку:
ImportError: No module named ‘Package Control.package_control.add_repository_chan….
Автообновление страниц в Chrome через Sublime Text 3
Каждый кто занимается разработкой сайтов, веб-игр и т.д., знает, для того что бы увидеть результат работы нужно постоянно обновлять страницу браузера и это отнимает от работы хоть и не большую, но часть времени. В этой теме я кратко расскажу как настроить автообновление страниц в браузере Google Chrome использую редактор текста Sublime Text 3 с помощью плагина LiveReload в 2020 году.
Тема с автообновлением страниц очень популярна у верстальщиков, так как это очень сильно ускоряет работу. После всех настроек, код на странице Chrome будет обновляться автоматически, при каждом сохранении файла в Sublime Text 3, не обновляя сам браузер. Так же у многих появился вопрос, почему не работает LiveReload в Chrome страницы перестали автоматически обновляться. Об этом я расскажу ниже в статье.
Настройка автообновлений в браузере Chrome
Первым делом нам нужно скачать расширение LiveReload для браузера Chrome.
Шаг 1. Переходим в Sublime Text и зажимаем клавиши «Ctrl+Shift+p», после чего в поле вводим «Package Control».
Шаг 2. Далее, откроется такое-же поле, в которое вводим «LiveReload» и так-же кликаем по плагину который нам нужен, как на картинке.
Шаг 3. Ждем пару секунд, должен будет открыться новый текстовый документ с сообщением что плагин установлен, после чего перезапускаем Sublime Text.
Шаг 4. Переходим в Chrome, в правом верхнем углу жмем на три точки выбираем «Дополнительные инструменты/Расширения». Ищем ранее установленное расширение LiveReload и жмем кнопку «Подробнее». Опускаемся в самый низ и включаем «Разрешить открывать локальные файлы по ссылкам», как на картинке.
Шаг 5. Теперь нам нужно активировать загруженный плагин, переходим во вкладку «Preferences» если у вас на русском то во вкладку «Опции», далее «Package Settings/LiveReload/Plugins/Enable/disable plugins», жмем «Enable/disable plugins» и выбираем Enable — Simple reload.
Шаг 6. Переходим снова в Sublime text 3 во вкладку Preferences/Package Settings/LiveReload/Settings — User и вставляем этот код как на картинке.
{ «enabled_plugins»: [ «SimpleReloadPlugin», «SimpleRefresh» ] } |
Шаг 7. Завершающий шаг. В браузере нажимаем на значок в правом верхнем углу LiveReload для синхронизации Sublime Text и браузера Google Chrome.
Sublime Text 3 Конфигурация
Я перешел с Atom на Sublime. Atom — хороший редактор с множеством функций, но у него много проблем с производительностью для того, что я хочу делать.
Ниже приведены мои настройки для справки. Когда я захочу сделать это снова через год (или на новой машине), я могу просто использовать все здесь или просто использовать файлы конфигурации.
Контроль установки пакетов
Установите управление пакетами, используя: https://packagecontrol.io/installation.
Установочные пакеты
Теперь вы можете устанавливать пакеты.
- Нажмите
Ctrl + Shift + P
, чтобы открыть палитру команд. - Тип
Установите
, а затем выберитеPackage Control: Install Package
. - Введите имя пакета, который вы ищете, чтобы найти его.
- Выберите пакет и нажмите Enter.
Пакеты уценки
- Markdown Extended: выделение синтаксиса.
- Предварительный просмотр Markdown.
- Markdown Editing: горячие клавиши (например,грамм. ctrl + 1 означает заголовок 1).
- Monokai Extended: Это нужно для подсветки.
- LiveReload: для предварительного просмотра уценки в реальном времени.
- MarkdownTOC: автоматическое создание интерактивного оглавления для документов с уценкой.
- TOML: Подсветка TOML.
Как использовать файлы конфигурации
После установки пакетов просто скопируйте файлы конфигурации в каталог настроек пользовательского пакета. В Windows это будет "% Appdata% \ Sublime Text 3 \ Packages \ User \"
(не забудьте двойные кавычки, если вы хотите просто вставить его в строку запуска).
Настройки и расположение пакета
Обычно возвышенный и каждый пакет имеет два типа настроек: по умолчанию и пользовательские. Пользовательские настройки используются вместо настроек по умолчанию. Оба находятся в формате JSON.
Настройки
можно открыть в разделе «Настройки »> «Настройки пакета»> «Настройки по умолчанию / Пользовательский
». Обычно я копирую из файла по умолчанию пользователю, удаляю ненужные настройки и отменяю остальные.
Параметры пакета в Windows: % Appdata% \ Sublime Text 3 \ Packages \ User \ package-name.Астронет> Настройки
.
Основные настройки можно переопределить в Preferences.sublime-settings
или получить доступ через Preferences> Settings
. Это откроет два файла в одном окне. Слева — настройки по умолчанию, а справа — файл настроек пользователя. Скопируйте с левой панели на правую и переопределите.
Выделение Markdown и проверка орфографии
Markdown Editing
имеет собственную цветовую схему. Мне это не нравится. Вместо этого я использую Monokai Extended
.Его можно выбрать из Preferences> Color Scheme> Monokai Extended> Monokai Extended
.
Для того, чтобы он сработал, тип документа должен быть установлен на Markdown Extended
. Это можно установить, щелкнув тип документа (внизу справа).
Затем вы хотите настроить все файлы уценки, которые будут открываться как Markdown Extended
для выделения синтаксиса (включая блоки кода). Это можно сделать по:
-
Просмотр (меню)> Синтаксис> Открыть все с текущим расширением как> Markdown Extended
.
Этот метод устанавливает его только для текущего расширения (например, md).
Перейдите к Preferences> Settings - Syntax Specific
или отредактируйте настройки пакета Markdown Extended.sublime-settings
и добавьте следующее:
{
"расширения":
[
"мкр",
"уценка",
"больше расширений"
],
"spell_check": true // включить проверку орфографии
}
Обратите внимание, что Markdown Editing
добавил себя для файлов .mdown
.Вы можете просто удалить файл Markdown.sublime-settings
и добавить расширения в предыдущий файл.
Настройка предварительного просмотра Markdown в реальном времени
Включить LiveReload в настройках
Добавьте в пользовательские настройки пакета LiveReload LiveReload.sublime-settings
:
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefreshDelay" // использовать SimpleRefresh для перезагрузки без задержки
]
}
Таким образом, его не нужно повторно включать после каждого запуска.
Включить LiveReload вручную (повторять после каждого запуска Sublime)
- Откройте палитру команд и введите
livereload
. - Выбрать
LiveReload: включить / выключить плагины
. - Выберите
Включить - простая перезагрузка с задержкой (400 мс)
. - Вы должны увидеть консольное сообщение о том, что функция включена. Обратите внимание, что в меню будет указано
Включить
независимо от того, включен он или нет, если он уже включен, выбор меню отключит его, поэтому обязательно посмотрите сообщения консоли.
Настроить предварительный просмотр Markdown
Якобы эти два плагина работают из коробки. В моем случае этого не было. Мне пришлось добавить автозагрузку в предварительный просмотр уценки. Я удалил парсер github
, потому что он отправляет файл уценки в Github для обработки.
Добавьте следующее в MarkdownPreview.sublime-settings
:
{
"enable_autoreload": правда,
"enabled_parsers": ["уценка"],
"enable_highlight": правда
}
Файлы предварительного просмотра
- Откройте палитру команд и выберите
Предварительный просмотр уценки: предварительный просмотр в браузере
. - Откроется новое окно обозревателя, в котором отобразится визуализированный документ.
- Браузер должен обновляться после каждого сохранения.
Предварительный просмотр
Добавьте следующее в Default (Windows) .sublime-keymap
или откройте его через Preferences> Key Bindings
.
[
{
"ключи": [
"alt + p"
],
"команда": "markdown_preview",
"args": {
"target": "браузер",
"парсер": "уценка"
}
}
]
Markdown Оглавление
- Установить пакет
Markdown TOC
. Добавьте следующие пользовательские настройки в
MarkdownTOC.sublime-settings
:{ "defaults": { "autoanchor": правда, "автолинк": правда, } }
В любом документе с уценкой поместите курсор в то место, где вы хотите получить T0C. Затем
Tools> MarkdownTOC> Insert TOC
.Всеми настройками также можно управлять в T0C, добавляя их в верхний комментарий. Например:
- [Заголовок 1] - [Заголовок 2]
TOC Keybind
Добавьте следующее в раскладку клавиш По умолчанию (Windows).Sublime-Keymap
:
{
"ключи": [
"alt + t"
],
"command": "markdowntoc_insert" // обновление markdowntoc_update
}
Изменить полужирный и курсив
По умолчанию при редактировании уценки полужирный маркер — __
, а курсив — _
. Я больше привык к **
для полужирного и *
для курсива.
Просто добавьте файл с именем Bold and Italic Markers.tmPreferences
и поместите его в обычный каталог пользователя.
Xml version = "1.0" encoding = "UTF-8"?>
имя
Полужирный и курсивный маркеры
область действия
text.html.markdown
настройки
переменные оболочки
<массив>
имя
MD_BOLD_MARKER
значение
**
имя
MD_ITALIC_MARKER
значение
*
uuid
E3F0F1B0-53C8-11E3-8F96-0800200C9A66
Snippets vs.Выполнено
По сути, оба делают то же самое.
- Фрагменты — это XML, а дополнения — JSON.
- легче читать, потому что вы можете иметь новые строки в тегах
CDATA
, в то время как вам нужно избегать двойных кавычек и использовать специальные символы для новых строк (например,\ n
). - Для каждого файла разрешен только один фрагмент, в то время как вы можете иметь несколько завершений в одном файле.
Фрагменты
В основном из-за 3 я выбрал доработки, потому что это всего лишь один файл, и им легче управлять (хотя и труднее читать).
Фрагмент
Инструменты> Разработчик> Новый сниппет
создаст и откроет шаблон. Файлы хранятся в каталоге User
аналогично файлам конфигурации (хотя пакеты могут иметь свои собственные фрагменты). Расширение для сниппетов — sublime-snippet
.
Страница неофициальной документации: http://docs.sublimetext.info/en/latest/extensibility/snippets.html.
Фактический фрагмент находится в теге content
, который поддерживает новые строки внутри CDATA
.
Например, фрагмент моего короткого кода Hugo codecaption
(ссылка) (удалите / *
s).
}}
$ {3: текст по умолчанию}
{{ * / codecaption>}}
]]>
кодовая шапка
<область> текст.html.markdown
Шорткод Codecaption Hugo
$ 1
означает, что курсор будет там после активации фрагмента, после ввода и нажатия вкладки
мы перейдем к $ 2
. $ 3
имеет текст по умолчанию, который будет выделен после перехода к нему курсора и может быть перезаписан.
область действия
— это то место, где фрагмент будет активен.Без области действия он активен во всех документах. Чтобы получить текущую область видимости, нажмите ctrl + alt + shift + p
или выберите Tools> Developer> Show Scope Name
.
То же самое можно сделать для imgcaption
(ссылка) (удалите / *
, * /
s).
}}]]>
imgcap
<область> текст.html.markdown
Шорткод Imagecaption Hugo
Выполнено
Я предпочитаю доработки, потому что все может быть в одном файле. В большинстве случаев мы можем рассматривать их как фрагменты. Это файлы JSON, поэтому избегайте "
с \"
, а новая строка — \ n
.
Ссылка на неофициальную вики: http://docs.sublimetext.info/en/latest/reference/completions.html.
Завершение хранится в каталоге User
с расширением .sublime-completions
.
Пример файла завершения для уценки тех же шорткодов. Обратите внимание, что триггеры такие же, как и в приведенных выше примерах фрагментов. Фрагменты всегда имеют приоритет перед завершением.
{
"scope": "text.html.markdown - источник - meta.tag, punctuation.definition.tag.begin",
«доработки»:
[
{"trigger": "codecap \ tCodecaption Hugo Shortcode", "contents": "{{}} \ n $ {3: текст по умолчанию} \ n {{ codecaption>}} "},
{"trigger": "imgcap \ tImagecaption Hugo Shortcode", "contents": "{{}}"}
]
}
Обратите внимание на триггер
, первая часть — это фактический триггер, а все после \ t
— это подсказка, которая появляется в списке автозаполнения, как и описания фрагментов.
В Интернете и в системе управления пакетами есть множество файлов завершения ,
для разных языков и фреймворков.
Триггеры сниппета и завершения
Вкратце введите триггер (или его части, если он уникален) и нажмите вкладку
.Если есть фрагменты и завершения с одинаковыми триггерами, фрагменты всегда имеют приоритет.
- Набрав
codecap
и нажав вкладку - При вводе кода
ctrl + пробел
он отобразится в меню автозаполнения. - При вводе
сниппета
в палитре команд будут показаны все фрагменты для текущей области вместе с их триггерами.
Исправление «Ошибка сборки MarGo» для GoSublime в Windows
В исполняемом файле
GoSublime есть версия Go.В большинстве случаев он не может получить версию в Windows, и сборка завершится неудачно:
MarGo: сбой сборки MarGo
cmd: `['C: \\ Go \\ bin \\ go.exe', 'build', '-tags', '', '-v', '-o',
'gosublime.margo_r17.12.17-1_go? .exe', 'gosublime / cmd / margo'] `
Где ?
— это неизвестная версия го.
Редактировать этот файл:
-
% AppData% \ Sublime Text 3 \ Packages \ GoSublime \ gosubl \ sh.py
Найдите эти строки:
cmd = ShellCommand ('иди, запустите sh-bootstrap.идти')
cmd.wd = gs.dist_path ('gosubl')
cr = cmd.run ()
raw_ver = ''
ver = '' # Измените это на '1'
Отредактируйте ver
на что угодно, я обычно делаю 1
. Перезапустите Sublime Text, и Марго построит.
К сожалению, это необходимо делать для каждой новой версии GoSublime.
10 лучших пакетов Sublime Text для веб-разработчиков
У каждого веб-разработчика есть любимый редактор кода. Некоторые люди предпочитают интегрированную среду разработки (IDE), тогда как другие просто хотят простоты.Если вы предпочитаете последнее, вы можете оценить пакеты Sublime Text.
Один из самых привлекательных аспектов Sublime Text — его модульность. Если вы пурист, вы можете использовать редактор как есть. Однако различные пакеты могут значительно упростить рабочий процесс разработки, расширив его функциональность. В этой статье мы познакомим вас с десятью нашими любимыми!
Введение в пакеты Sublime Text и способы их установки
Пакеты
являются эквивалентом Sublime Text модулей или плагинов WordPress.Это надстройки, которые вы можете настроить, чтобы расширить основные функции платформы и упростить вашу работу.
В концепции пакетов редактора кода нет ничего нового. Большинство популярных платформ, таких как Atom, также предлагают множество расширений. Однако Sublime Text остается отличным вариантом, если вам нужен легкий редактор кода с широким выбором надстроек.
Что касается установки пакетов Sublime Text, процесс очень прост. Для начала зайдите в репозиторий нужного расширения и загрузите его:
Как только у вас будет. zip , перейдите в каталог Sublime Text Packages и разверните его внутри. Если вы не можете его найти, каталог должен находиться под именем пользователя / appdata / roaming / Sublime Text / Packages . Большинство расширений будут готовы к использованию в Sublime Text, как только вы извлечете папку, не требуя перезапуска редактора.
Если вам нужен более оптимизированный процесс, вы также можете использовать официальный Sublime Text Package Control . Вкратце, этот инструмент позволяет просматривать репозиторий общедоступных пакетов и устанавливать их с помощью простых команд.
Чтобы настроить Sublime Text Package Control, перейдите к Tools> Install Package Control :
После настройки Package Control вы можете использовать его через консоль Sublime Text. Нажмите CTRL + ~ , чтобы открыть его, затем введите УПРАВЛЕНИЕ ПАКЕТОМ: , чтобы увидеть полный список команд, которые вы можете использовать:
Чтобы установить новый пакет, введите Package Control: Install Package , и инструмент откроет список всех общедоступных пакетов в своем репозитории:
Список можно просматривать с помощью консоли.Однако, прежде чем устанавливать что-либо, вы, вероятно, захотите узнать немного больше о доступных вам пакетах, чтобы выбрать наиболее подходящие для вашего рабочего процесса.
10 лучших пакетов Sublime Text для веб-разработчиков
Существуют сотни пакетов Sublime Text на выбор, поэтому составить список лучших — непростая задача. Имея это в виду, мы решили сосредоточиться на тех, которые помогут вам максимально упростить рабочий процесс. Большинство вариантов в этом списке не зависят от языка, поэтому вы сможете извлечь из них много полезного независимо от того, на каком типе разработки вы сосредоточитесь.
1. Выравнивание
Alignment — это простой пакет, который берет ваш код и выравнивает символы, для которых вы его настраиваете. Его функциональность проста, но он делает чтение кода намного более приятным.
После установки пакета вам нужно будет настроить, какие символы он должен выровнять. Вы можете сделать это, открыв настройки пакета — Пользовательский файл:
Когда файл откроется, скопируйте и вставьте в него следующий код:
{ "alignment_chars": [ "(", ":" ] }
Этот фрагмент сообщает пакету о необходимости выравнивания символов ‘(‘ и ‘:’ в любом коде, к которому вы его применяете.В качестве примера приведу PHP, который вы будете использовать для постановки стилей дочерней темы в WordPress:
Он уже довольно организован. Однако, если вы выделите его и нажмете CTRL + Alt + A, Alignment применит ваши новые настройки, что приведет к следующему:
Какие символы вы хотите выровнять, решать вам. К счастью, после настройки пакета требуется всего несколько нажатий кнопок, чтобы запустить его.
2. Эммет
Если вы фронтенд-разработчик или иным образом проводите много времени, работая с HTML и CSS, то Emmet является обязательным дополнением к вашему набору инструментов.Этот пакет позволяет вам вводить динамические выражения CSS или «аббревиатуры» и превращать их в полнофункциональный код.
Допустим, вы хотите включить несортированный список элементов на любую страницу с использованием HTML. Этот код может выглядеть примерно так:
Написание повторяющейся разметки вручную может быть довольно утомительным занятием.С помощью Emmet вы можете сгенерировать необходимый код, используя следующую аббревиатуру и расширив ее одним нажатием кнопки:
#page> div.logo + ul # navigation> li * 3> a {Item $}
Если вы посмотрите на синтаксис, вы заметите, что сокращения следуют очень логичным шаблонам. Помимо создания кода, Emmet также позволяет вам перемещаться по полученным фрагментам, выбирать важные части, добавлять новые теги и многое другое.
«Из коробки» Emmet включает так много сокращений, что вам почти наверняка придется ознакомиться с его документацией, прежде чем начать.
3. SFTP
Название этого пакета сразу же должно дать вам представление о том, чего ожидать. Используя SFTP, вы можете сопоставить локальную папку с удаленной или напрямую редактировать файлы с сервера в Sublime Text.
Доступ к удаленному серверу через SFTP прост. Перейдите к File> SFTP / FTP > Setup Server. Здесь вы можете настроить параметры подключения FTP / SFTP:
После установки учетных данных вы можете щелкнуть правой кнопкой мыши файлы на боковой панели, чтобы сопоставить их со своим удаленным сервером или подключиться к нему напрямую.
4. JSHint
Если вы работаете с JavaScript, качественная программа проверки синтаксиса значительно упростит устранение неполадок. С JSHint вы можете получить быстрый обзор любых ошибок в вашем коде, а консоль пакета позволяет вам переходить от одного столбца к другому.
После установки JSHint вы можете включить его, нажав Control + J или Alt + J , что вызовет консоль для любого файла, с которым вы работаете:
Имейте в виду, вам нужен узел.js, чтобы JSHint работал на вашем компьютере. В противном случае пакет может вернуть ошибку при попытке отладки файла.
5. AutoFileName
AutoFilename — один из самых простых пакетов Sublime Text, который вы найдете. Однако, как только вы начнете его использовать, вам может быть трудно вернуться назад.
С установленным AutoFileName, если вы попытаетесь связать файл с помощью тега href , вы можете нажать Control + пробел , и он автоматически покажет список файлов и каталогов, расположенных на том же уровне, что и родительский.Вы можете легко просматривать его с помощью курсора или клавиатуры и выбирать любой файл, который вам нужен. Пакет автоматически добавит свой путь.
Кроме того, если вы используете AutoFilename для вставки путей к изображениям, пакет также определит их размеры и заполнит атрибуты высоты и ширины.
Если вы хотите еще больше упростить процесс, вы можете настроить AutoFilename так, чтобы он запускался без необходимости нажимать Control + Space . Для этого откройте файл User Settings и добавьте следующий код:
"auto_complete_triggers": [ { "символы": "<", "селектор": "текст.html " }, { "символы": "/", "селектор": "string.quoted.double.html, string.quoted.single.html, source.css" } ]
Как только вы сохраните этот код, AutoFilename будет запускаться каждый раз, когда вы вводите косую черту, экономя вам несколько нажатий клавиш.
6. LiveReload
Если вам не нравится обновлять браузер каждый раз, когда вы вносите изменения в локальный файл, чтобы увидеть результаты, LiveReload может быть идеальным пакетом для вас. Это позволяет вам синхронизировать локальные файлы с вашим любимым браузером, поэтому, когда вы вносите изменения и сохраняете их, они будут отображаться мгновенно.
Чтобы LiveReload заработал, вам нужно сделать две вещи:
- Добавьте скрипт LiveReload в HTML-файл, над которым вы работаете, нажав Ctrl + Shift + P и выбрав опцию Insert livereload.js script (показано ниже).
- Установите соответствующее расширение для используемого программного обеспечения.
Вот краткий обзор того, что вы должны увидеть, добавив необходимый скрипт в локальный файл:
Когда у вас есть сценарий, вам необходимо настроить расширение, если вы используете Safari, Chrome или Firefox.После настройки вы сможете добавить скрипт в любой файл и увидеть изменения в реальном времени, когда откроете их в браузере.
7. FileDiffs
Иногда вам нужно пробираться через длинные отрезки кода, чтобы найти недавние модификации или изменения, внесенные кем-то другим. Однако поиск невооруженным глазом может быть неэффективным. Если у вас есть предыдущая или отдельная версия определенного файла, вы можете использовать FileDiffs, чтобы показать вам несоответствия.
После настройки FileDiffs вы можете щелкнуть правой кнопкой мыши в любом месте заголовка проекта или внутри самого файла, чтобы получить доступ к его меню:
Пакет дает вам множество вариантов для сравнения вашего текущего файла.Например, вы можете выбрать файл на другой вкладке или содержимое буфера обмена. После того, как вы сделаете выбор, FileDiffs сгенерирует новый файл, включая выделенные различия:
На скриншоте выше вы можете увидеть выделенные различия между двумя короткими фрагментами кода. Чем сложнее файлы, с которыми вы работаете, тем больше времени вам может сэкономить FileDiffs.
8. Минификатор
Минификация может быть отличной практикой, если вы пытаетесь повысить производительность веб-сайта.Обычно вы используете сторонние инструменты для минимизации кода, но с правильным пакетом вы можете сделать это в Sublime Text.
Minifier позволяет обрабатывать файлы как JavaScript, так и CSS. Все, что вам нужно сделать, это настроить пакет и использовать одну из этих двух комбинаций кнопок:
- CTRL + Alt + M : Непосредственно уменьшает текущий открытый файл.
- CTRL + Alt + Shift + M : Минимизирует текущий открытый файл и сохраняет вывод в новом.
В этом примере мы взяли. css файл, который изначально занимал более десятка строк и уменьшил его:
Процесс должен занять всего несколько секунд, что значительно сэкономит время при оптимизации производительности позже.
9. TodoReview
Если вы склонны оставлять напоминания в коде задач, над которыми нужно работать или к которым нужно вернуться, вам понравится TodoReview. Вкратце, пакет компилирует списки комментариев, найденных в ваших проектах, и выводит их в новый файл, например:
Конфигурация пакета по умолчанию распознает только TODO комментариев.Однако вы можете легко добавить новые шаблоны, изменив файл конфигурации пакета:
"patterns": { "TODO": "TODO [\\ s] * ?: [\\ s] * (? P. *) $", "СРОЧНО": "СРОЧНО [\\ s] * ?: [\\ s] * (? P <срочно>. *) $", }
В этом примере мы устанавливаем новый тип шаблона для распознавания пакета (срочно!). Вы можете настроить столько, сколько захотите.
10. Все автозаполнение
По умолчанию Sublime Text пытается автозаполнить код в файле, над которым вы работаете.Это хорошее начало, но что, если вы работаете над проектом с несколькими файлами?
All AutoComplete расширяет базовую функциональность автозаполнения Sublime Text и помогает находить совпадения во всех открытых файлах. Это небольшое, но существенное отличие, которое может ускорить рабочий процесс разработки.
Если вы хотите настроить конфигурацию пакета или отключить его для определенных типов файлов, вы можете легко изменить его настройки, используя следующий код:
"exclude_from_completion": [ "css", ], "min_word_size": 5, // не показывать завершения для слов с меньшим количеством символов, чем это количество, много символов
В этом примере мы исключаем. css файлов с автозаполнением и отключением функции для более коротких слов. Таким образом, пакет не запускается с прерывистой или раздражающей частотой.
Заключение
Sublime Text предоставляет множество полезных функций "из коробки", включая автозаполнение, выделение синтаксиса, сворачивание кода и многое другое. Однако это функции, которые в наши дни включает в себя практически каждый редактор кода. Что действительно отличает его, так это огромная библиотека пакетов.
Когда дело доходит до выбора, какие пакеты Sublime Text вы должны использовать, это зависит от вашего уникального рабочего процесса.Если вы используете HTML и CSS, Эммет просто необходим. Другие пакеты, такие как AutoFilename и All Autocomplete, обычно являются лучшим выбором независимо от того, какой тип разработки вы выполняете.
У вас есть вопросы о пакетах Sublime Text? Дайте нам знать в комментариях ниже!
Миниатюра статьи изображение MchlSkhrv / shutterstock.com
Предварительный просмотр изменений темы локально - Zendesk help
Вы можете экспортировать файлы темы из Руководства и работать с файлами в автономном режиме в своем любимом редакторе.Чтобы избежать архивирования и импорта файлов в Guide каждый раз, когда вы хотите предварительно просмотреть свои изменения, вы можете предварительно просмотреть каждое изменение локально в веб-браузере с помощью инструментов приложений Zendesk (ZAT). Чтобы предварительно просмотреть изменение, просто сохраните файл темы в редакторе рабочего стола и обновите страницу в браузере. Пример:
ZAT - это набор инструментов для разработчиков, который включает Sinatra, веб-сервер, который запускается локально на вашем компьютере. После запуска режима предварительного просмотра процесс выполняется в фоновом режиме.См. Интерфейс командной строки в нижней части изображения.
В этой статье затронуты темы:
Настройка предварительного просмотра локальной темы
Настройка предварительного просмотра локальной темы
- Если это еще не сделано, включите доступ API в своей учетной записи Zendesk Support, перейдя в Admin > Channels > API .
- Установите инструменты приложений Zendesk (ZAT).
См. Раздел «Установка и использование инструментов приложений Zendesk» в справочном центре «Разработка».
- Если вы ранее устанавливали ZAT для создания приложений Zendesk, обязательно обновите его, выполнив следующую команду в интерфейсе командной строки:
$ gem update zendesk_apps_tools
Для установки и использования ZAT вам понадобится интерфейс командной строки (CLI). В macOS вы можете использовать Терминал в папке Applications / Utilities. В Windows вы можете использовать командную строку или Powershell. Если вы пользователь Windows 10, вы можете установить и использовать оболочку Bash , более удобный интерфейс командной строки для разработчиков.См. Раздел Настройка оболочки Bash в Windows 10.
.
Предварительный просмотр изменений
После запуска режима предварительного просмотра темы вы можете работать с файлами темы в своем любимом редакторе. Работайте итеративно, чтобы разработать и протестировать свою тему. Например, внесите некоторые изменения в свой JavaScript, сохраните изменения, затем обновите страницу браузера, чтобы протестировать изменения.
Предварительный просмотр изменений
- Сохраните отредактированный файл в вашем редакторе.
- Обновите страницу в браузере.
Когда вы закончите рабочий день, вы можете остановить режим предварительного просмотра одним из следующих способов:
- Переключитесь в браузер и щелкните ссылку «Чтобы выйти, щелкните здесь» вверху просматриваемой страницы.
- Переключитесь в интерфейс командной строки и нажмите Control + C.
Livereload с возвышенным текстом - Сантош Кумар Шах
Здравствуйте, читатели,
В этой статье я покажу вам, как можно Livereload с возвышенным текстом.Эта статья полезна для разработчиков, которые работают над своим проектом localhost и пытаются просмотреть вывод в браузере по локальному пути.
Ресурс, который нам нужен для livereload с возвышенным текстом
- Пакет «Livereload» с возвышенным текстом
- «Livereload» расширение для конкретного браузера.
Как работает Livereload с возвышенным текстом?
Livereload с возвышенным текстом работает, как только вы сохраняете файл в своем возвышенном тексте. Например, если вы работаете с .html
, вы внесли любые изменения и сохраните его. Теперь вы можете зайти в свой браузер и увидеть обновления, не перезагружая страницу. Расширение автоматически обновит страницу при сохранении файла.
Установить возвышенный пакет для livereload с возвышенным текстом
- Откройте диспетчер пакетов, нажав
CTRL + SHIFT + P
. Откроется окно диспетчера пакетов, где вы можете ввести и найти желаемый плагин. - Теперь введите «Livereload» в текстовое поле и выберите вариант с надписью «Livereload».
Отлично! теперь вы установили пакет livereload в свой sublime.
Опять же, нам нужно настроить параметр livereload, чтобы он работал.
Чтобы убедиться, что ваш плагин работает безупречно, вам нужно перезапустить свой возвышенный текст.
Установить расширение для браузера
- Щелкните ссылку и установите расширение для chrome
- После этого в правом верхнем углу Chrome браузера появится небольшой значок.
- Просмотрите локальную папку в Chrome и щелкните значок, чтобы активировать перезагрузку.
- Теперь ваша возвышенная панель задач должна сказать «Новый клиент LiveReload c2 подключен»
Примечание. Вышеупомянутое сообщение на панели задач какое-то время отображается в возвышенном тексте и автоматически исчезает.
Вот и все. Откройте папку проекта и попробуйте отредактировать свою страницу и начните экономить свое время, обновляя страницу каждый раз, когда вы вносите изменения.
Хорошего дня.
🔥 Замена горячего модуля
Hot Module Replacement (HMR) улучшает процесс разработки за счет автоматического обновления модулей в браузере во время выполнения без необходимости обновления всей страницы. Это означает, что состояние приложения может сохраняться при изменении мелких вещей. Реализация HMR Parcel поддерживает ресурсы как JavaScript, так и CSS.
Начиная с версии 1.12.0, реализация по умолчанию была изменена для полного обновления страницы при изменении файлов. Вы можете отказаться от использования истинной HMR, добавив в свое приложение следующее. Это будет применяться только в процессе разработки; HMR автоматически отключается при объединении в производственном режиме.
if (module.hot) {
module.hot.accept ()
}
По мере сохранения файлов Parcel восстанавливает то, что изменилось, и отправляет обновление всем работающим клиентам, содержащим новый код. Затем новый код заменяет старую версию и переоценивается вместе со всеми родителями.Вы можете подключиться к этому процессу, используя API module.hot
, который может уведомить ваш код, когда модуль собирается быть удален или когда приходит новая версия. Такие проекты, как react-hot-loader, могут помочь в этом процессе, и работать сразу с Parcel.
Есть два метода, о которых нужно знать: module.hot.accept
и module.hot.dispose
. Вы вызываете module.hot.accept
с функцией обратного вызова, которая выполняется при обновлении этого модуля или любой из его зависимостей. module.hot.dispose
принимает обратный вызов, который вызывается, когда этот модуль собирается заменить.
if (module.hot) {
module.hot.dispose (function () {
})
module.hot.accept (function () {
})
}
Автоматически устанавливаемые зависимости
Каждый раз, когда Parcel встречает зависимость, которая соответствует шаблону node_module
и не может ее найти, Parcel пытается установить эту зависимость, используя пряжи
или npm
в зависимости от поиска пряжи .блокировать
файл или нет. Это избавляет разработчика от необходимости покидать посылку или открывать несколько окон терминала.
Это происходит только в development (с использованием serve
или watch
), однако в производственной среде (с использованием сборки build
) автоматическая установка отключена, чтобы предотвратить нежелательные побочные эффекты при развертывании.
Вы можете отключить эту функцию, используя --no-autoinstall
.
Безопасная запись
В некоторых текстовых редакторах и IDE есть функция , безопасная запись
, которая в основном предотвращает потерю данных путем создания копии файла и его переименования при сохранении.
При использовании Hot Module Reload (HMR) эта функция блокирует автоматическое обнаружение обновлений файлов, чтобы отключить безопасную запись
, используйте параметры, указанные ниже:
-
Sublime Text 3
добавьтеatomic_save: "false"
в свои пользовательские настройки. -
IntelliJ
используйте поиск в настройках, чтобы найти «безопасную запись» и отключить ее. -
Vim
добавьте: установите backupcopy = yes
в свои настройки. -
WebStorm
снимите флажокИспользовать «безопасную запись»
в «Настройки»> «Внешний вид и поведение»> «Системные настройки».
Помогите нам улучшить документы
Если чего-то не хватает или не совсем понятно, пожалуйста
подать вопрос в репозиторий веб-сайта или
редактировать эту страницу.
Ярлык Sublime Text3 - Программист Все
На платформе Windows Sublime Text3 также является довольно простым инструментом для редактирования текста / кода.
Официальный сайт : https://www.sublimetext.com/
Сочетание клавиш Источник: https: // www.cnblogs.com/rudong/p/7889114.html
1. Решите Sublime Text3 Откройте проблему искажения CSV:
Вызовите `Ctrl + Shift + P`, введите:` install package`, введите;
Найдите в окне установки, которое откроется позже: «Converttoutf8» или «GBK Encoding Support», выберите «Щелкните для установки»;
В этом документе не будет искажений с китайским языком.
2. Решение для файла MD с предварительным просмотром в реальном времени Sublime Text3 Вопрос: MarkDownPreview + LiveReload
(в США вам необходимо сохранить для автоматического обновления, и вы не можете отслеживать вверх и вниз)
- Установить и настроить предварительный просмотр MARKDOWN
- Открыть диспетчер подключаемых модулей
Ctrl + Shift + p
- введите:
установить
, нажмите на плагин установки, который - введите:
Предварительный просмотр уценки
, нажмите, чтобы установить - Откройте его файл конфигурации:
Preferences -> Package Settings -> Markdown Preview -> Settings
, проверьте конфигурацию по умолчанию слеваenable_autoreload
Является ли это ИСТИНА, если вы пропустите, если нет, добавьте следующую информацию справа bar и перезапустите Sublime.
- Открыть диспетчер подключаемых модулей
{
"enable_autoreload": правда
}
- Установить и настроить LiveReload
- Откройте диспетчер плагинов установки:
ctrl + Shift + p
ВведитеУстановите пакет
, введитеLiveReload
, Нажатие и установка; - еще раз
Ctrl + shift + p
InputLiveReload: включить / выключить плагины
, Enter; - Выбор
Простая перезагрузка с задержкой (400 мс)
илиПростая перезагрузка
Разница между ними только в том, что в последнем нет задержки.
- Откройте диспетчер плагинов установки:
- Настроить ярлык
- Sublime поддерживает настраиваемые сочетания клавиш, предварительный просмотр MarkDown не является ярлыками по умолчанию, мы можем markdown Preview : Preview in Browser Set shortcut.
- Метод: в скобках в правой части файла, открытого с помощью Preference-> Key Bindings, добавьте строку кода:
- Обратите внимание, что если не только этот ярлык, не забудьте добавить запятую в конце.
{"keys": ["alt + m"], "command": "markdown_preview", "args": {"target ":" browser "," parser ":" markdown "}},
3.Решите кнопку вкладки Sublime Text3 для автоматического преобразования в 4 клавиши пробела и отображения проблемы пространства
- настройки -> настройки
- Справа {} ввод выглядит следующим образом:
{# В большие круглые скобки вводить необязательно
"Tab_size": 4, # установка размера вкладки 4 символа, который может быть установлен в соответствии с индивидуальным спросом.
"Translate_Tabs_to_SPaces": True, # преобразовать TAB в пробел
"DRAW_WHITE_SPACE": "all" # Показать пробел
}
Персональная конфигурация SUBLIME
Китайский : Ctrl + shift + p
Выберите [Установка пакета]. ChineseLocalizations
Font : Рекомендуемый специальный шрифт для программистов [шрифт Ya black mix version programming font] можно скачать: YaHei.Consolas.1.11b.ttf
"draw_white_space": "все",
"font_face": "YaHei Consolas Hybrid",
"font_size": 12,
"ignored_packages":
[
"Винтаж"
],
"tab_size": 4,
"theme": "Default.sublime-theme",
"translate_tabs_to_spaces": true
Запустить Python :
- Выполните код Python в Sublime, вы можете использовать
Ctrl + b
Shortcuts, автоматически выполнить это в консоли в Sublime, поддержать китайский язык в некоторых версиях Sublime и не может использоваться функция input () . - Используйте SublimeRepl для запуска кода Python
-
Необходимо установить подключаемый модуль SublimeREPL
Ctrl + shift + p
->установить
Enter Sublime Repl - Установка завершена, вы можете найти Python в [Tool] - [SublimeRepl]
- Установить ярлыки, автоматически выполнить код python одним щелчком мыши: например, установить F5 для сочетаний клавиш, [Настройки - Набор ярлыков - Добавить следующим образом]
- показан ниже:
Код
-
{"keys": ["f5"], "caption": "SublimeREPL: Python", "command": "run_existing_window_command", "args": {"id": "repl_python_run", "file": " config / python / Main.возвышенное-меню "}}
- Напишите код Python, рекомендуется, чтобы длина каждого оператора не превышала 80 символов, и вы можете добавить в настройки следующий код:
«rulers»: [80],
Sublime Установить Anaconda
- Управление пакетами -> Enter install
- Войдите в интерфейс установки, введите anaconda в командной строке нового окна
- Настройки -> настройки пакета -> анаконда -> настройки по умолчанию
- Поисковый ввод:
«python_interpreter»: «путь установки python»,
, Путь установки Python здесь - это путь установки вашего собственного Python, и вы его найдете.
- Поисковый ввод:
- На том же шаге найдите Настройки-Пользователи. Введите следующие данные:
{
"python_interperpreter": "Путь установки Python", # здесь ПУТЬ
"suppress_word_completions": истина,
"suppress_explicit_completions": истина,
"complete_parameters": истина,
}
- Перезапустите Sublime и напишите python, чтобы расширить множество функций.
Вкл. / Выкл. Ярлык на боковой панели папки Sublime
- Нажмите
Ctrl + k
Продолжить сноваCtrl + b
Sublime Text 3 Установка подключаемого модуля Emmet
Эммет - это дзен-кодинг.
Это набор удобных инструментов, предназначенных для повышения скорости кода HTML и CSS. Интегрируя его в текстовый редактор, вы можете предоставить некоторые функции и ярлыки для ускорения скорости разработки. Предоставляет плагины, включая Eclipse, IDEA, UltraEdit, Slickedit.
способ установки:
-
Ctrl + Shift + p
Введитеустановить
Автобусная остановка - Введите
emmet
Автобусная остановка
Если сеть плохая (поймите), вы можете использовать инструменты P2P, такие как: Thunder
Очень вероятно, что здесь находится PYV8, тогда вы можете открыть Thunder на свой адрес: httpss: // raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64-p3.zip
Если это пакет сжатия, загруженный Thunder, после распаковки установите всю папку в следующий каталог: C: \ Users \ Administrator \ AppData \ Roaming \ Sublime Text 3 \ Installed Packages \ PyV8
, если нет PyV8
Эта папка создает один
Последний результат: PyV8
В этом каталоге также есть каталог. pyv8-win64-p3
Затем внутри находятся два файла Python.
Перезапустите Sublime Text 3, получите
Использование сочетаний клавиш Sublime Text 3
Некоторые не являются привычками из-за предыдущей установки EMMET.
Когда вы используете Anaconda, вы входите напрямую. html
, затем нажмите вкладку
Ключ может быть автоматически заполнен заголовочной информацией HTML.
Однако ярлык для Emmet отличается от приведенного выше, вам нужно ввести один !
Перейти на вкладку
Полная информация о заголовке будет автоматически заполнена, если ввести html
Затем просто создайте один html
тегов.
Ярлык Sublime TEXT 3 Открывает расположение текущего файла (Windows)
Вам нужно установить ярлыки без официальных методов с помощью Sublimetext, но официального метода не существует.
Щелкните привязки клавиш в настройках, чтобы открыть интерфейс редактирования. После открытия вы можете увидеть файл JSON, в этом файле есть все ярлыки, которые можно использовать.
Изменяет только файл пользователя, который используется по умолчанию (windows). Sublime-keymap file
Добавьте один, введите следующий код
{
"ключи": ["ctrl + alt + e"],
"команда": "open_dir",
"args": {
"dir": "$ file_path",
"файл": "$ имя_файла"
}
}
Следует отметить, что для последнего элемента JSON это не запятая, то есть, если в вашем файле только одна скобка, введите напрямую и не нужно добавлять запятую.
Теперь вы можете нажимать файлы, которые необходимо открыть, с помощью диспетчера ресурсов ctrl + alt + e
Открыть, диспетчер открытых ресурсов автоматически выберет папку, содержащую этот файл, и одновременно выберет этот файл.
Местоположение файла, открытого SublimeText, можно быстро открыть с помощью ярлыка.
hare
Обновлено: 2020.7.30
Открыть php-документ на локальном хосте из Sublime Text
Я предлагаю альтернативное решение вашего вопроса, с моей точки зрения, гораздо более практичное / полезное и заключается в том, что я использую возвышенный текст в течение 2 лет, и я думаю, что мне не нужно что-то, что я не могу использовать или получить возвышенное.
Поэтому во всем, что касается разработки браузеров, рекомендую использовать LiveReload.
ссылка
Почему?
Ну, это плагин / addon / libreria
Sublime Text. Ваша цель - обновлять браузер каждый раз, когда вы выполняете действие сохранения в своем проекте.
Допустим, вы синхронизируете возвышенный текст со своим браузером в Firefox, Chrome y Safari
, то есть для наиболее распространенных операционных систем при разработке / программировании браузеров.
Каждый раз, когда вы сохраняете свой проект, он обновляется в браузере, производится простое обновление. Кстати, упомяните, что файлы cookie браузера не могут выполнять правильное обновление, что логично, это кажется логичным / глупым, что я говорю, но когда вы используете это в течение многих лет ... вы привыкаете к этому так сильно, что это почти " ОБЯЗАТЕЛЬНО "что каждый раз вы сохраняете возвышенное ... ВЫ ДОЛЖНЫ!" размышляйте .... а иногда, если вы забываете удалить куки, вам может быть плохо. «Правдивая история»
Моим окончательным решением было работать в MODO INCOGNITO.
Да, еще можно использовать в режиме инкогнито, LiveReload =) как нельзя лучше.
Как установить?
1-Первый, у кого установлен Sublime Text
2-Install Package Controll
Package Control - это библиотека возвышенного текста, которая позволяет вам управлять пакетами или другими плагинами / адонами для возвышенного текста.
Это будет: allowir instalar libreria de LIVERELOAD
в Sublime text.
Установить элемент управления Package очень просто:
2.a) В возвышенном тексте выше вы переходите к просмотрам > показать консоль
(открывается консоль)
2. б) В консоли возвышенного текста вы вставляете текст, скопированный из этой сети.
* Для sublimetext2 и SBT3 выберите тот, который у вас есть.
ссылка
2.c) Перезапустите возвышенный текст при установке, чтобы они имели правильный эффект и избегали сбоев.
3) Сейчас INSTALAR LiveReload
О Sublime Text
3.a) Мы снова начали Sublime Text
3.б) Команда Ctrl + Shift + P
, откроется окно в виде INPUT
.
3.b) Выше вы пишете install pack
, и этого должно быть достаточно, чтобы увидеть Package Control: Install Package
, который является менеджером установщика пакетов для sublime.
Вы прокручиваете с ребятами и нажимаете ввод.
3.c) Когда вы выбираете его (требуется подключение к Интернету), появляется список всех пакетов, которые вы можете установить, в виде возвышенного текста.
3.г) Мы должны найти LiveReload plugin
и конкретно нажать Enter.
В левой нижней части текстового редактора Sublime Text вы увидите ход установки.
3.e) После завершения и установки снова перезапустите Sublime Text.
4) Теперь Configurar LiveReload de Sublime
4.a) Вы получаете доступ к Preferences> Package settings> LiveReload> settings-Default
4.b) В файле LiveReload.sublime-settings
, у вас должен быть следующий код, добавьте все или то, что вам нужно:
{
"enabled_plugins": [
"Обновить",
"SimpleReloadPlugin",
«SimpleRefresh»
]
}
5) Итак, мы закончили с возвышенным текстом. Теперь браузер остался.
5.a) Поиск Livereload + "Ваш браузер" (Пример: Livereload Chrome)
5.b) Установите плагин вашего браузера, в этом случае мы сделаем это с помощью Chrome.
5.c) Перезапустите браузер.
5. d) В Chrome вы увидите чуть выше справа от навигатора круг, образованный двумя стрелками, представляющими цикл обновления или перезарядки с точкой в центре.
6) Теперь настройте плагин браузера
6.a) В Google Chrome это так же просто, как щелкнуть правой кнопкой мыши значок livereload в правом верхнем углу и указать «управлять расширением или управлять расширением».
6.b) Мы должны подтвердить, что расширение chrome активно и DEBES MARCAR las 2 casillas pequeñas de "Permitir en incognito" y "todos los accesos a url de archivos".
6.c) После того, как вы установили флажки. ВСЕ ГОТОВО.
7) Как продолжить:
7.a) ПЕРВЫЙ ОТКРЫТЬ сублимитекст проекта.
7.b) ВТОРОЙ вы открываете браузер и переходите по URL-адресу вашего проекта Localhost / project / ..
7.c) TERCERO y ULTIMO
, вы делаете кликов IZQUIERDO encima del simbolo del livereload en el navegador
, и вы увидит, как маленькая точка в центре круга окрашена и отмечена темным.
7.d) Теперь мы можем сказать, что ваш браузер синхронизирован с Sublime Text.
7.e) Cada vez que GUARDES el proyecto
, вы можете использовать команду Ctrl + S
автоматически обновит и обновит браузер.