Sublime text 3 плагины php: Топ 75 Sublime Text 3 плагинов 2020

Leave a Comment / Разное / By /

Содержание

node.js — Консоль Sublime Text 3

В обзоре могут содержаться субъективные суждения, основанные на опыте работы с плагинами для Sublime Text.

Протестировано на

Вообще в Sublime Text по моему вероятностному суждению примерно треть плагинов совсем не работают после установки. Но расписанные в обзоре лично у меня функционируют, что доказывается скринкастами.

По причине того, что использую Windows, не рассмотрены такие решения, как Tint и fish-shell. Если не упомянул что-то ещё, можете добавить.

Терминология

В данном обзоре встроенная консоль Windows называется «консолью» или «внешней консолью» в зависимости от контекста. Согласно автору программы ConEmu называть её cmd.exe не совсем корректно:

В Windows есть встроенный терминал (или “консольное окно”) которое часто ошибочно называют “cmd.exe”. Нажмите Win+R и запустите, например, “powershell.exe”. Среди запущенных процессов не будет “cmd.

exe”. В разных версиях Windows консольное окно создают разные процессы, в актуальных – это “conhost.exe”.

  Не ‘cmd.exe’, а просто ‘консоль’!

1. SublimePTY

Страница плагина. Разработка давно прекращена.

Для Sublime Text пишут плагины, облегчающие запуск только отдельных команд только для определённых инструментов программирования. Например, команды Git проще запускать с помощью плагинов Git, SideBar Git и Easygit (Не загружайте Easygit через Package Control, он не будет работать! Установите плагин вручную по ссылке). Так как в вопросе указана метка Node.js, приведу в пример плагин npm.

1. npm

Плагин, благодаря которому можно запускать

многие команды npm — пакетного менеджера Node.js.

1. Демонстрация

2.

Недостатки
  • Баги. Не запускается ряд команд.

Общая оценка

Все решения хорошие, пользуюсь ими, но полностью внешние терминалы они не заменяют.

1. Glue

1. Оценка

Использую иногда.

2. Демонстрация

3. Установка и настройка

Скачиваем плагин через Package Control →

  • В открытом файле проекта Ctrl+Shift+P → Glue - Launch.
  • Или же кликаете правой кнопкой мыши по папке в сайдбаре, в выпадающем меню выбираете Open Glue Terminal.

Откроется quick panel, куда следует вводить команды:

Появится файл terminal.glue. Без него никак, если мешает, можете добавить расширение glue в .gitignore, .hgignore или другой файл, который используется для игнорирования директорий/файлов в Вашей системе контроля версий.

Чтобы в выводе была хоть какая-то подсветка, скачиваем плагин PowerShell → настраиваем для расширения glue синтаксис PowerShell.

4. Достоинства

  • Не нужно выходить из Sublime Text, чтобы запускать команды,
  • Достаточно многофункциональный плагин,
  • Удобнее осуществлять навигацию по output, если тот большой, во вкладке, нежели в консоли.

5. Недостатки

  • Разработка прекращена, шанс, что ответят на Ваш багрепорт, минимален,
  • А багов, которые не воспроизводятся в других терминалах, достаточно. Так, не рекомендовал бы пушить изменения Git через Glue.
  • Лимиты. Cash в Glue не запустишь.

6. Дополнительные ссылки

2. SublimeREPL

Позволяет запускать REPL консоль для многих языков программирования во вкладке Sublime Text. В примере этого ответа написано, как настроить SublimeREPL для PowerShell.

1. Оценка

Пользуюсь часто, но иногда вынужден прибегать к другим терминалам.

2. Демонстрация

3. Установка и настройка

Помимо самого SublimeREPL устанавливаем также плагины Suricate и PowerShell для настройки команды SublimeREPL и подсветки синтаксиса соответственно. Инструкция по настройке команд в Suricate.

Ctrl+Shift+P → SublimeREPL: PowerShell → если у Вас русская версия операционной системы, может вылезти всплывающее окно с примерно следующей ошибкой:

error: UnicodeDecodeError('utf-8', b'C:\\Users\\\x8a\xae\xe2', 9, 10, 'invalid start byte')

В таком случае перейдите в файл Default.suricate-profile (как — см. инструкцию

, всё, что в ней есть, я буду опускать в данном ответе) → и вставьте следующий json-массив. Не путайтесь в JSON-синтаксисе, следите за правильной расстановкой кавычек, скобок и запятых.

// SublimeREPL PowerShell
"sublime_repl_powershell": {
    "caption": "SublimeREPL: PowerShell",
    "keys": ["super+alt+p"],
    "call": "sublime.repl_open",
    "args": {
        "type": "powershell",
        "encoding": "utf8",
        "cmd": ["powershell", "-"],
        "cwd": "$file_path",
        "external_id": "powershell",
        "syntax": "Packages/PowerShell/Support/PowerShellSyntax. tmLanguage"
    }
},

4. Параметры аргументов

  • type — тип. Означает, что во вкладке запустится консоль PowerShell, а не какая-либо другая вроде Python или Node.
  • encoding — кодировка.
  • cmd — запускаем PowerShell в консоли Windows.
  • cwd — указываем системную переменную. $file_path означает, что SublimeREPL PowerShell запустится в папке файла, находясь в котором мы запустили SublimeREPL PowerShell.
  • external_id —
    • Во-первых, данным параметром определяется, как будет называться вкладка с PowerShell. Если оставить параметру пустое значение, "external_id": "", то во вкладке будет указан полный путь к файлу powershell.exe:
      Мы назвали вкладку powershell, но можно по-любому. Если подставите значение sashatriumph, ничего не должно поломаться:
    • Во-вторых, значение параметра external_id является именем файла, где хранится история команд, когда-либо вводимых Вами в SublimeREPL PowerShell. Файл c расширением .db располагается по пути
      Packages/User/.SublimeREPLHistory      .
  • syntax — относительный путь к файлу синтаксиса для подсветки вкладки SublimeREPL PowerShell, начиная с Packages.

5. Достоинства

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

6. Недостатки

  • Кодировки. Если приходится работать не только с английскими символами, ещё замучаетесь бороться с багами.
  • Разработка прекращена, шанс, что ответят на Ваш багрепорт, минимален,
  • Не всё, что работает в PowerShell, работает в SublimeREPL PowerShell. Например, Cash в Glue не запустишь. SublimeREPL PowerShell не получится заменить терминал полноценно.

7. Дополнительная ссылка

3. Terminality

В примере показан вывод для Python, но можно использовать как консоль и для других языков программирования, включая отсутствующие по умолчанию в плагине.

1. Оценка

Использую для обучения Python и PHP.

2. Демонстрация

3. Установка и настройка

Загружаем плагин через Package Control → открываем файл hangman.py, вывод из которого собираемся осуществить, → Ctrl+Shift+P → Terminality: Browse Commands... → Run hangman.py — <sub><sup>Run hangman.py as Python 2.7 document</sup></sub> → видим результат в новой вкладке, включая время, потраченное на компиляцию, в сантисекундах. Обратите внимание, что пунктом меню Run hangman.py as Python3 запускается команда python3, при выборе Run hangman.py — команда python. Даже когда у Вас установлен Python 3, а не Python 2, если исполняемый файл Python называется

python. exe, а не python3.exe, выбирайте Run hangman.py — <sub><sup>Run hangman.py as Python 2.7 document</sup></sub>.

4. Достоинства

  • Не нужно выходить из Sublime Text, чтобы запускать команды,
  • Удобнее осуществлять навигацию по output, если тот большой, во вкладке, нежели в консоли.
  • Активно поддерживается разработчиками.

5. Недостатки

6. Дополнительные ссылки

Достоинства и недостатки относятся уже к вызываемым в Sublime Text терминалам, а не самому Sublime Text.

1. Консоль/GNOME Terminal

1. Установка и настройка

Устанавливаем плагин Suricate. Ctrl+Shift+P → Suricate: Open Terminal Here... → откроется новое окно с консолью для Windows и GNOME Terminal для Linux соответственно в директории с тем файлом, который был у Вас открыт, когда запускали терминал.

2. Параметры и их значения

Как выглядит конфигурационный файл Suricate:

// Open terminal. 
"open_terminal_here":
{
  "call":         "Suricate.lib.process.spawn",
  "caption":      "Open Terminal Here...",
  "flags":        "Windows|Linux",
  "args.windows": {"cmd": ["start", "cmd.exe"], "working_dir": "${file_path}"},
  "args.linux":   {"cmd": ["gnome-terminal"], "working_dir": "${file_path}"},
},

(В оригинальном массиве также есть параметры/значения "group": "launch", |IsFile, "context_menu": true, каковые я опустил в силу того, что считаю их излишними.)

  • flags — параметр, при помощи которого можно задать различные аргументы для операционных систем или систем управления версиями.
  • args.windows и args.linux — параметры запуска терминалов Windows и Linux.

Дополнительная ссылка

2. Запуск любого предпочтительного терминала

Для примера возьмём, как запустить Git Bash из Sublime Text.

1. Установка и настройка

Устанавливаем плагин Suricate → в файл Default. suricate-profile добавляем следующий код:

//  Запустить Git Bash
"git-bash": {
    "call": "Suricate.lib.process.spawn",
    "args.windows": {
        "cmd": ["C:\\Program Files\\Git\\git-bash.exe"],
        "working_dir": "${file_path}"
    },
    "caption": "Git Bash",
    "keys": ["<c>+super+keypad3"],
},

Ctrl+Shift+P → Suricate: Git Bash → должен открыться Git Bash в директории с тем файлом, который был у Вас открыт, когда запускали Git Bash из Sublime Text.

2. Дополнительная ссылка

3. Плагин Terminal

1. Описание

Кроссплатформенный плагин, позволяющий открывать из Sublime Text любой терминал, который лично Вы считаете наиболее предпочтительным. В Windows по умолчанию запускается PowerShell. После установки плагина доступны 3 варианта запуска:

  • Из command palette,
  • Из контекстного меню сайдбара,
  • Шорткатом. Многим пользователям не нравится, что задействуется сочетание, по умолчанию используемое для переоткрытия последней закрытой вкладки, можете перезаписать шорткат в файле пользовательского кеймапа.

Вызываются две команды:

  • open_terminal — открывает терминал в папке, где лежит файл, вкладка с которым была открыта, когда запускали терминал.
  • open_terminal_project_folder — возможно, работает некорректно. Актуальное поведение:
    • Если Вы запустили команду, из файла, который находится в верхней папке Вашего сайдбара или её подпапках, терминал запустится в этой верхней папке. Например, мой сайдбар:

      Когда я запускаю open_terminal_project_folder, например, из файла E:\Киролайна\SashaFolder\SashaFile.txt, терминал откроется в E:\Киролайна.
    • Но когда Вы запускаете команду из файла, не имеющего отношения к верхней папке Вашего сайдбара — в моём случае E:\Киролайна, — поведение команды open_terminal_project_folder аналогично поведению open_terminal.

2. Настройка

Вы можете указывать параметры запуска Вашего терминала. Положим, хотите всегда запускать консольный эмулятор cmder только из директории E:\SashaSublime.

Для упрощения работы с настройками Sublime Text скачиваем плагин Preferences Editor. Ctrl+Shift+P → Edit Preferences: Edit Settings... → Terminal → terminal → в открывшуюся quick panel вставляете путь к исполняемому файлу cmder.exe вместе с именем файла, например, E:\Chocolatey\tools\cmder\Cmder.exe → Enter. Далее Ctrl+Shift+P → Edit Preferences: Edit Settings... → Terminal → parameters → между квадратными скобками вставляем "/START", "E:\\SashaSublime" → Enter. Обратите внимание, что если значения заключены в [квадратные скобки], необходимо экранировать слэши: E:\Chocolatey\tools\cmder\Cmder.exe, но E:\\SashaSublime.

Теперь после запуска любой из команд — open_terminal либо open_terminal_project_folder должен открыться Cmder. exe в папке E:\SashaSublime.

Также предусмотрена возможность одним шорткатом запускать один терминал со своими параметрами, вторым хоткеем запускать другой терминал с другими параметрами и т. д. Читаем здесь.

3. Дополнительные ссылки

4. ConEmu

Для лучшей, по мнению пользователей англоязычного Stack Overflow, консоли для Windows есть свой плагин. См. также плагин для Cmder — немного изменённого ConEmu.

1. Описание

