Text 3: Sublime Text — Text Editing, Done Right

Sublime Text 3 установка Package Control

Привет всем постоянным читателям, и случайным прохожим. Этой статьей я хочу начать серию публикаций о прекрасном (не побоюсь этого слова) редакторе Sublime Text 3, который я использую в работе ежедневно. И первое о чем стоит поговорить — это установка Package Control.

Как и большинство известных нам редакторов, Sublime поддерживает аддоны, плагины, расширения которые принято называть пакетами (packages) они позволяют расширить родной функционал редактора. О пакетах мы поговорим подробнее в следующих статьях, а сейчас приступим к установке пакетного менеджера.

Установка Package Control

Установка пакетов с помощью Package Control очень простой процесс. Все пакеты размещены на Bitbucket или GitHub. К счастью для нас с помощью интерфейса менеджера, мы может устанавливать пакеты не покидая редактора.

Для инсталяции Package Control  cледуем шагам:

1. Переходим по ссылке https://packagecontrol. io/installation и копируем команду для установки
2. В Sublime Text 3 открываем консоль сочетанием клавиш Ctr + `
3. Вставляем команду в консоль и нажимаем enter
4. Установка может занять некоторое время, после перезагружаем редактор.

Теперь мы можем использовать менеджер для установки пакетов (плагинов).

Для вызова менеджера нужно нажать сочетание клавиш Ctrl + Shift + p или кликнуть Tools — Command Palette и напечатать install. Вы должны увидеть и выбрать надпись Package Control : Install Package.

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

Для установки нужного нам пакета заходим в Command Palette, уже известным для нас способом. И просто печатаем в поиске название пакета.

Иногда на просторах интернета мы можем встретить пакет которого нет в репозитории Package Control, в таком случае установка будет происходить немного иначе.

1. Качаем нужный нам пакет на компьютер
2. Заходим в папку где установлен Sublime находим папку Packages и копируем в нее пакет.
3. Перезагружаем Sublime Text если он был запущен

Все, пакет установлен и готов к использованию.

В следующей статье я расскажу о командах которые помогут упростить нам работу с редактором. Если вы не хотите пропустить статью, и быть в курсе последних публикаций подписывайтесь в группу в вк, facebook и канал в телеграмме.

Если у вас возникли вопросы или есть что добавить, пишите в комментариях. Рад буду узнать ваше мнение. До встречи в новых статьях и видео.

Установка Sublime Text 3 Ubuntu 20.04

Sublime Text 3 — это мощный, кроссплатформенный текстовый редактор для программистов. Он поддерживает подсветку синтаксиса, редактирование разметки, поиск ошибок, имеет API на Python и движок регулярных выражений, который ускоряет работу с файлами.

Возможности редактора можно очень сильно расширить с помощью плагинов. В этой статье мы рассмотрим как выполняется установка Sublime Text 3 Ubuntu 20.04 из PPA или с помощью пакета, загруженного из официального сайта.

Содержание статьи:

Установка Sublime Text 3 в Ubuntu

1. Репозиторий разработчиков

Сначала поговорим как установить программу из репозитория разработчиков. Этот репозиторий можно добавить также в другие версии этого дистрибутива. Сначала необходимо установить нужные зависимости. Для этого откройте терминал (Ctrl+Alt+T) и выполните:

sudo apt install dirmngr gnupg apt-transport-https ca-certificates software-properties-common

Дальше необходимо добавить ключ репозитория:

curl -fsSL https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -

И наконец можно установить сам репозиторий:

sudo add-apt-repository "deb https://download.sublimetext.com/ apt/stable/"

Затем установка Sublime Text 3:

sudo apt install sublime-text

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

Главное окно программы выглядит вот так:

2. Центр приложений

Также вы можете установить программу из центра приложений. Для этого запустите центр приложений и наберите в поиске Sublime:

Затем выберите Sublime Text и нажмите кнопку Установить:

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

3. Пакет snap

Для того чтобы установить самую новую версию Sublime Text 3 можно воспользоваться пакетным менеджером snap. Сначала надо проверить есть ли такой пакет:

sudo snap search sublime

Затем можно установить саму программу:

sudo snap install sublime-text --classic

4. Пакет flatpak

Если в вашей системе установлен пакетный менеджер flatpak, то вы можете получить последнюю версию программы из FlatHub. Для этого выполните:

flatpak install flathub com.sublimetext.three

Для запуска программы необходимо выполнить:

flatpak run com.sublimetext.three

Удаление Sublime Text 3

Для удаления Sublime Text 3 установленного из репозиториев достаточно выполнить:

sudo apt purge sublime-text

Теперь программа полностью удалена из вашей системы. Для удаления snap пакета надо выполнить:

sudo snap remove sublime-text

Для удаления пакета flatpak выполните:

sudo flatpak uninstall com.sublimetext.three

Выводы

В этой статье мы рассмотрели как установить sublime text 3 в Ubuntu. Все очень просто. На завершение видео с процессом установки:

Оцените статью:

Готовим sublime text 3 к бою

Плагины

Для начала, рекомендую установить Package Control — это такой репозиторий с дополнениями для ST. Установка его достаточно проста и описана на офф.сайте — https://packagecontrol.io/installation, поэтому предполагаю что с этим Вы прекрасно справитесь и без меня.

Теперь посмотрим на плагины:

Bracket highlighter

Этот плагин подсвечивает границы разделителей, в том числе и html теги. В свежих версиях также содержит интересные экспериментальные возможности

Color hightlighter

Плагин для подсветки цвета. Поддерживает форматы — html named color, hex, rgb, rgba. У этого плагина есть еще одна приятная фишка — он поддерживает правильную подсветку переменных содержащих цвет (например в less)

Emmet

Бывший ZenCoding. При умелом использовании эта штука может сэкономить неимоверное количество времени и сил. Более подробно с основами работы с emmet вы можете ознакомиться в статье на хабре

Проекты

Sublime Text дает возможность группировать исходники в проекты. И это шикарно!

Во-первых держать все свои проекты в проектах (извините за каламбур) позволяет использовать быстрый поиск файлов.

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

Для создания нового проекта, в меню sublime выбираем Project -> Add Folder to Project…
С помощью этой кнопки мы добавляем папку в проект. Теперь нужно сохранить проект — Project -> Save Project As… в каком-либо удобном для вас месте.

Лично я предпочитаю хранить файлы Sublime Project в папке проекта, чтобы можно было свободно ими делиться с коллегами.

Настройка проекта

Чтобы настроить проект, выберем Project -> Edit Project, в итоге перед нами предстанет json файл с настройками проекта.

По умолчанию в проекте забиты такие настройки:

{
	"folders":
	[
		{
			"path": "."
		}
	]
}

folders содержит в себе набор путей к папкам, добавленным в проект. 

Исключение файлов и папок из проекта

В разделе folders, также имеется возможность исключения файлов и каталогов. К примеру, если мы хотим исключить все 

"file_exclude_patterns" : [
	"*.zip",
]

А для исключения целых директорий используется параметр folder_exclude_patterns:

"folder_exclude_patterns" : [ 
    "node_modules" 
]

Настройка этих параметров бывает очень важна в больших проектах, где есть множество файлов и каталогов. 

Кодировка проекта

Каждый проект можно настроить на определенную кодировку. Делается это с помощью настройки settings:

"settings" : {
	"default_encoding" : "Cyrillic (Windows 1251)",
	"fallback_encoding": "Cyrillic (Windows 1251)"
}

Размер отступов

В раздел settings также можно поместить настройки отступов. К примеру, чтобы задать отступ в 4 пробела, воспользуемся параметром tab_size:

"settings" : {
    "tab_size" : 4
}
 

Остальные настройки можно найти в документации. 

Системы сборки

Sublime Text предоставляет возможность интегрировать сборочные скрипты в проекты. Давайте, например, добавим сборочный скрипт для сборки проекта с помощью gulp

"build_systems" : [
    {
        "name" : "My Project builder",
        "cmd" : ["gulp", "build"]
    }
]

Выбираем свою систему сборки: нажимаем комбинацию <CTRL>+<SHIFT>+B, в списке выбираем нужный сборщик и нажимаем Enter. В sublime откроется консоль, где будет отображаться статус сборки. 

Ок, с самым простым разобрались, едем дальше — в инструментальный лес.

Проверка орфографии в Sublime Text – Zencoder

Вопрос настройки орфографии (spellcheck) в редакторе Sublime Text 3.

Сам вопрос подразумевает настройку проверки орфографии (spellcheck) русского текста в Sublime Text, ибо орфография английского языка включена в этом редакторе по умолчанию (точнее — есть встроенный словарь английского языка).

Установка русского словаря

Чтобы включить возможность проверки (spellcheck) русскаго текста в редакторе Sublime Text, необходимо подключить словарь русского языка. Готовый к использованию под Sublime Text словарь русского языка можно скачать по ссылке — sublime_russian_english_dictonary.zip.

После скачивания архива его нужно распаковать. В итоге получиться два файла:

$ ls
  russian_english.aff
  russian_english.dic

Затем нужно переместить (или скопировать) оба файла в директорию с плагинами Sublime Text. Это можно сделать тремя способами.

Первый способ — быстрый и простой, основан на использовании консоли Linux (я не забыл сказать, что пример приведен под Linux Mint 17 Cinnamon?). Для этого в текущей директории со словарями открываем терминал и выполняем всего одну команду:

$ cp * ~/.config/sublime-text-3/Packages/
 

… которая произведет копирование всех файлов (в данном случае — двух) в директорию с плагинами под Sublime Text.

Второй способ — более медленный. Для этого в окне Nemo (в Linux Mint Cinnamon — это аналог Finder под Mac OS X или Проводник под Windows) в контекстном меню выбираем “Показать скрытые файлы”.

Отобразятся все скрытые (системные) файлы\директории системы Linux Mint и среди них нужная нам директория — “.config”:

Переходим по пути .config — sublime-text-3 — Packages и с помощью клавиш Ctrl+C + Ctrl+V производим вставку файлов русского словаря.

Третий способ — с помощью редактора Sublime Text. Для этого в самом редакторе переходим по пути “Preferences” — “Browse Packages…”. Откроется окно с плагинами Sublime Text. Далее — действовать, как во втором примере.

Spellcheck в Sublime Text

После помещения файлов словаря в директорию “Packages” желательно перезапустить редактор Sublime Text. Если все прошло успешно, то в меню “View” — “Dictionary” под пунктом “Language — English” появиться пункт “russian-english” — это и есть подключенный нами словарь русского языка.

Чтобы осуществить проверку (spellcheck) на ошибки в русско-язычном тексте в редакторе Sublime Text, нужно выбрать в меню вышеназванный пункт — “View” — “Dictionary” — “russian-english”, тем самым указав редактору, какой словарь использовать для проверки. А затем запустить проверку орфографии (spellcheck), нажав клавишу F6. Повторное нажатие клавиши отключает проверку орфографии.

Настройка spellcheck в Sublime Text

Рассмотренный выше способ проверки орфографии (spellcheck) в Sublime Text можно назвать ручным. Однако, для этого способа требуется много времени и телодвижений, чтобы включить его.

Если в Sublime Text пишется в основном русско-язычный текст, то можно включить автоматическую проверку орфографии (spellcheck) в этом редакторе.

Для этого в пользовательских настройках “Preferences” — “Settings — User” достаточно прописать две строки:

// Word list to use for spellchecking
"dictionary": "Packages/russian_english.dic",

// Set to true to turn spellchecking on by default
"spell_check": true

Первая строка указывает редактору Sublime Text месторасположение русского словаря, тем самым говоря ему, что для проверки орфографии (spellcheck) нужно использовать этот словарь, а не какой-нибудь другой.

Вторая строка включает автоматическую проверку орфографии (spellcheck) в Sublime Text. Если в тексте много англоязычных слов, или если необходимо на время отключить проверку, то достаточно нажать клавишу F6. Чтобы снова вернуть назад проверку, опять нажимаем F6.

Заключение

Очень полезная штучка оказалась для меня, возможность проверки орфографии (spellcheck) в Sublime Text. Открыл для себя с удивлением, сколько же много я ошибок и опечаток делаю в тексте!

Один вопрос в данной теме остался для меня открытым — как самому вносить правки в русский словарь? Как самому добавлять в него слова? К примеру, чтобы он не “ругался” на незнакомое ему слово “фреймворк” или “плагин”?

Sublime Text 3. Руководство по созданию плагина для начинающих

Команда разработки Sublime Text 3 позаботилась о том, чтобы писать плагины под ST было просто. Когда я писал плагин впервые, я даже не знал синтаксис Python. В общем, поехали!

Мы напишем плагин UnicodeCharacterInsert, который по нажатию горячей клавиши откроет всплывающее окно с таблицей Unicode символов. При выборе символа он будет вставлен в текущую позицию курсора. Таблица символов будет находится во внешнем HTML файле.

Я работаю в OS Ubuntu Linux, учитывайте, что на других OS некоторые моменты могут отличаться.

Внимание!

Пользователь github указал на ошибку в консоле при открытии контекстного меню:

warning: mnemonic f not found in menu caption Unicode Characters

Цитирую:

В отличие от Menu Bar в контекстное меню Sublime Text не требуется добавлять mnemonics.

Документация

Сразу приведу ссылки на документацию по модулям и API для Sublime Text, которая вам пригодится при создании собственного плагина.

• Events & Idle Watcher: http://www.sublimetext.com/docs/plugin-examples
• API Reference: http://www.sublimetext.com/docs/3/api_reference.html
  
• Commands: http://www.sublimetext.com/docs/3/commands.html
  
• Commands: http://sublimetext.info/docs/en/core/commands.html
  
• EventListener: https://www.sublimetext.com/docs/3/api_reference.html#sublime_plugin.EventListener
  

Костяк плагина

Открываем редактор Sublime Text и создаем костяк нового плагина: Tools » New Plugin.. Сохраняем сгенерированный файл в подкаталоге плагинов  ~/.config/sublime-text-3/Packages/UnicodeCharacterInsert с именем UnicodeCharacterInsert.py.

* Путь к плагинам в Windows: C:\Documents and Settings\username\Application Data\Sublime Text\Packages.

Переименуйте название класса команды на UnicodeCharacterInsertCommand:

import sublime, sublime_plugin

class UnicodeCharacterInsertCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        self.view.insert(edit, 0, "Hello, World!")

Примечания

• Окончание Command указывает на то, что это команда.
• Метод run вызывается по умолчанию при запуске плагина.
  
• Аргумент sublime_plugin.TextCommand указывает на тип плагина. Подробнее о типах плагинов Sublime Text.

Для запуска плагина, выполните в консоли Sublime Text следующий код:

view.run_command('unicode_character_insert')

Чтобы вызвать панель консоли нажмите: Ctrl+~.

Этот плагин просто вставит текст «Hello, World!» с начала текущего открытого документа.

Вставка текста

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

pos = self.view.sel()[0].begin()
self.view.insert(edit, pos, "Unicode Character")

Чтобы вставить текст после курсора вы можете использовать команду view.run_command("insert"):

self.view.run_command("insert", {"characters": "Unicode Character"})

Горячие клавиши

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

В каталоге плагина создайте файл Default.sublime-keymap со следующим содержимым:

[
    { "keys": [ "ctrl+shift+u", "ctrl+shift+i" ], "command": "unicode_character_insert" }
]

Теперь команда unicode_character_insert из вашего плагина будет вызываться при нажатии Ctrl+Shift+U+I, проверьте это.

Popup окно

Чтобы показать всплывающее окно с некоторым HTML контентом, в нашем случае это будет набор некоторых Unicode символов, используйте метод view.show_popup(content):

content = '<b>bold</b> text and <a href="link value">link</a>'
self.view.show_popup(content, sublime.HTML, location=-1, on_navigate=print)

Параметры метода show_popup:

flags        sublime.HTML, sublime.COOPERATE_WITH_AUTO_COMPLETE
location     -1
max_width    максимальная ширина popup окна
max_height   максимальная высота popup окна
on_navigate  метод, который будет вызван при нажатии на ссылку
on_hide      метод, который будет вызван при сокрытии окна

Код класса UnicodeCharacterInsertCommand (блок import я буду опускать для экономии места):

class UnicodeCharacterInsertCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        content = '<b>bold</b> text and <a href="link value">link</a>'
        self.view.show_popup(content, flags=sublime.HTML, location=-1, max_width=400, on_navigate=print)

Всплывающее окно c HTML разметкой

При нажатии на ссылку, в консоль будет выводится значение этой ссылки, текст link value.

Контент popup-окна в HTML файле

Теперь вынесем HTML разметку всплывающего окна во внешний файл unicode-characters.html, который сохраним в каталоге нашего плагина.

<style>
    html { background-color: #272822; margin: 0px; }
    body { margin: 10px; padding: 0; }
    a { text-decoration: none; margin: 0px; font-size: 24px; font-family: monospace; color: #EEF8F2; height: 30px; }
</style>

<div>
    <a href="«">«</a>
    <a href="»">»</a>
    <a href="‹">‹</a>
    <a href="›">›</a>
    <a href="§">§</a>
    <a href="¶">¶</a>
    <a href="©">©</a>
    <a href="®">®</a>
    <a href="™">™</a>
    <a href="؟">؟</a>
</div>

Внимание!

Popup-окна в Sublime Text 3 поддерживает лишь небольшой набор HTML тегов, атрибутов и CSS правил. При этом заявленная поддержка правила text-decoration: none у меня не работает.

Получить контент из внешнего файла можно так:

tpl_path = os.path.dirname(os.path.realpath(__file__)) + '/unicode-characters.html'
content = open(tpl_path, 'r').read()

При публикации плагина в репозитории packagecontrol.io мне подсказали, что внешние ресурсы необходимо подгружать методом sublime.load_resource. Этому методу нужно передавать путь к внешнему файлу относительно каталога ~/.config/sublime-text-3:

Packages/UnicodeCharacterInsert/unicode-characters.html

Финальная реализация

Реализуем методы get_characters_html для получения разметки всплывающего окна из файла unicode-characters.html и метод on_choice_symbol, который будет вставлять в документ выбранный Unicode символ и закрывать popup:

class UnicodeCharacterInsertCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        content = self.get_popup_content
        self.view.show_popup(content, flags=sublime.HTML, location=-1, max_width=400, on_navigate=self.on_choice_symbol)

    def get_characters_html(self):
        resources = sublime.find_resources('unicode-characters.html')
        content = sublime.load_resource(resources[0])
        return content

    def on_choice_symbol(self, symbol):
        self.view.run_command("insert", {"characters": symbol})
        self.view.hide_popup()

В результате у нас получилось вот такое popup-окно с таблицей Unicode символов:

Вид панели с Unicode символами

Добавление команды Command Palette

Создайте файл Default.sublime-commands в каталоге плагина:

[
    { "caption": "Unicode Character Insert: Show Panel", "command": "unicode_character_insert" }
]

Контекстное меню

Для добавление пунктов в контекстное меню создайте файл Context.sublime-menu в каталоге плагина:

[
    {
        "caption": "Unicode Characters",
        "mnemonic": "f",
        "id": "unicode_character_insert",
        "children":
        [
            {
                "command": "unicode_character_insert",
                "caption": "Show Characters Table"
            }
        ]
    },
	{
        "caption": "-",
        "id": "separator"
    }
]

Чтобы добавить пункты в основное меню создайте файл Main.sublime-menu:

[
    {
        "mnemonic": "n",
        "caption": "Preferences",
        "id": "preferences",
        "children": [
            {
                "mnemonic": "P",
                "caption": "Package Settings",
                "id": "package-settings",
                "children": [
                    {
                        "caption": "Unicode Character Insert",
                        "children": [
                            {
                                "caption": "Key Bindings – Default",
                                "command": "open_file",
                                "args": {
                                    "file": "${packages}/UnicodeCharacterInsert/Default.sublime-keymap"
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Внимание!

Плагин Unicode Character Insert конфликтует с Colortip (https://github.com/jbrooksuk/Colortip). Просто имейте в виду..

#sublime text 3, #ST3, #st3 create plugin manual

Material Theme для Sublime Text 3

Material Theme от Mattia Astorino — данная элегантная тема принесёт в ваш Sublime Text 3 немного материального дизайна, так продвигаемого компанией google.

Скриншоты

Легкая установка

Ручная установка

1. Cкачайте последнюю версию, распакуйте архив и переименуйте папку в «Material Theme».
2. Переместите распакованную папку в директорию пакетов sublime (Preferences → Browse packages…)
3. Активируйте тему через настройки (Preferences > Setting — User):

"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

Не забудьте перегрузить Sublime Text после активации тему.

Стили темы

Darker

"theme": "Material-Theme-Darker.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",

Lighter

"theme": "Material-Theme-Lighter.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Lighter.tmTheme",

Известные баги

Белые панели

Опции темы

// мелкие табы
"material_theme_small_tab": true,
// скрыть иконки типов файлов в сайдбаре
"material_theme_disable_fileicons": true,
// Отключить анимацию папок
"material_theme_disable_folder_animation": true,
// мелкая статусная строка
"material_theme_small_statusbar": true,
// отключить файловый индикатор сайдбара
"material_theme_disable_tree_indicator": true,
// жирные лейблы у табов
"material_theme_bold_tab": true,
// показать разделитель табов
"material_theme_tabs_separator": true,
"material_theme_accent_lime": true,
"material_theme_accent_purple": true,
"material_theme_accent_red": true,
"material_theme_accent_orange": true,
"material_theme_accent_yellow": true,
// показывать разделитель в нижней панели
"material_theme_panel_separator": true,
// автоширина у табов
"material_theme_tabs_autowidth": true,
// контрастный режим сайдбара и табов
"material_theme_contrast_mode": true,

Рекомендованные настройки

"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// подсвечивать активный отступ
"indent_guide_options": [ "draw_normal", "draw_active" ],
// антиалиасинг на маковских ретинах
"font_options": [ "gray_antialias" ],

Цветовая палитра

ВКонтакте

Twitter

Facebook

Одноклассники

Linkedin

Telegram

WhatsApp

Dark Mode Material Design Sublime Text Theme

Как стать блатным фронтендером ? — Webstacker

В чем сила, брат?

Сила в Саблайме. Особенно если ты фронтендер. В мире существует множество IDE для веб-разработки для каждой ОС, каждая из которых имеет свои сильные стороны — будь то HTML, CSS, Javascript или PHP, Python и так далее.

Сегодня мы поговорим о Sublime Text, а точнее — о маст-хев плагинах для улучшения производительности в разработке интерфейсов веб-сайтов. Если Вы еще не используете его для верстки сайтов — стоит задуматься. Ведь блатные разрабы не юзают бычевский блокнот. Очнись, одумайся, покайся.

Огромное сообщество разработчиков плагинов под саблайм в поте лица создают то, что мы потом бесплатно берем из встроенного плагин-менеджера — мощные плагины, которые прекрасно дополняют легкое и приятное приложение. Вкусный набор, не так ли?

Пожалуй, начнем.

Package Control

Приятный инструментарий для установки плагинов. Без него установка каждого из плагинов превращается в ад. Маст-хев, в любом случае. Установить можно за ссылкой.

Готово? Нажимаем Ctrl + Shift + P (Windows) или Cmd + Shift + P (Mac) и пишет название плагина. Выбираем — ставим. Синк эбаут ит.

Emmet

Sublime Text и Emmet — практически одно и то же. Расширение Emmet не служит только одной функции или цели. Это массовый инструментарий для веб-разработчиков с множеством удобных функций кодирования, дополнительных сочетаний клавиш и функций для автоматизации Вашего рабочего процесса. Это может помочь Вам управлять фрагментами кода или добавлять дополнительные функции. Например, html + tab создаст готовый каркас для html-документа, а div.wrapper + tab превратится в <div></div>

Увидев обширную документацию Emmet, Вы обязательно найдете для себя кучу полезных плюшек. Нет лучшего расширения для Sublime Text, чем Emmet. Особенно для тех, кто часто пишет веб-сайты с нуля. Детальнее — на официальном сайте.

Minify

Неожиданно, но Minify позволяет быстро минимизировать(или наоборот) для CSS, JavaScript, JSON, HTML и SVG файлов. Очень удобный плагин для минимизации веса проекта и файлов без какой-либо потери функциональности. Больше деталей — здесь.

Отдельно, для работоспособности плагина нужно установить node.js и ввести команду в консоле:

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

Color Highlighter

Этот плагин позволит визуально выделять цвета, указанные в CSS-файлах. Вы сможете увидеть написанный цвет в режиме реального времени. Также, в Color Highlighter есть поддержка Sass, Less и Stylus, благодаря чему этот плагин становится пригодным для любых боевых условий.

Детальнее о плагине Вы можете узнать на официальной странице.

Advanced​New​File

Удобный плагин для создания файлов с помощью строки в самом приложении, без необходимости создавать файлы с помощью выпадающий окон и через проводник Вашей ОС. Упрощает работу с файлами, есть поддержка путей с вложенными папками. Подробнее — нажмите сюда.

Bracket​Highlighter

Этот плагин подсвечивает скобки в коде, такие как: [], (), {}, "", '', #! Xml <tag> </ tag>, что очень удобно когда нужно увидеть начало-конец ветки. Особенно эффективно сказывается на больших проектах, где один файл может содержать целую тучу веток с табами.

Разработчик полностью переписал всю базу кода двух аналогичных плагинов, чтобы обеспечить более гибкую, быструю и многофункциональную работу. Узнать больше о плагине.

Autoprefixer

Многие из новых свойств CSS3 имеют префиксы для обработки различных механизмов рендеринга. Они в основном используются для движков WebKit, Gecko и Microsoft, которые сгруппированы в качестве «vendor prefixes». (-moz-, -webkit-,-ms-,-o-)

Если вы хотите поддерживать максимально возможную аудиторию, вам понадобится Autoprefixer. Его можно установить через встроенный менеджер плагинов, больше информации за ссылкой.

Суммируя

Скажу то, что это не все полезные плагины, которые пригодятся Вам в процессе разработки. Возможно, будет вторая статья с тонной интересных плагинов. А возможно и нет.

Моя задача в этой статье — дать понимание что это такое и с чем его едят. Думаю, взять и найти нужные плагины с помощью PackageControl — не проблема. Удачи в разработке!

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

Поделиться статьей:

Sublime Text 3 Intro (+ Как подключить Sublime к удаленному серверу)

Я писал о важности сценариев в науке о данных. Но я понял, что никогда не представлял свой любимый редактор сценариев. Это Sublime Text 3 ! В этой статье я покажу вам:

• Что такое Sublime Text 3?
• Каковы его лучшие функции для специалистов по данным?
  Aaaand:
• Как вы можете использовать его на удаленном сервере?

Примечание. Написав и перечитав эту статью, я понял, что очень хорошо отношусь к Sublime Text 3… Так что на всякий случай позвольте мне добавить здесь: я хвалю его, потому что он мне нравится.Я и не имею отношения к команде Sublime Text .

Sublime Text 3 — текстовый редактор для программирования. Это похоже на TextEdit (на Mac) или Блокнот (на Windows). Вы можете ввести в него текст и сохранить его в разных форматах файлов. За исключением того, что Sublime Text 3 специализируется на кодировании.

SQL-скрипт в TextEdit:

Тот же сценарий SQL в Sublime Text 3:

Наиболее очевидные отличия:

• Sublime Text окрашивает ваш код в соответствии с синтаксисом, который вы используете
• Он распознает все основные языки, которые вы будете использовать как специалист по данным: SQL, Python, bash, R и т. Д.
• Он показывает количество строк в вашем скрипте
• Он дает вам обзор скрипта справа
• …

И это только начало; в Sublime Text 3 гораздо больше…

Я должен добавить:
Sublime не единственный текстовый редактор для кодирования.
Многие специалисты по обработке данных используют vim или nano — или мой любимый: mcedit .

Это хорошие инструменты для редактирования скриптов и кода. Вы можете использовать их из командной строки, а mcedit даже имеет приятный визуальный интерфейс типа «укажи и щелкни» — аналогичный Sublime Text.

Тот же SQL-скрипт в mcedit :

Но хотя многие специалисты по данным любят эти старые редакторы скриптов, по моему опыту, они недостаточно удобны для пользователя. Конечно, к ним можно привыкнуть. Например, я использовал mcedit в течение многих лет… Но как только вы попробуете Sublime Text 3, пути назад уже не будет.Это намного быстрее, плавнее и эффективнее, чем все, что вы использовали раньше.

Существуют часовые онлайн-курсы о том, как максимально эффективно использовать Sublime Text 3. В этой статье я перечислю только несколько моих любимых функций, которые я использую в своих проектах по науке о данных изо дня в день — вы знаете, просто чтобы подогреть аппетит. 😉 (А затем, если вы хотите углубиться, вы все равно можете найти на Youtube еще несколько подробных руководств.)

Самая очевидная ключевая особенность — подсветка синтаксиса . Когда вы вводите (или копируете) код, Sublime не распознает автоматически, какой язык вы используете. Например. здесь я скопировал сценарий SQL, который показал вам раньше.

Но вы можете превратить это в красиво окрашенный сценарий SQL, выбрав нужный язык вручную:

Или просто сохранив сценарий с нужным расширением файла.(В этом примере в формате .sql .)

И стрела:

Даже в самом грамотно написанном сценарии науки о данных иногда приходится повторяться. Но вводить одно и то же ключевое слово снова и снова или копировать все время скучно и медленно.

Одна из самых крутых функций Sublime Text 3 — это с несколькими курсорами . Удерживая клавишу CMD на Mac — или клавишу CTRL в Windows / Linux — вы можете разместить несколько курсоров на экране.И когда вы начинаете набирать текст, он волшебным образом появляется у каждого курсора.

Как это:

Мульти-курсор также можно использовать для изменения уже существующих частей вашего скрипта!
Допустим, в вашем сценарии SQL вы хотите изменить ключевое слово user_id на email_address . («А, типично, команда инфраструктуры данных снова изменила имена столбцов в нашей базе данных SQL! Теперь мне нужно пойти и исправить все мои скрипты…»)

Не проблема!

Во-первых, в Sublime Text есть обычная функция «найти и заменить все».
Просто нажмите: CMD + ALT + F (Mac) или CTRL + H (Windows / Linux)

А можно найти и заменить…

Но есть еще более наглядное (и гибкое) решение, позволяющее сделать то же самое.

1. Выберите одно вхождение текста / шаблона, который вы хотите изменить. Все остальные вхождения будут выделены автоматически:

2. Теперь нажмите CTRL + CMD + G на Mac — или ALT + F3 в Windows / Linux.И при этом все экземпляры ключевых слов будут не просто выделены, но также выбраны для редактирования. Таким образом, вы будете видеть курсор после каждого выбора.

3. На этом этапе все, что вы вводите, будет редактировать каждое выбранное ключевое слово:

Довольно круто, да?

Примечание. Найдите все горячие клавиши выбора и нескольких курсоров в этом репозитории Github и в исходном учебнике Sublime Text .

Еще одна прекрасная функция — автозаполнение.

Примечание. У вас есть это во многих других инструментах для анализа данных , например, в Jupyter Notebook или в Терминале.

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

Просто нажмите клавишу TAB , и она автоматически расширится до нее, так что вы сэкономите немного времени и символов. Это может быть особенно удобно для скриптов Python, когда вы работаете с большим количеством переменных.

Sublime Text 3 тоже настраивается на 100%. Вы можете установить желаемый размер символа, цветовую схему, скорость перетаскивания и т. Д. Вы можете включать и выключать автоматические отступы, интеллектуальные отступы, автозаполнение… в основном, вы можете настраивать все.

Он очень гибкий, но, с другой стороны, настройка выполняется с помощью редактора, подобного JSON. Итак, чтобы точно настроить параметры среды, вам нужно написать код. Например. вот как я установил размер шрифта по умолчанию в моем редакторе Sublime Text на 16 пикселей.

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

Хорошо, это были пять моих любимых ключевых функций Sublime Text, которые делают мои задачи кодирования намного проще и плавнее. (Опять же: если вы хотите увидеть больше, перейдите на Youtube, есть масса интересных руководств по этой теме.)

Один из главных вопросов, который я получаю от участников курса: , как они могут использовать Sublime Text 3 на удаленном сервере.

На первый взгляд это может показаться невозможным. Это настольное приложение, верно? Но не волнуйтесь, определенно возможно — спасибо randy3k (и многим другим), которые создали для этого отличное решение с открытым исходным кодом.

В исходном репозитории Github есть краткое описание того, как все настроить. Но я заметил, что для начинающих специалистов по данным не на 100% понятно, как это пройти. Итак, в оставшейся части этой статьи я дам вам более подробный, пошаговый процесс настройки, чтобы вы также могли использовать Sublime Text3 на своем удаленном сервере.

Примечание. Я предполагаю, что вы используете ту же самую установку сервера , которую я использую во всех учебных пособиях и видеокурсах Data36. Если вы этого не сделаете, сначала пройдите на этом удаленном сервере, чтобы получить учебник по науке о данных .

Мы будем использовать пакет RemoteSubl для подключения нашего редактора Sublime Text 3 к нашему удаленному серверу данных. Концепция проста:

1. Вы откроете обычное соединение ssh со своим удаленным сервером
2. Вы будете использовать это соединение — и определенный порт — для отправки сценариев туда и обратно между вашим удаленным сервером и локальным Sublime Text 3.
3. Вы будете редактировать свои скрипты в Sublime Text 3 на своем компьютере.
4. Когда вы сохраняете сценарий в Sublime, он отправляет обновленную версию обратно на ваш удаленный сервер.

Я знаю, звучит сложно. Итак, вот более наглядное объяснение концепции.

Это, кстати, называется туннелирование .
И к концу этого руководства, когда вы все настроите правильно, эти четыре шага все равно будут выполняться плавно и автоматически.

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

Я предполагаю, что у вас уже есть эти:

1. Удаленный сервер данных с Python, SQL и bash.
2. И Sublime Text 3 на вашем компьютере.

Если нет, сначала получите их.

Далее мы рассмотрим инструкции репозитория RemoteSubl на github.И, как и обещал, я раскрою несколько деталей глубже. Вот шаги:

1. Установка управления пакетами в Sublime Text 3. (На локальном компьютере).
2. Установка пакета RemoteSubl. (На локальном компьютере.)
3. Установка RemoteSubl на удаленный сервер.
4. Редактирование вашего первого скрипта с помощью Sublime Text3 на вашем удаленном сервере.

Существует множество расширений и дополнений для Sublime Text 3.Они не входят в исходную установку программы, но вы можете легко добавить их позже, используя функцию Package Control .

Если вы никогда раньше не использовали его, сначала необходимо установить Package Control .

Для этого перейдите в Главное меню >> Инструменты >> Палитра команд !

Появится панель поиска!

Начните набирать « пакет »…

И выберите Install Package Control !

Вы получите быстрое уведомление о том, что программа установлена.

Отлично! Теперь вы можете добавлять новые пакеты в Sublime.

Вернуться на:

Главное меню >> Инструменты >> Панель команд

А теперь начните набирать « установить ».

Выберите: Управление пакетами: Установить пакет !

Здесь будет перечислено множество доступных пакетов и расширений Sublime.

Тип: RemoteSubl . Затем нажмите и установите!

Вы увидите только крошечное сообщение об успешном выполнении в нижнем левом углу… и всего на несколько секунд.

Но если вы не получаете никаких сообщений об ошибках, это хорошо: вы установили RemoteSubl в свой Sublime Text 3.

Примечание. При желании можно даже дважды проверить, действительно ли ваш пакет RemoteSubl успешно установлен. Вернитесь к Главное меню >> Инструменты >> Палитра команд , затем введите «RemoteSubl»… Если вы видите это «Предпочтения: Настройки RemoteSubl», установка Был успешен! (Вам не нужно нажимать на нее.)

ШАГ №3: Установка RemoteSubl на удаленный сервер

Ладно, на вашем локальном компьютере все настроено. Теперь установите RemoteSubl на свой удаленный сервер.

Для этого войдите на свой сервер — в зависимости от вашей операционной системы:

• Используйте Terminal / iTerm2 и команду ssh (если у вас Mac)!
  или
• Используйте Putty (если у вас Windows)!

Примечание 1. Используйте обычного пользователя, а не пользователя root .Например. Я могу войти под своим пользователем dataguy - используя команду ssh [email protected] на моем Mac.

Примечание 2: Если вы не знаете, как войти на свой сервер данных, вы можете снова просмотреть эту статью .

После входа на сервер выполните следующие 3 команды одну за другой:

 sudo curl -o / usr / local / bin / rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate
sudo chmod + x / usr / локальный / bin / rmate
Судо мв / usr / локальный / бен / rmate / USR / локальный / бен / возвышенный 

(Примечание: первые две строки на самом деле представляют собой только одну строку кода! Только ваш браузер разбивает ее на 2 строки! См. Снимок экрана ниже.)

Примечание. Это несколько отличается от того, что вы увидите в инструкциях к репозиторию RemoteSubl github . Почему? Некоторые из моих учеников столкнулись с проблемами разрешения, поэтому я решил, что дам вам более «пуленепробиваемое» решение. 🙂 Вот почему все команды sudo в начале строк. Кроме того, в моей версии вы сможете вызывать Sublime Text из командной строки с помощью команды sublime , а не с помощью команды rsubl .Ключевое слово sublime легче запомнить, не так ли? 😉

Хорошо, все готово, пора опробовать ваш новый редактор сценариев удаленного сервера!

ШАГ №4: Редактирование вашего первого скрипта с помощью Sublime Text3 на удаленном сервере.

Okeydoke!
Вам необходимо выйти из сервера данных, а затем снова войти в систему, добавив некоторые специальные параметры.

Это будет отличаться для пользователей Mac / Ubuntu и для пользователей Windows.

 ssh [your_user_name] @ [your_servers_ip_address] 

 ssh  -R 52698: localhost: 52698  [your_user_name] @ [your_servers_ip_address] 

 ssh -R 52698: localhost: 52698 [email protected] 

 sublime test.csv 

 "typescript_tsdk": "<путь к вашей папке> / node_modules / typescript / lib" 

  cd ~ / "Библиотека / Поддержка приложений / Sublime Text 3 / Пакеты"
git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript
  

  cd "% APPDATA% \ Sublime Text 3 \ Packages"
git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript
  

 $ wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - 

 $ echo "deb https://download.sublimetext.com/ apt / stable /" | sudo tee /etc/apt/sources.list.d/sublime-text.list 

 $ sudo apt update 

 $ apt install sublime-text 

 $ sudo apt-get remove sublime-text && sudo apt-get autoremove 

  sudo snap install возвышенный текст  

 wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key добавить - 

 echo "deb https://download.sublimetext.com/ apt / stable /" | sudo tee /etc/apt/sources.list.d/sublime-text.list 

 sudo apt update && sudo apt install sublime-text