Легкий и быстрый редактор кода Sublime Text 3. Sublime text 3 открыть в браузере

Быстрая настройка Sublime Text 3 для вёрстки сайтов

Скачать дистрибутив Sublime Text 3:   http://www.sublimetext.com/

По умолчанию Sublime Text — выглядит печально 😥

Поэтому установим все необходимые плагины.

Настроим  Package Control

Нажимаем:  Ctrl + Shift + P

На MAC другое сочетание клавиш, возможно  Cmd + Shift + P

Жмем  Enter  и устанавливаем  Package Control

Package Control необходим для того, что бы можно было устанавливать необходимые пакеты и плагины для  Sublime Text

После установки   Package Control — установим все необходимые плагины.

Emmit — нужен для того, что бы максимально быстро писать  html и  css  код ;

Установим Emmit

Нажимаем:  Ctrl + Shift + P

Имеем список доступных пакетов (серый список)

И судя по сообщению — установка  Emmet  завершена!

Следующий плагин который установим:  AutoFileName

— Он нужен, что бы максимально быстро прописывать пути  до файлов.

Для установки нажимаем: Нажимаем:  Ctrl + Shift + P

И в появившемся списке пакетов — набираем в строке:  AutoFileName

Следующий плагин который установим: Gist

Гисты — это кусочки кода, которые хранятся на gist.github.com.

Причем эти кусочки кода можно прямо из Sublimetex — извлечь с gist.github.com.

Для установки нажимаем: Нажимаем:   Ctrl + Shift + P

Установили Gist!

Рекомендуется посмотреть видео по настройке Gist

СЛЕДУЮЩИЙ ПЛАГИН: SASS

Важно!

НЕ ЗАБЫВАЕМ УСТАНОВИТЬ    Gulp sass   в   Terminal 

Командой:     npm i gulp-sass --save-dev  

    Да ХРЕН ТАМ! — НЕ БУДЕТ РАБОТАТЬ!    

Еще необходимо доставить еще пакет:

Скрина нет) Так как уже поставил — а 2 раза установщик не показывает.

Теперь установим Внешнее оформление Sublime Text

     Начали:     

и  2 варианта  цветовых оформления на выбор:

Далее переходим собственно к настройке Sublime Text 3

Отrроется файл настроек Sublime Text3

Правим настройки прям в этом же файле и нажимаем  Ctrl + S 

Ссылка на статью с настройками Sublime Text

Однако, при простом копировании настроек из статьи по ссылке — может возникать ошибка — МОл, не может найти тему One Dark!

Проблема решилась — выбором нашей темы   «One Dark..» 

напрямую через меню Sublime Text3:

    Порядок! Продолжаем настройку :   

Включить отображение непечатных символов:

нужно добавить строку в пользовательский файл настроек Sublime Text → Preferences → Settings — User.

Допишем код ЧЕРЕЗ ЗАПЯТУЮ в наш файл настроек:

   "draw_white_space": "all"    //Показать все символы  

Меню выключили — но можно его оперативно включать.

Выполняем стандартную установку в   Sublime Text 3   через комбинацию клавиш    Cmd + Shift + P 

1) Ставим:   Theme — One Dark 

2) Ставим:    One Dark — Color Scheme 

Но потом, скорее всего произойдет сбой ТЕМЫ!

Что бы это исправить — идем как на картинке:

SumbLime Text  ->   Preferences  ->    Color Scheme... 

   И вуаля! Тема One Dark у нас встала!

Далее — откроем настройки клавиатуры:

Preferences →  Key Bindings   (Сочетания клавиш)

Далее переходим к Гисту:

GitHub Gist

Ссылка на статью с настройками Sublime Text

и вставляем ее сюда — в правую вкладку:

{ "keys": ["alt+shift+f"], "command": "reindent" },

Далее — откроем настройки клавиатуры Sublime Text3 на MAC:

Preferences   →    Key Bindings    (Сочетания клавиш)

В открывшееся правое окно (документ)  —  вставляем строчку (см. инструкцию Windows):

   И вуаля — все работает!  

А точнее — выполняется Выравнивание строк кода!

Важно, обязательно оставить квадратные скобки — иначе ошибка будет и не будет работать.

    Выравнивание на MAC — РАБОТАЕТ!  

