Sublime text не работает h1
В данной статье мы разберем актуальную и удобную настройку самого лучшего редактора кода Sublime Text 3. В этом тексте не будет много слов, тут будет сжатый код и описание плагинов. После установки которых, Вы увидите совсем новый редактор — который будет радовать Вас при каждом открытии и будет максимально практичен.
*Для установки плагинов потребуется Package Control, откройте Sublime Text 3 -> Нажмите ctrl + shift + p -> Введите ‘inst‘ -> В выпадающем меню выберите ‘Install Package‘.
После этого, с помощью этих же горячих клавиш выполнять установку плагинов.
- AdvancedNewFile — Удобное создание нового файла
- All Autocomplete — Подсказка классов в CSS исходя из открытых файлов html
- AutoFileName — Подсказка названия файла при вводе пути
- Color Highlighter — Подсветка текущим цветом код цвета в CSS
- ColorPicker — Удобный пикер)
- Emmet — Не требует объяснений
- JavaScript & NodeJS Snippets — Удобные подскази и поддержка NodeJS
- Sass — Поддержка препроцессора Sass
- Theme One Dark или Theme Gravity
После установки всех плагинов, вставьте данный код в файл настроек.
Чтобы открыть файл настроек в верхнем меню Sublime Text 3 выберите ‘Preferences‘ -> ‘Settings‘.
Чтобы более подробно разобраться в данной теме "Настройка sublime text 3 для верстки сайтов 2020" советую посмотреть наше видео на эту тему:
Структура HTML документа, как создать первую web страницу
Прежде чем понять, что такое структура html документа и перейти к ее разбору нам нужно выбрать программу в которой мы будем реализовывать наш план. Просто использовать NotePad++ или Блокнот не целесообразно. Лично Я использую программу Sublime Text 3, она отлично подходит для взаимодействия с кодом и упрощает жизнь во многих моментах. По желанию вы так же можете разобраться в программе Brackets от Adobe. Она тоже очень хороша, но на мой взгляд работает значительно дольше чем Sublime.
Разделяем экран
Еще одна интересная функция, о которой я уже говорил – разделитель экрана. Ей часто пользуются веб-разработчики для удобства перемещения между HTML и CSS. Активировать ее можно следующим образом:
На этом настройка Sublime Text завершена – теперь вы можете использовать программу в полной мере. Чтобы вам было еще проще, ниже я рассмотрю некоторые плагины, которые заметно упрощают работу с кодом.
Быстрая настройка Sublime Text 3 для верстки сайтов
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3, установке необходимых для верстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.
Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять ее каждый раз не практично и долго.
Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения верски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.
По умолчанию Sublime Text выглядит довольно печально:
Установка Package Control в Sublime Text
Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чем вы получите соответствующее уведомление.
Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Самые популярные плагины для Sublime Text:
- Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
- AutoFileName — дополняет код при написании путей до файлов в верстке;
- Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
- Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
- terminus — плагин встроенного терминала Sublime Text.
- W3CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.
Установка внешнего оформления Sublime Text
Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.
Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:
- One Dark Color Scheme — цветовая схема для подсветки кода;
- One Dark Material — Theme — тема оформления UI Sublime Text.
Установка плагина вручную
Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.
Один из таких плагинов BufferScroll — потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.
Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.
Тонкая настройка редактора, пресет моих настроек
Переходим к настройкам Sublime Text.
Предтавляю мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости:
Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:
Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:
Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля — левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив свое значение.
Узнать какое свойство за что отвечает довольно просто — все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\\AppData\Roaming\Sublime Text 3"
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
И чет не робит.. ваще никак.. хотя слово в слово.. знак-в знак..
смотрю.. у автора type="text" выделяется другими цветами.. у меня другими..
type зеленый, = красный, "text" желтый.. как будто он их не так понимает.. это вообще законно?! =)
а еще бла-бла.. Sublime text(UNREGISTRE) в самом верху. Мож это как-то связано.
1. Выбор цветовой схемы
Теперь выбираем цветовую схему с поддержкой Babel-скриптов: можно установить дополнительные схемы, но для примера поставим Monokai Phoenix, встроенную в плагин Babel. Ctrl+Shift+P → Schemr: List All Schemes → выбираем Monokai Phoenix [Dark] → цветовая схема установлена.
Внешний вид программы
Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.
Подсветки синтаксиса
Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.
Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.
Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.
Например, в дальнейшем я планирую работать с файлами SCSS, открыв его я увижу сплошную простыню из набора белых символов. Не очень удобно, правда?
Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.
Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?
Настройка внешнего вида редактора важна, так как мы довольно длительное время проводим за написанием кода. Это влияет на нашу усталость, продуктивность, здоровье да и просто на настроение.
Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!
Боковая панель
Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.
1. Через встроенную консоль
Открываем файл, для которого применяется схема Monokai Phoenix → Ctrl+' (машинописный обратный апостроф, символ расположен на той же клавише, где кириллическая «ё») → вставляем в открывшуюся консоль следующий код:
На выходе должны получить
Результат (без 'кавычек') вставляем как значение параметра color_scheme из предыдущего раздела.
Дополнительные настройки
Дополнительно повысить восприятие кода и комфорт при работе с ним мне помогут следующие дополнительные настройки. Переходим Preferences – Settings. Открывается такое окно разделенное на две части. В левой части настройки по умолчанию, их изменить нельзя, а вот в правой части ты можешь эти настройки переназначить, каждая следующая должна идти через запятую. Вот какие настройки использую я:
Поясню каждую настройку.
Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.
Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.
Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset
Эти линии очень полезны для новичка, потому что визуально соединяют открывающий и закрывающий элемент, что существенно помогает в ориентации в коде.
Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.
Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.
Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер :)
Например мы работали работали, а потом неожиданно закрыли программу :) Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.
2 ответа 2
UPD
Мой feature request, созданный по мотивам данного вопроса, был закрыт, улучшать синтаксис babel-скриптов в HTML разработчики пакета Babel не собираются. Кого ещё можно просить — без понятия.
Таким образом, именно для данного случая придётся или
- писать собственный синтаксис (что дело не одного часа),
- не встраивать инлайновые скрипты Babel в HTML,
Великий и могучий Emmet
Итак, что же умеет Emmet?
Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать "block" и нажать клавишу Tab. Мы получим:
Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:
Жмем клавишу Tab и получаем:
Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:
Теперь для того чтобы вызвать запись:
нам достаточно написать bl и нажать клавишу Tab
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+`
Код между тегами не подсвечивается, когда я ставлю type="text/babel" т. к. использую ReactJS. Редактор — Sublime Text 3. В чём проблема?
JavaScript & NodeJS Snippets
Аналогичен предыдущему плагину – с его помощью можно дописывать JavaScript-код. Например, если набрать «qs+TAB», то в результате набранный текст преобразится в код:
6. Проблема 2: Желательно, чтобы синтаксис Javascript (Babel) был только в html-файлах с Babel-скриптами
Применять синтаксис JavaScript (Babel) для HTML-файлов, не содержащих Babel-скрипты нежелательно, поскольку:
- В нём не так детально расписаны правила для HTML, CSS и JavaScript, как в дефолтном синтаксисе HTML.
- Цветовые схемы для Babel недостаточно поддерживают HTML, CSS и JavaScript, как схемы, специализирующиеся на HTML, CSS и JavaScript.
Плагины
GitGutter
Еще один плагин для Git, с помощью которого можно не просто работать с основными командами, но и обращаться к измененным версиям.
7. Правка файла синтаксиса
Можно включить подсветку синтаксиса для Babel-скриптов в файле HTML.sublime-syntax или каком-либо другом самостоятельно по образцу, расписанному в данном ответе для Gulp. Но есть проблемы:
Sublime Text 3 – это текстовый редактор, разработанный для верстальщиков и программистов. Он позволяет работать с кодом разных языков программирования: от Erlang до C++. Свою популярность он получил благодаря кроссплатформенной поддержке и расширенным настройкам, которые позволяют пользователю легко «играть» с параметрами программы. Вариаций довольно много – можно изменить и внешний вид, и дополнить функционал с помощью различных плагинов.
Что еще есть в Sublime Text 3 и как со всем этим работать – поговорим в сегодняшней статье.
Разделение рабочего окна
Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.
Поскольку практически всегда приходится работать с несколькими разными файлами, например 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+ соответствующая цифра.
Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.
4. Проблема 1: не желаю цветовую схему с поддержкой Babel для остальных файлов
Допустим, помимо EcmaScript Вы программируете на Python. Цветовые схемы для Babel плохо подсвечивают Python-скрипты, для Python лучше пользоваться схемой, поддерживающей Python.
В данном разделе описывается, как установить цветовую схему Monokai Phoenix только для файлов с расширением html , в остальных будет применяться Ваша цветовая схема по умолчанию.
Не делаем ничего из приведённого в п. 3.1, если сделали — откатитесь. Далее, как расписано в книге «Sublime Text Power User», Preferences → Browse Packages → User → создаём файл HTML.sublime-settings → между вставляем следующий код:
Не путайтесь в JSON-синтаксисе, следите за правильной расстановкой кавычек, скобок и запятых. Например, мой файл HTML.sublime-settings выглядит так:
Сохраняем файл → для файлов с расширением html будет применяться цветовая схема Monokai Phoenix, для остальных — Ваша по умолчанию.
AutoFileName
Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.
3. Установка подсветки для babel-скриптов
Скачиваем через Package Control плагин Babel для работы с ReactJS, и Schemr — для простого переключения по цветовым схемам.
Устанавливаем синтаксис JavaScript (Babel) для файлов с расширением html , как расписано здесь.
Emmet
Emmet – одно из лучших решений для тех, кто хочет быстро верстать сайты или писать код. Плагин позволяет дописывать код при его введении. Например, если в HTML-файле прописать букву «t» и нажать после этого на клавишу «TAB», то появится тег:
Изменяем внешний вид
По умолчанию Sublime поставляется с черной темой, которая подойдет каждому, но если нужны изменения, то никто не запрещает их сделать.
На этом настройки не ограничиваются – мы также можем изменить шрифт текста и его размер, добавить новые темы и многое другое.
Сделать это можно через «Preferences» -> «Settings». Слева находятся значения по умолчанию – их менять не нужно. А вот справа расположены пользовательские настройки, которые можно изменять и дополнять.
- "color_scheme" – здесь прописывается цветовая тема (можно выбрать из существующих и добавить собственную);
- "font_face" – позволяет изменить шрифт текста на любой, что есть в системе;
- "font_size" – предназначена для увеличения или уменьшения размера текста;
- "font_options" – устанавливает/удаляет жирность или курсив текста;
- "word_separators" – разделители слов;
- "line_numbers" – настройка нумерации слов;
- "gutter" – включает или отключает отображение номеров строк и закладок («канавка»);
- "margin" – настраивает отступ от «канавки»;
- "fold_buttons" – позволяет отключить треугольные стрелки, отображаемые в «канавке».
Например, мы можем установить следующие значения:
Для сохранения изменений не забудьте воспользоваться комбинацией клавиш «CTRL+S».
Инструменты Sublime Text 3
Текстовый редактор Sublime обладает большим функционалом, который упрощает написание кода и его компиляцию. Из особенностей выделяют следующее:
- Goto Anything – удобная функция, позволяющая быстро получить доступ к нужным файлам.
- Сопоставление скобок – позволяет быстро определить неправильное сопоставление. Редактор напрямую выделяет соответствующие наборы скобок.
- Множественное выделение – полезная функция, позволяющая быстро изменять код в нескольких местах.
- Мощный Python API, благодаря которому Sublime обходит многих конкурентов. Он дает возможность достигать высокой производительности за счет дополнительных плагинов.
- Раздельное редактирование – благодаря этой функции можно разделять окно на несколько столбцов, например, один назначить под HTML, другой – под CSS, третий – под JavaScript.
- Сочетание клавиш – позволяет присваивать комбинацию клавиш к различным функциям.
1. Настройка
В данном подразделе расписано, как настроить следующее:
- Когда в html-файлах отсутствуют babel-скрипты, применяется синтаксис для HTML по умолчанию.
- Присутствуют — автоматически определяется JavaScript (Babel) синтаксис.
Если проделывали действия из пп. 3.1 и 4, откатите их.
Проделайте действия из пункта 3.1 с одним исключением — файл будет называться не HTML.sublime-settings , а JavaScript (Babel).sublime-settings , где JavaScript (Babel) — имя файла синтаксиса (как узнать имя, см. здесь в разделе 3).
Устанавливаем через Package Control плагин ApplySyntax → Preferences → Package Settings → ApplySyntax → Settings - User → увидите правило "syntaxes": [] . В нём между [квадратными скобками] добавляем следующий код и сохраняем файл:
После сохранения синтаксис файла, содержащего атрибут type="text/babel" в теге script должен измениться на Babel/JavaScript (Babel) . Если удалите type="text/babel" из файла и сохраните его → смены синтаксиса обратно не произойдёт, но после того, как Вы закроете его и откроете снова, вернётся подсветка от синтаксиса HTML.
5. Как определить путь к файлу цветовой схемы
Процесс во многом аналогичен определению пути к файлу синтаксиса — см. раздел 3 данного ответа.
Abvanced New File
Позволяет создавать файлы, не выходя из программы – достаточно запустить плагин, прописать путь и название файла.
Если вы работаете с Git, то данный плагин будет вам попросту необходим. С его помощью можно выполнять все необходимые взаимодействия с Git внутри программы.
2. Параметры
- syntax — путь к файлу синтаксиса. Как его получить, читаем здесь в разделе 3.
- file_path — что должно содержаться в имени файла, дабы к нему применялся синтаксис из параметра syntax . Обратите внимание:
- Значением параметра является не расширение, а регулярное выражение; .*\\.html$ означает, что синтаксис будет применяться к любым файлам, содержащим .html на конце.
- Необходимо экранировать экранирующие слэши, поэтому идут 2 слэша подряд.
Если ограничения строкой недостаточно, существуют другие варианты, описанные в документации:
-
— в более сложных случаях можно определить синтаксис для файла, если в нём содержится определённая функция. Когда будете использовать данный параметр, обратите внимание на настройку reraise_exeptions.
2. Ограничения
- Дефолтный синтаксис HTML.sublime-syntax на момент написания данного ответа не поддерживает babel-скрипты. Неплохо было бы сделать feature request разработчикам Sublime Text, не пакета Babel.
- В одном файле нельзя применять 2 или более синтаксисов (или я плохо гуглю). Один файл — один синтаксис.
2. При помощи PackageResourceViewer
Устанавливаем плагин PackageResourceViewer → PackageResourceViewer: Open Resource →
- ColorSheme - Default , если пользуетесь одной из цветовых тем по умолчанию,
- $Название Вашего плагина — если пользуетесь цветовой схемой, установленной в каком-либо из плагинов,
В нашем случае набираем Babel → ищем в выпадающем меню файл с расширением tmTheme → в рассматриваемом случае это Monokai Phoenix.tmTheme . Packages/$Название плагина/$имя файла цветовой схемы.tmTheme и нужно вставлять напротив параметра color_scheme в файле HTML.sublime-settings .
Настройка Sublime Text 3
Первым делом рассмотрим настройки внешнего вида, а затем перейдем к горячим клавишам и установке плагинов.
Структура HTML документа
Для того, чтобы начать разбор, мы должны создать отдельную папку в которой будет хранится наш первый html файл. Для этого открываем наш Sublime Text 3 и переходим в раздел File > New File. Вы увидите, что у Вас создался новый файл и он будет открыт в новой вкладке редактора. Теперь нажимаем сочетание клавиш CTRL+S и сохраняем наш документ в папку проекта с название index.html. Абсолютно все файлы типа html, имеют расширение html или htm. Для стартового файла, с которого начинается сайт всегда используем имя index. Это очень важно т.к. при загрузки вашего веб сайта первым делом браузер обращает внимание на этот файл. В итоге у вас выйдет готовый документ, но он пока пустой. Давайте перейдем непосредственно к созданию структуры.
- Парные/Непарные
- Закрывающиеся/Незакрывающиеся
Для старых версий языка doctype выглядел так:
В новых версиях, начиная с версии HTML5 и выше определяется следующим образом:
Мы можем открыть наш файл в браузере, где мы увидим путь к нашему файлу и белый экран т.к. ничего кроме базового тега мы не прописывали.
Так давайте это исправим и напишем следующий тег .
Этот тег относится к типу закрывающийся и в нем располагается вся информация нашего документа. Т.е все действия связанные в дальнейшем с разработкой будут происходить именно в этом теге.
Следующим шагом мы прописываем закрывающийся тег . Он служит для нашей структуры html документа как служебным тегом. В нем мы можем описать title нашей страницы, подключить скрипты, css стили или написать meta данные. Давайте теперь рассмотрим и пропишем эти теги в нашем документе.
Следующим шагом мы зададим нашему документу meta описание.
Этот тег говорит нашему браузеру, какую кодировку нужно использовать. Важно знать, что каждый тег имеет свой атрибут и его значение. Чтоб было более понятно в коде выше атрибутом является «charset», а значением «utf-8». Значение атрибута всегда заключается в кавычки. Также есть и другие виды тега «meta», такие как «keywords» «description» и др.. Но это уже тема семантической разметки.
Давайте разберем тег под названием . Боди тег закрывающийся и содержит в себе основную информацию страницы. Т.е после того как мы прописали выше перечисленные теги, нам нужно перейти к созданию информации, которая будет отображаться на сайте и видна пользователям. Чтобы увидеть это наглядно, давайте пропишем еще несколько тегов.
В результате у нас получится вот такая структура нашего документа:
Кстати советую вам изучить тему семантической верстки, в которой раскрыта тема понимания вашего сайта поисковыми системами. Очень важно, чтобы они понимали ваш код и знали, что находится в том или ином куске кода.
Подробнее об этой статье в моем видеоуроке по структуре html документа, где мы разбираем все вышеперечисленное:
Оставляйте свои комментарии ниже, нам очень важно знать ваше мнение и о чем бы вы хотели узнать в следующих наших уроках.
Русифицируем Sublime Text с помощью плагина
Как мы уже говорили ранее, основная фишка Sublime – плагины, с помощью которых можно менять функционал программы. Для их установки используется дополнительная утилита Package Control, которая позволяет находить и инсталлировать разные плагины.
Для примера давайте русифицируем программу с помощью плагина LocalizedMenu:
- Открываем Sublime Text и используем комбинацию клавиш «CTRL+SHIFT+P». В отобразившемся окне вводим «Package Control: Install Package» и кликаем по первому запросу.
- В результате перед нами отобразится новое поисковое окно, через которое можно найти различные плагины. В нашем случае нас интересует «LocalizedMenu» – вводим запрос и устанавливаем расширение.
- После установки плагина ничего не поменяется, так как плагин не русифицирует программу, а предлагает различные варианты ее перевода. Чтобы установить русский язык, перейдем в «Preferences» -> «Languages» -> «Русский».
Вот такими несложными действиями у нас получилось установить один из тысячи плагинов. Вы можете добавлять любые расширения, которые есть в пакете Sublime.
Заключение
Сегодня мы настроили Sublime Text 3 и убедились, что в этом нет ничего сложного, так как программа адаптирована под начинающих пользователей.
Похожие вопросы
Просто подствечивает не так код или сам код не работает (стили не применяются к верстке)?
Если просто подсветка кода - не обращайте внимания, возможно что-то недоустановили (тема sublime text).
По поводу Sublime text(UNREGISTRE) - никак не влияет, можно пользоваться редактором.
Рабочий код можно здесь посмотреть, если что-то не получается (сам так делал) или в некоторых уроках есть вкладка Файлы(справа) от туда можно скачать исходный код к уроку.
Cам код не работает (стили не применяются к верстке). А остальное все работает.. хмм.. но все равно спасибо.. пойду искать ошибки мож где-т по коду..
И тут до меня дошлоооо.. у нас же в input в HTML они по-другому называются. странно.. как работало это в видеоуроке?! =)))))
в css пишите input[type="text"], input[type="password"], input[type="search"]
Там type не search_field, а name search_field
т.е. правильно так (как и в уроке):
и соответственно в css обращение только к типам text, password, search
Ой-еееееей, точно! Я отвлеклась! А вы мне сэкономили время на поиске моей ошибки! +1 вам к очарованию =))))
Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.
Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!
BracketHighliter
Настраиваем горячие клавиши
Мы привыкли использовать комбинации клавиш, чтобы скопировать, вставить или выделить весь текст. В Sublime Text можно установить свои пользовательские комбинации.
Например, нам нужно, чтобы комбинация «CTRL+C» не копировала текст, а вырезала его. Для этого необходимо перейти в «Preferences» -> «Key Bindings».
Затем в правом столбце нужно прописать нужную комбинацию клавиш и указать ей значение «cut». В конце сохранияемся комбинацией клавиш «CTRL+S».
Аналогичным образом вы можете изменять другие комбинации либо добавлять собственные.
1. Предупреждение
Лучше не встраивайте инлайновые скрипты, не мучайтесь. На момент написания ответа разработка плагина Babel — по сути, содержащего единственный специальный синтаксис для Babel, приостановлена, поддержка браузерного варианта Babel, встроенного в HTML, плохая, даже очень.
Но можете и почитать данный ответ. Он больше полезен для других во многом аналогичных случаев.
Цветовая схема
Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.
Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.
Для того что устанавливать новые цветовые схемы, плагины и прочие дополнения, мне нужно сперва установить установщик этих дополнений. Звучит сложно, но на деле все гораздо проще.
Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.
Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.
Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme
Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!
Популярные плагины для Sublime Text 3
ColorHighliter
Обрати внимание на этот код — это код цвета, но какого именно непонятно.
Читайте также: