Как ускорить веб-разработку?

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

Эммет

Emmet — это действительно мощный инструмент, уже встроенный в ваш код VS, который может помочь вам написать много строк HTML-кода в одной строке. Давайте посмотрим, как быстро мы можем добавить один тег div с классом Container, используя сочетания клавиш emmet.

Все, что нам нужно сделать, это ввести: .container (а затем нажать Tab или Enter)

И вуаля, у вас будет тег div с классом контейнера.

И лучше всего то, что ваш курсор будет прямо между открывающим и закрывающим тегом.

Теперь предположим, что я хочу добавить «div», но на этот раз мне нужен «id» «контейнера» вместо класса.

Все, что нам нужно сделать, наберите: #container (а затем нажмите Tab или Enter)

Теперь мне нужен div с идентификатором и несколькими классами. Есть предположения?

Все, что нам нужно сделать, наберите: #id.class_1.class_2 (а затем нажмите Tab или Enter)

Теперь предположим, что вместо div мне нужен тег section или один из моих пользовательских компонентов Angular/React/Vue/etc.

Все, что нам нужно сделать, введите: My-custom-conponent#id.className (а затем нажмите Tab или введите)

Это будет работать для любого тега, который вы хотите - › ‹form›, ‹link›, ‹ui› и т. д.

Для определенных тегов HTML, таких как img, ссылка emmet уже добавит реквизиты для вас,

Пример: img (нажмите Enter или Tab)

И курсор на этот раз будет указывать на реквизит, и при заполнении значения src для img я могу просто нажать вкладку, и курсор переместится на alt.

Добавление пользовательских реквизитов в тег:

Теперь предположим, что у меня есть пользовательский компонент с пользовательским реквизитом, как я могу использовать emmet?

Мой-пользовательский-компонент[myCustomProp="реквизит"]

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

Как сделать, чтобы мы добавили несколько строк HTML-кода одной строкой?

Что ж, здесь все становится интереснее, вы можете комбинировать ярлыки emmet для создания большого фрагмента HTML-кода. Мы объединяем ярлыки emmet, используя «›» (дочерний элемент) и «+» (родной брат)

т. е. объединение любых двух сочетаний клавиш emmet, которые мы узнали выше, с «+» создаст два родственных тега, а выполнение этого с «›» создаст первый как родительский, а второй как дочерний.

Давайте потренируемся: я хочу написать тег section с классом «контейнер», у которого есть два потомка —> div с заголовком класса и тег p с описанием класса:

section.container›div.header+p.description

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

Но можем ли мы записать значение тега div innerHTML в самом ярлыке? Да, мы можем, разве это не гениально. Все, что вам нужно сделать, это добавить {innerHTML} после тега div.

section.container›.header{Моя страница}+p.description{Это моя страница}

Давайте умножим

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

ui.list›(li.list-item›a:ссылка)*3

Вы можете использовать * для умножения и создания нескольких ярлыков и квадратных скобок «()».

лорем ипсум

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

section.container›.header+.description*10›lorem20

просто добавление lorem добавит весь фиктивный текст lorem ipsum, lorem20 создаст только первые 20 слов фиктивного текста lorem ipsum.

На этом заканчиваются наиболее распространенные сочетания клавиш emmet, которые я использую для ускорения своего HTML-кода. Вы можете посетить здесь, чтобы получить больше сочетаний клавиш и информацию о emmet.

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

Пользовательские фрагменты

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

Как создать сниппет в коде VS?

Перейти к | предпочтения: настроить пользовательские фрагменты

в Mac: | (команда + шифт + P) -> набрать сниппет -> ввести

Создайте новый файл фрагмента. Вы можете создавать глобальные сниппеты для всех своих проектов, но мне нравится создавать сниппеты для каждого проекта, так я могу быть более конкретным с каждым сниппетом. Создание нового файла фрагмента в вашем локальном проекте приведет к созданию файла ‹fileName›.code-snippets в папке .vscode вашего проекта.

Файл .code-snippet — это не что иное, как объектный файл json, в котором вы можете объявить все свои фрагменты.

привет фрагменты

Давайте посмотрим на простой фрагмент

«Добавить тип действия по умолчанию»: это не что иное, как ключ нашего фрагмента.

«scope»: где нам нужен этот фрагмент? в данном случае у нас есть javascript, typesctipt, также может быть css или html.

«префикс»: что нам нужно ввести в коде VS, чтобы вызвать этот фрагмент.

«тело»: на самом деле это тело сниппета, которое будет вставлено в код после нажатия табуляции или ввода после ввода вышеуказанного префикса.

«описание»: когда вы вводите префикс, вы можете увидеть это описание во всплывающей подсказке в коде VS.

${1:actionType}: Пользовательский ввод в теле фрагмента со значением по умолчанию actionType, здесь будет находиться ваш курсор после добавления тела фрагмента в файл. После добавления этого значения вы можете нажать вкладку, и она перейдет к следующему пользовательскому вводу (в нашем случае это ${2:actionPrefix).

Давайте попробуем

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

Фрагмент пользовательских компонентов

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

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

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

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

\t добавит пустое место (это не обязательно, вы всегда можете использовать более красивое расширение и активировать его после добавления кнопки в файл HTML)

Лучшие расширения кода VS

Я использую эти расширения каждый день, чтобы еще больше ускорить процесс разработки.

› TabNine: «Tabnine — это мощный помощник на основе искусственного интеллекта, призванный помочь вам писать код быстрее, уменьшить количество ошибок и узнать о лучших методах кодирования, не выходя из удобного VSCode». (Одна небольшая проблема, с которой я столкнулся, заключается в том, что это расширение довольно тяжелое и съедает оперативную память, как и все остальное. Но все же прогнозы на высшем уровне)

›Bracket Pair Colorizer: этот цвет кодирует скобки и действительно помогает в процессе просмотра.