Напишите больше кода с меньшим количеством нажатий клавиш

Каждый хочет иметь возможность создавать больше кода за меньшее количество нажатий клавиш. Стрелочные функции в 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 Code хороши тем, что их можно привязать к определенному типу файлов.

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

Фрагменты для местоположения

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

Просто выберите New Snippet file for '...' при выборе языка.

Создание дополнительных сниппетов

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

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

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

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

Расширения сниппетов

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

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

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

Спасибо, что прочитали этот пост о повышении продуктивности программирования с помощью VS Code Snippets. Если вы что-то узнали, нажмите эту кнопку и подписывайтесь на меня, чтобы получить больше советов, приемов и руководств!