И вторая программа — знаменитейший, бесплатный, легендарный notepad++. Не хотел его использовать до последнего. Какой-то он совсем консервативный с угнетающим внешним видом. Зато бесплатный, способный дать фору многим своим конкурентам.
Теперь я использую Sublime Text 3. Перешел на него с третьего раза — трудно было отвыкать от привычных программ. Не сложилось с первого раза, на втором потерялся в настройках, но понял преимущества и отложил до лучших времен. И вот он, с третьего раза заряженный и готовый к работе.
На настройку Sublime Text придется потратить немало времени. Пришлось перелопатить больше количество блогов, просмотреть видео и изучать мануалы на официальном сайте.
Основная проблема STдля вновь прибывших — это текстовая настройка. Вместо привычных кнопочек и галочек мы имеем конфигурационные файлы с настройками на языке JSON, которые, естественно, требуется заполнять вручную. Но это не страшно, посмотрите на скриншоты ниже — быстрый, красивый, нет ничего лишнего:
Быстрая настройка Sublime Text 3 для вёрстки сайтов: HTML|CSS|JS
А теперь по порядку, кратко основные особенности:
Настройка Sublime Text
Они также прописываются в конфигурационный файл на языке JSON. Имеется файл настроек по умолчанию, но его редактировать нельзя. В этом файле все переменные подписаны комментариями, но они на английском. Частично понятно, а частично нет.
Но это не беда, на официальном сайте есть мануал на русском. В свою сборку вложил свой готовый конфиг, но продублирую его здесь:
Основные настройки
Очень важно обратить внимание на третий объект — кодировка. Если изменить, будете ломать себе голову с крякозябрами вместо русских букв.
Горячие клавиши
Не стал углубляться, точнее перегружать мозг еще и хоткеями поверх основных настроек. Поэтому, когда “напортачил” в коде, пришлось как то возвращать все назад. Поменял только одну команду.
Программа очень гибкая в настройках. Кнопками можно задать все, что угодно.
Проекты
Только сейчас, изучая статьи на других блогах разобрался с этой штукой. У нас сбоку есть выдвижная панель. Кнопками вызывается с двух комбинаций: Ctrl+K и следом Ctrl+B. Отзывается аналогично.
Это быстрый доступ к файлам папок. Это не каталог и не дерево. В списке будут только те папки, которые мы выберем сами. Для этого в меню проекты нужно выбрать пункт “добавить папку”
Сбоку панель, куда я выставил файлы этого сайта. По центру вверху, нажатием Ctrl+P появляется поисковая строка по текущим проектам. Я ввел индекс и он вывел мне все индексы, которые есть в этом проекте.
Есть еще очень много особенностей, которые вы найдете через Google, т.к. мне они не интересны и я не стал углубляться в них.
Как использовать Sublime Text для Python
Статья морально устарела и у нее появилась замена тут
Источник: devarts.pro
УРОК 4. СОЗДАЁМ HTML-ДОКУМЕНТ
Создать HTML -документ в Sublime Text очень просто!
План создания файла:
- Создать папку своего первого проекта. Назовите его просто » project1 «.
- Открыть программу, хлопнув по иконке » S » на рабочем столе.
- Открыть новый файл: File =>New File .
- На первой строке прописать: . Именно так, с угловыми скобками, потому что это тэг, который сообщает браузеру, что этот файл — документ формата HTML5 .
- На второй строке прописать основной тег html-вёрстки и без пробелов сразу парный тег . Для парного тега достаточно набрать “ уточняет браузеру, что весь файл будет прописан на языке HTML .
- Сохранить будущий файл в компьютер: File =>Save As .
ВНИМАНИЕ. При сохранении:
- файл назвать латинскими буквами как можно проще, например, » index «;
- обязательно дописать к названию расширение файла » .html «, ЕСЛИ у вас при сохранении не определяется тип файла как HTML .
Пример записи файла: index.html
Теперь страница будет автоматически открываться в браузере, а также из программы.
Источник: dzen.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 будет установлен, о чем вы получите соответствующее уведомление.
Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.
Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.
Самые популярные плагины для 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 вручную, скачайте его и распакуйте в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.
Тонкая настройка редактора, пресет моих настроек
Переходим к настройкам Sublime Text.
Предтавляю мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости:
Keymap (Windows Users): [ < «keys»: [«alt+shift+f»], «command»: «reindent» >, ] Settings: < «show_definitions»: false, «auto_complete»: false, «bold_folder_labels»: true, «color_scheme»: «Packages/One Dark Material — Theme/schemes/OneDark.tmTheme», «fold_buttons»: false, «font_size»: 13, «highlight_line»: true, «indent_guide_options»: [ «draw_normal», «draw_active» ], «line_padding_bottom»: 2, «line_padding_top»: 2, «margin»: 2, «material_theme_compact_sidebar»: true, «material_theme_compact_panel»: true, «material_theme_small_statusbar»: true, «material_theme_small_tab»: true, «tab_size»: 2, «theme»: «OneDarkMaterial.sublime-theme», «word_wrap»: «false», >
Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:
Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:
Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.
Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля — левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив свое значение.
Узнать какое свойство за что отвечает довольно просто — все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
«C:Users\AppDataRoamingSublime Text 3»
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Инструменты»
- Настройка VS Code для верстки
- Simple Starter — простой стартер для верстки | Материалы урока
- Делаем вкладки в проводнике Windows. Настройка QTTabBar от А до Я
- Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
- Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
Источник: webdesign-master.ru