По умолчанию осуществляется запуск PowerShell в оболочке ConEmu. Как и в плагине Terminal, ConEmu можно запустить из command palette, контекстного меню сайдбара или шорткатом.

  • open_conemu_here — открывает ConEmu в папке, где лежит файл, вкладка с которым была открыта, когда запускали ConEmu.
  • open_conemu_project — возможно, работает некорректно. Всегда открывает ConEmu в верхней папке сайдбара, в моём случае (см. п. 3.3) это E:\Киролайна.

2. Недостатки

  • Разработчик перешёл на MacOS, плагин больше не поддерживается.
  • Баги. я пофиксил, что нашёл, но далеко не факт, что их больше не осталось.

3. Дополнительные ссылки

1. Console Exec

1. Оценка

Пользуюсь вместо дефолтных Build System.

2. Описание

Плагин выводит результаты Build System во внешнюю консоль, а не встроенную Sublime Text. Это может понадобиться по ряду причин.

  • Если после вывода требуется вводить что-то ещё в консоль , — дефолтным механизмом Build System без дополнительных надстроек не обойтись. Установив же Console Exec и добавив в файл Build System всего одну дополнительную строку, Вы можете и дальше вводить команды.
  • Если пользуетесь плагином Build Next, когда в выводе нет ошибок, встроенная панель Build System автоматически закрывается. [ ]*File \»(…*?)\», line ([0-9]*)», «selector»: «source.python», «target»: «console_exec» }

    Как создавать и настроить автоматический выбор Build System, подробно рассмотрено по дополнительным ссылкам.

    Во вкладке со скриптом на Python Ctrl+Shift+P → Build With: SashaPythonExec → смотрим результат.

    5. Дополнительные ссылки

    2. Send to Shell

    В Sublime Text существуют плагины, отправляющие во внешний терминал выделенный или скопированный текст, как SendText и SendREPL. Тот же принцип действия у плагина Send to Shell, отправляющего скопированный текст в IPython — интерактивную оболочку для Python, составляющую Jupyter.

    1. Демонстрация

    2. Установка

    Как настроить плагин для отправки скопированного текста на ConEmu в режиме PowerShell.

    • Скачиваем и устанавливаем последнюю версию Python, если Python ещё не установлен в системе.
    • Устанавливаем Jupyter, проще всего, запустив в терминале команду pip install jupyter.
    • Устанавливаем через Package Control PyWin32 — набор расширений Python для доступа ко многим функциям Windows API.
    • Устанавливаем через Package Control плагин Preferences Editor для упрощения работы с файлами настроек Sublime Text.
    • Устанавливаем через Package Control плагин Send to Shell.

    3. Настройка

    Задаём системную переменную PATH, указав в качестве значения путь к файлу ConEmu.exe, для меня это C:\Program Files\ConEmu.

    Запускаем ConEmu → Super+Alt+P → Startup → задаём параметру Specifed named task значение {Shells::PowerShell}:

    В Sublime Text 3 Ctrl+Shift+P → Edit Preferences: Edit <kbd>Settings... → SendToShell → powershell_startup → в открывшееся поле вместо powershell вписываем conemu. Ctrl+Shift+P → Edit Preferences: Edit Settings... → SendToShell → window_title → в открывшееся поле вместо Windows PowerShell вписываем заголовок вкладки ConEmu: у меня это powershell (Admin).

    Опционально предлагаю установить плагин CopyOnSelect, — пусть по первому времени он вызвать неудобства, — копирующий в буфер обмена выделенный текст. Задержка между выделением текста и его копированием в данном плагине составляет секунду, и автор не рекомендует её сильно уменьшать из-за возможных проблем с работой Clipboard-менеджеров.

    Настройка окончена. Выделяем кусок скрипта на Python для отправки в ConEmu → копируем его (а с плагином CopyOnSelect достаточно только выделить) → запускаем команду sendtoshell {"how": "paste_selection"}, — по умолчанию сочетанием клавиш Ctrl+Shift+Enter, — в ConEmu пишем команду ipython, а затем %paste. Можно было, конечно, написать плагин так, чтобы пользователь совершал поменьше действий.

    4. Недостатки

    5. Дополнительные ссылки

    Если описанные в обзоре плагины не удовлетворяют Вашим задачам, помимо обычного поиска в Google порекомендовал бы осуществить поиск примерно по следующим ключевым словам и меткам на сайте Package Control:

    Как сделать вывод результатов компиляции PHP в новую вкладку Sublime Text?

    Установка

    Обязательно

    • PHP. Если Вы пользуетесь Chocolatey, запустите в терминале команду cinst php -y.
    • Terminality. Плагин, с помощью которого решается данный вопрос.

    Опционально

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

    • Preferences Editor,
    • Keymap Redefiner. (WARNING! Плагин удаляет комментарии из файла .sublime-keymap . Если они вам нужны, не пользуйтесь данным плагином.) Увы, но другого решения, чтобы не лезть в кеймап вручную, похоже, нет.

    Настройка Terminality для PHP

    Ctrl+Shift+P → Edit Preferences: Edit Settings... → Terminality → execution_units → вставляем такой код:

    {"source.php": {"run": {"command": "php $file"}}}

    → Enter.

    Параметры

    command: php $file — запуск компилирования для файла в открытой вкладке.
    source.php — область видимости для синтаксиса PHP в Sublime Text.

    Назначение горячих клавиш

    Если у Вас, как у меня, дефолтное сочетание Ctrl+Alt+P забито другим плагином, поменяйте его. Ctrl+Shift+P → Keymap Redefiner: Define Keymap → Terminality Ctrl+Alt+R (в Windows; есть ещё Ctrl+Alt+Shift+R для запуска команды с аргументами) → меняем хоткей на свободный. Чтобы хоткей наверняка не был ничем занят, биндим клавишу цифровой клавиатуры, например, super+keypad_multiply. keypad_multiply — клавиша * над девяткой в Numpad. Жмём Enter.

    Результат

    Создаём любой файл с расширением php → пишем «Hello World» или любой другой простой код → сохраняем файл → запускаем команду Terminality шорткатом, который мы только что задали. Должно получиться вот так.

    Как и в стандартном для Sublime Text выводе через output console указывается время, потраченное на компиляцию, но уже в Title Bar и вкладке, в сантисекундах.

    Для ознакомления с прочими возможностями и настройками Terminality читайте README.MD в репозитории данного плагина на GitHub.

    Полезные плагины для Sublime Text 3. Как установит плагин?

    Плагин для Sublime Text 3, это важная деталь для редактора. Они значительно улучшают читаемость кода и его быстроту набора. Я подобрал для вас самые необходимые плагины, как для начинающих, так и для опытных программистов.

    Недавно я размещал запись, в которой рассказывал о редакторах кода. Какой выбрать и чем они отличаются. Сам я пользуюсь редактором Sublime Text 3. Он мне нравится за простой, не отвлекающий, дизайн, малую нагрузки на систему и возможность быстрого набора кода.

    Быстрый набор кода, изменения цвета кода в зависимости от языка — это всё доступно благодаря специальным плагинам.

    Сегодня я хотел вам показать вам плагины которыми пользуюсь я. Они не обязательны для установи, но их присутствие значительно облегчит вам жизнь.

    Как их установить, написано в конце.

    1)Плагин Emmet

    Emmet, конечно же является самой удобной частью редактирования в Sublime Text. После нажатия на табуляцию Emmet преобразует простые сокращения в объемные фрагменты кода для HTML и CSS. Это всё просто и имеет огромную пользу для скорости набора кода.

    Здесь вы можете увидеть на что способен этот плагин:

    2)Плагин AllAutocomplete

    Этот плагин содержит в себе библиотеки значений многих языков. Здесь собраны теги, функции, события, свойства и многое другое. Работу плагины вы можете увидеть на данном изображение.

    3)Плагин AutoFileName

    Автозаполнение путей к подключаемым файлам — очень удобно. Без лишних слов.

    4)Плагин Colorcoder
    Изменяет цвет кода, тем самым значительно упрощая ориентацию в коде. Особенно полезно для разработчиков с дислексией.

    Как установить плагины?

    1)Необходимо установить сам Sublime Text 3. Редактор можно скачать с официального сайта, так как он является бесплатным. После скачивания проходим простую установку и запускаем программу.

    2)Нажав на клавиши Ctrl+Shift+P, откроется поисковое окно. В данном поисковом окне мы пишем Install Package.

    3)Ждём пока появится новое окно. В новом окне мы пишем названия выбранных плагинов и выбрав, активируем их. Некоторые плагины требуют перезагрузки редактора.

    Если есть у кого то вопросы, задавайте их в комментариях, а так же делитесь плагинами, которыми вы сами пользуетесь.

    Практикуйте свой HTML — http://prog-time.ru/html/

    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.

    from 0 to 1

    Установка и настройка Sublime text 3. Самые полезные плагины для верстки и не только.

    Приветствую вас, друзья, на моём блоге по веб-разработке, наконец-то неслучайные случайности привели меня к началу работы над данным проектом. И первое, о чем я хочу вам поведать — это установка и настройка самых полезных плагинов для работы верстальщика в программе Sublime Text.

    И так начнем с того, что перейдем на официальный сайт саблайм текст и скачаем его:

    https://www.sublimetext.com/3

    Также по этому материалу у меня есть соответствующий видос на ютубе:

    Спасибо саблайму за то, что на данном этапе он нам поможет определиться, какую сборку нужно скачать, она будет выделена маркером.

    Также, Вы можете скачать себе портативную версию, которую будет удобно держать на флешке и всегда быть во все оружие.

    Далее приступаем к установке, и она ничем не отличается от установки обычной программы. После установки рекомендую перенести себе саблайм на панель задач, мне кажется удачным решением хранить самые часто используемые задачи на этой панели, для быстрого доступа к ним.

    По окончанию установки, мы уже можем пользоваться саблаймом, но на мой взгляд он еще достаточно сыроват, и его нужно проапгрейдить определенными плагинами. Для того, чтобы у саблайма была возможность устанавливать их, необходимо провести некую работу, а именно связать его с менеджером управления пакетами Package Control.

    Нам необходимо на сайте пекедж контрола

    https://packagecontrol.io/installation#st3

    скопировать определенную строчку кода для Sublime Text 3:

    После чего в программе саблайм текст вызываем консоль, с помощью комбинации: Ctrl + ~. Вставляем в появившуюся строчку весь код и жмем Enter.

    Отлично! Через некоторое время наш пакет установится. Теперь мы готовы приступить к установке первого своего плагина, он называется:

    1. Advanced New File

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

    Первое, что вы должны запомнить, это то как вызывать сам менеджер, который мы только что установили, для этого на клавиатуре нужно нажать хоткей:

    Ctrl+Shift+P

    После этого у нас появиться определенная панель в которую нужно вписать аббревиатуру PIP это сокращение обозначает Package Control: Install Package

    Зачем писать больше, если можно писать меньше=) Выбираем данный пункт и переходим в меню, где можно уже непосредственно выбирать любой из плагинов. Прописываем здесь Advanced New File, кликаем на нем, после установки саблайм может выдать соответствующее сообщение.

    Давай обучимся работе с этим плагином! Для этого нам нужно открыть сайтбар в саблайме view->side bar->show side bar Далее создадим у себя на компьютере папку «Тест» и простым перетаскиванием помещаем ее в сайтбар.

    Если у вас уже есть какие-то папки, в сайдбаре важно, чтобы наша папка «тест» была самой верхней, после нажатия комбинации ctrl+alt+n внизу появиться поле, в котором можно прописывать путь, и тем самым создавать папки и файлы.

    обратите внимание на путь, который находится ниже под строкой, именно по этому пути и будет происходить создание файлов и папок.

    Давайте создадим базовую структуру. Написав index.html и нажав enter , я создал данный файл, а прописав css/style.css, создаться и папка css и сам файл стилей.

    Как видите данный плагин нам здорово упростит жизнь.

    Следующий плагин самый основной, без него код мы будем писать явно дольше, он называется Emmet.

    2. Emmet

    Для его устаноки повторим процедуру: ctrl+shift+p вибираем Package Control: Install Package, и в появившемся окне пишем Emmet.

    Вуаля! Он установился. Закрываем сообщение, проверить его работу можно открыв файл index.html прописать в нем «!» и нажать кнопку таб.

    У нас должна развернуться базовая структура, важно, она при «!» знаке будет разворачиваться только в файлах .html

    Больше возможностей Emmet вы можете узнать из моей следующей статьи.

    Следующий плагин который я хочу упомянуть называется BracketHighlighter.

    3. BracketHighlighter

    Он нам необходим для того, чтобы более явно подчеркивать места открытия и закрытия тегов, устанавливается он также, только в последнем пункте мы будем писать уже его имя.

    Вот, что было до его установки:

    а вот, что получили:

    Как видно, его мы установили не зря 😉

    Дальше пойдет речь о плагинах, которые облегчат работу с CSS и это:

    4.Сolorhighlighter

    5. Goto-CSS-Declaration

    Устанавливаем их по очереди. Плагин colorhighlighter даст определенную подсветку цвета, это явно поможет быстрее ориентироваться в вопросах, касающихся цветовой палитры. Вот как будет выглядеть ваш css после его установки:

    Каждый цвет будет подчеркиваться линией, а когда мы поставим курсор, то закраситься вся область.

    Плагин Goto-CSS-Declaration поможет нам быстро в потоке css кода находить нужный селектор. Все что потребуется — это в html поставить курсор внутри необходимого класса или айдишника и нажать windows+alt+. или нажать на нем правую кнопку мыши и выбрать пункт Goto-CSS-Declaration. Сразу после этого действия у нас выделиться необходимый селектор в css.

    И последний плагин который мы сегодня рассмотрим, это возможность подсветки синтаксиса SASS, в общем там нет особой сложности, но есть маленькое замечание, давайте разберемся…

    6. SASS

    Устанавливаем плагин SASS. После сообщения об установке наш код будет выглядить примерно вот таким образом:

    То есть мы его установили, но он не активировался. Для его активации нужно в нижнем правом углу кликнуть на название — то, которое в данный момент видит саблайм. У меня это Plain Text, у вас это может быть Ruby или SASS.

    Далее выбрать open all with current extension as…

    В выпадающем списке проскролить вниз и выбрать пункт sass. Вы увидите возле него галочку, но в этом месте важно слишком рано не сдаваться и кликнуть еще раз:

    После этого наш плагин заработает, и подсветка станет корректной.

    На этом все друзья, если хотите и дальше получать от меня массу полезной информации — подписывайтесь на меня в соц. сетях.

    Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

    Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

    Если вы собираетесь установить SublimeText3 то эта самая полная инструкция  для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

    Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

     

    Часть 1. Установка и настройка Sublime Text 3

    Скачиваем и устанавливаем Sublime Text 3

    Идем на сайт Sublime Text в раздел Download, и скачиваем последнюю версию ST3, не забудьте соблюсти разрядность 64 бит, или обычную (x86) для вашей версии операционной системы. Скачали, устанавливаем. После установки запускаем — проверяем что он работает.

     

    Установим горячие клавиши для реиндентации

    Открываем Preferences → Key Bindings — Default
    И вверху файла добавляем строку:

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

    Здесь указано что горячие клавиши будут alt+shift+f, и по нажатию будет происходить команда реиндент.

    Возможные проблемы  с настройками в Sublime Text

    Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences → Key Bindings — Default можно редактировать.

    Есть аналогичная проблема с командой Preferences → Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.

     

    Устанавливаем Package Control

    Идем на сайт Package Control для ST3, и устанавливаем его. Package Control (PC) необходим для того чтобы расширять функциональность нашего редактора различными плагинами.

    На сайте PC копируем код для ST3, в ST3 запускаем консоль (Ctrl + ~) и вставляем код с сайта, жмем Enter и ждем успешной установки. После обязательно перезапускам ST3.

    Проверим работу PC. Жмем Ctrl+Shift+P и  набираем Package Control — Install Package. Уже набрав первые буквы — нужная строка будет автоматически подсвечена.

     

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

     

    Часть 2. Установка плагинов и расширений для Sublime Text 3

    Установка темы Material Design

    Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

    Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

    Sublime Text 3 — Package Control — установка темы Material Design

     

    После этого иду в меню Preferences, и выбираю установленную тему.

    Sublime Text 3 — Package Control — установка темы Material Design

     

    Также после этого, рекомендуется зайти в  настройки ST3, и дописать следующие конфиги:

    "theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
// On retina Mac
"font_options": [ "gray_antialias" ],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// Highlight active indent
"indent_guide_options": [ "draw_normal", "draw_active" ]

    Это позволит отображать тему так как это было задумано ее создателями.
    В итоге у меня получился вот такой внешний вид ST3.

    Sublime Text 3 — тема Material Design

     

    Установка плагинов

    Я установил следующие основные плагины:

    • Emmet (ускорение написания html и css)
    • Hayaku (ускорение написания css)
    • LESS (syntax highlighting — подсветка кода less)
    • Prefixr (префиксы для CSS)
    • Placeholders (Lorem Ipsum наполнители для html файлов)

    Дополнительные:

    • SFTP — плагин для работы с FTP
    • SideBarEnhancement расширяет возможность сайт бара
    • SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
    • AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
    • BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
    • jQuery набор сниппетов для jquery
    • AutoFileName автозаполнение путей к подключаемым файлам
    • CSSсomb делает код красивым
    • Gist сохранение отдельных участков кода на github прямо во время редактирования

     

    Компиляция LESS кода. Плагин Less2CSS и его настройка

    Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt, Guard, и Less.app. Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

    1. Устанавливаем Node.js
    2. Устанавливаем NPM (устанавливается вместе с Node.js)
    3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
    4. Установим плагин Less2Css и SublimeOnSaveBuild

    Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

    "lesscCommand": "/usr/local/share/npm/bin/lessc"

    Откроем любой .less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

    Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

    npm install -g less-plugin-clean-css

    Опять пробуем сохранить .less файл. Произошел билд less файла, и рядом с style.less файлом у меня появился готовый минифицированный style.css

     

    Компиляция SASS в Sublime Text 3

    SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

    • Устанавливаем Ruby
    • Запускаем консоль, и ставим Ruby Gem gem install sass
    • Устанавливаем плагин Sass для Sublime Text
    • Устанавливаем плагин Sass Build для Sublime Text
    • Устанавливаем плагин SublimeOnSave для Sublime Text
      (мы же говорили о этом плагине в инструкции выше)

    Теперь добавим настройки в Sublime Text Settings – Default:

    {
  "filename_filter": ".(sass|scss)$",
  "build_on_save": 1
}

    Также не забудьте при открытом .sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении .sass файла будет компилироваться .css.

     

    Устанавливаем и настраиваем html препроцессор Jade

    Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

    • Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
    • Заходим в консоль и устанавливаем jade командой npm install jade --global
    • В Sublime Text устанавливаем плагин Jade Build
    • В Sublime Text открываем .jade файл и выбираем Jade build system
    • Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так "filename_filter": ".(sass|scss|jade)$",
    • Устанавливаем в Sublime плагин Jade

    После этих манипуляций происходит компилирование jade файлов.

    Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

     

    Статьи по теме:

    https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-1
    https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-2
    http://mutian.github.io/Sublime-Jade-Build/
    http://webdesign-master.ru/blog/tools/525.html

    Редакторы кода для PHP разработчиков: что лучше выбрать

    Выбор редактора кода, интегрированной среды разработки (сокращенно IDE от англ. Integrated Development Environment), чрезвычайно важен как для профессиональных программистов, так и тех, кто только начинает свой путь в этом деле.

    Конкретного списка минимальных требований к программам такого рода нет. Теоретически программировать на PHP, как и других языках, можно в простом блокноте, что входит в стандартный набор Windows. Однако, это крайности. Минимальный функционал, который должен поддерживать софт:

    • проверка написанного кода на соответствие синтаксису,
    • возможности его коррекции,
    • подсветка синтаксиса,
    • автодополнения и автозавершения – так называемый code intelligence.

    Использовать редактор следует по той причине, что любое современное приложение для WEB представляет собой целую связку языков и скриптов, которые программист «собирает» комбинируя нужным ему образом PHP, скрипты на JavaScript, язык разметки HTML и таблицы стилей CSS.

    Далее предлагаем познакомиться с основными редакторами и IDE, поддерживаемыми ими функциями и особенностями.

    Sublime Text

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

    Для того чтобы устанавливать расширения, следует запустить программу, перейти в меню «Tools» и выбрать Package Control – этот инструмент позволяет осуществлять подключение и отключение необходимых пакетов. Для запуска установки необходимо вести команду «Install Package».

    Как работать с Sublime Text: под проектом понимает папку, в которой находятся все необходимые файлы. Указав путь к ней, вы сможете открыть все необходимые файлы, редактировать. Рекомендуется использовать расширение Syntax Checker, которое будет предупреждать о некорректном коде сообщениями во всплывающем окошке. Есть плагины, которые сразу подсвечивают неправильный код: «SublimeLinter», «SublimeLinter-php». Однако для функционирования этих плагинов, необходима установка PHP последней версии на компьютере.

    После установки этих расширений редактор будет подсвечивать строчки, в которых есть ошибки. Можно использовать встроенную помощь. Достаточно навести указатель мышки на функцию, чтобы высветились все связи, включая список ссылок и тот файл, в котором объявлялась функции. Нажав перейти к определению (Goto Definition), можно перейти к месту в коде, где была объявлена функция и определен класс.

    Если разрабатывается приложение с фреймворками и использованием OOP, то будет полезен плагин «PHPCompanion», который установит целый ряд полезных инструментов и функций для импорта классов и работы с пространством имен.

    Отладка: для возможности полноценной отладки кода следует установить плагин «Xdebug Client», при этом на сервере с установленным PHP, локальном или удаленном, должна быть возможность включать расширение XDebug.

    Базы данных и язык запросов SQL: Sublime Text имеет два основных плагина: SQLExec, SQLTools. Они очень схожи по своим настройкам и функционалу, обеспечивая возможность работы с любыми базами данных на основе SQL, включая Оракл, MySQL всех версий, MSSQL, PostgreSQL, а также Vertica и Firebird.

     FTP: Установив расширение «SFTP», вы получите возможность работы с удаленной файловой системой, например, находящейся на хостинге. Установка расширения добавит простейший интерфейс для совершения всех основных операций с файлами.

    Поддержка фреймворков: Редактор имеет базовую поддержку

    фреймворков MVC, которая представлена набором коллекций снипетов и доступом к документации с описаниями функции, онлайн справкой.

    Atom

    Atom – один из наиболее интересных проектов, который набирает все большую популярность у программистов. Его ключевыми преимуществами являются: открытый исходный код, а также невероятная гибкая возможность любых настроек. Создан с применением последних web-технологий, а дополнительные расширения для Atom можно скачивать или писать самостоятельно на JavaScript, используя фреймворк Node.js.

    Работает на любой операционной системе, а для Windows есть портативная версия, не требующая инсталляции.

    Работа с Atom: умеет работать как с отдельными файлами, так и проектами, для чего необходимо указать корневую директорию. В системе встроена базовая поддержка PHP. Если в системе установлен PHP 7.0, то редактор легко превратить в полноценный PHP IDE, при помощи дополнения «atom-ide-ui» и плагина «ide-php». В результате программа приобретает вот такой внешний вид:

    Такая сборка позволит осуществлять поиск и подсветку ошибок, даст возможность быстрой навигации, функций автодополнения и автозавершения.

    Возможность отладки: для отладки написанного нужно установить два модуля: php-debug, а также atom-debug-ui, после чего будут доступны все функции работы с XDebug.

    Базы данных и запросы SQL: Работа с базами данных, просмотр структуры таблиц и связей между ними, обеспечивается пакетом «data-atom», который обеспечивает полноценную поддержку MySQL всех версий, а также Microsoft SQL Server и PostgreSQL. Настроить необходимый функционал можно выбрав пункт Data Atom в меню Packages. Обратите внимание, что для корректной работы с базами данных в системе должен быть установлен Git.

    FTP: для подключения к серверам хостинга или иным удаленным компьютерам, следует установить пакет «ftp-remote-edit. Он обеспечит возможность совершать все стандартные операции с файлами, включая их автоматическое сохранение и выгрузку на сервер.

    Поддержка фреймворков: для работы с фреймфорками необходимо загружать и устанавливать дополнительные пакеты для каждого из них. Мультиподдержка фреймворков данном редакторе реализована средне.

    Rapid PHP

    Rapid PHP – популярный PHP редактор, имеющий расширенный функционал и вполне претендующие на простейшую IDE в базовой версии. В Rapid PHP есть весь необходимый функционал для создания веб-приложений, с использованием языка разметки HTML, таблиц стилей CSS, программирования на PHP, а также JavaScript.

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

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

    Также можно скачать и установить расширенную версию Rapid PHP, в которой есть возможность подсветки вхождений функций и переменных, вставка фрагментов, улучшена скорость и производительность. Доступен быстрый поиск по нажатию Ctrl + G, с функцией «Go to anything», позволяющий быстрый переход к любому места кода или файлу, в котором была объявлен функция или переменная.

    Возможность установки плагинов и расширений позволяет существенно расширить функционал программы. Работа с плагинами осуществляется через вызов меню «Manage Plugins».

    Работа с Rapid PHP: программа имеет полноценный функционал для написания, редактированию и отладке, включая встроенные подсказки, автоподстановку функций, встроенную систему помощи.

    Возможность отладки: отладка работает в стандартной связке с XDebug, позволяя находить некорректный и ошибочный код, отслеживать состояние переменных, в том числе глобальных, выполнять трассировку стека. Есть возможность пошаговой отладки, а также использования точек останова в скриптах.

    Базы данных и SQL запросы: в редакторе есть встроенный браузер, позволяющий полноценную работу с базами данных: просмотр и редактирование информации, структуры таблиц, их связей. Работает со всеми версиями MySQL и SQLite, а также PostgreSQL и Firebird.

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

    Поддержка фреймворков: встроена поддержка Smarty, а другие библиотеки можно подключать через пункт Frameworks вменю Options.

    CodeLobster

    CodeLobster – один из наиболее известных редакторов, который написан на языке программирования C++, имеет гибкий интерфейс и множество настроек, позволяющих работать с любыми WEB-технологиями.

    Работа с CodeLobster: по умолчанию встроен весь необходимый функционал, позволяющий работать с отдельными файлами и проектами в директориях. Программа запоминает структуру проекта и обеспечивает простую и быструю навигацию, определение и подсветку некорректных участков с ошибками. А также позволяет работать с файлами, содержащими куски кода, написанные на разных языках, например, PHP, JavaScript, HTML, которые автоматически определятся и подсвечиваются различными цветами для удобства. Для всех основных функций есть дублирующие комбинации клавиш, которые быстро запоминаются, облегчают и ускоряют работу. Встроенная справка, со всплывающими подсказками, быстрой подстановкой функций и т.д.

    Включение динамической помощи через вкладку Dynamic Help, позволит автоматически подбирать и показывать список ссылок на файлы, в которых содержатся требуемые элементы кода.

     Возможность отладки: установка расширения XDebug, а также включение соответствующей опции на сервере, позволяя производить отладку, редактирование и устранение ошибок, с моментальной проверкой результата отработки скрипта или подпрограммы.

    Базы данных и запросы SQL: имеется встроенный клиент для работы со всеми основными видами баз данных, а также возможность одновременного создания нескольких подключений, формирование запросов, их сохранение и загрузка из файлов с расширением sql.

    FTP: встроенный FTP-клиент имеет расширенным функционалом, хорошо справляясь с удаленной работой с файлами на сервере, в том числе для тех проектов, которые используют большой количество данных. Соединение по любому из существующих видов протоколов, включая шифрованные соединения.

    Поддержка фреймворков: Базовая версия CodeLobster уже имеет все необходимое для работы с большинством популярных PHP библиотек, а также систем управления контентом. Загрузка и подключение фреймворков осуществляется непосредственно из среды редактора.

    Вот так выглядит начало создания интернет-магазина с применением Magento:

    Также есть возможность работы с такими популярными CMS, как Джумла (Joomla), Друпал (Drupal), ВордПресс (WordPress). Редактор автоматически загрузит и установит последние версии любой из указных систем, в дальнейшем, при необходимости, производя обновлении.

    PHPStorm

    PHPStorm – редактор, который является популярной IDE, один из наиболее функциональных и удобных, пользующийся огромной популярностью у программистов, от новичков до профессионалов. Редактор автоматически загружает и сохраняет структуру проекта. Разработана среда на языке Java и платформы IntelliJ IDEA. Открытый исходный код позволяет производить любые настройки и доработки, необходимые разработчику. Также есть несколько тем оформления с различными цветами интерфейса и подсветки.

    Работа с PHPStorm: поддерживает работу, как с отдельными файлами, так и директориями, в которых содержится проект. Написание и редактирование кода осуществляется с возможностью использования автоподстановки и автозамены, быстрого поиска и перехода между функциями, описаниями классов, в том числе расположенными в различных исходных файлах. Также имеется система встроенной справки и контекстных подсказок, вызвать которые можно нажатием комбинации Ctrl + Q на клавиатуре.

    Отладка: осуществляется в связке с расширением XDebug, который необходимо синхронизировать с соответствующей опцией PHP на сервере. После чего станет доступен весь необходимый функционал, визуальные инструменты для отладки, сообщения об ошибках, точки останова и т.д. Также возможно настроить работу в связке с Zend Debugger.

     Базы данных SQL и базы данных: работа с базами данных настраивается через меню Database, вызываемое через Tool Windows в основном меню View. Можно работать со всеми версиями MySQL, Оракл, Microsoft SQL Server и другими популярными базами данных, просматривая структуру, таблиц, ключевые поля, связи, формируя различные SQL запросы и получая результаты их работы.

    FTP: позволяет осуществлять все основные операции на удаленном сервере посредством обычного или защищенного соединения. Доступно редактирование, автоматическая выгрузка файлов, настраиваемая через соответствующий пункт меню.

    Поддержка фреймворков: PHPStorm поддерживает абсолютное большинство стандартных движков, а также работает  с основными системами управления контентом, такими как ВордПресс (WordPress), Джумла (Joomla), Друпал (Drupal).

    Заключение

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

    Такой софт разработаны, как на основе открытых платформ, так и классических мощных языков программирования C++, на котором написан редактор CodeLobster и ряд других.

    Редакторы продолжают активно развиваться и совершенствоваться, позволяя обеспечивать программирование самых сложных скриптов и программ на PHP и других языках WEB-разработки. Скачав и установив один из разработанных редакторов, вы можете приступать к разработке своего собственного сайта, от блога до интернет-магазина, в том числе используя популярные движки и системы управления контентом. Среда редактора позволит выполнять написание и доработку любых модулей, производить их отладку и тестирование.

    Однозначного ответа о том, какой из рассмотренных редакторов является лучшим, дать нельзя. Каждый из них имеет свои преимущества и недостатки, лучше или хуже взаимодействуя с определенными базами данных, фреймворками, CMS. Кроме того, стиль оформления должен быть комфортным для программиста, а возможность настроек максимально гибкой.

    Sublime Text (3) для разработчиков PHP

    Многие люди в сообществе PHP в последнее время проверяют PHPStorm, в том числе я и большинство разработчиков, с которыми я работаю. Нам нравится интеллектуальный код, который мы получаем от PHPStorm, но нам все еще не хватает скорости, быстрой загрузки и удобства Sublime Text.

    Прежде чем я слепо предположу, что PHPStorm — единственный путь, я хотел увидеть: могу ли я вернуть то, что IDE, ориентированная на PHP, предоставляет разработчикам PHP, в Sublime Text и получить лучшее из обоих миров?

    Давайте начнем с краткого списка возможностей, которыми PHPStorm действительно выделяется для меня.Обратите внимание: есть миллион других уникальных функций, которые предлагает PHPStorm, но, честно говоря, именно крошечные небольшие удобства, которые я видел, обеспечивают наибольшее повышение эффективности.

    Также обратите внимание: мы говорим о Sublime Text 3.

    Все, что нужно от PHPStorm

    Без большинства этих замечательных функций, ориентированных на PHP, будет трудно рекомендовать использование чего-то другого, кроме PHPStorm, даже если он медленнее, дороже и использует больше памяти. Так. Можем ли мы воспроизвести их в Sublime Text?

    • Авто — использовать (импорт) классов
    • Класс FQCN для заканчивания на линии
    • Простой переход к определению символа
    • Простой конструктор для инъекций
    • Выделить неиспользованный импорт
    • Желоба Git
    • Анализ кода / проверка PSR-2
    • Завершение кода: PHP
    • Завершение кода: код проекта

    Пакетный контроль

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

    Если вы еще этого не сделали, установите Package Control сейчас.

    Если не указано иное, каждый пакет после этого должен быть установлен с помощью управления пакетами.

    Превосходный PHP-компаньон

    Пакет Sublime Text, наиболее сильно ориентированный на PHP, называется Sublime PHP Companion.

    Как и большинство пакетов, он содержит ряд действий, которые вы можете выполнить. ~~ По умолчанию они привязаны к определенным клавишам, но вы всегда можете их переназначить. ~~ Обновление: по умолчанию больше нет сопоставления клавиш.Узнайте больше о том, как настроить сопоставление клавиш PHPCompanion здесь.

    • find_use ( F10 ) — Когда ваш курсор находится над именем класса, эта команда упрощает использование (импорт) этого класса.
    • expand_fqcn ( F9 ) — То же, что и find_use , но вместо расширения класса в блоке импорта он расширяет его встроенный FQCN.
    • import_namespace ( F8 ) — добавляет пространство имен для текущего файла на основе пути к файлу.
    • goto_definition_scope ( shift + F12 ) — То же, что и собственный goto_definition Sublime Text (описанный ниже), но с ограничением области действия с учетом PHP.

    Пакет не идеален, и он явно не такой яркий, как PHPStorm, когда дело доходит до обнаружения пространств имен и анализа некоторых странных крайних случаев. Но для повседневной работы это огромный толчок в области знаний PHP-кода.

    AllAutocomplete

    Sublime PHP Companion, к сожалению, не обнюхивает ваши классы и не дает вам автозаполнение, но SublimeAllAutocomplete регистрирует имена всех символов (функций, классов и т. Д.)) в любых файлах, которые вы открыли на других вкладках, и добавьте их в реестр автозаполнения.

    Это не совсем то же самое, что полное автодополнение, зависящее от пользовательского кода, но это очень помогает.

    Cmd-щелчок для определения функции

    Sublime PHP Companion позволяет легко щелкнуть правой кнопкой мыши по функциям и перейти к их определениям, но этот ярлык возвращает CMD-click-to-определение PHPStorm. К вашему сведению, в Sublime Text CMD (или клавиша ctrl в Windows или что-то еще в других системах) называется «Super».

    Сначала создайте пользовательский файл карты мыши. Если у вас его нет, перейдите сюда:

    Linux Создайте Default (Linux) .sublime-mousemap в ~ / .config / sublime-text-3 / Packages / User

    Mac Создайте Default (OSX) .sublime-mousemap в ~ / Library / Application Support / Sublime Text 3 / Packages / User

    Окна Создайте Default (Windows) .sublime-mousemap в % appdata% \ Sublime Text 3 \ Packages \ User

    Затем поместите это в файл:

      [
    {
        "button": "button1",
        «count»: 1,
        "модификаторы": ["ctrl"],
        "press_command": "drag_select",
        "команда": "goto_definition"
    }
]

    Вы только что научили Sublime Text следующему: «когда я удерживаю ctrl и нажимаю первую кнопку, запускаю команду goto_definition .»Готово!» (Первоисточник)

    Примечание. Изначально я хотел предложить использовать модификатор super , чтобы он был похож на PHPStorm; однако это переопределило бы поведение Sublime Text «удерживать super и щелкнуть, чтобы получить несколько курсоров», поэтому я этого не сделал.

    Анализ кода и PHP_CodeSniffer

    Возвышенный PHPCS

    Существует пакет Sublime PHPCS, который включает PHP_CodeSniffer, линтер PHP, PHP Mess Detector и Scheck (?) Для работы с вашим кодом.

    Вы можете настраивать всевозможные параметры, но в первую очередь вы собираетесь запускать его каждый раз при сохранении файла (хорошо, но может раздражать) или каждый раз, когда запускаете его из палитры команд (нажмите super-shift -p , а затем вводите, пока не получите «PHP Code Sniffer: Sniff this file») или сочетание клавиш (по умолчанию ctrl-super-shift-s ).

    Вы получите желобки и список всех мест, где ваш код не удовлетворяет линтеру.

    Обратите внимание, что этот и любые другие пакеты, которые полагаются на сниффинг и анализ кода, потребуют установки приложений командной строки, поэтому обязательно посетите их сайты и прочтите их указания.

    Плагин PHP_CodeSniffer Sublime Text 2/3

    Интересно, что есть относительно незамеченный плагин, делающий то же самое (но только для PHPCS), написанный той же группой, которая написала PHP CodeSniffer, так что, возможно, стоит попробовать; он называется PHP_CodeSniffer Sublime Text 2/3 Plugin (творческий, я знаю.)

    Я никогда не использовал этот, так что будьте осторожны.

    Майк Фрэнсис Скрипт сборки PHP CS Fixer

    Майк Фрэнсис также поделился написанным им пользовательским скриптом сборки, который запускает PHP-CS-Fixer в вашем коде всякий раз, когда вы его запускаете.Это означает, что он фактически будет применять PSR-2 (или любой другой стандарт PHP-CS-Fixer, который вы ему передаете) в вашем коде за вас.

    Тейлор Отвелл на самом деле поделился со мной этим же сценарием, но он не написал его так хорошо, как Майк. 🙂 Он, однако, упомянул, что вы, возможно, захотите установить это предпочтение: "show_panel_on_build": false, Это не позволит ему каждый раз выскакивать из командной панели с вашими результатами, что может очень быстро вызвать раздражение.

    SublimeLinter

    SublimeLinter PHP (и его необходимая зависимость, SublimeLinter) полагаются на встроенный линтер PHP (как и плагин Sublime PHPCS выше).Это более простая версия, что только запускает линтер, и ничего больше.

    DocBlockr

    Если вы из тех, кто использует PHPStorm, велика вероятность, что вы из тех, кто пишет блоки документов. (Просто говорю’).

    DocBlockr упрощает создание новых блоков документов, но, что более важно, если вы создаете блок документов непосредственно над определенной функцией, он извлечет информацию о параметрах этой функции и предварительно заполнит ее в блоке документов. Бум.

    Помощники Git

    возвышенный текст Git

    Вы из тех, кто ненавидит переходить с IDE на терминал / клиент Git? Sublime Text Git предоставляет доступ ко многим командам Git прямо из палитры команд Sublime Text.

    GitGutter

    GitGutter показывает вам различную информацию о статусе каждой строки — была ли она изменена, вставлена ​​или удалена?

    Это не так мощно, как желоба Git от PHPStorm, но это шаг в правильном направлении.

    Подсветка синтаксиса

    PHPUnit, сборка

    Есть отличный плагин, который упрощает запуск PHPUnit из палитры команд или с помощью сочетания клавиш: SimplePHPUnit

    Как следует из названия, вы устанавливаете пакет, и все готово.

    КодIntel

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

    Почему я все время говорю «должен» и «должен»? Потому что мне еще предстоит встретить разработчика PHP, который мог бы заставить CodeIntel работать стабильно и предсказуемо. А ты? Ударь меня.

    Другие плагины

    Когда я спросил в Твиттере, многие люди делились плагинами.Поскольку я ими не пользуюсь, я могу лишь смутно рассказывать о них, но я уверен, что все они заслуживают быстрой проверки.

    • ApplySyntax расширяет возможности Sublime Text определять, какой синтаксис применить к вашему текущему файлу
    • DashDoc позволяет пользователям Mac с помощью приложения Dash искать любое слово в Dash
    • Отображение имени функции добавляет в строку состояния информацию о текущем файле, классе и имени функции / метода
    • phpfmt выглядит как альтернатива PHP CS Fixer
    • CodeComplice — это код Intel, но более новый — может, это решение ?!
    • Клиент Xdebug
    • EditorConfig — это стандарт для совместного использования определенных шаблонов конфигурации редактора для каждого проекта.Этот плагин позволяет вам импортировать и использовать их в Sublime Text. (подробнее о формате EditorConfig)
    • SublimePrettyJSON отлично подходит для быстрого форматирования JSON
    • CaseConversion упрощает преобразование между snake_case и camelCase и PascalCase, а также разделяет и объединяет слова и все остальное.

    CodeBug для Xdebug

    Вы скучаете по интеграции Xdebug в PHPStorm? Ознакомьтесь с Codebug, автономным клиентом xdebug.

    Несколько общих советов по возвышенному тексту

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

    Поиск файлов с помощью «Goto Anything» (cmd-p)

    Если вы нажмете super-P , вы получите невероятно мощную палитру Goto Anything , которая позволяет вам легко находить файлы, но вы можете пойти немного дальше: если вы найдете свой файл (например, набрав Handler. php ), вы также можете инициировать его открытие по определенной строке ( Handler.php: 35 ) или по определенному символу ( Handler.php@report ).

    Поиск команд с помощью палитры команд (cmd-shift-p)

    В то время как палитра Goto Anything позволяет вам искать файлы в вашем проекте, палитра команд позволяет вам искать команды.

    Это означает, что любую команду, которую Sublime Text позволяет выполнять (запускать сборки, переименовывать файлы и т. Д.), А также команды из сторонних пакетов (обнюхивать этот файл и т. Д.), Можно запускать исключительно с клавиатуры, даже если вы не знаете (или не имеете) сочетание клавиш.

    Поиск символов с помощью «Перейти к символам» (cmd-r)

    Если вы нажмете super-R , вы получите палитру Goto Symbol , которая будет перемещаться к любому символу в вашем текущем файле.

    Символы — это такие вещи, как классы, методы или функции.

    Несколько курсоров

    Многие редакторы добавили несколько курсоров, но Sublime Text по-прежнему делает это лучше всего.

    Если вы никогда не пробовали, узнайте об этом где-нибудь, но вот краткое введение:

    Откройте файл. Удерживая «super» (cmd на Mac), щелкните несколько мест вокруг файла. Теперь начните печатать. БУМ.

    Еще один отличный трюк: поместите курсор на обычное слово (например, имя переменной).Теперь несколько раз нажмите Super-D . Теперь у вас выбрано несколько экземпляров этой переменной, и вы можете управлять ими сразу.

    Или выберите пять строк и нажмите Super-shift-l . Проверь это.

    Есть еще лот , которые вы можете сделать с этим, если проявите творческий подход.

    Нечеткое совпадение

    Знаете ли вы, что когда вы используете любую из командных палитр в Sublime Text, вам не нужно заканчивать ни одного слова?

    В большинстве редакторов (например, PHPStorm), если вы хотите найти файл с именем resources / views / sessions / edit.blade.php , вы можете ввести resources / views / sessions / edit.blade.php или sessions / edit.blade.php , но в Sublime Text все, что вам понадобится, это что-то вроде resvieconedblp . Просто введите достаточно, чтобы порядок букв, который вы вводите, мог существовать только в строке, которую вы ищете, и все будет хорошо. Пропустить здесь букву, пропустить косую черту — нет проблем.

    Разное

    Есть еще много информации о том, как работает Sublime Text, а также множество инструментов и курсов, доступных вам.Это не исчерпывающий ресурс обо всем, что замечательно в Sublime; эти руководства уже написаны.

    Если вы хотите узнать больше о Sublime Text, я бы рассмотрел два отличных ресурса.

    • Sublime Text Power User — это книга и серия видеороликов моего друга Уэса Боса, которые научат вас всему, что вам нужно, чтобы использовать Sublime Text как босс. Это самый простой способ для тех, кто плохо знаком с Sublime Text, быстро приступить к работе. Кроме того, я обратился к Уэсу, и он дал мне купон на GEEK , чтобы получить скидку 10 долларов США (отказ от ответственности: это тоже помогает мне.)
    • ShortcutFoo — отличный ресурс для изучения сочетаний клавиш для любой среды. У них есть программы для всего: от Vim до Sublime Text, от Photoshop до Excel.

    Вердикт

    Давайте взглянем на наш список и посмотрим, что мы сделали:

    • ~~ Встроенное завершение класса FQCN ~~ (Sublime PHP Companion)
    • ~~ Простой переход к определению символа ~~ (Sublime PHP Companion)
    • ~~ Перейдите к определению символа ~~ (Sublime PHP Companion)
    • Простая инъекция конструктора (макрос?)
    • ~~ Выделите неиспользуемый импорт ~~ (SublimeLinter)
    • ~~ Желоба Git ~~ (GitGutter)
    • ~~ Анализ кода / проверка PSR-2 ~~ (SublimePHPCS и т. Д.)
    • Завершение кода: PHP
    • Завершение кода: код проекта

    На самом деле неплохо. Поговорим о том, чего не хватает:

    • Внедрение конструкции (например, упрощение внедрения свойства в конструктор как свойства, установка его в конструкторе и определение свойства класса) — это то, что, я думаю, может быть решено с помощью умного макроса, но я не видел этого умного макроса пока нет.
    • CodeIntel предлагает автозавершение кода PHP , так что это просто вопрос, чтобы это заработало.Но я не думаю (поправьте меня, если я ошибаюсь) что-либо в мире Sublime Text утверждает, что нюхает определения вашего кода , а затем предоставляет автозаполнение и предложение параметров. Так что это точно большой недостаток. Однако обратите внимание: AllAutocomplete определенно немного облегчает эту боль.

    Каков мой вердикт? Как всегда, это зависит от обстоятельств. Я думаю, что это будет зависеть от проекта, от разработчика, от того, смогу ли я найти решение некоторых из вышеперечисленных проблем.Но я определенно полагаюсь на Sublime Text намного больше, чем шесть месяцев назад — это чертовски быстро.

    Постскриптум

    Есть ли какие-нибудь советы по Sublime Text для PHP-разработчиков, которые я пропустил? Дайте мне знать в Твиттере.

    Есть ли какие-либо функции PHPStorm, которые я здесь не рассмотрел, которые, по вашему мнению, являются жизненно важными для каждого инструментария разработчика? Сообщи мне и об этом.

    Также: я не мог бы написать это без Адама Уотана, Тейлора Отвелла, Джеффри Уэй и многих, многих других друзей в Твиттере.

    Essential Sublime Text 3 Plugins для PHP-разработчиков

    Sublime Text 3

    Sublime Text должен быть одним из самых популярных текстовых редакторов для кодирования. Хотя Sublime Text 3 все еще находится в стадии бета-тестирования, он относительно стабилен и очень удобен. Я лично использую его уже более 2-х лет как на работе, так и дома. Он сложный, легкий и простой в использовании. Он также работает на всех основных платформах: Windows, OSX и Linux.

    Sublime Text — это не совсем IDE (интегрированная среда разработки), но с установкой нескольких пакетов / плагинов вы действительно можете сделать его идеальным редактором для разработки PHP в.

    Есть несколько отличных пакетов для Sublime Text, которые помогут разработчикам PHP улучшить качество кода и рабочий процесс. Это то, что я считаю основными пакетами для разработки PHP в Sublime Text 3.

    Прежде всего, это управление пакетами. Почему это не предустановлено, я не знаю. Я подозреваю, что большинство пользователей Sublime Text уже установили это, но если не установят его сейчас; это сделает установку всех других пакетов, перечисленных здесь (и многих других), чрезвычайно простой.Это что-то вроде эквивалента apt-get или homebrew , если вы с ними знакомы. Вместо того, чтобы загружать пакеты вручную или git clone в папку Packages , вы можете просто установить (и удалить) пакеты с помощью палитры команд.

    Как только вы начнете использовать Package Control, вы удивитесь, как вы выжили без него!

    Каждый разработчик делает случайную опечатку; забыв закрыть некоторые скобки, пропустить точку с запятой, и т. д.. Чтобы избежать этих ошибок, мы можем использовать линтер. SublimeLinter предоставляет основу для линтинга. Сами линтеры распространяются отдельно в виде дополнительных пакетов; для PHP вам понадобится SublimeLinter-php, который предоставляет интерфейс к php -l для проверки синтаксиса.

    Другие полезные линтеры для разработчиков включают SublimeLinter-jshint для JavaScript, SublimeLinter-json для JSON и SublimeLinter-csslint для CSS.

    Хорошо написанный код должен использовать последовательный стандарт кодирования i.е. тип отступа, соглашения об именах, использование пробелов, размещение скобок, и т. Д. . Какой бы стандарт вы ни использовали, phpcs поможет вам соответствовать им.

    В отличие от других пакетов, для этого требуется несколько внешних библиотек и некоторая конфигурация, чтобы заставить его работать; вам понадобится PHP CodeSniffer, PHP CodeSniffer Fixer и PHP Mess Detector. Установите эти библиотеки и задайте пути их выполнения в настройках phpcs в Sublime, и все будет в порядке.

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

    Вы можете определить стандарт кодирования, на основе которого вы хотите разработать пакет, в настройках пакета. Доступны популярные стандарты, такие как PSR-2 и Zend, а также множество настраиваемых стандартов, таких как CakePHP, которые можно установить и настроить.

    EditorConfig предоставляет способ поддерживать некоторую согласованность стилей кодирования между различными редакторами и IDE.Это особенно ценно при сотрудничестве с другими, некоторые из которых могут не использовать Sublime Text для кодирования. Стили для проекта определены в файле .editorconfig , который затем может быть прочитан текстовым редактором / IDE и принудительно применен. Это полезно, среди прочего, для определения стилей табуляции и окончаний строк. У большинства редакторов есть плагины для поддержки EditorConfig, включая Atom, Coda, PhpStorm и, конечно же, Sublime Text.

    Вы можете узнать больше о EditorConfig и о том, что вы можете определить в .Editorconfig на официальном сайте. Подробную информацию о пакете Sublime Text EditorConfig можно найти на GitHub.

    Хороший код должен быть хорошо документирован. PHPDoc — это в значительной степени повсеместно признанное средство сделать это в PHP; хотя многие разработчики находят документирование своего кода утомительным. DocBlockr упрощает процесс добавления комментариев PHPDoc (и JSDoc) за счет автозаполнения / ** нажатием Enter или tab , снимая часть боли.

    Это действительно простой небольшой пакет, который отображает текущую функцию, которую курсор помещает в строку состояния внизу (рядом с номером строки).

    Если вы работаете с Git, Mercurial или SVN, то VCS Gutter — удобный пакет для добавления визуальных подсказок относительно того, что изменилось в файле с момента последней фиксации. Он покажет небольшой значок в желобе, чтобы указать, что было добавлено, изменено или удалено.

    Одна небольшая проблема, которую я обнаружил с этим пакетом, заключается в том, что если вы хотите просмотреть большой файл журнала в Sublime, это может значительно замедлить реакцию редактора.В этих случаях я обычно временно отключаю VCS Gutter с помощью Package Control.

    Это мои семь основных пакетов для разработки PHP в Sublime Text 3. Что вы используете? Не стесняйтесь вносить свои предложения в комментариях ниже.

    Sublime Text 3 идеальная установка для разработки PHP

    Это статья, продолжающая идеальную настройку для разработки PHP в Sublime Text 2. Я решил написать эту обновленную версию, потому что с некоторого времени появился Sublime Text 3.Возможно, он все еще официально бета-версия, но работает довольно стабильно, и я использую ее уже несколько месяцев.

    Этот список почти такой же, как и в предыдущей статье — большинство плагинов, которые я использовал с ST2, были обновлены для работы с ST3, и я перестал использовать некоторые из них, поэтому их нет. Я немного ленив, поэтому некоторые описания скопированы из предыдущей статьи;)

    Во всяком случае, вот список:

    1. Управление пакетами (https://sublime.wbond.net)

      Благодаря этому небольшому программному обеспечению все остальные плагины легко устанавливаются.

    2. SublimeCodeIntel (https://github.com/SublimeCodeIntel/SublimeCodeIntel)

      Это пакет, который я использую все время. Его задача — предоставлять подсказки, связанные с именами функций, объектов, переменных и т. Д. Он также указывает, какие методы и параметры доступны в объектах / классах. Он основан на Komodo CodeIntel и иногда вообще не работает. Но в большинстве случаев это круто 🙂

    3. SublimeLinter (https: // sublime.wbond.net/packages/SublimeLinter)

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

      (обновить) Начиная с версии 3, SublimeLInter стал модульным. Это означает, что вы должны сначала установить основной пакет, а затем плагин / модуль для каждого языка, для которого вам нужна поддержка. У каждого плагина есть свой набор требований, поэтому обязательно внимательно их прочтите.Для разработки на PHP + JavaScript я использую:

    4. SideBarEnhancements (https://sublime.wbond.net/packages/SideBarEnhancements)

      Предоставляет новые отличные возможности при щелчке правой кнопкой мыши по элементам боковой панели (файлам / папкам). Очень удобно.

    5. Желоб VCS (https://sublime.wbond.net/packages/VCS%20Gutter)

      В последнее время не представляю себе работы без этого. Каждый день я использую Git и Mercurial, и эти плагины предоставляют мне в реальном времени информацию о том, что было изменено (или добавлено / удалено) в текущем файле, используя символы в левом переплете окна редактирования.

    6. SFTP , платный (http://wbond.net/sublime_packages/sftp)

      Отличный пакет, позволяющий очень удобно использовать SFTP, FTP и FTPS. Он поддерживает просмотр удаленных папок, редактирование и синхронизацию между локальными и удаленными файлами. Также регулярная загрузка, загрузка, сохранение или открытие файла.

    7. Tortoise (только в Windows) (http://wbond.net/sublime_packages/tortoise)

      Я использую его как дополнительный пакет к SideBarGit, если работаю в среде Windows.В нем не так много функций, но те, что он предоставляет, очень полезны и интуитивно понятны. Если вам нравится Tortoise Git, но вы работаете в Linux, вы можете попробовать RabbitVCS. Он не интегрирован с ST2, но предоставляет удобный графический интерфейс Git при щелчке правой кнопкой мыши.

    8. sublime-github (https://github.com/bgreenlee/sublime-github)

      Каждый разработчик должен использовать какие-то фрагменты кода. Я использую Gist, предоставленный GitHub, и этот пакет позволяет мне использовать их мгновенно (сохранять / вставлять).

    9. Тег (https://github.com/SublimeText/Tag)

      Это отличный плагин, но теперь ST3 поддерживает сопоставление тегов, поэтому он мне больше не нужен.

    10. PhpDoc (https://sublime.wbond.net/packages/PhpDoc)

      Отличный плагин, помогающий писать блоки документации для PHPDocumentor.

    11. Phpcs (http://soulbroken.co.uk/code/sublimephpcs)

      Этот пакет добавляет поддержку PHP CodeSniffer в ST2.Он проверяет, написан ли ваш код в соответствии с одним из стандартов. Просто выберите один: Zend, PEAR … и другие 🙂 Посетите веб-сайт PHP CodeSniffer для деталей конфигурации.

    12. TrailingSpaces (https://github.com/SublimeText/TrailingSpaces)

      Маленький ужас каждого кода — пустые места в конце строк, в конце файла. Особенно неприятно, если вы работаете над кодом с другими разработчиками, которые могут использовать разные редакторы / IDE, которые могут интерпретировать их (пустые пространства) по-разному.

    13. BracketHighlighter (https://github.com/facelessuser/BracketHighlighter)

      Такая же ситуация, как и с плагином Tag . В моем повседневном кодировании возможности ST3 по подсветке скобок ST3 достаточно хороши. Тем не менее, это по-прежнему отличный плагин.

    14. Отображение имени возвышенной функции (https://github.com/akrabat/SublimeFunctionNameDisplay)

      Отображает в нижней панели имя функции (или метода), в которой находится курсор.Просто и полезно.

    15. Терминал (http://wbond.net/sublime_packages/terminal)

      Используя Git или, возможно, некоторые пакеты PEAR, вам может понадобиться время от времени переключаться на консоль и творить чудеса. Может быть, использовать Zend Tool или что-нибудь «запечь»;) Именно для этого и предназначен этот плагин.

    16. Клиент Xdebug (https://sublime.wbond.net/packages/Xdebug%20Client)

      В последнее время мой любимый клиент Xdebug для ST3. Отлично работает и позволяет использовать все возможности отладки Xdebug.

    Несколько вспомогательных пакетов. Считаю их необязательными, но они пригодятся:

    1. LineEndings (https://sublime.wbond.net/packages/LineEndings)

      Приятно иметь плагин, если вы работаете с другими разработчиками, использующими машины Windows и Unix / Linux. Он заботится о различных (невидимых) символах окончания строки в этих системах.

    2. Sass (https://sublime.wbond.net/packages/Sass)

      Это очень удобно при работе с файлами Sass.Подсветка синтаксиса и так далее.

    3. PlainTasks (https://github.com/aziz/PlainTasks) добавлено благодаря комментарию Вириона

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

    4. Sublimerge (http://www.sublimerge.com/)

      Добавлено благодаря инструменту Вириона comment_Diff на стероидах. Идеально подходит для всех, кому приходится много работать со слиянием, особенно полезно, когда дело касается больших файлов.

    5. DashDoc (https://sublime.wbond.net/packages/DashDoc) (только Mac)

      Это только для пользователей Mac и только для тех, у кого установлен Dash, но я очень рекомендую его. Dash предоставляет доступ к документам практически всех основных библиотек, фреймворков и т. Д. И многому другому! С помощью этого плагина вы можете получить к нему доступ прямо из окна кода Subliem Text с помощью сочетания клавиш. Это действительно ускоряет кодирование.

    На этом пока все.Я могу вернуться и что-нибудь позже, но это моя установка, и она мне отлично подходит.

    Если вы знаете какой-либо плагин, который стоит упомянуть, дайте мне знать — я буду рад добавить его в свой список. Какие-либо предложения? 🙂

    My Sublime Text Setup для PHP

    Я использую 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": правда,
    «правители»: [80, 120],
    "tab_size": 4,
    "translate_tabs_to_spaces": правда,
    "trim_trailing_white_space": правда,
    "sure_newline_at_eof_on_save": true
}
    Войти в полноэкранный режимВыйти из полноэкранного режима

    Я следую руководству по стилю PSR-2, предоставленному PHP-FIG, поэтому некоторые из этих настроек очень помогли в поддержании этого стиля.Линейки Параметр показывает вертикальную линию в вашем редакторе в качестве ориентира для длины строки. PSR-2 устанавливает предпочтительный предел на 80 символов и мягкий предел на 120, поэтому я показываю вертикальную линию на обеих длинах, чтобы знать, когда я перейду лимит. Вкладка Настройки гарантируют, что я всегда использую табуляцию с четырьмя пробелами для отступов (да, я предпочитаю пробелы табуляции). Часто я забываю добавить пустую строку в конец файла, поэтому параметр sure_newline_at_eof_on_save сделает это за вас автоматически.Если вам интересно, пустая последняя строка предназначена для того, чтобы git diff не отображался для добавления символа возврата в указанную выше строку, когда вы начинаете добавлять дополнительный код в файл.

    Одна из моих любимых удобных настроек — предпочтение highlight_line . Это приведет к тому, что Sublime выделит строку, на которой находится курсор, что упростит поиск места, где вы печатаете. Наконец, я использую Fira Code в качестве шрифта. Это действительно хороший шрифт с лигатурами. Sublime Text теперь поддерживает лигатуры шрифтов, что делает ваш код действительно чистым.

    Плагины

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

    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 | Drupart

    Sublime Text 3 имеет отличные пакеты для всех видов вещей, и в этом сообщении в блоге я напишу о пакетах, которые делают меня счастливым при использовании для веб-разработки.Итак, начнем!

    Управление пакетами

    Перво-наперво, нам нужно установить Package Control для установки других пакетов. Чтобы установить управление пакетами, мы открываем палитру команд, чтобы открыть ее, перейдите в Инструменты-> Палитра команд или с помощью сочетания клавиш Shift + Ctrl + P в Linux.

    Вот изображение:

    , теперь мы можем устанавливать другие пакеты с помощью Package Control. Вы можете искать и устанавливать другие пакеты по имени, открыв палитру команд и набрав Install Package, а затем просто введите имя пакета, который хотите установить.Также мы можем просматривать пакеты на https://packagecontrol.io, и вы можете прочитать документацию, использование и конфигурацию пакетов.

    PHPFMT

    Первый пакет, который я устанавливаю после Package Control, — это 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. изменено или удалено, обновлено?

    Усовершенствования боковой панели

    SideBarEnhancements, как следует из названия, расширяет боковую панель Sublime.

    SFTP

    Отличный пакет, позволяющий очень удобно использовать SFTP, FTP и FTPS. Он поддерживает просмотр удаленных папок, редактирование и синхронизацию между локальными и удаленными файлами. Также регулярная загрузка, загрузка, сохранение или открытие файла.

    js Преттье

    Этот пакет не для php, но я использую его при работе с файлами javascript. Этот пакет, как и phpfmt, форматирует код javascript. Перед использованием этого пакета мы должны установить более красивую установку зависимостей с помощью этой команды

    npm install -g красивее

    Затем установите пакет jsPrettier и откройте файл настроек, как мы открывали на phpfmt.В качестве примера конфиг:

    {
"отладка": ложь,
"prettier_cli_path": "/home/tasqyn/.asdf/installs/nodejs/9.2.0/.npm/bin/prettier",
"путь_узла": "/home/tasqyn/.asdf/shims/node",
"auto_format_on_save": правда,
"auto_format_on_save_excludes": ["* / node_modules / *"],
"allow_inline_formatting": правда,
"custom_file_extensions": [],
"max_file_size_limit": -1,
"additional_cli_args": {},
"prettier_options": {
"printWidth": 100,
"singleQuote": ложь,
"trailingComma": "нет",
"bracketSpacing": true,
"jsxBracketSameLine": ложь,
"парсер": "вавилон",
"полу": правда,
"requirePragma": ложь,
"proseWrap": правда
}
}

    prettier_cli_path — путь к красивее.

    node_path — путь к узлу

    Вы можете изменить настройки в соответствии с вашими потребностями.

    Заключение

    Это пакеты, которые я использую все время. Конечно, есть много пакетов для Sublime Text 3, вы можете просмотреть их на packagecontrol.io и выбрать свои любимые.

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

    Спасибо за внимание!

    25 лучших плагинов Sublime Text для Front End разработчиков — Front End Development

    У каждого разработчика есть свои собственные инструменты и специальные настройки — я знаю, что есть.Это тот инструмент, который поможет вам стать более быстрым, сильным и продуктивным разработчиком.

    Один из способов найти новые инструменты — объединиться с другими разработчиками. Я буду работать над проблемой и увижу, как человек, с которым я соединяюсь, совершает какое-нибудь волшебное действие за две секунды.

    Это момент, когда я прерываю сеанс сопряжения, чтобы узнать, что это за инструмент, где его взять и как его использовать. Это ни в коем случае не самый эффективный способ поиска новых инструментов, но часто я нахожу лучшие.

    Имея все это в виду, я провел некоторое время, опрашивая фронтенд-разработчиков здесь, в Shopify, чтобы получить список всех необходимых плагинов Sublime Text, без которых они просто не могут жить.

    Чтобы упростить задачу, я разбил плагины на следующие категории:

    Если вы хотите убедиться, что то, что вы создаете, безопасно, обязательно ознакомьтесь с нашей статьей о безопасности веб-сайтов.

    Установка

    1. Пакетный контроль

    Package Control — первый и, вероятно, самый важный плагин Sublime Text.Это позволяет легко устанавливать, загружать и обновлять пакеты или плагины в Sublime Text. Термины пакет и плагин часто используются как синонимы.

    Чтобы установить Package Control, следуйте инструкциям на веб-сайте Package Control. Оттуда вы можете просто ввести ctrl + shift + p в Windows или cmd + shift + p на Mac, чтобы открыть палитру команд.

    Установка управления пакетами.

    После открытия палитры команд вы можете ввести Install Package , чтобы установить подключаемый модуль с веб-сайта Package Control.Вы также можете ввести Добавить репозиторий , который позволяет вам добавлять плагины, которые не размещены на веб-сайте управления пакетами, просто используя URL-адрес их репозитория (не включайте .git в конце). И, наконец, Remove Package позволит вам удалить плагин из вашей системы, удалив его, а также любые ресурсы из каталога пакетов Sublime.

    Найдите свой новый любимый редактор Markdown в нашем обзоре.

    Фрагменты и стиль кода

    Snippets — отличная встроенная функция Sublime Text.Вы можете создать свой собственный, в дополнение к предустановленным, или использовать плагин, у которого есть куча для вас, например Emmet. Принцип работы фрагментов прост — вы просто начинаете вводить ключевое слово, которое активирует фрагмент, и нажимаете вкладку, чтобы развернуть текст.

    2. Эммет

    Расширяем разметку с помощью Emmet.

    Emmet — это плагин, который позволяет быстрее создавать HTML и CSS с использованием сниппетов. Он использует сокращения, которые расширяются до допустимых тегов HTML.

    Например, чтобы построить навигацию, вам нужно всего лишь ввести следующий код:

    , который расширится до:

    Просмотр плагина Emmet

    3.Мировоззрение

    Выравнивание определений переменных с помощью Alignment. Плагин

    Alignment помогает легко выровнять множественные выделения или многострочные выделения. Это означает, что вы можете выровнять несколько выделений или строк с помощью разделителя, например = . Просто введите ctrl + alt + a в Windows или cmd + ctrl + a на Mac, чтобы выровнять ваш выбор. Чтобы согласовать с : , следуйте этому руководству по настройке пользовательских разделителей.

    Плагин View Alignment

    Интеграция с Git

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

    4. SublimeGit

    SublimeGit переносит Git в Sublime, поэтому вам не нужно переключаться между командной строкой и текстовым редактором. Раньше вам приходилось платить за этот плагин (вот как он классный), но в прошлом году он был с открытым исходным кодом. У него огромный список функций, которые вы можете найти в документации SublimeGit.Чтобы быстро приступить к работе, установите плагин и используйте палитру команд для запуска команд Git.

    Просмотр подключаемого модуля SublimeGit

    5. GitGutter

    Измененная линия, удаленные границы области и вставленные линейные индикаторы в поле Sublime Text.

    GitGutter привносит в Sublime некоторые встроенные функции Atom, добавляя подсказки различий в поле боковой панели. Вы можете дополнительно навести указатель мыши на индикаторы на боковой панели, чтобы увидеть всплывающее окно с различиями. Вы можете выполнять различные команды для изменения, такие как копирование содержимого состояния diff, возврат изменений обратно к состоянию в Git, переход к следующему или предыдущему изменению и многое другое.

    Ознакомьтесь с нашим списком из 21 лучших пакетов Atom для интерфейсных разработчиков.

    Просмотр подключаемого модуля GitGutter

    6. GitHubinator

    Открытие Git обвиняет Github в выбранных строках.

    GitHubinator — это плагин, который показывает выделенный текст в удаленном репозитории GitHub или Bitbucket. Вы просто выделяете текст, который хотите найти, щелкаете правой кнопкой мыши, чтобы открыть контекстное меню, и запускаете соответствующую веб-страницу Github или Bitbucket в браузере по умолчанию. Этот плагин великолепен, если вам нужно выяснить, кто работал с файлом ранее, или проверить, виноват ли Git.

    Просмотр подключаемого модуля GitHubinator

    7. GitOpenChangedFiles

    GitOpenChangedFiles не скромничает в том, что делает; его название говорит само за себя. Просто установите и запустите cmd + option + o на Mac или ctrl + shift + o в Windows и посмотрите, как этот плагин открывает для вас соответствующие файлы в Sublime Text со всеми файлами, которые вы изменили в своем ветка.

    Просмотр подключаемого модуля GitOpenChangedFiles

    Вам также может понравиться: Основной список ресурсов для разработки тем Shopify.

    Линтеры и подсветка синтаксиса

    При работе в команде последовательность является обязательной. Линтеры и подсветка синтаксиса помогают обеспечить такую ​​согласованность и установить лучшие практики.

    8. SublimeLinter

    SublimeLinter — самый популярный линтер, доступный на Sublime, так как в настоящее время он входит в 25 лучших загрузок в Package Manager. После установки вы также захотите установить плагины для различных языков, на которых вы можете писать код.

    Для этого просто откройте Package Control, чтобы установить плагины с таким же именем.Просто введите SublimeLinter- , например SublimeLinter-jshint . Вы должны установить плагины linter с SublimeLinter — версия для Sublime Text 3 не поставляется с предустановленной версией.

    Просмотр плагина SublimeLinter

    9. ChangeQuotes

    Замена двойных кавычек на одинарные с помощью палитры команд.

    ChangeQuotes «преобразует одинарные и двойные кавычки и повторно экранирует кавычки внутри строки», согласно их документам. После установки, когда вы хотите изменить кавычки, убедитесь, что ваш курсор находится внутри цитируемого текста.Откройте палитру команд, чтобы запустить ChangeQuotes — нет необходимости выделять текст для изменения кавычек.

    Посмотреть плагин ChangeQuotes

    Существует множество плагинов для подсветки синтаксиса. Это два основных плагина, которые мы используем в Shopify, которые выходят за рамки существующей подсветки синтаксиса, которая поставляется с Sublime Text.

    10. SASS

    Плагин Sass добавляет подсветку синтаксиса, а также завершение кода табуляции / кода для файлов Sass и SCSS.

    Просмотр плагина Sass

    11.Вавилон

    Подсветка синтаксиса любезно предоставлена ​​Babel.

    Babel добавляет определения синтаксиса для ES6 JavaScript с расширениями React JSX.

    Просмотр плагина Babel

    12. Жидкий синтаксис Siteleaf

    Liquid Syntax

    Siteleaf добавляет жидкую подсветку синтаксиса для Liquid, а также некоторые удобные фрагменты.

    Просмотреть жидкий синтаксис Siteleaf

    Улучшения редактора

    13. Улучшения боковой панели

    Слева: до улучшений боковой панели. Справа: после улучшений боковой панели.

    SideBarEnhancements обеспечивает усовершенствования операций на боковой панели файлов и папок для Sublime Text. В частности, он устанавливает параметры удаления как «Переместить в корзину», включает «Открыть с помощью…», дает вам возможность перемещать файлы и многое другое.

    Плагин View SideBar Enhancements

    14. Maybs бросил работу

    Maybs Quit включает быструю панель для подтверждения выхода из Sublime Text. И cmd / ctrl + w , и cmd / ctrl + q расположены слишком близко друг к другу на клавиатуре и могут привести к ошибкам.Избегайте непреднамеренного выхода из Sublime Text, когда вы только пытаетесь закрыть файл, с помощью Maybs Quit!

    Просмотр плагина Maybs Quit

    15. AutoFileName

    AutoFileName следует его имени: он автоматически дополняет имена файлов. Он запускает раскрывающийся список с именами файлов относительно вашего существующего файла и последующим путем по мере ввода.

    Просмотр плагина AutoFileName

    Вам также может понравиться: Как добавить анимацию текста CSS в пользовательские темы.

    16. Просмотр в браузере

    Просмотр в браузере позволяет запускать проекты в браузере по умолчанию с помощью простого ярлыка ctrl + alt + v . Он также позволяет использовать ярлыки для различных других браузеров, установленных на вашем компьютере, таких как Chrome, Firefox, Internet Explorer и других.

    Плагин Checkout View In Browser

    17. GhostText

    Связывание CodePen с Sublime Text с помощью плагина GhostText. 👻

    GhostText, вероятно, один из самых крутых плагинов, которые я когда-либо видел.Он позволяет вам связать ваш редактор Sublime Text (со всеми вашими плагинами 🎉) с текстовыми областями в браузере. Например, вы можете работать с CodePen, но все редактировать в основном текстовом редакторе. Вам просто нужно установить плагин и расширение для браузера. Просто выделите текстовую область, которую вы хотите связать, и щелкните расширение браузера: тогда произойдет волшебство. ✨🐇🎩✨

    Просмотр подключаемого модуля GhostText

    18. Кронштейн осветителя

    Выделение скобок в Sublime Text 3.

    BracketHighlighter делает именно то, что говорит: выделяет скобки в вашем коде.Он соответствует множеству скобок, например [] , () , {} , ”” , '' , #! Xml , а также пользовательские скобки, если вы их добавите.

    Плагин View BracketHighlighter

    19. Цвет желоба

    Gutter Color — отличный плагин, который отображает цветной значок для всех строк, содержащих цвет. Что хорошо в этом плагине по сравнению с другими, так это то, что цветовое выделение немного менее навязчиво, поскольку оно появляется только в желобе (а не за выделенным словом).Это обрадует в вас дизайнера.

    20. ColorPicker

    ColorPicker включает диалоговое окно выбора цвета и позволяет пользователям вставлять или изменять выбранный цвет. Чтобы открыть палитру цветов, просто введите cmd + shift + c на Mac или ctrl + shift + c в Windows или Linux. По умолчанию вставлен шестнадцатеричный код в верхнем регистре, но вы можете изменить его для использования строчных букв, перейдя в настройки, а затем в настройки пакета.

    Просмотр плагина ColorPicker

    21.Значок файла


    Значок файла отлично подходит для быстрого сканирования файлов, имеющихся в вашем проекте. Он просто добавляет красивые и настраиваемые значки к поддерживаемым файлам на боковой панели вашего проекта. Он поддерживается Material и Boxy Themes для создания настраиваемых тематических значков.

    Плагин View A File Icon

    Темы и развлечения

    Поскольку вы, скорее всего, будете проводить много времени с текстовым редактором, было бы неплохо сделать его как можно более привлекательным. Важно знать, что темы отличаются от цветовых схем.Тема — это внешний вид вашего редактора, такой как пользовательский интерфейс боковой панели, вкладки, модальные окна и т. Д. Цветовая схема — это цвета фона и подсветки синтаксиса в основной области редактирования.

    Ресурсы для развития навыков

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

    При вводе адреса электронной почты мы также будем отправлять вам маркетинговые электронные письма, связанные с Shopify. Вы можете отказаться от подписки в любое время.

    Наши виртуальные винтики крутятся.

    Обратите внимание, что доставка нашего электронного письма
    на ваш почтовый ящик может занять от
    до 15 минут.

    22. Цвет Sublime

    Переключение различных цветовых схем с помощью Color Sublime.

    Color Sublime — это плагин, который позволяет устанавливать цветовые схемы в ваш редактор. Эти цветовые схемы изменяют подсветку синтаксиса. Что хорошо в этом, так это то, что вы можете циклически просматривать список схем, вместо того, чтобы устанавливать каждую из них и смотреть, нравится ли она вам.

    Плагин View Color Sublime

    23.DA UI

    DA UI — это набор красивых, чистых интерфейсов и тем синтаксиса для Sublime Text 3. Плагин DA UI также имеет поддержку пользовательских значков с помощью значка файла.

    Просмотр плагина DA UI

    24. Тема — Spacegray

    Тема

    — Spacegray — это набор настраиваемых тем пользовательского интерфейса для Sublime Text 2 и 3, которые очень минималистичны и чисты. Spacegray также имеет цветовую схему Base16.

    25. Смайлики

    Потому что … почему бы и нет. Плагин Emoji позволяет вставлять смайлики через палитру команд.Удивительный!

    Посмотреть плагин Emoji

    Вам также может понравиться: Как создать лучшие страницы 404 для ваших клиентов.

    Плагины для всех! 🎉

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

    Развивайте свой бизнес с помощью партнерской программы Shopify

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

    Зарегистрироваться

    10 лучших пакетов Sublime Text для веб-разработчиков

    У каждого веб-разработчика есть любимый редактор кода. Некоторые люди предпочитают интегрированную среду разработки (IDE), тогда как другие просто хотят простоты. Если вы предпочитаете последнее, вы можете оценить пакеты Sublime Text.

    Одним из наиболее привлекательных аспектов Sublime Text является его модульность.Если вы пурист, вы можете использовать редактор как есть. Однако различные пакеты могут значительно упростить рабочий процесс разработки, расширив его функциональность. В этой статье мы познакомим вас с десятью нашими любимыми!

    Введение в пакеты Sublime Text и способы их установки

    Пакеты

    являются эквивалентом Sublime Text модулей или плагинов WordPress. Это надстройки, которые вы можете настроить, чтобы расширить основные функции платформы и упростить вашу работу.

    В концепции пакетов редактора кода нет ничего нового.Большинство популярных платформ, таких как Atom, также предлагают множество расширений. Однако Sublime Text остается отличным вариантом, если вам нужен легкий редактор кода с широким выбором надстроек.

    Что касается установки пакетов Sublime Text, процесс очень прост. Для начала зайдите в репозиторий нужного расширения и загрузите его:

    Как только у вас будет. zip , перейдите в каталог Sublime Text Packages и разверните его внутри.Если вы не можете его найти, каталог должен находиться под именем пользователя / appdata / roaming / Sublime Text / Packages . Большинство расширений будут готовы к использованию в Sublime Text, как только вы извлечете папку, не требуя перезапуска редактора.

    Если вам нужен более оптимизированный процесс, вы также можете использовать официальный Sublime Text Package Control . Вкратце, этот инструмент позволяет просматривать репозиторий общедоступных пакетов и устанавливать их с помощью простых команд.

    Чтобы настроить Sublime Text Package Control, перейдите к Tools> Install Package Control :

    После настройки Package Control вы можете использовать его через консоль Sublime Text. Нажмите CTRL + ~ , чтобы открыть его, затем введите УПРАВЛЕНИЕ ПАКЕТОМ: , чтобы увидеть полный список команд, которые вы можете использовать:

    Чтобы установить новый пакет, введите Package Control: Install Package , и инструмент откроет список всех общедоступных пакетов в своем репозитории:

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

    10 лучших пакетов Sublime Text для веб-разработчиков

    Существуют сотни пакетов Sublime Text на выбор, поэтому составить список лучших — непростая задача. Имея это в виду, мы решили сосредоточиться на тех, которые помогут вам максимально упростить рабочий процесс. Большинство вариантов в этом списке не зависят от языка, поэтому вы сможете извлечь из них много полезного независимо от того, на каком типе разработки вы сосредоточитесь.

    1. Выравнивание

    Alignment — это простой пакет, который берет ваш код и выравнивает символы, для которых вы его настраиваете. Его функциональность проста, но он делает чтение кода намного более приятным.

    После установки пакета вам нужно будет настроить, какие символы он должен выровнять. Вы можете сделать это, открыв настройки пакета — Пользовательский файл:

    Когда файл откроется, скопируйте и вставьте в него следующий код:

     {
    "alignment_chars": [
        "(", ":"
    ]
}

    Этот фрагмент сообщает пакету о необходимости выравнивания символов ‘(‘ и ‘:’ в любом коде, к которому вы его применяете.В качестве примера приведу PHP, который вы будете использовать для постановки стилей дочерней темы в WordPress:

    Он уже довольно организован. Однако, если вы выделите его и нажмете CTRL + Alt + A, Alignment применит ваши новые настройки, что приведет к следующему:

    Какие символы вы хотите выровнять, решать вам. К счастью, после настройки пакета требуется всего несколько нажатий кнопок, чтобы запустить его.

    2. Эммет

    Если вы фронтенд-разработчик или иным образом проводите много времени, работая с HTML и CSS, то Emmet является обязательным дополнением к вашему набору инструментов.Этот пакет позволяет вам вводить динамические выражения CSS или «аббревиатуры» и превращать их в полнофункциональный код.

    Допустим, вы хотите включить несортированный список элементов на любую страницу с использованием HTML. Этот код может выглядеть примерно так:

    Написание повторяющейся разметки вручную может быть довольно утомительным занятием.С помощью Emmet вы можете сгенерировать необходимый код, используя следующую аббревиатуру и расширив ее одним нажатием кнопки:

     #page> div.logo + ul # navigation> li * 3> a {Item $}

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

    В стандартной комплектации Emmet включает так много сокращений, что вам почти наверняка придется ознакомиться с его документацией, прежде чем начать.

    3. SFTP

    Название этого пакета сразу же должно дать вам представление о том, чего ожидать. Используя SFTP, вы можете сопоставить локальную папку с удаленной или напрямую редактировать файлы с сервера в Sublime Text.

    Доступ к удаленному серверу через SFTP прост. Перейдите к File> SFTP / FTP > Setup Server. Здесь вы можете настроить параметры подключения FTP / SFTP:

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

    4. JSHint

    Если вы работаете с JavaScript, качественная программа проверки синтаксиса значительно упростит устранение неполадок. С помощью JSHint вы можете получить быстрый обзор любых ошибок в вашем коде, а консоль пакета позволяет вам переходить от одного столбца к другому.

    После установки JSHint вы можете включить его, нажав Control + J или Alt + J , что вызовет консоль для любого файла, с которым вы работаете:

    Имейте в виду, вам нужен узел.js, чтобы JSHint работал на вашем компьютере. В противном случае пакет может вернуть ошибку при попытке отладки файла.

    5. AutoFileName

    AutoFilename — один из самых простых пакетов Sublime Text, который вы найдете. Однако, как только вы начнете его использовать, вам может быть трудно вернуться.

    С установленным AutoFileName, если вы попытаетесь связать файл с помощью тега href , вы можете нажать Control + Пробел , и он автоматически покажет список файлов и каталогов, расположенных на том же уровне, что и родительский.Вы можете легко просматривать его с помощью курсора или клавиатуры и выбирать любой файл, который хотите. Пакет автоматически добавит свой путь.

    Кроме того, если вы используете AutoFilename для вставки путей к изображениям, пакет также определит их размеры и заполнит атрибуты высоты и ширины.

    Если вы хотите еще больше упростить процесс, вы можете настроить AutoFilename так, чтобы он запускался без необходимости нажимать Control + Space . Для этого откройте файл User Settings и добавьте следующий код:

     «auto_complete_triggers»:
[
  {
     "символы": "<",
     "селектор": "текст.html "
  },
  {
     "символы": "/",
     "селектор": "string.quoted.double.html, string.quoted.single.html, source.css"
  }
]

    Как только вы сохраните этот код, AutoFilename будет запускаться каждый раз, когда вы вводите косую черту, экономя вам несколько нажатий клавиш.

    6. LiveReload

    Если вам не нравится обновлять браузер каждый раз, когда вы вносите изменения в локальный файл, чтобы увидеть результаты, LiveReload может быть идеальным пакетом для вас. Он позволяет синхронизировать локальные файлы с вашим любимым браузером, поэтому, когда вы вносите изменения и сохраняете их, они будут отображаться мгновенно.

    Чтобы LiveReload заработал, вам нужно сделать две вещи:

    1. Добавьте скрипт LiveReload в HTML-файл, над которым вы работаете, нажав Ctrl + Shift + P и выбрав опцию Insert livereload.js script (показано ниже).
    2. Установите соответствующее расширение для используемого программного обеспечения.

    Вот краткий обзор того, что вы должны увидеть, добавив необходимый скрипт в локальный файл:

    Когда у вас есть сценарий, вам необходимо настроить расширение, если вы используете Safari, Chrome или Firefox.После настройки вы сможете добавить скрипт в любой файл и увидеть изменения в реальном времени, когда откроете их в браузере.

    7. FileDiffs

    Иногда вам нужно пробираться через длинные отрезки кода, чтобы найти недавние модификации или изменения, сделанные кем-то другим. Однако поиск невооруженным глазом может быть неэффективным. Если у вас есть предыдущая или отдельная версия определенного файла, вы можете использовать FileDiffs, чтобы показать вам несоответствия.

    После настройки FileDiffs вы можете щелкнуть правой кнопкой мыши в любом месте заголовка проекта или внутри самого файла, чтобы получить доступ к его меню:

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

    На скриншоте выше вы можете увидеть выделенные различия между двумя короткими фрагментами кода. Чем сложнее файлы, с которыми вы работаете, тем больше времени вам может сэкономить FileDiffs.

    8. Минификатор

    Минификация может быть отличной практикой, если вы пытаетесь повысить производительность веб-сайта.Обычно вы используете сторонние инструменты для минимизации кода, но с правильным пакетом вы можете сделать это в Sublime Text.

    Minifier позволяет обрабатывать файлы как JavaScript, так и CSS. Все, что вам нужно сделать, это настроить пакет и использовать одну из этих двух комбинаций кнопок:

    • CTRL + Alt + M : Непосредственно уменьшает текущий открытый файл.
    • CTRL + Alt + Shift + M : Уменьшает текущий открытый файл и сохраняет вывод в новом.

    В этом примере мы взяли. css файл, который изначально занимал более десятка строк и уменьшил его:

    Этот процесс займет всего несколько секунд, что позволит значительно сэкономить время при оптимизации производительности позже.

    9. TodoReview

    Если вы склонны оставлять напоминания в коде задач, над которыми нужно работать или к которым нужно вернуться, вам понравится TodoReview. Вкратце, пакет компилирует списки комментариев, найденных в ваших проектах, и выводит их в новый файл, например:

    Конфигурация пакета по умолчанию распознает только комментариев TODO .Однако вы можете легко добавить новые шаблоны, изменив файл конфигурации пакета:

     "паттерны": {
    "TODO": "TODO [\\ s] * ?: [\\ s] * (? P . *) $",
    "СРОЧНО": "СРОЧНО [\\ s] * ?: [\\ s] * (? P <срочно>. *) $",
}

    В этом примере мы устанавливаем новый тип шаблона для распознавания пакета (срочно!). Вы можете настроить столько, сколько захотите.

    10. Все автозаполнение

    По умолчанию Sublime Text пытается автозаполнить код в файле, над которым вы работаете.Это хорошее начало, но что, если вы работаете над проектом с несколькими файлами?

    All AutoComplete расширяет базовую функциональность автозаполнения Sublime Text и помогает находить совпадения во всех открытых файлах. Это небольшое, но существенное отличие, которое может ускорить рабочий процесс разработки.

    Если вы хотите настроить конфигурацию пакета или отключить его для определенных типов файлов, вы можете легко изменить его настройки, используя следующий код:

     "exclude_from_completion": [
    "css",
],
"min_word_size": 5, // не показывать завершения для слов с меньшим количеством символов, чем это количество, много символов

    В этом примере мы исключаем. css файлов с автозаполнением и отключением функции для более коротких слов. Таким образом, пакет не запускается с прерывистой или раздражающей частотой.

    Заключение

    Sublime Text предоставляет множество полезных функций "из коробки", включая автозаполнение, выделение синтаксиса, сворачивание кода и многое другое. Однако это функции, которые в наши дни включает в себя практически каждый редактор кода. Что действительно отличает его, так это огромная библиотека пакетов.

    Когда дело доходит до выбора, какие пакеты Sublime Text вы должны использовать, это зависит от вашего уникального рабочего процесса.Если вы используете HTML и CSS, Эммет просто необходим. Другие пакеты, такие как AutoFilename и All Autocomplete, обычно являются лучшим выбором независимо от того, какой тип разработки вы выполняете.

    У вас есть вопросы о пакетах Sublime Text? Дайте нам знать в комментариях ниже!

    Миниатюра статьи изображение MchlSkhrv / shutterstock.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *