Sublime Text 3 для web-разработки 100 метров погружения


Содержание

Готовь Sublime к полету в космос

Полезные инструменты и настройки Sublime Text 3 для верстальщиков

Готовь Sublime к полету в космос

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

В этой презентации

Основные возможности

Сайдбар и дробление на секции

В боковой панели хранятся открытые файлы и папки.
Каждый файл открывается в новом табе, которые можно
распределить в несколько рядов или колонок.

Миникарта кода

Показывает весь код в панельке справа. Кстати, можно вставлять ASCII графику в комментарии,
чтобы видеть эти области на миникарте.

Темы оформления

Очень, очень, очень много тем.
Выбор за вами!

Множественные курсоры

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

Поиск

Целая куча функций поиска: обычный поиск по файлу, поиск с заменой (одного или всех значений), поиск по файлам и папкам, поиск с регулярными выражениями и многое другое.

Командные панели

Быстрый доступ ко всем функциям и файлам.
Не нужно держать в голове клавиатурное сокращение функции или адрес файла, просто откройте панель и начните вводить название.

Нечёткий поиск

Вы вводите лишь комбинацию символов –
нечеткий поиск выдаcт все возможные совпадения. Супер!
P.S. Смотрите, как полезен символ @ для CSS.

Сниппеты и клавиатурные сокращения

Cниппеты, плагины и шорткаты в разы ускоряют разработку. И всё это добро можно настроить под себя.
Вот так я верстаю менюшки:

Package Control

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

Плагины

Emmet

Необходимая вещь для верстальщика. Emmet дает возможность писать HTML и CSS сокращениями, используя нечеткий поиск на полную катушку, а также добавляет полезные шорткаты.

Перемещайте, копируйте, переименовывайте файлы и папки прямо из ST. На любимые функции, как обычно, можно установить шорткат. Кроме того, есть полезности вроде Data URI.

AdvancedNewFile

Быстрое создание нового файла.

Bracket​Highlighter

Удобная подсветка открывающих и закрывающих скобок.

ZenTabs

Этот плагин умеет подсвечивать текущую вкладку и ограничивать количество открытых вкладок заданным числом. При открытии новых вкладок закрываются самые старые.

SublimeLinter

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

Gutter Color

Ну вы сами все видите.
P.S. есть еще очень похожий Color Highlighter

Plain Tasks

Планировщик для ST. Удобно вести список задач в одной папке с проектом. Можно отмечать выполненные задания, при этом автоматически фиксируется время окончания.

Live Reload

В любом обзоре обязательно должны рассказать про live-режим – автообновление браузера без нажатия клавиш.
Это настраивается и для ST, однако я бы советовал не привязываться к редактору, а установить приложение отдельно

Emmet Livestyle

Любопытная вариация LiveReload, если вы пишите код на CSS: Livestyle позволяет править стили прямо в инспекторе браузера, изменения сразу записываются в CSS файл.

2 режима работы с FTP: 1) подключение к удаленному серверу и работа на нем; 2) настройка FTP-соединения для каждого проекта, позволяющая быстро и просто синхронизировать файлы.

CSScomb

«Причесывает» CSS, расставляя свойства в заданном порядке. Потребует небольшой настройки: установки Node.js и конфигурации плагина в зависимости от своих предпочтений.

GitGutter

Полезный инструмент для пользователей Git: вживую показывает изменения, произошедшие в файле с последнего коммита.

Comment-Snippets

Лаконичный набор сниппетов для красивых комментариев.

AutoFileName

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

Настройки, сокращения и сниппеты

Sublime Text – это гибкость и скорость:
для всех плагинов и функций есть настройки и клавиатурные сокращения. Часто пишете один и тот же код? Создайте сниппет и вызывайте код лишь несколькими символами. Работаете над несколькими проектами? Совсем не обязательно каждый раз открывать папку проекта и целый ворох необходимых файлов – воспользуйтесь системой проектов.Нужен дополнительный функционал?Откройте Package Control, скорее всего его уже кто-то написал :)

Настройки

В ST настройки есть как у самого редактора, так и у всех подключаемых плагинов. Найти их можно по пути
Preferences > Settings .
или
Preferences > Package Settings > .

Обратите внимание, что все настройки разбиты на категории User и Default.

Настройки

Все изменения мы вносим в Settings — User. Если вносить их в Default, они будут перезаписаны при ближайшем обновлении. В дефолтные настройки нужно заглядывать лишь для справки.

Настройки

Мои любимые настройки для ST. Полный список тут

Клавиатурные шорткаты

