Альтернатива редактору кода Sublime Text 3 с блекджеком и emmet из коробки
4 years ago | 21.2K
Всех приветствую, с вами Сергей Никонов. Очень часто новички в программировании сталкиваются с выбором редактора кода и не знают какой выбрать. В моих курсах я использую редактор кода 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 вы можете найти здесь.
Поделитесь в социальных сетях
24 февраля 2023 года будет уже год как ЗСУ героически противостоит путинской оккупации. Военный прес…
, 16:19:40″> 2 months ago
3.8K
В этой статье я расскажу как сделать так, чтобы Emmet заработал в Visual Studio Code
7.4K
24 февраля в 5 часа утра Россия вторглась в Украину. Вот уже больше месяца в этой бессмысленной войн…
18.8K
Новый курс верстки веб-сайтов HTML/CSS Advanced доступен на сайте FructCode. В этом курсе вы научите…
18.5K
В этой статье я расскажу про маркированные html-списки(Unordered Lists) и нумерованные html-списки (…
10.3K
В этой статье я расскажу про псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements): ::bef.
..15.9K
В этой статье я покажу способы как задавать CSS-стили для HTML-элементов с помощью CSS-селекторов
27.4K
В этой статье вы узнаете как эффективнее с помощью горячих клавиш пользоваться видеоплеером
12.5K
Курс HTML/CSS Advanced подходит как для новичков, так и для опытных верстальщиков
19.4K
В этом видео я расскажу новости о FructCode, обновлениях и о планах на 2021 год.
13.1K
Как с нуля изучить программирование и успешно трудоустроиться? Как учиться быстро и эффективно? В.
21.9K
В этом уроке я покажу как можно из стандартных ссылок Yii2 сделать Friendly URL (человекопонятные сс…
11.9K
В этом видео для начинающих, я покажу как за 10 секунд можно подключить шрифт для вашего сайта.
59.8K
В этой статье вы узнаете о важном свойстве VueJS — Computed Properties.
16.2K
В этом видео я расскажу о плюсах и минусах операционных систем Windows, MacOS и Linux.
46.1K
В этом уроке вы узнаете: — Что такое MVC — Как создать страницу в фреймворке Yii2 — Что такое кон. ..
18.4K
Вы узнаете: — Что такое директива V-FOR в фреймворке VueJS — Как использовать директиву V-FOR с ма…
10.5K
В этой статье я расскажу о том, что такое Webpack и как его используют в своих проектах frontend-раз…
12.4K
На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой…
Доступны для изучения новые уроки по профессиональному редактору кода PHPStorm в курсе Linux/GIT. Уз…
9.4K
Доступна новая обновленная и дополненная версия уроков курса Linux и GIT
2018 г., 05:06:47″> 4 years ago
5.7K
В этой статье вы узнаете как установить и настроить XAMPP-VM (Apache, PHP, MySQL) для операционной с…
26.6K
Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм…
5.0K
Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,…
13.5K
Первый язык программирования выбрать очень сложно. В этой статье вы узнаете, какой язык программиров…
110.8K
Фреймворки — это один из важных инструментов программиста. Узнать обо всех особенностях фреймворков,. ..
169.1K
Joomla является интересным решением для быстрого создания интернет-магазина или сайтов другой направ…
13.2K
Для хорошего программиста просто необходимо знание языка Javascript и умение работать с массивами. К…
18.8K
Мечты начинающего вебмастера направлены на попадание сайта в первую десятку выдачи поисковых систем….
16.2K
У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис…
17.5K
В своей работе, программисты пользуются разными редакторами кода, для разработки можно использовать. ..
48.5K
Каждый кандидат, который хочет получить должность программиста в крупной компании, должен ответить н…
12.6K
Все профессиональные веб-разработчики в процессе своей работы пользуются большим количеством различн…
14.5K
Всплывающее окно на сайте — является инструментом привлечения внимания пользователя. Такие модальные…
16.1K
Настройка веб-сервера для локального веб-сайта в Ubuntu является не простой задачей, но как это дела…
73.1K
Хостинг — это специализированный компьютер (сервер), который предоставляет пользователям возможности.
5.4K
Современная командная работа в среде программирования невозможна без системы управления версиями код…
17.2K
В программированию, очень часто встречается задача, когда нужно обратиться к другому сайту через HTT…
52.4K
Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с…
33.2K
В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост…
94.0K
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без пере. ..
209.8K
Руководство по использованию SublimeLinter для разработчиков
ЛИНТЕР является незаменимым инструментом в современной веб-разработке. Это помогает нам контролировать ошибки и применять передовой опыт при написании кодов. Если вы используете SublimeText, я настоятельно рекомендую установить SublimeLinters. За прошедшие годы SublimeLinters превратилась в набор мощных инструментов в SublimeText и представила официальные пакеты, которые подключаются к линтерам различных языков программирования.
В этом руководстве мы увидим, как установить и настроить SublimeLinter. Давайте просто начнем.
Рекомендуемое чтение: 12 самых востребованных возвышенных текстовых советов и хитростей
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Начиная
Самый простой способ установить SublimeLinter 4 — через Управление пакетами SublimeText, С тех пор в SublimeLinter 3 каждый ЛИНТЕР должен быть установлен отдельно. Это позволяет SublimeLinter работать более эффективно, только запустив пуха что мы установили.
Поскольку я использую HTML, CSS, JS и PHP большую часть времени в своих проектах, я бы хотел установить линтеры для этих языков. В Package Control устанавливаю SublimeLinter вместе со следующими плагинами:
Затем, чтобы эти плагины работали, нам также нужно установить линтер для языков, которые HTML Tidy, CSSLint, JSHint, а также PHP CLI,
Для тех из вас, кто использует OSX, Tidy и PHP предварительно установлены в системе. Чтобы проверить, выполните следующие две команды последовательно.
опрятная версия
php — версия
Эти команды покажут вам версию Tidy и PHP, которая у вас есть. Вы можете перейти к их использованию в Sublime Text.
Если вы используете Windows или Linux или не имеете их, вы можете следовать приведенным ниже инструкциям.
Установка HTML Tidy
Чтобы установить HTML Tidy:
- В OSX выполните эту команду в Терминале brew install homebrew / dupes / tidy
- В Linux используйте эту команду sudo apt-get install tidy.
- В Windows вы можете получить установщик EXE из TidyBatchFiles,
Установка PHP CLI
Установка Styleint
Далее мы установим CSS-линтер с именем Stylelint это позволит нам проверять и применять лучшие практики в наших файлах CSS. Следующие инструкции могут выполняться на всех трех платформах: OSX, Windows и Linux. Я предполагаю, что вы уже установили Node.js с NPM,
Чтобы установить Stylelint, запустите:
npm install -g stylelint
Обратите внимание, что вам также нужно будет добавить файл конфигурации Stylelint в каталог вашего проекта, дополнительно установите предопределенную конфигурацию, например stylelint-конфигурации стандарта, Как только они настроены, вы должны найти ошибки, выделенные, как показано ниже.
Установка ESLint
Мы также собираемся установить ESLint, современный и настраиваемый линтер для JavaScript. Это поможет нам применять лучшие практики, а также выявлять потенциальные ошибки при написании JavaScript. Для установки ESLint также требуется Node. js с NPM.
Чтобы установить его, запустите.
npm install -g eslint
Точно так же вам нужно будет добавить конфигурацию ESLint к вашему проекту, или используйте предопределенную конфигурацию, такую как eslint-конфиг-рекомендуется,
У нас все готово. Мы можем начать пыление HTML, CSS, JS и PHP в SublimeText с использованием SublimeLinter 4.
Новые функции в SublimeLinter 4
В SublimeLinter 4 добавлено несколько новых функций, и одной из наиболее заметных является панель, отображающая все ошибки открытых файлов. Если вы находитесь в Mac, нажмите Command + Ctrl + A. В Windows и Linux вы можете нажать Ctrl + K, Ctrl + A.
Горячая клавиша покажет список ошибок, как показано на следующем снимке экрана.
Используйте ↑ и ↓ для перемещения по списку, и страница перейдет к точной строке, где произошла ошибка.
Лучше визуальный
Теперь мы можем навести курсор на желоб в редакторе или просто на строку, где произошла ошибка, чтобы просмотреть сообщение об ошибке. Это было невозможно в предыдущей версии.
Сильно настраиваемый
SublimeLinter 4 теперь более настраиваемый, чем когда-либо прежде. Например, теперь мы можем настраивать «стили» для каждой конфигурации линтера. Это позволяет нам устанавливать значки, цвет, режим пуха, переменные и переменные окружения для каждого линтера отдельно.
Дальнейшая ссылка
Я надеюсь, что это краткое введение поможет начать работу с SublimeLinter. Вы также можете обратиться к этой ссылке, если вы хотите больше продвинутых вещей.
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Настройка моего Sublime Text для PHP. Я использую Sublime Text для… | Эндрю Дэвис | Bytesized Code
Опубликовано в
·
3 мин чтения
·
5 июня 2018 г.
Я использую 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_ этикетки ”: true,
“rulers”: [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 9005 0
- PHP Getters and Setters
- Vintageous
- Значок файла
- Sublime Linter
- Sublime Linter PHP
Sublime PHP Companion добавляет несколько полезных команд для разработки PHP. В частности, мне очень нравится команда Find Use
, которая автоматически добавит оператор 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 | Упрощенная разработка
Удачного кодирования!
Использование Sublime Text в качестве полнофункциональной PHP IDE
Интегрированная среда разработки, или сокращенно IDE, является одним из наиболее важных инструментов разработчика. Большинство из них имеют пламенные мнения о том, какой из них лучше. Из-за этого велись войны. Самая известная из них — вечная война, длящаяся десятилетиями, между пользователями vim и emacs.
В сообществе PHP PhpStorm очень популярен, и не без причины. Люди почти думают, что вы сумасшедший, когда вы используете что-то еще в качестве PHP-разработчика. Я не думаю, что это оправдано.
Я давно пользуюсь Sublime Text (сокращенно: ST). Это восходит к тому времени, когда я все еще разрабатывал Perl, и с тех пор я придерживался его. Мне очень нравится редактор, и благодаря множеству доступных плагинов он может сравниться по функциональности с PhpStorm. Кроме того, ST намного быстрее и менее требователен к ресурсам, и он полностью независим от языка. У создателей PhpStorm есть разные версии для других языков, например, PyCharm для Python или IntelliJ IDEA для Java. А если серьезно, кто захочет использовать разные IDE для каждого языка?
ST имеет очень минималистичный интерфейс, без наворотов. Мне это нравится: никакого обилия окон и панелей, а просто голый костяк редактора, с не более чем боковой панелью для папок и файлов, и консолью для уведомлений и диагностики, которая исчезает при нажатии на ESC
. И если этот интерфейс все еще слишком переполнен для вас, есть режим без отвлечения внимания.
ST почти полностью можно использовать только с клавиатурой. Все команды быстро доступны с помощью аккуратных палитра команд , нажав Ctrl-Shift-P
. Просто введите часть (или несколько случайных букв) имени команды, и вы быстро найдете то, что ищете,
То же самое касается файловой палитры, доступной через ctrl-p
. Вы сможете быстро найти любой файл в вашем проекте. Другие редакторы скопировали эту функциональность, но (насколько мне известно) ST был первым.
То, без чего я больше не хотел бы жить: мультикурсор. Это также то, что было скопировано другими. Например, вы можете выбрать фрагмент текста, который встречается в вашем файле несколько раз, и нажать 9. 0077 ctrl-d для выбора следующих вхождений с дополнительным курсором. Таким образом, вы можете выполнять редактирование в нескольких местах одновременно.
Мне нравится командная строка. Вот почему мне нравится, что есть инструмент командной строки, subl
. С его помощью вы сможете быстро открыть файл или целую папку. Также возможно запустить любую команду редактора прямо из командной строки.
Стандартная установка ST довольно проста. Это дает вам только редактор. Тем не менее, это отличный редактор, который поддерживает подсветку синтаксиса и другие функции, такие как список символов и (ограниченные) функции автоматического предложения, что отличает его от других редакторов. Но ST действительно будет блистать плагинами.
Все плагины можно найти в Package Control. Их можно установить непосредственно из ST с помощью плагина с тем же именем, используя палитру команд.
Здесь я продемонстрирую некоторые плагины, которые я считаю важными, особенно для PHP-разработчиков, в более или менее случайном порядке. Это не обширный список.
LSP¶
Начнем с плагина, который превращает ST в полноценную IDE: LSP, сокращение от Language Server Protocol. Первоначально разработан Microsoft для VS Code. В настоящее время это открытый стандарт, поддерживаемый многими редакторами/IDE, такими как VS Code, но также и Atom, всеми продуктами Jetbrains, а также ST.
LSP обеспечивает интеллектуальный анализ кода, предоставляя контекстно-зависимые рекомендации по коду, расширенный анализ кода, «определение перехода», «поиск ссылок» и интеллектуальные инструменты рефакторинга, такие как переименование классов, функций и переменных в рамках всего проекта. Существуют реализации LSP почти для каждого языка. LSP — это действительно бомба и абсолютный must have для любого разработчика. Это делает вашу жизнь намного проще.
- https://github.com/sublimelsp/LSP
- https://lsp.sublimetext.io/
LSP-intelefense¶
Это реализация LSP для PHP. Есть и другие реализации, но это лучшая. Поверьте, я пробовал их все. Это та же реализация, что и в VS Code. У Intelephense есть полнофункциональная бесплатная версия, а также платная версия за единовременную плату всего в 15 долларов США. Это даст вам лицензионный ключ, открывающий некоторые очень полезные функции Premium . Определенно стоит своих денег.
- https://intelefense.com/
- https://github.com/sublimelsp/LSP-интелефенсе
LSP-json¶
Json может показаться форматом, не требующим чего-то вроде LSP. Но не забывайте, что json может быть основан на схеме, которая поддерживается LSP-json. Очень полезно, если вы редактируете что-то вроде JSON-файлов OpenAPI.
Но самое главное: все конфигурации ST полностью основаны на json, и LSP-json действительно может в этом помочь. Он предоставляет вам полезную обратную связь и умные предложения для всех настроек при редактировании файлов json. На мой взгляд, этот плагин должен быть частью ST по умолчанию, так как без него настройки сложно редактировать.
- https://github.com/sublimelsp/LSP-json
Другие реализации LSP¶
Поддерживаются многие другие языки. Например: LSP-typescript, LSP-css или, если вы используете Tailwind: LSP-tailwindcss. Полный список см. в разделе Управление пакетами.
В некоторых реализациях LSP еще нет подключаемого модуля ST, например Perl::LanguageServer. Вы можете использовать их и в ST, но вам нужно будет настроить их вручную в настройках LSP.
Дополнительные модули PHP¶
DocPHPManualer¶
Никогда больше не открывайте браузер, чтобы перейти на сайт документации PHP. Просто получите доступ ко всей документации прямо из ST!
- https://github.com/garveen/docphp
Laravel Blade Highlighter¶
Подсветка синтаксиса для блейд-файлов Laravel.
- https://github.com/Medalink/laravel-лезвие
Laravel Docs¶
Не более чем несколько удобных ярлыков для документации Laravel, но я часто ими пользуюсь.
- https://github.com/austenc/sublime-laravel-docs
phpcs¶
Это оболочка для нескольких инструментов анализа кода: PHP codeniffer (phpcs), PHP linter по умолчанию (использующий php -l
) и детектор путаницы PHP (phpmd). Кроме того, вы можете использовать этот плагин для форматирования файлов PHP с помощью php-cs-fixer или phpcbf. Это можно сделать вручную или автоматически при каждом сохранении файла.
- https://benmatselby.dev/sublime-phpcs/
phpactor¶
Phpactor (произносится как: factor ) — мощный инструмент для анализа и рефакторинга кода для PHP. Существует реализация LSP и реализация RPC, которые можно использовать в ST. Мне меньше нравится реализация LSP, чем Intelephense, но реализация RPC — очень полезное дополнение к вашему набору инструментов. Phpactor предлагает такие функции, как:
автоматическое обнаружение и исправление пространства имен и имени класса
автоматический импорт классов
масштабное переименование классов проекта
генерация/завершение функции конструктора на основе свойств класса
генерация заглушек на основе контрактов/интерфейсов
https://github. com/tkotosz/sublime-phpactor-plugin
SublimeTextXdebug¶
Как следует из названия, это клиент для xdebug, среды отладки PHP.
- https://github.com/martomo/SublimeTextXdebug
Другие плагины¶
BracketHighlighter¶
Каждый разработчик сталкивался с тем, что квадратные или круглые скобки не совпадают. По умолчанию вы получите визуальную обратную связь в ST о расположении открывающей или закрывающей скобки. Но это не всегда дает достаточно информации. BracketHighlighter делает это лучше и проще. Этот плагин также работает с html-тегами и даже с пользовательскими пользовательскими тегами.
- https://facelessuser.github.io/BracketHighlighter/
EditorConfig¶
Необходим, если вы работаете в команде со стандартом кодирования. Этот подключаемый модуль поддерживает директивы, определенные в файле .editorconfig
, см. https://editorconfig.org/.
- https://github. com/sindresorhus/editorconfig-возвышенный
SublimeLinter¶
Это фреймворк линтинга, другими словами: проверка синтаксиса вашего кода. Менее мощный, чем LSP, но, тем не менее, полезный. Плагин — это просто фреймворк, вам нужно будет установить линтеры для всех языков, которые вы используете. Например, SublimeLinter-csslint. Полный список см. в разделе Управление пакетами.
- http://www.sublimelinter.com/en/stable/
Base Encoder¶
Плагин для преобразования текста из/в base64, base32 и base16.
- https://github.com/euphwes/базовый кодировщик
URLEncode¶
Подобно предыдущему, этот плагин будет кодировать/декодировать URL для выбранного текста.
- https://github.com/btoews/URLEncode
Rainbow CSV¶
Если вы работаете с CSV-файлами, но не хотите каждый раз запускать приложение для работы с электронными таблицами, то Rainbow CSV может вам подойти. Он заботится о разных цветах для каждого столбца и показывает всплывающее окно с именем столбца при наведении мыши. Доступны даже SQL-подобные функции запросов.
- https://github.com/mechatroner/sublime_rainbow_csv
SyncSettings¶
Настройка установки ST так, как вам нравится, может занять некоторое время. Вы не хотите повторять этот процесс каждый раз, когда выполняете переустановку или установку на другом компьютере. SyncSettings позаботится об этом. Он сохранит все ваши настройки конфигурации в личном Github. При новой установке вам нужен только URL-адрес этой сущности, и все настройки будут синхронизированы автоматически.
- https://www.mfuentesg.dev/SyncSettings/
Альтернативным подключаемым модулем является PackageSync. Это позволит вам загрузить свои настройки в виде zip-файла, который можно синхронизировать с помощью чего-то вроде Dropbox или Nextcloud.
lessTabs¶
В больших проектах может оказаться много открытых файлов. Этот плагин снизит его до управляемого числа. При нажатии ctrl-alt-c
(настраивается) самые старые, немодифицированные вкладки будут закрыты.