Автор оригинала: FreeCodeCamp Community Member.
Сэм Уильямс
Напишите больше кода с меньшим количеством нажатий клавиш
Каждый хочет, чтобы иметь возможность производить больше кода в меньшем количестве нажатий клавиш. Функции стрелки в 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]);
Чтобы создать наш фрагмент, нам нужно создать новый ключ в объекте. Этот ключ указывает на объект с префикс , Тело и Описание Отказ
"insert handle function": { "prefix": "", "body": [], "description": ""}Префикс – это текст, который мы хотим ввести, чтобы вызвать этот фрагмент. Вы должны убедиться, что это уникально. Называть это ручка будет вызывать фрагмент каждый раз, когда вы называете функцию, чтобы мы могли пойти с чем-то вроде Promandle Отказ
Тело – это массив линий в фрагменте. Если у вас есть несколько строк кода, у вас будет несколько строк в массиве тела. Описание – это то, что будет показано, когда вы видите предложение в VS-коде.
Когда все это завершено, вы получаете что-то подобное:
"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}С сохраненным файлом вашей фрагмента, когда вы начнете печатать попмывание Вы получаете новое предложение. Включите это показывает описание фрагмента, а также первой строки кода.
Теперь вы можете сэкономить себя сотни персонажей, создавая собственные фрагменты. Но есть еще несколько более мощных особенностей!
Вкладка Вставьте точки
Когда вы вставляете свои фрагменты, обычно есть биты информации, которые вам нужно добавить. Будь то название функции или выбора переменных, вы можете устанавливать точки в вашем коде, где вам нужно ввести данные. Когда вы просматриваете эти фрагменты, вы можете вкладка между этими точками введения.
Чтобы добавить точку вставки, вам просто нужно добавить $ 1 В первую очередь $ 2 на второй и так далее. Это действительно полезно для функций, где они ожидают объекта.
"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},Вы можете иметь несколько точек вкладок на всей территории кода, что означает, что вы можете быстро и легко заполнить свой фрагмент без нажимания или стрелкового ключа к каждой точке.
Языковые фрагменты
Когда мы впервые открыли редактор фрагментов, нам было представлено список языков. Мы выбрали JavaScript, но вы могли выбрать любой из остальных 44 языков. Великая вещь о фрагментах Code Code состоит в том, что они могут быть заблокированы к определенному типу файла.
Если вы пишете HTML-файл, вы не получите все фрагменты JavaScript или Python. Это также означает, что вы можете иметь тот же префикс, создавающую разные фрагменты на основе типа файла, в котором в настоящее время работают! Но не волнуйтесь, вы все равно можете добавить глобальные фрагменты, если хотите, чтобы они могли использовать их в любом типе файла.
Местоподобные фрагменты
Аналогичным образом на языковые специфические фрагменты вы также можете создать специфичные фрагменты папки. Это может быть здорово, когда такая же названная функция делает разную вещь в двух разных проектах.
Просто выберите Новый файл фрагмента для '...' При выборе вашего языка.
Создание больше фрагментов
Теперь вы знаете мощные способы, которые VS-кодовые фрагменты могут улучшить вашу производительность, вы, вероятно, хотите сделать нагрузки. К сожалению, они могут расстраивать, чтобы создать. К счастью, есть два решения:
Генератор фрагментов
Генератор фрагментов Это сайт, который позволяет вставлять в какой-то код и легко преобразовать его в формат фрагмента.
Это действительно просто использовать и позволяет быстро создавать фрагменты, которые вы можете просто скопировать и вставить прямо в файлы фрагмента. Это будет работать с любым языком и совершенно бесплатно.
Расширения фрагментов
Если вы используете каркас, такие как React или Angular, есть много фрагментов, которые вы собираетесь захотеть создавать. К счастью, это проблема, когда у других людей было раньше, поэтому они создали библиотеки общих фрагментов для каждой рамки.
Поиск фрагменты В VS-код расширения рынка производит сотни результатов, которые вы можете установить. Все от реакции, угловой и Vue до ES6 JS, C # и PHP. Они часто имеют полный спектр фрагментов, чтобы резко сократить вам время, проведенное набрав.
Один недостаток этих расширений состоит в том, что вам придется узнать, какие префиксы (триггеры) являются, но вы быстро запомнете те, которые вы используете больше всего.
Спасибо, что ознакомились с этим постом при увеличении вашей продуктивности кодирования с фрагментами VS кода. Если вы узнали что-то, то ударили этот хлопок? Кнопка и следуйте за мной для более советов, трюков и учебников!
Оригинал: “https://www.freecodecamp.org/news/the-most-powerful-tool-to-boost-your-coding-productivity-2dc80e0eff00/”