Шорткаты – это одна из мощнейших функций ST – практически любое действие можно повесить на комбинацию клавиш. Рассортированы они по папкам аналогично тому, как рассортированы настройки Preferences > Key Bindings.

Клавиатурные шорткаты

Чтобы ввести сокращение, в Key Bindings – User следует добавить новую строку, например:

command – это команда, которую ST выполняет при нажатии.
Список команд плагинов не всегда лежит в разделе Preferences.
Если возникают трудности, посмотрите репозиторий плагина на github, искомые команды прячутся в файлах с расширением .sublime-keymap или .sublime-commands.

Сниппеты

Небольшие куски кода, которые можно вставлять по определенному сочетанию клавиш. Так, в этом примере фраза nav++ по нажатию на Tab превратится в emmet-цепочку для разметки навигации.
Создать свой сниппет невероятно просто

Проекты

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

Дополнительные материалы

Статьи

Perfect Workflow in Sublime Text 2
Превосходный двухчасовой скринкаст, до сих пор не потерявший актуальность. Бесплатный после регистрации.

Sublime Text Unofficial Documentation
Тот неловкий момент, когда неофициальная документация лучше официальной.

Статьи

Русская документация Sublime Text
Удобные справки по горячим клавишам и настройкам редактора, а также лаконичное описание главных функций.

Комментарий к прошлой статье
Про синхронизацию ST между устройствами.

Плагины, которые стоит поглядеть

Sublime Alignment – выравнивание нескольких строчек по определенной позиции.

SublimeFileDiffs – сравнивает два файла или их части и показывает различия.

SublimeAllAutocomplete – автокомплит работает не только в рамках одного документа, но в рамках текущих открытых файлов.

Плагины, которые стоит поглядеть

Clipboard History – поможет вспомнить, что именно вы вставляли несколько итераций назад.

BufferScroll – запоминает позицию курсора при переключении окон.

На этом все!

Занудствовал для вас Андрей Алексеев.
Пожелания, предложения: vk / e-mail

Sublime text 3 плагины для разработки. Установка и настройка.

Для разработки существует множество редакторов и IDE, но на данный момент Sublime Text 3, один из самых популярных редакторов среди веб разработчиков. За что же его так любят? Первое это скорость работы, второе возможность установки плагинов и пакетов которые позволяют расширить родной функционал редактора.

В этой статье мы рассмотрим самые необходимые Sublime text 3 плагины которые помогут вам в работе. Первым делом нам необходимо установить Package Control (пакетный менеджер). Я описывал подробно этот процесс, а так же как установить плагины в прошлой статье о sublime.

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

Sublime text 3 плагин для форматирования кода HTML-CSS-JS Prettify


Часто во время работы мы не следим за правильным форматированием кода. Этот пакет, позволяет вам форматировать HTML, CSS, JavaScript код и JSON файлы. Устанавливается он как и все плагины. Вызовите Command Palette наберите prettify, выберите HTML-CSS-JS Prettify. Нет необходимости проводить настройку, сразу можно использовать.

  • Вариант 1. Выделяем код и нажимаем правой кнопкой мыши на нем, так же можно просто кликнуть по вкладке редактора и выбираем HTML/CSS/JS Prettify → Prettify Code
  • Вариант 2. Откройте файл с кодом, запустите консоль Sublime через меню View → Show Console и наберите view.run_command(«htmlprettify») .
  • Вариант 3. Так же для быстрого форматирования можете использовать горячие клавиши Ctr + Shift + H

Emmet быстрое написание кода.

Плагин Emmet ускоряет написание кода с помощью горячих клавиш и сниппетов. Помимо Sublime Text, Emmet может работать и с другими редакторами, такими как — Notepad++, Coda, Eclipse, TextMate и д.р. Emmet устанавливается так же как и другие плагины.

Как работает плагин Emmet?

Приведу пару примеров. Например при написании в редакторе ul без <> и нажатия Tab будет автоматически развернут полный список. Если мы хотим добавить еще элементы li пишем так ul>li

Sublime Text 3 — удобный редактор кода для веб-разработчиков

Автор: Сергей Никонов

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

Почему Sublime Text 3

В своей работе я использовал много редакторов кода, как простых, начиная от консольного редактора nano в Linux, заканчивая тяжеловесной, но очень хорошей IDE — IntelliJ IDEA от компании JetBrains, но именно Sublime Text заставил обратить на себя внимание и теперь в разработке веб-проектов в основном использую его и вот почему

1. Скорость работы

Sublime Text 3 действительно работает очень быстро даже на старом железе

Цукерберг рекомендует:  Консольное приложение на Java за час

2. Кроссплатформенность

Редактор Sublime Text работает в операционных системах Linix, Windows, Mac OS

3. Большое количество плагинов для различных задач

Плагины разрабатываются для Sublime Text каждый день, начиная от красивейших тем, заканчивая плагинами для Bootstrup

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

Для того, чтобы установить Sublime Text 3, скачайте exe файл с официального сайта редактора.

Доступны версии для Linux, MacOS и Windows 32 и 64 битной версии. После скачивания, запустите exe файл Sublime Text 3 и следуйте инструкциям установки.

Настройка Sublime Text 3

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

Установка плагина Package Control

Плагин Package Сontrol позволяет устанавливать дополнения к Sublime Text 3 легким способом, а также включать и выключать дополнения и обновлять их.

Для того, чтобы установить Package Control, пройдите по ссылке: https://packagecontrol.io/installation и скопируйте python код с сайта и в Sublime Text 3 нажмите сочетании клавиш ctrl+` или View > Show Console, затем вставьте скопированный код и нажмите Enter. Немного подождите и вам выдет окно-предупреждение, что нужно перезапустить редактор Sublime Text 3 для применения изменений.

Нажмите OK и закройте редактор, а затем опять откройте. Если вы все сделали правильно, тогда Package Control вы успешно установили.

Давайте попробуем установить красивую тему к Sublime Text через Package Control.

Установка новой темы из Package Control

Установка дополнений к редактору Sublime Text 3 через Package Control очень простая. Для того, чтобы открыть Package Control и установить новое дополнение для Sublime Text 3, нажмите Preferences — Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите название дополнения, в нашем случае это будет красивая тема под названием: spacegray.

После того, как вы установили новую тему, она станет доступна через меню: Preferences — Color Scheme — Theme Spacegray.

После этого у вас должна измениться цветовая схема. Но для того, чтобы применить полностью тему Spacegray, вам нужно зайти: Preferences — Settings User и вставить строки:

<
«theme»: «Spacegray.sublime-theme»,
«color_scheme»: «Packages/Theme — Spacegray/base16-ocean.dark.tmTheme»
>

После этого перезапустите редактор Sublime Text 3, если тема применится некорректно.

Установка плагина Emmet

Плагин Emmet очень полезное дополнение, которое позволяет значительно ускорить процесс разработки сайта, в частности процесс верстки страниц.

Устанавливается легким способом, через Package Contorl: Preferences — Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите Emmet, далее нажмите Enter.

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

Например, с помощью Emmet, мы создать шаблон div элемента с классом нажатием всего двух клавиш: точка(.) и tab:

Аналогично, для того чтобы создать шаблон элемента div, но не с классом, а id, введите # и tab и вы увидите:

В данной статье мы не будем рассматривать все возможности плагина Emmet, так как для него мы посвятим отдельную статью, а пока оставим вам ссылку на официальную документацию к плагину Emmet — http://docs.emmet.io/

Полезные плагины Sublime Text 3

В Sublime Text много полезных плагинов для работы с кодом, для работы с GIT, с терминалом, плагин для синхронизации настроек между редакторами и прочие.

Sublimall

Плагин Sublimall позволяет синхронизировать настройки одного редактора Sublime Text, между редакторами Sublime Text установленных на разных компьютерах.

DocBlockr

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

ColorPicker

Плагин ColorPicker выполняет функцию color picker(выбор цвета). Это очень удобно, когда вы хотите подобрать цвет или посмотреть цвет в css свойствах элемента

Sublime SFTP

Sublime SFTP позволят подключаться к SSH серверу прямо из Sublime Text. Если вы ранее использовали для подключения к сайту FTP клиент, например FileZilla, теперь вы можете подключиться напрямую.

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

Выводы о Sublime Text 3

Редактор кода Sublime Text 3 имеет большие возможности и постоянно развивается. К нему пишут большое количество дополнений и цветовых тем. За счет своей кросплатформленности, вы можете смело использовать его в популярхных операционных системах.

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

В слудующих статьях мы сделаем детальный обзор новых полезных плагинов и цветовых схем к Sublime Text. Вступайте в нашу группу VK и не пропустите новые статьи.

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

Sublime Text 3 для web-разработки: 100 метров погружения

Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words.

Triggered with Ctrl+P+P , it is possible to:

  • Type part of a file name to open it.
  • Type @ to jump to symbols, # to search within the file, and : to go to a line number.

These shortcuts can be combined, so tp@rf may take you to a function read_file within a file text_parser.py . Similarly, tp:100 would take you to line 100 of the same file.

Goto Definition

Using information from syntax definitions, Sublime Text automatically generates a project-w >Goto Definition , which is exposed in three different ways:

  • A popup is displayed when hovering over a symbol
  • Pressing F12 when the caret is on a symbol
  • The Goto Symbol in Project functionality

Symbol indexing can be customized on a per-syntax basis via configuration files, allowing users to tailor the feature to their needs.

Multiple Selections

Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.

Try pressing Ctrl+Shift+L ++L to split the selection into lines and Ctrl+D +D to select the next occurrence of the selected word. To make multiple selections with the mouse, take a look at the Column Selection documentation.

Command Palette

The Command Palette holds infrequently used functionality, like sorting, changing the syntax and changing the indentation settings. With just a few keystrokes, you can search for what you want, without ever having to navigate through the menus or remember obscure key bindings.

Powerful API and Package Ecosystem

Sublime Text has a powerful, Python API that allows plugins to augment built-in functionality.

Package Control can be installed via the command palette, providing simple access to thousands of packages built by the community.

Customize Anything

Key bindings, menus, snippets, macros, completions and more — just about everything in Sublime Text is customizable with simple JSON files. This system gives you flexibility as settings can be specified on a per-file type and per-project basis.

Split Editing

Get the most out of your wide screen monitor with split editing support. Edit files side by side, or edit two locations in the one file. You can edit with as many rows and columns as you wish. Take advantage of multiple monitors by editing with multiple windows, and using multiple splits in each window.

Take a look at the View Layout menu for split editing options. To open multiple views into the one file, use the File New View into File menu item.

Instant Project Switch

Projects in Sublime Text capture the full contents of the workspace, including modified and unsaved files. You can switch between projects in a manner similar to Goto Anything , and the switch is instant, with no save prompts — all your modifications will be restored next time the project is opened.

Performance

Sublime Text is built from custom components, providing for unmatched responsiveness. From a powerful, custom cross-platform UI toolkit, to an unmatched syntax highlighting engine, Sublime Text sets the bar for performance.

Cross Platform

Sublime Text is available for Mac, Windows and Linux. One license is all you need to use Sublime Text on every computer you own, no matter what operating system it uses.

Sublime Text uses a custom UI toolkit, optimized for speed and beauty, while taking advantage of native functionality on each platform.

Sublime HQ Family

Sublime Merge

Have you seen our sister product, Sublime Merge? It’s a Git Client, done the Sublime Text way.

iwsys / setup.txt

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 — Инкремент и Декремент


  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

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.

Настраиваем Sublime Text 3

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

Здесь можно настроить все — от внешнего вида до компонентов программы (плагинов). Но и уровень настройки у Sublime Text соответствующий — как редактор для программистов, он настраивается через исходный код, что под силу не каждому. В этой статье мы рассмотрим как выполняется настройка Sublime Text 3.

Что такое Sublime Text

Для Sublime Text с первых же версий возможности были гораздо выше, чем у других редакторов. Шутка ли — полностью настраиваемый интерфейс, возможность настроить поведение программы, а не просто вводить текст? Что уж говорить о плагинах — код, написанный на Python, позволяет пользователю управлять редактором так, как укротитель змей, играя на магической дудочке, заставляет гигантского удава трепетать перед ним. Однако, как бы нам ни было жаль, именно это и отпугивает новичков — будучи не в состоянии настроить редактор, они перестают им пользоваться.

Настройка Sublime Text 3

Сначала поговорим про внешний вид, а затем перейдем к настройке горячих клавиш и плагинов.

1. Внешний вид Sublime Text

Итак, пора запустить Sublime Text (статья про установку — тут). Многим дизайн программы нравится, другим же — нет. И сейчас перед вами встает уникальная возможность поменять интерфейс до неузнаваемости!

Самый простой с виду способ — выбрать тему через настройки. Для этого идем в меню «Preferences» -> «Color Scheme» и выбираем нужную вам тему. Но это способ лишь поменяет расцветку редактора, и ничего более.

Цукерберг рекомендует:  Факультет тестирования - отзывы студентов

