Sublime Text 3 — лучший редактор кода


Warning: Illegal string offset 'lang' in /home/float127/public_html/wp-content/plugins/wp-highlightjs/wp_highlight.js.php on line 119

Warning: Illegal string offset 'lang' in /home/float127/public_html/wp-content/plugins/wp-highlightjs/wp_highlight.js.php on line 119

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

Скачать SublimeText3Яндекс.Диск

Sublime Text 3 и Git Bash

1. В любом редакторе создайте текстовый документ со следующим содержимым

#!/bin/sh
"C:\Program Files\Sublime Text 3\sublime.exe" $1 &
«C:\Program Files\Sublime Text 3\sublime.exe» — путь к исполняемому файлу редактора
2. Сохраните файл (без расширения) под названием subl
3. Результат поместите в папку: c:\Program Files (x86)\Git\bin\
#Теперь можете использовать команду
$ subl .

Плагины

После установки SublimeText3 первый плагин, который Вы ставите — PackageControl!
Запустите Sublime, откройте консоль Ctrl+` или View -> Show Console (как удобней) и вставьте следующий код (источник)

import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; 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 validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

Перезапустите редактор. Горячая клавича Ctrl+Shift+P — открывает меню комманд в Sublime. Достаточно ввести несколько символов слов чтобы отфильтровать нужные комманды. Только что установленный PackageControl можно открыть и через главное меню Preferences, но лучше привыкать к использованию горячих клавиш. Ctrl+Shift+P.

sublime_package_control

Package Control : Install Package  или
pack ins pack или
p i p (см. скриншот)


находим нужный пункт и жмем Enter. Перед нами список доступных плагинов. Устанавливаем нужные и наслаждаемся работой.

Как получить список установленных планинов в SublimeText3

Ctrl+Shift+P -> Package Control: List packages
package_control_list_packages
Или напрямую открыть конфиг-файл Package Control:

'%USERPROFILE%\AppData\Roaming\Sublime Text 3\Packages\User' Package Control.sublime-settings

Содержимое моего файла: Package Control.sublime-settings

Показать

{
	"installed_packages":
	[
		// расширение контекстного меню. Название говорит само за себя
		"AdvancedNewFile",
		// если Вы перфекционист, и любите красивый код
		"Alignment",
		// автозавершение путей
		"AutoFileName",
		"Bootstrap 3 Snippets",
		// устанавливайте компоненты для приложения прямо с редактора
		"Bower",
		// подсветка кавычек
		"BracketHighlighter",
		// управление браузером по хоткеям прямо с редактора
		"Browser Refresh",
		"BufferScroll",
		// подсветка цветов в коде
		"Color Highlighter",
		// "ColorPicker",
		"Create Backup Copy",
		// конвертирование цветов по хоткею #,rgb,rgba
		"CSS Color Converter",
		"CSS Completions",
		"CSS3",
		"CSScomb",
		"CSSLint",
		"Dictionaries",
		// генерирование HTML
		"Emmet",
		"Emmet Css Snippets",
		"EncodingHelper",
		"FindKeyConflicts",
		// полезный плагин
		"Focus File on Sidebar",
		// для работы с Вашими Gist'ами
		"Gist",
		// поиск в гугле по выделенному тексту
		"Google Search",
		// наводим красоту в коде
		"HTML-CSS-JS Prettify",
		"HTML5",
		// автокомплиты для популярных шрифтов-иконок
		"Icon Fonts",
		"JavaScript & NodeJS Snippets",
		"jQuery",
		"jQuery Snippets pack",
		"jQueryDocs",
		// тулза для минификации css,js
		"Minifier",
		"npm",
		// открываем папки прямо с сайдбара
		"Open Folder",
		// менеджер пакетов
		"Package Control",
		// решение для заметок
		"PlainTasks",
		// плагины для работы с SASS
		"Sass",
		"SASS Build",
		"SassBeautify",
		"SCSS",
		"SCSS Expander",
		"SCSS Snippets",
		"Seti_UI",
		// работа с ФТП
		"SFTP",
		"SideBarEnhancements",
		"SideBarFolders",
		"smart less build",
		// закладки
		"Sublime Bookmarks",
		//очень удобный плагин если вы работаете с библиотеками
		"SublimeCodeIntel",
		"SublimeLinter",
		"SublimeLinter-contrib-htmlhint",
		"SublimeLinter-html-tidy",
		"SublimeLinter-php",
		"SublimeOnSaveBuild",
		"Tag",
		// темы оформления
		"Material Theme",
		"Theme - itg.flat",
		"Theme - Soda",
		"Theme - Watson",
		"ToggleQuotes",
		"Tomorrow Color Schemes",
		"WebFont",
		// перевод текста прямо в редакторе
		"YandexTranslate"
	]
}

Подсветка синтаксиса

За последние несколько лет в вебе изменилось очень многое — в CSS появились новые возможности, в JavaScript представили новую функциональность и синтаксис; также появилось множество языков, компилируемых в HTML, CSS и JS.

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

JavaScript Next — плагин, подсвечивающий синтаксис лучше, чем стандартный JavaScript-хайлайтер. К тому же этот плагин поддерживает фичи EcmaScript 6, такие как модули, классы, генераторы и многое другое.

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

Разработчики, использующие Sass, должны установить плагины SCSS или Sass (в зависимости от используемого синтаксиса). Обратите внимание на то, какой именно плагин вы установили. Распространённая ошибка — установить плагин Sass, но при этом использовать синтаксис SCSS, и наоборот.

Пишете на CoffeeScript? Убедитесь, что у вас установлен плагин Better CoffeeScript. Важно использовать именно его, так как официальный плагин CoffeeScript больше не поддерживается его разработчиками.

Пример подсветки синтаксиса CSS документа



/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Вот так выглядит подсветка html


<!DOCTYPE html>
<html lang="">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Title Page</title>

 <!-- Bootstrap CSS -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1 class="text-center">Hello World</h1>

 <!-- jQuery -->
 <script src="//code.jquery.com/jquery.js"></script>
 <!-- Bootstrap JavaScript -->
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </body>
</html>

upd: Добавлен список плагинов и ссылка на скачивание программы.