Как сделать vscode артефактом разработки?

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

1. Высокочастотные сочетания клавиш по умолчанию

Здесь разобраны сочетания клавиш, соответствующие окну Mac, что удобно для просмотра пользователям двух типов терминалов.

mac	window
control	window
option	alt
command	ctrl

Вышеупомянутое можно рассматривать как кнопку на Mac, соответствующую окну, что соответствует большинству сценариев, но не полностью.

описывать	mac	window
Поиск содержимого в файлах	command + F	ctrl + F
заменить в файле	без	ctrl + H
Полнотекстовый поиск контента	command + shift + F	ctrl + shift + F
Поиск файлов по всему миру	command + P	ctrl + P
Переместить текущую строку вверх/вниз	вариант + ↑ / ↓	альт + ↑ / ↓
Копировать текущую строку выше/ниже	опция + сдвиг + ↑ / ↓	альт + шифт + ↑ / ↓
удалить текущую строку	команда + x (вырезать, когда содержимое не выбрано чтобы удалить текущую строку)	ctrl + x
объединить текущую строку	control + J	без
двигаться по слову	вариант + ← / →	Ctrl + ← / →
Перейти к началу/концу строки	команда + ← / →	home / end
клавиатура с несколькими курсорами	вариант + ↑ / ↓
мышь с несколькими курсорами	опция + левая кнопка мыши	альт + левая кнопка мыши
Все равно проверь	option + shift + L	alt + shift + L
переключатель боковой панели	command + B	ctrl + B
консольный переключатель	command + J	ctrl + J

Объяснение команды:

Объединить текущую строку:

Используя функцию слияния текущей строки, вы можете быстро сделать рисунок 1 похожим на рисунок 2. Это две привычки, если вам нравится говорить о содержании в одной строке. Эта комбинация клавиш, несомненно, очень крутая.

Переключатель боковой панели / переключатель консоли

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

Поиск файлов по всему миру

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

Введите ?, чтобы показать, как выполнять различные команды

Наиболее часто используемые из них: term (открыть командную строку), view, : (настроить на указанную строку), edt (просмотреть текущую открытую вкладку и предоставить функцию перехода), none (поиск файла и предоставить функцию перехода). ), > (отображать и запускать команды). Он очень прост в использовании, просто введите префикс + пробел и введите то, что вы хотите сделать, например:

Это третий символ, который переходит на первую строку.

Вы можете видеть, что на картинке выше есть три терминала, и я снова их переименовал. Настройка справа — это функция переименования.

2. Функция разделения экрана

Сцена, с которой я часто сталкиваюсь при написании кода, заключается в работе с разными файлами, и очень проблематично переключаться между двумя файлами. На самом деле, если вы хорошо разбираетесь в работе vscode с разделенным экраном, это может заставить вас чувствовать себя круто.

Из рисунка видно, что разделенным экраном может быть не только редактор, но и консоль. После разделения экрана вы можете посмотреть на html-код слева и написать код css справа. Никогда не оглядывайтесь назад, чтобы убедиться, что формат правильный.

Сочетание клавиш для создания разделенного экрана — это команда + \ (ctrl + \), а сочетание клавиш для переключения между редакторами — это команда + 1 - 9 (cgtrl + 1-9)

3. Фрагменты кода

Обычно, когда вы вводите часть контента, нажмите Enter или Tab, и он может завершить его за вас. Эта функция представляет собой фрагмент кода, который используется во многом как обычно:

log -> console.log('');
switch -> switch (key) {   case value:
      break;   default:     break;}

for -> for (let index = 0; index < array.length; index++) {    const element = array[index];}

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

1. команда + p (ctrl + p), чтобы открыть меню команд

2. Под вводом «> Фрагмент кода» есть только одна опция.Настройки: Настройте фрагмент кода пользователя, по умолчанию выберите его напрямую, введите его.

3. Выберите Новый фрагмент глобального кода и нажмите Enter.

4. Введите имя файла, например фрагмент кода js, и нажмите Enter, чтобы открыть новый файл.. Содержимое внутри вводится в формате json.

5. Откройте примеры в тексте, уберите бесполезные комментарии и откройте полезные комментарии. Получите файл со следующим содержимым

Вы можете видеть, что самый внешний объект — это объект только с одним свойством «Печать на консоль». Свойство представляет фрагмент кода. Теперь позвольте мне рассказать вам об этом фрагменте кода в статье.

scope : установить файл области видимости, можно расширить vue, html
префикс: префикс фрагмента кода триггера
body: тело фрагмента кода. Среди них $1 и $2 — это позиции, в которые курсор перемещается по очереди при нажатии клавиши табуляции, широко известные как заполнители, ${1:метка}. Это оставляет метку значения по умолчанию. Если вы хотите иметь несколько курсоров, напишите заполнители с одинаковыми номерами, например, измените $2 на $1 и попробуйте
описание: Опишите функцию этого фрагмента кода, обычно не используется, самый внешний атрибут может использоваться для подсказки

Теперь я преобразую вышесказанное и между прочим добавлю еще одно:

Ниже приведена моя подсказка для ввода префикса, это очень просто.

4. функция emmet

Если вы никогда не слышали об этом, вы обратите на меня внимание. Потому что это то, что позволяет вам выбивать код, чтобы повысить эффективность в десять раз.

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

div.parent>div.childern-first+div.children-two>ul>li*$4

Приведенное выше предложение может быть преобразовано в картинку. Вы можете скопировать его в свой vscode, удалить последние 4, затем повторно ввести 4 и нажать Tab, чтобы увидеть эффект.

Этот сценарий большого использования в основном используется для первого рисунка, когда диаграмма пользовательского интерфейса находится слева, а ваш редактор — справа. Глядя на определенный модуль на диаграмме пользовательского интерфейса, чтобы распечатать всю структуру за один раз, а затем, используя функцию мультиредактора, просматривая диаграмму пользовательского интерфейса и диаграмму структуры HTML, чтобы сразу получить стиль на месте, это действительно удобно. . Как пользоваться такой волшебной штукой, на самом деле, суть очень проста. Посмотрите, как я возьму вас в полет в нескольких словах.

1. Знать, как генерировать ключевые символы дочерних тегов, родственных тегов, родительских тегов и родственных тегов.. > (дочерний тег), + (родственный тег) , ^ (родственный тег родительского тега). Например:

div>p+p^div может быть описан как div имеет дочерний тег p, p имеет родственный тег p, p имеет родственный тег div родительского тега

2. Как установить атрибуты и значения для элемента. Атрибуты заключаются в квадратные скобки [].Следует отметить, что два атрибута class и id могут быть использованы в сокращенной форме .и#. Используйте {} для значений. Например:

div.abc[title=666 index=1]{123} можно описать следующим образом: Класс div — abc. Определены два свойства: title = "666", index = "1" , значение равно 123.

div.abc.efg.ccc может быть описан как div с классом abc efg ccc

3. Повторите метку несколько раз с помощью * .Например:

Div * 5 можно описать как генерация 5 меток DIV

4. Используйте $ для значения итерации, а итеративное значение может выполнять больше операций в поддерживаемых хороших плагинах emmet.Однако он относительно невелик и не будет введен. Например:

div.abc$*5 можно описать как создание 5 тегов div со значениями класса как abc1,abc2...abc5

5. Добавьте круглые скобки () для обхода набора тегов,Например:

(ul>li*2{$})*2 можно описать как создание двух групп ul>li*2{$}, без круглых скобок это можно описать как ul. Под значениями li находятся два вложенных тега 1 , 2

Чтобы узнать больше о функциях, ознакомьтесь с этой статьей:блог woo woo woo.cn on.com/summit7 wipe/afraid…

5. Аббревиатура css

Эта статья относительно небольшая, и я также нашел несколько советов, когда снова вошел в нее, но она действительно очень удобна в использовании.

Единица измерения значения может быть в форме начальное значение + значение + единица измерения (единица измерения по умолчанию — px ). Например:

p10 -> padding: 10px;
pl10 -> padding-left: 10px; 其他三个方向只要把 l 改成 top 的 t ，
right 的 r，bottom 的 b即可
m10 ->margin:10px;
ml10 -> margin-left: 10px;
t10 -> top: 10px;
f10 -> font: 10px;
fw500 ->font-weight: 500;
h10px -> height: 10px;
w10 -> width: 10px;

6. Часто используемые плагины

Есть бесчисленное множество полезных плагинов, здесь я перечислю лишь некоторые плагины, без которых мне будет неудобно

1. Auto Rename Tag автоматически синхронизирует двойные теги

2. Локализация на китайский язык

3. ESLint

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

4.Open in Browser

Щелкните правой кнопкой мыши файл html, чтобы открыть его непосредственно в браузере.

5.Path Intellisense

пути совпадают,

6.vetur

Поскольку я активный пользователь vue, без этого плагина нет даже подсветки, без этого плагина это действительно невозможно.

7.live-server

Это не плагин vscode, его можно установить напрямую с помощью npm -g live-server.

Запустите службу для мобильных телефонов для доступа к статическим ресурсам

Полезных плагинов намного больше, чем это, например, просмотр svg, отображение размера импортированного пакета и подсказки кода, представленные git. Но я чувствую, что он также необязателен в процессе использования, то есть универсальность не особенно широка. Если у вас есть плагин, который не работает без него, оставьте комментарий

Суммировать

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