Далее настраиваем:

и откроется папка   Packages 

Эта папка нужна для быстрого переноса настроек — на другое рабочее место.

Просто копируем все содержимое этой папки  Packages 

Или же можно сохранить только отдельные настройки из папки   User 

Включение боковой панели  Sidebar 

Можно приступать к работе по верстке сайтов!

И пропишем строку в конец файла,

ВАЖНО поставить ЗАПЯТУЮ после предыдущего параметра:

       Изменить шрифт в Sublime Text 3     

Пропишем нужный нам шрифт:

     "font_face": "Courier New",   

Установим еще дополнение для быстрого просмотра цвета:

Вызовем установщик:       Ctrl + Shift + P  

    ГОТОВО!  

Можно настроить — с какой стороны подсвечивать квадратик.

Включить «Черную (Темную)» тему для   «Side Bar» 

И выбрать:

    Настройка переносов длинных строк:  

tumbleron.ru

Быстрая настройка 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 файлах.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

• One Dark Color Scheme - цветовая схема для подсветки кода;
• One Dark Material - Theme - тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

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

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

На Github Gist лежит мой пресет настроек, который я всегда использую для стартовой настройки редактора 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 на клавиатуре.

На этом всё. Спасибо за внимание, друзья и приятной работы! :-)

Премиум уроки от WebDesign Master:

webdesign-master.ru

Легкий и быстрый редактор кода Sublime Text 3

В своей работе, программисты пользуются разными редакторами кода, такими как PHPStorm от JetBrains, Eclipse и другими “тяжелыми” IDE, но для разработки можно использовать и более “легкие” решения, например, Atom или Sublime Text 3. О последнем редакторе кода сегодня пойдет речь в данной статье, и вы узнаете чем хорош Sublime Text 3.

В чем преимущества редактора Sublime Text 3

Мы выделили несколько полезных качеств редактора кода Sublime Text 3:

1) Скорость и низкие требования к ресурсам компьютера.

Редактор действительно быстро работает даже на “слабом” железе.

2) Работа в популярных операционных системах

Вы можете запустить редактор кода Sublime Text 3 в операционных системах Windows, Linux и Mac OS.

3) Сторонние плагины и дополнения

Если вас не устраивают базовые возможности Sublime Text, вы можете установить различные дополнения, начиная от красивых тем оформления, заканчивая удобными инструментами, например, Emmet.

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

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

После того, как ваш редактор установится, он сразу же готов к работе.

А чтобы расширять возможности редактора, вам понадобится плагин Package Control. С помощью плагина Package Control вы можете устанавливать и управлять дополнениями для Sublime Text, поэтому имеет смысл его установить сразу.

Как установить Package Control?

Устанавливается Package Control не совсем обычно, но достаточно просто:

1. Перейдите по ссылке https://packagecontrol.io/installation и скопируйте из таба SUBLIME TEXT 3 код. Этот код с сайта package control нужно скопировать целиком.
2. После того, как скопировали код, перейдите в редактор Sublime Text 3 и выберите View > Show Console, и внизу редактора появится поле, куда нужно вставить скопированный код, и нажмите на Enter.

Если вы все сделали правильно, вы увидите, процесс установки Package Control. Затем вы увидите сообщение о том, что требуется перезагрузить Sublime Text 3 для вступления в силу изменений, нажмите ОК, закройте Sublime Text 3, а затем откройте вновь.

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

Как сменить тему оформления в Sublime Text

Для установки новой темы оформления spacegray, перейдите в Preferences - Package Control и в открывшемся окне напечатайте install package, и из выпадающего списка выберите данный пункт. Затем в открывшемся окне, напечатайте spacegray и выберите Monokai - Spacegray.

После того как тема установится, вы можете выбрать новую тему в Preference - Theme. 

Как установить плагин Emmet в Sublime Text

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

Например базовую HTML5-разметку вы можете создать сочетанием клавиш ! + tab. Удобно правда? 

Для установки Emmet перейдите в Preferences - Package Control и в открывшемся окне напечатайте install package, затем введите слово emmet и выберите его для запуска процесса установки. Иногда требуется перезагрузка Sublime Text 3 после установки новых дополнений.

Важно: плагин Emmet в Sublime Text 3 не будет генерировать код, если вы ранее не сохранили файл, например, как index.html 

Более подробную работу с Emmet и горячие клавиши мы рассматриваем в курсе HTML/CSS и других курсах Профессия веб-программист. Пройдя данные курсы, вы получите знания основ программирования и создадите на практике свой первый профессиональный сайт о кино. 

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

Выводы

В данной статье мы рассмотрели редактор кода Sublime Text, а также несколько полезных инструментов для работы с ним. Если вы ищите полезные инструменты для веб-разработчиков, ознакомьтесь со статьей, и вы узнаете, как браузер Google Chrome поможет вам в разработке программного обеспечения.

fructcode.com

sublime text 3 настройка

Рассмотрим настройку sublime text 3 для frontend разработки.

Для начала скачаем программу с официального сайта.

Далее запускаем установщик.

После запускаем программу и приступаем к настройке.

Содержание статьи

Первым делам добавляем пакеты.

Нажимаем ctrl+shift+p откроется табличка пишем слово install и выбираем пункт Install Package.

Установка emmet

Вторым делом устанавливаем emmet.

Это плагин, который позволяет ускорить разработку верстки сайта.

Зажимаем ctrl+shift+p заходим в install packege и прописываем emmet, плагин появится ниже устанавливаем.

Продолжаем настройку sublime text 3.

Создаем на рабочем столе файл index.html и открываем его с помощью sublime text.

Пишем восклицательный знак, нажимаем клавишу tab.

Мы увидим, что отработает плагин emmet и появится структура нового документа.

Увеличим шрифт, путем зажатия shift+колесеко мышки.

Создадим div. Пишем .div и tab.

Внутри дива пишем ul>li*5, нажимаем клавишу tab получается структура.

Если у нас собьются в строках li или div, то чтобы их выравнять нажмем горячую клавишу функции reindent.

Клавишу зададим в пункте меню preferebces — key bind

{ "keys": ["ctrl+shift+f"], "command": "reindent" },

Пробуем выравнять.

Следующий пакет это AutoFileName.

Этот пакет в sublime text позволит быстро прописать путь до файлов.

При вводе путя быдет высвечиваться подсказка с выбором папки или файла.

Установим sass.

Без плагина sass не будет работать emmet в файлах sass.

Основная работа будет с препроцессором sass.

Установим внешнее оформление для sublime text.

1. Установим OneDarkMaterial-Theme это тема.
2. Установим цветовую схему OneDarkColor-Schema.

Настройка sublime text

Для рабочего места используем заранее созданную конфигурацию.

Открываем Preferences – Settings.

Откроется окно настроек программы.

Копируем код внизу и вставляем в правую часть экрана, сохраняем.

{ "auto_complete": true, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 12, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_panel": true, "material_theme_compact_sidebar": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "show_definitions": false, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false" }

• auto_complete: true, лучше использовать поначалу включенным, это свойство помогает дополнять код в процессе верстки.
• bold_folder_labels: true эта настройка делаем папки побольше когда они помещены сбоку программы.
• fold_buttons: false отключаем кнопки раскрытия и закрытия кода.
• Чтобы подсветить всю строку используем highlight_line: true.
• За расстояния между строками отвечает свойство line_padding_bottom: 2.
• tab_size: 2 размер табов в коде.
• Чтобы строки, которые уходят за границы не переносились на новые выставим word_wrap: false.

Отключаем миникрату сбоку view – hideminimap.

Чтобы убрать или вытащить верхнее меню в sublime text нажимаем клавишу Alt.

sdelatlending.ru

Смотрите также

• 
  Как откатить браузер до предыдущей версии
• 
  Удалить time to read из браузера
• 
  Добавить игру в стим через браузер
• 
  Невидимка на вк на яндекс браузер
• 
  Браузер с экономией трафика на андроид
• 
  В браузере яндекс не работает одноклассники
• 
  Как удалить временные файлы из браузера
• 
  Как удалить историю браузера на айфоне
• 
  Как настроить плагин в яндекс браузере
• 
  В что можно поиграть в браузере
• 
  Как запустить плагины в яндекс браузере