Editorconfig sublime text 3 настройка
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.
What's an EditorConfig file look like?
Разделение рабочего окна
Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.
Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.
Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.
Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.
Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.
Боковая панель
Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.
Великий и могучий Emmet
Итак, что же умеет Emmet?
Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать "block" и нажать клавишу Tab. Мы получим:
Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:
Жмем клавишу Tab и получаем:
Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:
Теперь для того чтобы вызвать запись:
нам достаточно написать bl и нажать клавишу Tab
[name] - Любой символ из символов содержащийся в “name”
Пример: [[abc].js]
a.js // Совпадение
b.js // Совпадение
abc.js // Нет совпадения
Где хранятся эти файлы?
Когда плагину нужно будет вычислить конфигурацию для файла, он будет подниматься по файловому дереву, от директории с файлом до корня, и загружать настройки из каждого .editorconfig файла на пути.
Приоритет настроек в конфигах, более близких к файлу, выше.
Для файла, с таким путем: /Users/username/code/project/main.js , плагин будет искать файл .editorconfig следющих местах:
Поиск можно остановить, задав root=true в одном из конфигов на пути.
Такая структура позволяет, например, создать .editorconfig в пользовательской папке и таким образом получить настройки по умолчанию для все проектов, и, при необходимости, переписать эти настройки на несколько уровней выше.
Расширение EditorConfig
Если или программа, использующая EditorConfig, встречает незнакомую настройку, она должна ее проигнорировать. Это позволяет сделать формат расширяемым и не ограничиваться стандартными настройками.
Здесь есть два направления для развития:
Настройки для отдельных редакторов/IDE
Некоторые редакторы/IDE имеют свои особенности, например в jEdit набор кодировок больше, поэтому существует настройка jedit_charset, которая работает только для jedit.
Настройки для отдельных языков/расширений
Сторонние программы и плагины могут расширять EditorConfig и добавлять настройки, которые будут работать только для определенных языков или расширений файлов.
Например npm модуль CodePainter, который использует EditorConfig в качестве конфигурационного файла, позволяет выбрать кавычки (одинарные или двойные), которые будут использована для строк (qoute_type), или расставить пробелы внутри скобок (spaces_in_brackets). Но все это будет работать только для JavaScript.
Так же у разработчиков есть в планах целый набор возможных настроек, которые возможно будут использованы в будущем, например:
curly_bracket_next_line
Задает перенос фигурной скобки на следующую строчку, для языков где она есть
java_class_path
Может быть использовано другими плагинами
language
Позволяет задать язык по расширению файла. Это может помочь, когда шаблонизаторы, например Jinja2 , используют файлы с расширением .html
No Plugin Necessary
These editors come bundled with native support for EditorConfig. Everything should just work.
Для пользователей Windows
Чтобы создать файл .editorconfig в Windows Explorer, вам нужно создать файл с именем .editorconfig. и Windows Explorer переименует его в .editorconfig .
ColorHighliter
Обрати внимание на этот код — это код цвета, но какого именно непонятно.
Как вычисляются настройки внутри файла?
Когда парсер читает файл .editorconfig , он дает больший приоритет настройкам, которые находятся ниже.
Авторы создали небольшое демо [Которое на данный момент, как заметил KindDragon, немного глючит при вычислении путей], где можно поиграться с форматом и посмотреть результат
BracketHighliter
Как работает поиск файлов по маске
Example file
Below is an example .editorconfig file setting end-of-line and indentation styles for Python and JavaScript files.
Check the Wiki for some real-world examples of projects using EditorConfig files.
Editor
To use EditorConfig with one of these editors, you will need to install a plugin.
Установка и удаление плагинов и тем
Для установки выполняем следующие шаги:
- Открываем Package Control: Preferences > Package Control или Shift + Ctrl + P .
- В появившемся поле вводим install чтобы найти пункт Package Control: Install Package . Выбираем его и нажимаем Enter.
- В поле ввода появившейся панели набираем название нужного плагина, выбираем его в списке и снова Enter.
Чтобы удалить какой-либо из ранее установленных плагинов выполняем те же три действия, только во втором пункте вводим не install, а remove , так как нам нужен Package Control: Remove Package .
Темы устанавливаются так же, как и плагины. При этом добавится 4-й шаг: нужно зайти в Preferences > Settings и далее в Preferences.sublime-settings – User добавить тему. Если конкретнее, то добавить примерно такой код:
Что можно настроить?
Editor config стремится быть независимым от языков и работать во всех IDE. К сожалению это не всегда возможно, поэтому некоторые из плагинов поддерживают не все настройки. Подробнее можно узнать на странице каждого плагина в гитхабе.
Все настройки нечувствительны к регистру.
indent_style
Значения: tab, space
Позволяет задать жесткую или мягкую табуляцию для отступов.
indent_size
Значения: Число
Позволяет задать ширину отступа использовании мягкой табуляции.
tab_width
Значения: Число
Позволяет задать ширину отступа использовании жесткой табуляции. Если не задано, возьмет значение из indent_size.
end_of_line
Значения: lf, cr, crlf
Позволяет выбрать, что использовать на концах строк.
charset
trim_trailing_whitespace
Значения: true, false
Позволяет убрать пробелы из концов строк.
insert_final_newline
Значения: true, false
Позволяет убедиться, что в конце файла всегда будет новая строка.
Значения: true, false
Специальная настройка, которая должна быть на самом верху конфига. Если установлена в true, парсер не будет искать другие конфиги родительских папках (Подробности ниже).
Специальное значение Ignore
Некоторые файлы, например сторонние библиотеки или минифицированные файлы, лучше не трогать. В таких случаях для любой настройки можно задать значение ignore . Например:
Форматирование существующего кода
Плагины EditorConfig созданы таким образом, что они меняют настройки IDE в зависимости от окрытого файла. Иногда приходится использовать недокументрированне или необычные возможности IDE. Из-за этого форматирование применяется только при сохранении файлов, и если вы хотите использовать EditorConfig с уже существующим кодом, придется использовать один из инструментов ниже.
* - Любое количество символов кроме разделителя пути (/)
Пример: [*.js]
hello.js // Совпадение
hellojs // Нет совпадения
index.html // Нет совпадения
lib/source.js // Нет совпадения
Download a Plugin
CodePainter [ github, npm ]
Использует .editorconfig , но работает только с JavaScript кодом.
Имеет специальные настройки для JS кода.
File Format Details
Filepath glob patterns and currently-supported EditorConfig properties are explained below.
Wildcard Patterns
Special characters recognized in section names for wildcard matching:
* | Matches any string of characters, except path separators ( / ) |
** | Matches any string of characters |
? | Matches any single character |
[name] | Matches any single character in name |
[!name] | Matches any single character not in name |
Matches any of the strings given (separated by commas) (Available since EditorConfig Core 0.11.0) | |
Matches any integer numbers between num1 and num2, where num1 and num2 can be either positive or negative |
Special characters can be escaped with a backslash so they won't be interpreted as wildcard patterns.
Supported Properties
Note that not all properties are supported by every plugin. The wiki has a complete list of properties.
Currently all properties and values are case-insensitive. They are lowercased when parsed. Generally, if a property is not specified, the editor settings will be used, i.e. EditorConfig takes no effect on that part. For any property, a value of unset is to remove the effect of that property, even if it has been set before. For example, add indent_size = unset to undefine indent_size property (and use editor default).
It is acceptable and often preferred to leave certain EditorConfig properties unspecified. For example, tab_width need not be specified unless it differs from the value of indent_size . Also, when indent_style is set to tab , it may be desirable to leave indent_size unspecified so readers may view the file using their preferred indentation width. Additionally, if a property is not standardized in your project ( end_of_line for example), it may be best to leave it blank.
Настройки
- Любая из строк разделенных запятыми
Пример: [index.]
index.js // Совпадение
index.html // Совпадение
package.json // Нет совпадения
Внешний вид программы
Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.
[!name] - Любой символ которого нету в “name”
Пример: [file[!2468].js]
file1.js // Совпадение
file2.js // Нет совпадения
Where are these files stored?
When opening a file, EditorConfig plugins look for a file named .editorconfig in the directory of the opened file and in every parent directory. A search for .editorconfig files will stop if the root filepath is reached or an EditorConfig file with root=true is found.
EditorConfig files are read top to bottom and the most recent rules found take precedence. Properties from matching EditorConfig sections are applied in the order they were read, so properties in closer files take precedence.
For Windows Users: To create an .editorconfig file within Windows Explorer, you need to create a file named .editorconfig. (note the trailing dot), which Windows Explorer will automatically rename to .editorconfig for you.
** - Любое количество символов
Пример: [**.js]
hello.js // Совпадение
hellojs // Нет совпадения
index.html // Нет совпадения
lib/source.js // Совпадение
? - Один любой символ
Пример: [hell?.js]
hello.js // Совпадение
hell.js // Нет совпадения
ECLint [ github ]
Похож по функциональности на editorconfig-tools, но, в дополнение, умеет анализировать существующий код и генерировать .editorconfig файл. Также на стадии разработки.
Формат файла
Файлы EditorConfig используют слегка модифицированный INI формат.
Каждый .editorconfig должен быть в кодировке UTF-8 , а в конце строк должно быть либо
CRLF либо LF .
В качестве имени секции выступает маска файлов, например [*.js] или [index.html] .
В отличии от обычного .ini формата, в имени секции можно использовать [ и ] , что позволяет указать список символов, один из которых должен находиться в указаной позиции. Например, допустимы конструкции вроде этой: [file[123].js] . Как это работает — читайте ниже.
Цветовая схема
Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.
Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.
Для того что устанавливать новые цветовые схемы, плагины и прочие дополнения, мне нужно сперва установить установщик этих дополнений. Звучит сложно, но на деле все гораздо проще.
Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.
Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.
Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme
Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!
AutoFileName
Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.
Плагины
GotoCSSDeclaration
Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код
Где ["ctrl+1"] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.
Ну и для тех, кто дочитал до этого момента покажу еще один плагин, который установить не так просто, но он точно того стоит.
Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:
Где ctrl+` это и есть наше сочетание клавиш.
Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`
Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.
Emmet
Один из самых популярных плагинов для редакторов. Emmet, бывший Zen Coding, является также одним из самых значительных методов повышения продуктивности веб-разработчиков. После нажатия на табуляцию Emmet преобразует простые сокращения в объемные фрагменты кода для HTML и CSS. Хочется еще поделиться плагином Hayaku — коллекцию удобных аббревиатур для каскадных стилей.
Видео с лучшими приемами от автора проекта:
Суть этого плагина понятна из названия — возможность работать с Git прямо в вашем любимом редакторе. Данный способ работы с Git позволит вам сэкономить массу времени. Во-первых: вам не придется постоянно переключаться между окнами Sublime и терминала. Во-вторых: есть грамотный автокомплит и вместо git add -A, достаточно написать add. В-третьих: существуют такие мелочи как Quick commit, который одной командой quick добавляет все изменения и коммитит их.
Если от Git вам необходима возможность только забирать содержимое с удаленных репозиториев, то с этой задачей прекрасно справляется Fetch.
Существует еще Glue, который выводит внизу небольшое окошко, где можно писать на Shell. Благодаря этому из редактора теперь будет доступен не только Git…
GitGutter и Modific
Данные плагины подсвечивают строки измененные последним коммитом, другими словами diff tools в режиме реального времени.
BracketHighlighter
Мега круто! Открытие и закрытие любого фрагмента в коде должно выглядеть именно таким образом.
EditorConfig
Суть этого плагина заключается в том, чтобы предоставить возможность разработчиком иметь единый формат настроек для всех редакторов/IDE и всех языков программирования. Файлы .editorconfig хранят в себе информацию о табуляции, ширине отступа, кодировке и прочих конфигурациях.
Sublimall
Замечательный плагин, который синхронизирует все конфигурации (настройки, плагины, рабочие файлы) между вашими Sublime Text редакторами. Все абсолютно бесплатно, требуется только создать аккаунт. Более простая альтернатива — BufferScroll.
AllAutocomplete
Классическое автодополнение в Sublime Text работает только с текущим файлом. AllAutocomplete осуществляет поиск по всем файлам открытым в текущем окне, что значительно упрощает процесс разработки. Также существует плагин CodeIntel, который воплощает в себе возможности IDE и помимо умного автокомплита привносит в Sublime «Code Intelligence» для ряда языков: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.
SublimeREPL
DocBlockr
DocBlockr станет для вас эффективным помощником при документировании кода. После ввода /** и нажатия на клавишу Tab плагин автоматически распарсит любую функцию и подготовит соответствующий шаблон.
Floobits
Потрясающее расширение для SublimeText, Vim, Emacs, IntelliJ IDEA, которое позволяет разработчикам совместно работать на кодом, причем из разных редакторов.
AutoFileName
Автозаполнение путей к подключаемым файлам — очень удобно. Без лишних слов.
ColorPicker
Обычно, когда нам требуется цветовая палитра мы привыкли использовать Photoshop или Gimp. Но полноценный color picker может быть прямо в окне вашего редактора — Ctrl/Cmd + Shift + C. А еще есть замечательные GutterColor и ColorHighlighter, которые упрощают ориентирование в цветовых кодах:
Colorcoder
Разукрашивает все переменные, тем самым значительно упрощая ориентацию в коде. Особенно полезно для разработчиков с дислексией.
PlainTasks
Великолепный задачник! Все таски хранятся в файлах, поэтому их очень удобно сопоставлять с проектами. Возможность создавать проекты, указывать теги, выставлять даты. Грамотный интерфейс и шорткаты.
MarkdownEditing
Вероятно лучший плагин для работы с Markdown: подсветка, сокращения, автодополнение, цветовые схемы и др. Как альтернативно решение, можно попробовать MarkdownPreview.
Напоследок:
* В некоторых репозиториях указано, что плагин написан под ST2, но я все проверял и многое использую сам под ST3.
* Я не стал описывать ряд плагинов, которые выполняют действия по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачи для Grunt, Gulp, Prepros или CodeKit.
Плагины для Sublime Text 3
Кто бы что ни говорил или писал, но для начала не помешает зайти на страничку популярных плагинов и выбрать те, которые подойдут непосредственно Вам. Также я бы порекомендовал перед установкой плагина ознакомиться с его документацией, потому как могут быть нюансы. Ну а ниже перечислю те плагины, которые использую сам:
EditorConfig
Работать приходится с разными проектами и с разными людьми. Дабы определить единый стиль кода и придерживаться его и нужен EditorConfig. Подробнее об этом плагине можно почитать здесь
SideBarEnhancement
Расширяет функционал сайдбара. Надо признать, что у самого Sublime этот функционал уж очень скуден.
SublimeCodeIntel
Довольно удобная штука – позволяет «прыгнуть» в файл и на строку определения класса или метода. И вот об упомянутых выше нюансах – до установки плагина надо убедиться, что CodeIntel установлен в вашей системе, о чём подробнее в документации.
BracketHighlighter
Подсвечивает парные скобки и теги.
PHP Companion
Позволяет добавлять namespace, оператор use и т.д. нажатием одной клавиши. Привязки клавишам нужно писать самому, но можно использовать авторские. Для этого открываем Preferences > Key Bindings , вставляем во вкладку Default.sublime-keymap – User этот код и сохраняем.
DocBlockr
Я противник комментариев как таковых – если понимаешь, что надо написать комментарий к коду, то тут надо не комментарии писать, а код переписывать. Но это не касается комментариев DocBlock, написание которых и упрощает данный плагин.
TrailingSpaces
Подсвечивает пробелы в конце строк и может удалять их при сохранении. По умолчанию опция удаления отключена. Чтобы её включить, надо зайти в Preferences > Package Settings > Trailing Spaces > Settings User и вставить следующее:
A File Icon
В сайдбаре к названиям файлов добавляет иконки. Так воспринимать информацию гораздо удобнее.
Emmet
Незаменимая вещь для вёрстки, значительно ускоряет процесс, позволяя расширять табом аббревиатуры HTML, XML, HAML и CSS/SASS/LESS/Stylus. Если раньше не работали с Emmet, то на первых порах будет полезна вот эта шпаргалка.
Autoprefixer
Color Highlighter
Полагаю, из названия уже понятно о чём речь. Поставляется вместе с конвертором цветов. Настроек достаточно, поэтому следует почитать доки.
С основными плагинами вроде всё. Что касается конкретных фреймворков или библиотек– тут уж кто с чем работает. Можно лишь сказать, что, как минимум, помимо подсветки желательно также ставить и плагины сниппетов. Лично у меня ещё установлены:
Laravel Blade Highlighter, Blade Snippets, Babel, Babel Snippets, Vue Syntax Highlight, Vuejs Snippets, Sass, LESS, Pug.
Следует упомянуть такие плагины как Git или Laravel Artisan, но им я всё-таки предпочитаю консоль.
О горячих клавишах
Практически полный перечень находится здесь. Я же приведу лишь небольшую выдержку комманд, которые использую чаще всего:
Ctrl + D | Выделить слово, в котором курсор |
Ctrl + Shift + M | Выделить содержимое скобок |
Ctrl + F | Поиск в файле |
Alt + Enter | Выделить всё найденное (после поиска) |
Ctrl + / | Закомментировать строку |
Ctrl + Shift + / | Закомментировать блок кода (в котором находится курсор) |
Ctrl + S | Сохранить |
Tab | Добавить отступ |
Tab + Shift | Удалить отступ |
Ctrl + Shift + D | Продублировать строку/фрагмент |
Ctrl + Shift + ↑ | Поднять строку вверх |
Ctrl + Shift + ↓ | Опустить строку вниз |
Ctrl + Shift + Enter | Вставить строку выше курсора |
Ctrl + Enter | Вставить строку ниже курсора |
Ctrl + P | Переход к файлу в проекте |
И в завершение. Из редактора IDE не слепить, но с другой стороны – а нужно ли? Я пробовал NetBeans, Eclipse, PhpStorm, но в итоге (наряду с последним) всё равно продолжаю пользоваться Sublime. Этот быстрый на подъём и шустрый редактор меня полностью устраивает.
EditorConfig это конфигурационный файл и набор расширений, к большому количеству редакторов кода и IDE (Далее просто IDE).
Его задача — создать единый формат настроек, и, раз и навсегда, решить вопросы вроде “табы или пробелы” для всех IDE и всех языков программирования. Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию.
Файлы .editorconfig можно найти в таких проектах, как jQuery, Ruby, WordPress, и многих других.
Плагины доступны для большого количество IDE
Давайте разберемся, как это работает.
Подготовка Sublime Text 3 к работе
Установка редактора под Windows не вызывает никаких затруднений – просто следуйте указаниям. Можно упомянуть только один нюанс – по ходу установки можно отметить чекбокс, чтобы добавить Sublime Text в контекстное меню операционной системы. Т.е. при клике правой клавишей мыши на каком-либо файле, его можно будет сразу открыть в данном редакторе.
Следующий шаг – установка Package Control. Зачем это нужно? Для полноценной работы потребуется некое количество плагинов и либо мы будем устанавливать их руками, либо за нас эту работу выполнит Package Control. Итак, идём на эту страницу и копируем код для Sublime Text 3. Возвращаемся в редактор и открываем консоль: View > Show Console или просто используем комбинацию клавиш Ctrl +` . Вставляем код в консоль и нажимаем Enter.
Ссылки и как в этом можно поучаствовать
Команда EditorConfig проделала отличную работу, но впереди еще много трудностей, интересных задач и решений:
Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.
Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!
Дополнительные настройки
Дополнительно повысить восприятие кода и комфорт при работе с ним мне помогут следующие дополнительные настройки. Переходим Preferences – Settings. Открывается такое окно разделенное на две части. В левой части настройки по умолчанию, их изменить нельзя, а вот в правой части ты можешь эти настройки переназначить, каждая следующая должна идти через запятую. Вот какие настройки использую я:
Поясню каждую настройку.
Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.
Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.
Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset
Эти линии очень полезны для новичка, потому что визуально соединяют открывающий и закрывающий элемент, что существенно помогает в ориентации в коде.
Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.
Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.
Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер :)
Например мы работали работали, а потом неожиданно закрыли программу :) Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.
А почему так мало настроек?
Изначальная задача EditorConfig — создать минимальный набор свойств, который работал бы во всех основных IDE.
- Убедиться, что все редакторы/IDE ее поддерживают
- Решить, использовать ли жесткий или мягкий (когда строка физически остается длинной, но выглядит как две) перенос, или позволить пользователю выбрать это, добавив еще одну настройку (не все редакторы/IDE поддерживают оба вида переноса)
- Если использовать жесткий перенос, то что делать с языками где жесткий перенос может сломать код? (например HAML)
Плагины, как они работают и как их создавать?
В помощь создателям плагинов создан набор основных компонентов (ядер), которые могут быть использованы в плагинах и берут на себя работу по поиску и парсингуконфигурационных файлов. На данный момент существуют версии на C, Java, Python, ведется работа над JavaScript версией.
Сами плагины стараются перезаписать соответствующие настройки IDE вместо того, чтобы заниматься форматированием самим.
К сожалению, все еще не существует плагинов для такие IDE как Eclipse или NetBeans, их архитектура не позволяет легко менять настройки.
Если среди читающих есть кто-то, готовый взяться за создание плагинов, здесь неплохо расписано, как начать (eng.)
Подсветки синтаксиса
Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.
Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.
Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.
Например, в дальнейшем я планирую работать с файлами SCSS, открыв его я увижу сплошную простыню из набора белых символов. Не очень удобно, правда?
Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.
Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?
Настройка внешнего вида редактора важна, так как мы довольно длительное время проводим за написанием кода. Это влияет на нашу усталость, продуктивность, здоровье да и просто на настроение.
Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!
Как выглядит файл EditorConfig?
Вот пример файла .editorconfig , который задает правила отступа для Python и JavaScript кода:
\ - Экранирование служебных символов
Пример: [\[abc\].js]
a.js // Нет совпадения
[abc].js // Совпадение
editorconfig-tools [ github ]
Набор инструментов для проверки и переформатирования кода. Находится на ранней стадии разработки и не пока не очень стабилен.
Читайте также: