І знову про Sublime - працюємо швидше

І знову про Sublime - працюємо швидше

18.02.2019 22:33 | Інше

Чим менше Ви використовуєте мишку і чим більше клавіатуру - тим швидше Ви працюєте. Від цієї загальновідомої істини і буду відштовхуватися. Розповім про ті команди та пакети, які використовую найчастіше, і які реально допомагають прискорити процес написання коду.

Перш за все рекомендую прочитати попередню статтю о Sublime - в ній чимало корисного, у тому числі непоганий перелік пакетів.

Уточню: ос - Ubuntu 18.04, Sublime Text 3 Build 3176.

Як відткривати файли

Ctrl + P - наше все. Натискаємо цю комбінацію клавіш і вводимо назву файлу. Можна вводити як назва файлу, так і шлях до нього, причому шлях зовсім не обов'язково вводити повністю (починаючи з кореня проекту), крім усього іншого його можна скорочувати. Наприклад, нам потрібен файл resources/views/projects/index.blade.php. Деякі можливі варіанти вводу:

projects/index.blade.php
proj/index.blade.php
v/p/index.blade.php
r/v/p/index.blade.php
index.blade.php

 

Гарантую - Вам не доведеться набирати назву повністю. Наприклад, в моєму випадку, для вибору вказаного файлу достатньо було:

v/p/ind

// або
r/v/p/i

 

Крім вищеозвученого - можна відразу перейти до методу класу. наприклад, Ctrl + P і потім:

HomeController@index

 

і опиняєтеся в методі index контролера HomeController.

Ну ось - сайдбар тепер не потрібен, можна спокійно звільнити місце. Для його приховування використовуйте Ctrl + B + K. Крім збільшення робочого простору, є ще одна плюшка - через пару місяців будете знати структуру фреймворка як свої п'ять пальців. Спочатку може бути незвично і складно, будете час від часу відкривати сайдбар і підглядати. Але все ж - відмовтеся від його використання, як і від відкриття файлів мишкою. Профіт не змусить себе чекати.

Також, для того, щоб взагалі нічого не відволікало, скористайтеся клавішею  F11 і розгорніть Sublime на весь экран (fullscreen). 

Як створювати файли

Якщо ми говоримо про Laravel, то Ви в курсі, що маса всього корисного створюється в консолі (для перемикання між додатками Alt + Tab). Але все ж деякі файли, треба створювати руками, наприклад, якийсь компонент Vue. Існує чудовий пакет - AdvancedNewFile. Натискаємо Ctrl + Shift + P, вводимо назву пакета і встановлюємо його. Для створення файлів призначена команда Super + Alt + N. В нижній частині редактора з'явиться поле введення, в якому треба ввести шлях до нового файлу (зрозуміло, з назвою файлу), наприклад:

resources/js/components/Navbar.vue

 

Якщо ж перебуваєте в тій директорії, у якій потрібно створити файл, досить набрати:

:Navbar.vue

 

Лейаути та перемикання між вкладками

У разі, коли потрібно порівняти або просто бачити два файли, нам допоможе Shift + Alt + 2. Можна і більше 2-х (для чого достатньо замінити цифру 2 на 3 або 4 і т.д.), але, особисто у мене, не було в цьому необхідності. Після того, як з'явилася друга колонка - Ctrl + P і відкривайте потрібний файл. Щоб повернутися до лейауту з одного колонкою - Shift + Ctrl + 1.

Перемикання між файлами / вкладками - Ctrl + PageUp/PageDown. Якщо шаблон з однією колонкою, можна і Ctrl + Tab. Закриття поточного файлу - Ctrl + W.

Мультикурсор

Для того, щоб виділити слово - наведіть курсор на слово (забудьте про мишку!) і тисніть Ctrl + D. Щоб виділити наступне таке ж слово - знову Ctrl + D. Якщо потрібно виділити всі ідентичні слова в файлі - після виділення першого натискаємо Alt + F3. Важливо: дані команди не залежать від регістру.

Створення сніпетів

Вважаю, ніхто не стане сперечатися, що розробка фронтенду з Emmet і без нього - дві великі різниці. Так чому б і для php не зробити що-небудь подібне? Наприклад, шорткати для методів:

  • m+ - public function () {}
  • m# - protected function () {}
  • m_ - private function () {}

Скорочення вибираєте такі, які захочете - це справа смаку. Звісно, можна не обмежуватися тільки методами. Наведу один приклад, щоб зрозуміло було що і як. Для створення сніпету тиснемо Ctrl + Shift + P, вводимо snippetmaker та вибираємо зі списку:

SnippetMaker: Make Snippet

 

Після цього внизу редактора з'явиться поле для введення даних. Заповнюємо наприклад так:

Trigger - т.е. шорткат. Пишемо m+ і тиснемо Enter

Description - опис сніпета. Хай буде PHP public method. Тиснемо Enter.

Scope - визначає контекст, в якому сніпет буде активним. У мене за замовчуванням:

embedding.php, text.html.basic, meta.embedded.block.php, source.php, meta.class.php, meta.block.php

 

