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

Показать

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

За последние несколько лет в вебе изменилось очень многое — в 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: Добавлен список плагинов и ссылка на скачивание программы.