Другой, более сложный, но верный вариант — разобраться с файлом настроек. Чтобы открыть его, перейдите в меню «Preferences» -> «Settings». И вот, перед вами не что иное, как громада текста. Но не все так сложно, как кажется! Слева — настройки по умолчанию, их трогать не надо. Их можно взять за пример. А вот справа нужно разместить свои настройки — взять, скопировать нужную строку и поменять ее значение. Основные настройки:

  1. «color_scheme» — цветовая тема. Можно выбрать из существующих, а можно скачать в папку Packages/Color Scheme — Default/.
  2. «font_face» — шрифт текста. Важно, чтобы он был в системе. Чтобы посмотреть список доступных шрифтов, откройте любой текстовый редактор, к примеру, Lible Office Writer.
  3. «font_size» — размер шрифта, устанавливающийся дробным или целочисленным значением.
  4. «font_options» — дополнительные опции шрифта типа «no_bold», «no_italic».
  5. «word_separators» — разделители слов.
  6. «line_numbers» — настройка нумерации строк.
  7. «gutter» — отображать ли «канавку» (в ней располагаются номера строк и закладки).
  8. «margin» — длина отступа от «канавки».
  9. «fold_buttons» — если навести курсор на «канавку», то будут видны треугольные стрелки, позволяющие скрыть или показать фрагмент кода между фигурными скобками. Их тут можно отключить или включить.
  10. «fade_fold_buttons» — если поставить значение false, то треугольные кнопки не будут скрываться.

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

Вы можете поэкспериментировать здесь сами. А мы идем дальше.

2. Настройка сочетаний клавиш

Да-да, вы не ослышались! Любой может настроить сочетания по-своему, присвоив им другие значения. Чтобы открыть файл, перейдите в «Preferences» -> «Key Bindings».

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

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

Ну вот и все, Sublime Text стал таким, каким он вам нужен и вы знаете как настроить Sublime Text 3. А сейчас пора двигаться дальше — к установке плагинов.

3. Установка Package Control

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

Package Control — предназначен для более быстрой и удобной установки плагинов. Он позволяет устанавливать их через визуализированный интерфейс, а не через код.

Для начала установим Package Control с официального сайта. Это не значит, что мы его будем скачивать!

  1. Скопируем текст из соответствующего текстового поля (в зависимости от версии Sublime Text).
  2. С помощью сочетания клавиш «Ctrl +

« вызываем встроенную в редактор консоль (да-да, есть и такое!).

  • Вставляем скопированный код в текстовое поле и ждем успешной установки.
  • Перезапускаем редактор.
  • Package Control установлен! Теперь пора разобраться с тем, как им пользоваться.

    4. Работа с плагинами в Package Control

    Чтобы запустить Package Control, необходимо набрать сочетание клавиш «Ctrl + Shift + P» и из списка выбрать элемент Package Control: Install Package.

    И перед нами долгожданная установка плагинов! Теперь есть возможность быстрого их поиска и выбора, а если выбрать другие команды для Package Control, то можно и удалять, и изменять элементы редактора. Теперь надо потренироваться на установке. Уставноим Material Theme и выполним настройки темы sublime text 3.

    1. Запускаем установщик плагинов.
    2. Набираем в поле поиска Material Theme.
    3. Нажимаем и ждем, внизу должна появиться надпись «Installing package Material Theme». В процессе установки будет запрошено добавление еще одного плагина, разрешаем.

    Чтобы применить тему, необходимо перейти в меню «Preferences» -> «Color Scheme» -> «Material Theme» -> «schemes», а далее — тема, которая вам больше всего понравится.

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

    «theme»: «Material-Theme.sublime-theme»,
    «color_scheme»: «Packages/Material Theme/schemes/Material-Theme.tmTheme»,
    «overlay_scroll_bars»: «enabled»,
    «line_padding_top»: 3,
    «line_padding_bottom»: 3,
    // On retina Mac
    «font_options»: [ «gray_antialias» ],
    «always_show_minimap_viewport»: true,
    «bold_folder_labels»: true,
    // Highlight active indent
    «indent_guide_options»: [ «draw_normal», «draw_active» ]

    Вид редактора после применения к нему темы:

    Неплохо, да? Настройка Sublime Text 3 почти завершена. А сейчас пора установить что-нибудь более существенное. Давайте ознакомимся с самыми популярными плагинами для Sublime Text.

    Топ 5 плагинов для Sublime Text 3

    1. Emmet

    Emmet — плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, «html + tab» создает каркас документа, а «div.wrapper + tab» превратится в полноценный код:

    2. JavaScript & NodeJS Snippets

    Этот плагин представляет собой коллекцию сокращений снипсетов для JavaScript. Длина набираемого текста с помощью подсказок правда уменьшается! К примеру, вместо набора «document.querySelector(‘selector’);» можно просто набрать «qs + Tab».

    3. Advanced New File

    Зачем искать место для нового файла в неудобном дереве каталога? Данный плагин позволит быстро и эффекстивно ввести нужные данные, и файл будет создан буквально за пару нажатий клавиш!

    4. Git

    Название этого плагина говорит само за себя: вы сможете выполнять все необходимые действия в рамках Git’а, не выходя из редактора!

    5. GitGutter

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

    Выводы

    Как писать код — дело каждого. Но есть удобные вещи, которые доступны всем, и нет смысла от них отказываться! Такие редакторы, как Sublime Text, особенно важны веб-разработчикам. А пока вы можете настроить редактор под себя сами — пусть это станет ВАШ собственный Sublime Text, в который вы вложили частичку собственной души. Удачи!

    Какие плагины использовать веб разработчику в sublime text 3?

    Человек спросил про Sublime, ему в ответ IDE. А если через FTP только доступ есть и надо файл стилей поправить, тоже запускать PHPStorm?

    По теме лично я юзаю: Emmet, Git, AutoFileName, ColorPicker, Sublime SFTP

    «А если через FTP только доступ есть и надо файл стилей поправить»
    а контроль версий? А тестирование? Вдруг у вас верстка съедет.

    Extremum: Я с такими клиентами не связываюсь. Мир у меня не идеален, и хотябы настроить реп в битбакете и повесить хук на пулы/пуши уж можно. И FTP/не FTP зависит не от среды, где вы пишите. При чем даже если затрагивать такую глупую тему, то в phpStorm работа по FTP сверх удобная.

    У меня каждый день открывается Sublime посмотреть содержимое, поправить конфиг файл левый какой-нибудь чтоб другу помочь, но что-бы в нём открывать файлы проекта и даже работать — да ни за что.

    Помимо приведенных выше, я также использую плагины:

    для Java script разработки и Node js

    Александр Таратин: написано же — «если всякую хрень в него не пихать»

    Сабл, для «много файлов», а не для «большие файлы», та же отладка в нем — можно, но это не его.

    Разным задачам — свои инструменты, правильный их выбор — свойство профессионалов.

    Сабл один из самых шустрых, чтобы не тормозил на больших файлах:

    — отключить миникарту
    — отключить мультииндекс (в плагинах пошариться)
    — ставить простые цветовые схемы
    — использовать простые парсеры цветовых схем
    — использовать минимум плагинов
    — выкинуть нахрен плагины анализатора цветов, автосвертки, всевозможных линтов и рисовалок на гаттере

    Если эту хрень впихнуть в любой другой редактор, он не то, что тормозить будет — умрет нафиг

    и не забываем — сабл работает на Питоне, все Штормы — на Java, а VSCode, Atom, Brackets — NodeJS + Electron или подобная среда (читай — Хромиум), поэтому Сабл всегда будет выигрывать в скорости реакции интерфейса и отрисовки у всех, выигрывать у Штормов в обработке и проигрывать Нодовским в скорости реакции плагинов.

    И еще не забываем — очень многое зависит от того, какой кривизны ручки писали плагин: если кривизна ручек выше кривизны извилин, тут не спасет никакая крутая основа.

    Вот несколько из тех, которыми пользуюсь я сам:
    DocBlockr — документирование кода, очень удобная штука
    ESLint — без комментариев
    GitGutter — подсветка изменений после последнего коммита
    NodeRequirer — require-илка модулей для ноды

    Если нужен дебаг для браузера — у вас есть браузер, если нужен дебаг для ноды, то есть node-inspector. Никакие vscode и прочие «IDE» никогда не сравнятся по функциональности с node-inspector.

    Ставлю по необходимости, ищу доступное на packagecontrol.io — настроен как поисковик в браузере.

    Раз в пару месяцев или чаще — сношу все нахрен, и далее по рекурсии.

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

    Готовим SublimeText 3 к front-end-разработке

    По мере того как ваш проект будет расти и развиваться, код будет становиться все более громоздким. В обычном Блокноте программировать очень «опасно», так как легко можно запутаться. В этой статье мы расскажем вкратце, что такое SublimeText 3 и подготовим его для front-end-разработки.

    Что за сублимация?

    SublimeText 3 — мощный текстовый редактор со встроенной подсветкой синтаксиса, ориентирован на достаточно большое количество языков программирования (в том числе HTML, CSS и JS). Лицензия у этого продукта условно-бесплатная, то есть пользоваться им можно, но есть небольшой недостаток: 1 раз (после кажого запуска программы, на 5-ом сохранении) SublimeText 3 просит зарегистрировать его. Сам редактор написан на популярном языке Python. Главным конкурентом по отношению к SublimeText является Notepad++. В SublimeText, как и в Notepad++, можно устанавливать плагины, чем мы и будем сегодня заниматься.

    Настройка SublimeText 3

    Прежде чем устанавливать полезные плагины для редактора, необходимо установить так называемый Package Control. Для этого пройдем по следующему пути: View -> Show console. и введем в консоли следующий запрос:


    import urllib.request,os,hashlib; h = ‘2deb499853c4371624f5a07e27c334aa’ + ‘bf8c4e67d14fb0525ba4f89698a6d7e1’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error val ).write(by)

    После этого подождем несколько секунд. и Package Control готов к использованию!

    Теперь устанавливим необходимые плагины. Чтобы сделать это, необходимо открыть окно Command Pallete. по пути: Tools -> Command Pallete (или через сочетание клавиш: Ctrl+Shift+P) и в окно ввода ввести команду install package. После этого — нажать Enter, а затем — наименование нужного плагина.

    Полезные плагины для front-end-разработки

    1. Emmet
    Наверняка вы уже наслышаны об этом плагине, который может сократить время разработки в разы. С помощью него вы, в буквальном смысле этого слова, сможете создать HTML-сайт всего за 20-30 символов! Как работает данный плагин я здесь объяснять не буду, т.к. мануалов по этому вопросу в сети довольно много — достаточно погуглить.

    2. BracketHighlighter
    Как же сложно кодить, когда в коде чрезмерно много скобок (неважно каких: круглых, фигурных, квадратных, угловых) . Теперь этого можно не боятсья! BracketHighlighter сможет показать места открытия и закрытия скобок, а в HTML он будет показывать места открытия и закрытия тэга. Полезный плагин, двумя словами.

    3. AutoFileName
    С помощью этого плагина вы сможете прописывать ссылки на внешние источники вдвое быстрее.

    4. ColorPicker
    Не знаете, какой подобрать цвет для текста? Или для фона блока? Не беда! ColorPicker поможет в этом!

    5. CSSComb
    Этот плагин приведет ваш CSS-код к более приятному для восприятия стилю кода.

    Резюме

    Конечно же, этот список можно продолжать бесконечно, однако, на мой взгляд, описанные плагины прекрасно подойдут для качественной front-end-разработки с помощью SublimeText 3. Особенно, если вы уже начали использовать секрет быстрого написания CSS-кода.

    Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

    Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

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

    Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

    Часть 1. Установка и настройка Sublime Text 3

    Скачиваем и устанавливаем Sublime Text 3

    Идем на сайт Sublime Text в раздел Download, и скачиваем последнюю версию ST3, не забудьте соблюсти разрядность 64 бит, или обычную (x86) для вашей версии операционной системы. Скачали, устанавливаем. После установки запускаем — проверяем что он работает.

    Установим горячие клавиши для реиндентации

    Открываем Preferences → Key Bindings — Default
    И вверху файла добавляем строку:

    Здесь указано что горячие клавиши будут alt+shift+f, и по нажатию будет происходить команда реиндент.

    Возможные проблемы с настройками в Sublime Text

    Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences → Key Bindings — Default можно редактировать.

    Есть аналогичная проблема с командой Preferences → Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.

    Устанавливаем Package Control

    Идем на сайт Package Control для ST3, и устанавливаем его. Package Control (PC) необходим для того чтобы расширять функциональность нашего редактора различными плагинами.

    На сайте PC копируем код для ST3, в ST3 запускаем консоль (Ctrl +

    ) и вставляем код с сайта, жмем Enter и ждем успешной установки. После обязательно перезапускам ST3.

    Проверим работу PC. Жмем Ctrl+Shift+P и набираем Package Control — Install Package. Уже набрав первые буквы — нужная строка будет автоматически подсвечена.

    Sublime Text 3 — Package Control — установка плагинов

    Часть 2. Установка плагинов и расширений для Sublime Text 3

    Установка темы Material Design

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

    Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

    Sublime Text 3 — Package Control — установка темы Material Design

    После этого иду в меню Preferences, и выбираю установленную тему.

    Sublime Text 3 — Package Control — установка темы Material Design

    Также после этого, рекомендуется зайти в настройки ST3, и дописать следующие конфиги:

    Это позволит отображать тему так как это было задумано ее создателями.
    В итоге у меня получился вот такой внешний вид ST3.

    Sublime Text 3 — тема Material Design

    Установка плагинов

    Я установил следующие основные плагины:

    • Emmet (ускорение написания html и css)
    • Hayaku (ускорение написания css)
    • LESS (syntax highlighting — подсветка кода less)
    • Prefixr (префиксы для CSS)
    • Placeholders (Lorem Ipsum наполнители для html файлов)
    • SFTP — плагин для работы с FTP
    • SideBarEnhancement расширяет возможность сайт бара
    • SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
    • AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
    • BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
    • jQuery набор сниппетов для jquery
    • AutoFileName автозаполнение путей к подключаемым файлам
    • CSSсomb делает код красивым
    • Gist сохранение отдельных участков кода на github прямо во время редактирования

    Компиляция LESS кода. Плагин Less2CSS и его настройка

    Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt, Guard, и Less.app. Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

    1. Устанавливаем Node.js
    2. Устанавливаем NPM (устанавливается вместе с Node.js)
    3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
    4. Установим плагин Less2Css и SublimeOnSaveBuild

    Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

    Откроем любой .less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

    Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

    Опять пробуем сохранить .less файл. Произошел билд less файла, и рядом с style.less файлом у меня появился готовый минифицированный style.css

    Компиляция SASS в Sublime Text 3

    SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

    • Устанавливаем Ruby
    • Запускаем консоль, и ставим Ruby Gem gem install sass
    • Устанавливаем плагин Sass для Sublime Text
    • Устанавливаем плагин Sass Build для Sublime Text
    • Устанавливаем плагин SublimeOnSave для Sublime Text
      (мы же говорили о этом плагине в инструкции выше)

    Теперь добавим настройки в Sublime Text Settings – Default:

    Также не забудьте при открытом .sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении .sass файла будет компилироваться .css.

    Устанавливаем и настраиваем html препроцессор Jade

    Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

    • Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
    • Заходим в консоль и устанавливаем jade командой npm install jade —global
    • В Sublime Text устанавливаем плагин Jade Build
    • В Sublime Text открываем .jade файл и выбираем Jade build system
    • Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так «filename_filter»: «.(sass|scss|jade)$»,
    • Устанавливаем в Sublime плагин Jade

    После этих манипуляций происходит компилирование jade файлов.

    Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

    Sublime Text 3 для web-разработки: 100 метров погружения

    Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words.

    Triggered with Ctrl+P+P , it is possible to:

    • Type part of a file name to open it.
    • Type @ to jump to symbols, # to search within the file, and : to go to a line number.

    These shortcuts can be combined, so tp@rf may take you to a function read_file within a file text_parser.py . Similarly, tp:100 would take you to line 100 of the same file.

    Goto Definition

    Using information from syntax definitions, Sublime Text automatically generates a project-w >Goto Definition , which is exposed in three different ways:

    • A popup is displayed when hovering over a symbol
    • Pressing F12 when the caret is on a symbol
    • The Goto Symbol in Project functionality

    Symbol indexing can be customized on a per-syntax basis via configuration files, allowing users to tailor the feature to their needs.

    Multiple Selections

    Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.

    Try pressing Ctrl+Shift+L ++L to split the selection into lines and Ctrl+D +D to select the next occurrence of the selected word. To make multiple selections with the mouse, take a look at the Column Selection documentation.

    Command Palette

    The Command Palette holds infrequently used functionality, like sorting, changing the syntax and changing the indentation settings. With just a few keystrokes, you can search for what you want, without ever having to navigate through the menus or remember obscure key bindings.

    Powerful API and Package Ecosystem

    Sublime Text has a powerful, Python API that allows plugins to augment built-in functionality.

    Package Control can be installed via the command palette, providing simple access to thousands of packages built by the community.

    Customize Anything

    Key bindings, menus, snippets, macros, completions and more — just about everything in Sublime Text is customizable with simple JSON files. This system gives you flexibility as settings can be specified on a per-file type and per-project basis.

    Split Editing

    Get the most out of your wide screen monitor with split editing support. Edit files side by side, or edit two locations in the one file. You can edit with as many rows and columns as you wish. Take advantage of multiple monitors by editing with multiple windows, and using multiple splits in each window.

    Take a look at the View Layout menu for split editing options. To open multiple views into the one file, use the File New View into File menu item.

    Instant Project Switch

    Projects in Sublime Text capture the full contents of the workspace, including modified and unsaved files. You can switch between projects in a manner similar to Goto Anything , and the switch is instant, with no save prompts — all your modifications will be restored next time the project is opened.

    Performance

    Sublime Text is built from custom components, providing for unmatched responsiveness. From a powerful, custom cross-platform UI toolkit, to an unmatched syntax highlighting engine, Sublime Text sets the bar for performance.

    Cross Platform

    Sublime Text is available for Mac, Windows and Linux. One license is all you need to use Sublime Text on every computer you own, no matter what operating system it uses.

    Sublime Text uses a custom UI toolkit, optimized for speed and beauty, while taking advantage of native functionality on each platform.

    Sublime HQ Family

    Sublime Merge

    Have you seen our sister product, Sublime Merge? It’s a Git Client, done the Sublime Text way.

    Цукерберг рекомендует:  Книги - Литература по C#
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих