Фрагменти коду VS: найпотужніший інструмент для підвищення продуктивності кодування

Напишіть більше коду з меншою кількістю натискань клавіш

Кожен хоче мати можливість виробляти більше коду за меншу кількість натискань клавіш. Функції стрілок в JavaScript останнім часом стали неймовірно популярними - і вони економить лише 6 символів!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

Але є кращий спосіб зберегти введення тексту - і ця стаття покаже вам інструмент для цього.

Фрагменти коду

Протягом багатьох років люди використовують фрагменти коду, щоб заощадити час - будь то загальні функції, файлові структури або навіть шаблони для цілих систем. Це не нова ідея.

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

Це було чудово для великих фрагментів коду. Але однокласники часто вводили швидше, ніж шукали файл, копіювали його та вставляли.

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

Фрагменти коду VS

VS Code має систему, яка є потужнішою, ніж навіть TextExpander або AutoHotKeys. Вбудовані фрагменти коду можна налаштувати на багато більше, ніж просто вставити код.

Перш ніж говорити про вигадливі функції, ми дізнаємось, як створити фрагмент.

У VS Code натисніть ctrl + shift + P, щоб відкрити палітру команд і знайти фрагмент. Вибір пункту «Налаштування фрагментів користувача» представляє вам список мов кодування, для яких ви можете створити фрагмент. Ми підемо з JavaScript.

Це відкриває редактор фрагментів. Є коментар, який показує, як створити базовий фрагмент, але ми створимо власний.

Цей фрагмент - це мій улюблений рядок коду. Це приємний шаблон для обробки обіцянок.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

Щоб створити наш фрагмент, нам потрібно створити новий ключ в об’єкті. Цей ключ вказує на об'єкт із символами prefix, bodyі description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

Префікс - це текст, який ми хочемо ввести, щоб запустити цей фрагмент. Потрібно переконатися, що це унікально. Його виклик handleбуде запускати фрагмент кожного разу, коли ви викликаєте функцію, щоб ми могли щось зробити на зразок promHandle.

Тіло - це масив рядків у фрагменті. Якщо у вас є кілька рядків коду, тоді ви матимете кілька рядків у масиві тіла. Опис - це те, що буде показано, коли ви побачите пропозицію у VS Code.

Коли все це завершено, ви отримуєте щось подібне:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

Зі збереженим файлом фрагмента, коли ви починаєте друкувати, promhandleви отримуєте нову пропозицію. Якщо натиснути на нього, буде показано опис фрагмента, а також перший рядок коду.

Тепер ви можете зберегти сотні символів, створюючи власні фрагменти. Але є ще більш потужні функції!

Вкладка Вставити точки

Коли ви вставляєте свої фрагменти, зазвичай потрібно додати інформацію, яку потрібно додати. Будь то іменування функції чи вибір змінних, ви можете встановити точки у своєму коді, куди вам потрібно ввести дані. Пройшовши ці фрагменти, ви можете переходити між цими точками вставки.

Щоб додати точку вставки, потрібно просто додати $1для першої точки, $2для другої тощо. Це дійсно корисно для функцій, де вони очікують об'єкта.

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

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

Мовні фрагменти

Коли ми вперше відкрили редактор фрагментів, нам був представлений список мов. Ми вибрали JavaScript, але ви могли вибрати будь-яку з інших 44 мов. Чудова річ у фрагментах коду VS полягає в тому, що їх можна заблокувати для певного типу файлу.

Якщо ви пишете файл HTML, ви не отримаєте всіх своїх фрагментів JavaScript або Python. Це також означає, що один і той же префікс може створювати різні фрагменти залежно від типу файлу, в якому ви працюєте зараз! Але не хвилюйтеся, ви все одно можете додавати глобальні фрагменти, якщо хочете мати можливість використовувати їх у будь-якому типі файлу.

Фрагменти для певних місць

Подібно до специфічних для мови фрагментів, ви також можете створювати фрагменти для конкретних папок. Це може бути чудово, коли одна і та сама функція виконує різні дії у двох різних проектах.

Просто виберіть, New Snippet file for '...'вибираючи свою мову.

Створення більше фрагментів

Тепер ви знаєте потужні способи, за допомогою яких фрагменти коду VS можуть підвищити вашу продуктивність, ви, ймовірно, хочете робити навантаження. На жаль, їх може бути неприємно створювати. На щастя, є два рішення:

Генератор фрагментів

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

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

Розширення фрагментів

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

Пошук на snippetsринку розширень VS Code дає сотні результатів, які ви можете встановити. Все - від React, Angular та Vue до ES6 JS, C # та PHP. Вони часто мають повний спектр фрагментів, щоб різко скоротити ваш час, витрачений на друк.

Недоліком цих розширень є те, що вам доведеться дізнатися, що таке префікси (тригери), але ви швидко запам’ятаєте ті, які використовуєте найбільше.

Дякуємо, що прочитали цю публікацію про підвищення продуктивності кодування за допомогою фрагментів коду VS. Якщо ви чогось навчилися, натисніть цю клавішу? І дотримуйтесь мене, щоб отримати більше порад, підказок та підручників!