Альтернатива редактору кода Sublime Text 3 с блекджеком и emmet из коробки
3 years ago | 20.8K
Всех приветствую, с вами Сергей Никонов. Очень часто новички в программировании сталкиваются с выбором редактора кода и не знают какой выбрать. В моих курсах я использую редактор кода Sublime Text 3 и PHP Storm. Каждый из этих редакторов требует дополнительные настройки.
Смотрите видео об альтернативе Sublime Text 3
Например, для того, чтобы использовать расширение Emmet для быстрой генерации HTML разметки в редакторе кода Sublime Text 3, вам потребуется установить Package Control и сам плагин Emmet.
Несмотря на то, что с выходом новых версий Sublime Text 3 упростил установку дополнений, у некоторых пользователей, в более старых операционных системах, возникают ошибки при установке package control и плагина emmet.
Если вы не хотите хотите разбираться почему возникают ошибки при установке дополнений в Sublime Text 3, вы можете воспользоваться очень хорошей альтернативой редактору кода Sublime Text 3, под названием Visual studio code от компании Microsoft.
В VS Code плагин emmet, а также другие дополнения сразу доступны после установки редактора. И что немаловажно, VS Code работает во всех популярных операционных системах, естественно в Windows, OSX и Linux. И еще один приятный бонус от Microsoft в том, что данный редактор кода бесплатный.
Ссылки из видео
Бесплатно скачать редактор кода Visual Studio Code для OSX, Windows, Linux вы можете по этой ссылке.
Интерактивный курс HTML и CSS вы можете пройти здесь.
Курс Linux и GIT вы можете найти здесь.
Поделитесь в социальных сетях
В этой статье я расскажу как сделать так, чтобы Emmet заработал в Visual Studio Code
18. 6K
24 февраля в 5 часа утра Россия вторглась в Украину. Вот уже больше месяца в этой бессмысленной войн…
17.9K
Новый курс верстки веб-сайтов HTML/CSS Advanced доступен на сайте FructCode. В этом курсе вы научите…
16.8K
В этой статье я расскажу про маркированные html-списки(Unordered Lists) и нумерованные html-списки (…
7.5K
В этой статье я расскажу про псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements): ::bef…
12.6K
В этой статье я покажу способы как задавать CSS-стили для HTML-элементов с помощью CSS-селекторов
, 23:29:57″> 1 year ago21.4K
В этой статье вы узнаете как эффективнее с помощью горячих клавиш пользоваться видеоплеером
10.8K
Курс HTML/CSS Advanced подходит как для новичков, так и для опытных верстальщиков
18.0K
В этом видео я расскажу новости о FructCode, обновлениях и о планах на 2021 год.
12.0K
Как с нуля изучить программирование и успешно трудоустроиться? Как учиться быстро и эффективно? В…
21.4K
В этом уроке я покажу как можно из стандартных ссылок Yii2 сделать Friendly URL (человекопонятные сс…
2019 г., 15:05:16″> 3 years ago
11.3K
В этом видео для начинающих, я покажу как за 10 секунд можно подключить шрифт для вашего сайта.
52.2K
В этой статье вы узнаете о важном свойстве VueJS — Computed Properties.
15.6K
В этом видео я расскажу о плюсах и минусах операционных систем Windows, MacOS и Linux.
43.8K
В этом уроке вы узнаете: — Что такое MVC — Как создать страницу в фреймворке Yii2 — Что такое кон…
17.9K
Вы узнаете: — Что такое директива V-FOR в фреймворке VueJS — Как использовать директиву V-FOR с ма…
, 16:49:52″> 3 years ago
10.1K
В этой статье я расскажу о том, что такое Webpack и как его используют в своих проектах frontend-раз…
12.0K
На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой…
16.7K
Доступны для изучения новые уроки по профессиональному редактору кода PHPStorm в курсе Linux/GIT. Уз…
Доступна новая обновленная и дополненная версия уроков курса Linux и GIT
5.6K
В этой статье вы узнаете как установить и настроить XAMPP-VM (Apache, PHP, MySQL) для операционной с. ..
25.5K
Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм…
19.8K
Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,…
12.9K
Первый язык программирования выбрать очень сложно. В этой статье вы узнаете, какой язык программиров…
110.3K
Фреймворки — это один из важных инструментов программиста. Узнать обо всех особенностях фреймворков,…
161.1K
Joomla является интересным решением для быстрого создания интернет-магазина или сайтов другой направ. ..
12.7K
Для хорошего программиста просто необходимо знание языка Javascript и умение работать с массивами. К…
17.3K
Мечты начинающего вебмастера направлены на попадание сайта в первую десятку выдачи поисковых систем….
15.7K
У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис…
16.5K
В своей работе, программисты пользуются разными редакторами кода, для разработки можно использовать…
46.4K
Каждый кандидат, который хочет получить должность программиста в крупной компании, должен ответить н. ..
12.0K
Все профессиональные веб-разработчики в процессе своей работы пользуются большим количеством различн…
14.2K
Всплывающее окно на сайте — является инструментом привлечения внимания пользователя. Такие модальные…
15.4K
Настройка веб-сервера для локального веб-сайта в Ubuntu является не простой задачей, но как это дела…
70.6K
Хостинг — это специализированный компьютер (сервер), который предоставляет пользователям возможности…
5.1K
Современная командная работа в среде программирования невозможна без системы управления версиями код. ..
16.8K
В программированию, очень часто встречается задача, когда нужно обратиться к другому сайту через HTT…
51.4K
Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с…
32.0K
В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост…
90.4K
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без пере…
206.6K
PhpStorm vs SublimeText :: Блог веб разработчика
На днях решил перейти с SublimeText2 на что-то более IDE-шное и продвинутое. Уж очень стало не хватать нормального автокомплита и банальных возможностей рефакторинга вроде переименования переменных. Выбор пал на PhpStorm.
Почему именно PhpStorm?
Aptana я уже пробовал. Не понравилась, т.к. довольно глючная (возможно сейчас ситуация изменилась, я пробовал давно). А следующим на слуху был именно шторм.
На самом деле у jetBrains все среды разработки построены на базе одной единственной IDEA. Можно поставить ее и расширить нужными плагинами. Но. Стоит она в два раза больше, а использовать в одной IDE разные языки (например, PHP и Java) я уж точно не буду, это извращение. Поэтому проще поставить уже заточенную под веб PhpStorm. На самом деле есть еще одна веб-IDE: WebStorm. Но она работает исключительно с HTML/CSS/JS. А PhpStorm по сути ее полный клон плюс плагины для PHP.
В чем прелесть перед SublimeText?
Конечно, саблайм — редактор, а PhpStorm — IDE, тут не поспоришь. Поэтому отличия довольно стандартные для IDE, но в данном случае я точно могу сказать, что работает PhpStorm быстро, не стопоря систему.
- Автокомплит всего и вся. Даже учитывая, что PHP полностью динамичен подсказки по PHPDoc работают быстро и безошибочно.
- Отличная интеграция с Symfony2.
- Адекватный анализатор кода. Подскажет где у вас есть неиспользуемые переменные, лишние use классов и пр. Работает довольно шустро.
- Удобная работа с Git. Визуальные commit, push, pull, diff. И все это мышкой для ленивых.
- Встроенная консоль, в том числе SSH.
- Отжирает на 100-200Мб больше SublimeText, что по сути очень мало для IDE.
- Шустрый интерфейс, даже учитывая, что я только что «слез» с саблайма, а PhpStorm написан на Java.
- Единственная полноценная IDE в которой мне удобно делать небольшие правки на чужих проектах по FTP. При этом выкачивать весь проект не обязательно.
- Синхронизация всех настроек между компьютерами: IntelliJ Configuration Server Plugin
- Множество полезных фич, которых просто не может быть в SublimeText
Недостатки?
- Время запуска увеличилось с пары секунд до, примерно, секунд двадцати.
- Нет возможности в пределах одного проекта примаппить несколько FTP серверов в разные папки. (На самом деле есть, но жутко извращенная и неудобная).
- Нет мультикурсора. (Уже есть в PhpStorm 8 EAP)
- Нет поддержки 100500 форматов из коробки. Да, в шторме вы сможете нормально редактировать только веб-проекты. Хотя мне это не особо мешает.
- Нет бесконечного триала. PhpStorm стоит 99$ на одного человека. При этом персональную лицензию можно использовать на работе.
- Не удобное переключение между проектами. Решается с помощью плагина.
PhpStorm. Как нормально работать с FTP
После SublimeText и плагина SFTP наверняка захочется чего-то подобного. И PhpStorm единственная IDE в которой мне удобно работать с FTP. Не верьте статьям, где расписано в 100500 шагов «Как настроить FTP в PhpStorm», это все бред, на самом деле это очень просто.
Для начала создаем новый пустой проект. Вот прям совсем пустой.
Заходим в настройки проекта: File -> Settings (Ctrl + Alt + S). И выбираем раздел Deployment, нажимаем зеленый плюсик для добавления FTP соединения. Вводим параметры соединения (хост, логин, пароль и т.п.). В Root path нужно прописать корень проекта, так будет удобнее. Так же правее плюса добавления жмем Use as default. Примерно так:
На вкладке Mappings в поле Deployment path on server ‘temp’ ставим просто один слеш (/).
На этом настройка FTP закончена. Нажимаем OK и диалог с настройками закрывается.
Наводим мышкой в левый нижний угол IDE и в появившемся меню выбираем Remote Host. Вот и наш удаленный ФТП.
Теперь все так же как в SublimeText, смотрим файлы, жмем правой кнопкой и скачиваем нужное. Конечно при таком подходе автодополнение, как и 90% функций IDE, работать не будет, но для одноразовой мелкой правки этого хватит.
Выгрузка при сохранении и проверка удаленного файла как в SublimeText
В PhpStorm, да и во всей IDEA, нет понятия сохранения файла. Все сохраняется налету при каждом нажатии и, само собой, никуда не выгружается при каждом нажатии.
Чтобы сделать выгрузку файла на FTP по нажатию Ctrl+S нужно зайти в настройки проекта (Ctrl + Alt + S), в раздел Deployment -> Options. И установить следующие настройки:
- Upload changed file automatically to the default server: On explicit save action (Ctrl + S).
- Warn when uploading over newer file: Compare timestamp & size.
- И поставить галочку Notify about remote changes.
Теперь файлы будут выгружаться на FTP по нажатию Ctrl + S, а так же будет показано предупреждение, если ваша локальная копия не совпадает с удаленной, а вы пытаетесь ее редактировать.
Отдельно стоит рассмотреть удаление файлов. Если вы удалили файл из проекта, то на FTP он останется. Для того чтобы на FTP файл так же удалился нужно открыть любой другой файл и просто нажать Ctrl + S. Звучит странно, но при этом отлично работает, нужно только привыкнуть.
Выгрузка закоммиченных в Git файлов
Довольно полезная фича. При коммите в Git можно автоматически выгрузить все изменения на FTP. Выгружаются новые файлы, перемещения файлов и удаления файлов.
Однако только при коммите. Ни до, ни после, ни потом такой возможности не будет. К сожалению даже при checkout я не нашел способа сделать выгрузку. Хотя для этого есть git-ftp.
Настройка моего Sublime Text для PHP. Я использую Sublime Text для… | Эндрю Дэвис | Bytesized Code
Я использую Sublime Text для написания кода на PHP уже несколько месяцев и за это время накопил несколько полезных плагинов и настроек редактора. Я не видел много недавних статей о настройке Sublime Text, особенно для PHP, поэтому я хочу поделиться тем, как работает моя настройка и что было для меня наиболее полезным для продуктивного написания кода.
Настройки
Sublime Text имеет область настроек, где вы можете настроить макет редактора с помощью JSON. Вот мои любимые настройки:
{
«font_face»: «Fira Code Retina»,
«font_size»: 14,
«line_padding_bottom»: 2,
«line_padding_top»: 2,
«highlight_line»: 14
«bold_folder_labels»: true, «
правители”: [80, 120],
“tab_size”: 4,
“translate_tabs_to_spaces”: true,
“trim_trailing_white_space”: true,
“ensure_newline_at_eof_on_save”: true
}
Я следую руководству по стилю PSR-2, предоставленному PHP-FIG, поэтому некоторые из этих настроек очень помогли в поддержании этого стиля. правителей Параметр показывает вертикальную линию в редакторе в качестве ориентира для длины линии. PSR-2 устанавливает предпочтительное ограничение на 80 символов и мягкое ограничение на 120, поэтому я показываю вертикальную черту на обеих длинах, чтобы знать, когда я превышаю ограничение. Настройки вкладки гарантируют, что я всегда использую вкладку с четырьмя пробелами для отступа (да, я предпочитаю пробелы табуляции). Часто я забываю добавить пустую строку в конец файла, поэтому настройка sure_newline_at_eof_on_save сделает это за вас автоматически. Если вам интересно, пустая последняя строка предназначена для того, чтобы git diffs не отображался для добавления символа возврата в строку выше, когда вы начинаете добавлять код в файл.
Одним из моих любимых удобных параметров является параметр highlight_line . Это заставит Sublime выделить строку, на которой находится курсор, что позволит легко найти, где вы печатаете. Наконец, я использую Fira Code в качестве шрифта. Это действительно хороший шрифт с лигатурами. Sublime Text теперь поддерживает лигатуры шрифтов, что делает ваш код действительно чистым.
Плагины
Существует так много плагинов для Sublime Text, что бывает сложно найти хорошие и полезные. В произвольном порядке, вот список всех тех, которые я считаю наиболее полезными.
- All Autocomplete
- Babel
- BracketHighlighter
- DocBlockr
- Git
- GitGutter
- PHP Companion
- PHP Getters and Setters
- Vintageous
- A File Icon
- Sublime Linter
- Sublime Linter PHP
Sublime PHP Companion добавляет несколько полезных команд для разработки PHP. В частности, мне очень нравится команда Find Use
, которая автоматически добавит используйте оператор
в верхней части вашего файла для имени класса под вашим курсором. DocBlockr автоматически сгенерирует блоки документов для ваших методов PHP, что значительно упростит документирование. Vintageous добавляет привязки клавиш vim (один из моих любимых плагинов). GitGutter покажет вам добавленные и измененные строки на боковой панели, что позволит легко найти новый код, который вы написали. Плагин Babel добавляет подсветку синтаксиса ES6 и JSX. All Autocomplete добавит записи автозаполнения для всех открытых файлов, упрощая обращение к методам для классов, которые вы пишете.
Тема
В общий выпуск Sublime Text 3 команда добавила новую тему под названием Adaptive , которая автоматически настраивает внешний вид боковой панели и панели вкладок в соответствии с выбранной цветовой схемой. Две мои любимые цветовые схемы — Dracula и Solarized Dark (по умолчанию). В прошлом я использовал тему Boxy, но с тех пор она устарела в пользу более новой темы.
Вот как теперь выглядит моя установка с темой Дракулы.Если у вас есть любимые плагины или настройки Sublime Text, сообщите мне об этом в комментариях. Я всегда ищу дополнительные функции, чтобы попробовать.
Вот список нескольких сообщений в блогах, которые помогли мне создать эту настройку:
- Sublime Text (3) для разработчиков PHP | MattStauffer.com
- https://wesbos.com/sublime-text-5-visual-tweaks/
- Как настроить Sublime Text для стандартов PSR | Упрощенная разработка
Удачного кодирования!
Byteconf React — бесплатная конференция React/JavaScript, транслируемая на Twitch . Присоединяйтесь к нам 31 августа 2018 г., чтобы услышать мнение лучших разработчиков и преподавателей React со всего мира. Присоединяйтесь к нашему списку рассылки и следите за нами в Twitter, чтобы оставаться в курсе!
Пакеты Sublime Text 3 для базовой разработки PHP | Drupart
В Sublime Text 3 есть замечательные пакеты для всего и вся, и в этом блоге я напишу о пакетах, которые делают меня счастливым при использовании для веб-разработки. Итак, начнем!
Package ControlПрежде всего, нам нужно установить Package Control для установки других пакетов. Чтобы установить управление пакетами, мы открываем палитру команд, чтобы открыть ее, перейдите в Инструменты-> Палитра команд или с помощью сочетания клавиш Shift+Ctrl+P в Linux.
Вот картинка:
теперь мы можем устанавливать другие пакеты с Package Control. Вы можете искать и устанавливать другие пакеты по имени, открыв палитру команд и набрав Install Package, а затем просто введите имя пакета, который хотите установить. Также мы можем просматривать пакеты на https://packagecontrol.io, и вы можете читать документацию, использование и настройку пакетов.
PHPFMTПервым пакетом, который я устанавливаю после управления пакетами, является phpfmt. Этот пакет является обязательным для разработчиков php. С PHPFMT вы можете отформатировать свой код при сохранении файла, чтобы установить пакеты с помощью управления пакетами, нажмите Shift + Ctrl + P, чтобы открыть командную палитру, и введите «установить», затем введите имя пакета, который вы можете установить, в нашем случае это phpfmt.
Прежде чем мы сможем использовать этот пакет, мы должны указать путь к бинарному файлу php. Откройте настройки конфигурации Preferences->Package Settings->phpfmt->Settings — User. Внимание! никогда не изменять Settin_gs — файл по умолчанию, так как изменения будут потеряны после обновления Sublime.
Укажите в php_bin расположение двоичного файла php и не забудьте установить
format_on_save в значение true, и тогда вы можете забыть обо всем этом, так как
автоматически отформатирует ваш php-код.
SublimeLinter
SublimeLinter PHP (и его необходимая зависимость, SublimeLinter) полагаются на встроенный линтер PHP. Это более простая версия, которая запускает только линтер и больше ничего. Это проверка ошибок в вашем php-коде. Установите его так же, как вы установили phpfmt.
GitGutter
GitGutter показывает git diff на Sublime. изменено или удалено, обновлено?
SideBarEnhancementsSideBarEnhancements, как следует из названия, расширяет боковую панель возвышенного.
SFTPОтличный пакет, позволяющий очень удобно использовать SFTP, FTP и FTPS. Он поддерживает удаленный просмотр папок, редактирование и синхронизацию между локальными и удаленными файлами. Также регулярная загрузка, загрузка, сохранение или открытие файла.
jsPrettierЭтот пакет не для php, но я использую его при работе с файлами javascript. Этот пакет, как и phpfmt, форматирует код javascript. Перед использованием этого пакета мы должны установить prettier depency install с помощью этой команды
. npm install -g prettier
Затем установите пакет jsPrettier и откройте файл настроек, как мы открыли на phpfmt. Как пример конфига:
{ "отладка": ложь, "prettier_cli_path": "/home/tasqyn/.asdf/installs/nodejs/9.2.0/.npm/bin/красивее", "node_path": "/home/tasqyn/.asdf/shims/node", "auto_format_on_save": правда, "auto_format_on_save_excludes": ["*/node_modules/*"], "allow_inline_formatting": правда, "пользовательские_файлы_расширения": [], "max_file_size_limit": -1, "дополнительные_cli_args": {}, "красивее_опции": { "ширина печати": 100, "одинарная цитата": ложь, "trailingComma": "нет", "bracketSpacing": правда, "jsxBracketSameLine": ложь, "парсер": "вавилон", "полу": правда, "requirePragma": ложь, "прозаВрап": правда } }
prettier_cli_path — путь к красивше.