так і залишаю. Якщо хочете, щоб шоркат можна було використовувати всюди - залиште поле порожнім.

Далі File Name - на свій розсуд. У відкритому файлі замінюємо контент на наступний:

<snippet>
    <content><![CDATA[
public function ${1}(${2})
{
    ${0}
}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>m+</tabTrigger>
    <description>PHP public method</description>
    <scope>embedding.php, text.html.basic, meta.embedded.block.php, source.php, meta.class.php, meta.block.php</scope>
</snippet>

 

І зберігаємо. Тепер досить у файлі php набрати m+ і натиснути Tab - з'явиться публічний метод і курсор переміститься в позицію 1 - вводимо назву методу і знову Tab - ккурсор переміститься всередину дужок. Вводимо аргументи і знову Tab - курсор опиниться в позиції 0 - вводимо тіло методу.

Також сніпети можна створювати, якщо зайдете в Tools -> Developer ->  New Snippet... 

Ну і звичайно ж ми не перші, хто створює сніппети, а значить на просторах інтернету можна знайти багато цікавого, скажімо цілу бібліотеку для Bootstrap 4 і т.д.

PHP Companion

Якщо ще не встановили - рекомендую це зробити прямо зараз. Тут все описано. Додавання namespace, use - незамінне. Але крім цього кайфоніть від створення конструктора натиснувши F7. Правда ж, краса?

PHP Getters and Setters

Дозволяє генерувати геттери і / або сеттери як для окремої властивості, так і для всіх властивостей. Встановлюємо як звичайно. Використання - Shift + Ctrl + P, вводимо, наприклад, getters і далі вибираємо потрібну опцію - геттери або сеттери, або і те, і інше; для якоїсь конкретної властивості або для всіх.    

PHP CS Fixer

ОБОВ'ЯЗКОВО! Дозволяє налаштувати форматування коду. Для цього необхідно встановити пакет php-cs-fixer. Втановлюємо глобально:

composer global require friendsofphp/php-cs-fixer

 

Потім слід переконатися, що в змінній PATH є каталог бінарників Composer. Місцезнаходження каталогу залежить від платформи. У моєму випадку це $HOME/.config/composer/vendor/bin. Якщо шлях не додано, додайте його командою:

export PATH="$PATH:$HOME/.config/composer/vendor/bin"

 

Якщо все зроблено правильно, подивитися параметри і доступні команди можна в консолі, виконавши:

php-cs-fixer

 

До речі, фіксити можна також в консолі, вказавши ім'я файлу. наприклад:

php-cs-fixer fix test.php --rules=@PSR2

 

В Sublime йдемо в Tools -> Build System і обираємо New Build System... В результаті відкриється файл, в який вставимо наступний код:

{
    "shell_cmd": "php-cs-fixer fix $file --rules=@PSR2
}

 

Зберігаємо файл. При цьому створимо теку builds а файл назвемо PSR-2.sublime-build. Тепер можемо форматувати код командою Ctrl + B. Можливо варто знову-таки зайти в Tools -> Build System і вибрати в меню пункт PSR-2 (що з'явився після попередніх операцій).

Також зайдемо в файл налаштувань Preferences -> Settings та в кінці додамо рядок:

"show_panel_on_build": false


Вже все працює, але ми підемо ще далі та інсталюємо ще один пакет: Shift + Ctrl + P -> Install Package -> PHP CS Fixer.  Потім відкриваємо Preferences -> Package Settings -> PHP CS Fixer ->Settings - User вставляемо і зберігаємо:

{
    "on_save": true
}

 

Але і це ще не все. Створимо конфігураційний файл так, як описано в документації пакета. Вставимо в файл такий контент:

<?php

return PhpCsFixer\Config::create()
    ->setRules([
        '@PSR2' => true,
        'array_syntax' => ['syntax' => 'short'],
        'no_unused_imports' => true
    ]);

 

Простіше кажучи, форматувати код будемо відповідно до стандарту PSR-2, для масивів використовувати короткий синтаксис (тобто трансформовувати array() в [ ]), а також видаляти імпорти, що не використовуються. Знову відкриваємо Preferences -> Package Settings -> PHP CS Fixer -> Settings та додаємо шлях до налаштувань:

{
    "on_save": true,
    "config": "/home/yourusername/.phpcsfixer"
}

Увага: замість yourusername підставляєте своє значення

Чудово! Тепер при збереженні, код буде автоматично відформатований.

Sublime Linter

Shift + Ctrl + P -> Package Install -> SublimeLinter, після нього таким же чином встановлюємо SublimeLinter-phpcs. Читаємо документацію і в підсумку опиняємося тут. Ставимо глобально ще один пакет:

composer global require "squizlabs/php_codesniffer=*"

 

Перезапускаємо Sublime, і тепер лінтер буде вказувати нам на поимлки. Що і потрібно було.

Підсумок

Необхідні інструменти є, далі все в наших руках, причому в самому прямому сенсі. Трохи наполегливості і робота піде набагато швидше. А CodeSniffer і Linter додадуть комфорту.

Успіхів!