Все, что вы должны знать при первом использовании VS Code

предисловие

Название статьи: «Все, что вы должны знать при первом использовании VS Code». Последний контент этой статьи, обновленный 2021-10-09. Вам не нужно беспокоиться о том, что эта статья устареет, потому что с обновлением версии и плагина VS Code эта статья будет соответствующим образом обновлена.

Последний контент этой статьи также будетGitHubОбновляйте синхронно, добро пожаловать в звезду.

Программное обеспечение VS Code настолько крутое и простое в использовании, что все больше и больше молодых интернет-пользователей используют его.

Фронтенд-мужской богЮ ЮсиОтлично оцените VS Code следующим образом:

Вас может удивить одна вещь: сам VS Code написан на языке JavaScript (подробности см. в фреймворке разработки клиента для ПК на основе JS).Electron). Джефф Этвуд предложил знаменитый закон Этвуда в 2007 году:

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

Неважно, кто такой Джефф Этвуд (он соучредитель Stack Overflow), важен закон.

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

Если вы занимаетесь фронтенд-разработкой (основным языком является язык программирования JavaScript), вы можете использовать VS Code в качестве «основной инструмент разработки". Это программное обеспечение специально разработано для студентов, обучающихся на переднем крае.

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

Даже некоторые студенты, которые пишут документы и пишут, часто используют VS Code в качестве уценки.инструмент для письма,Нет смысла нарушения и.

Во-вторых, даже если вы не попадаете ни в одну из вышеперечисленных категорий, вы все равно можете считать VS Code самым простымТекстовый редакторИспользовать его лучше, чем Блокнот, который идет в комплекте с системой Windows.

Написание этой статьи — само собой разумеющееся.

1. Введение в код VS

Полное название VS Code — Visual Studio Code. Это бесплатный, кроссплатформенный, высокопроизводительный и легкий редактор кода с открытым исходным кодом. Он отлично справляется с точки зрения производительности, языковой поддержки и сообщества с открытым исходным кодом.

У Microsoft есть два вида программного обеспечения: одно — VS Code, а другое — другое программное обеспечение.

IDE против редактора

IDE и редакторы разные:

IDE(Интегрированная среда разработки, интегрированная среда разработки): она имеет лучшие интеллектуальные подсказки и взаимные переходы для кода, фокусируясь на инженерных проектах, и имеет лучшую поддержку графического интерфейса для разработки и отладки проектов, поэтому она относительно громоздка. Например, Eclipse позиционируется как IDE.
редактор: Он относительно легкий и ориентирован на редактирование текста. Например, Sublime Text позиционируется как редактор. Другим примером является «Блокнот», который входит в состав системы Windows и представляет собой простейший редактор.

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

Особенности кода VS

Миссия VS Code — предоставить разработчикам возможности разработки в редакторе, подобные IDE, такие как интеллектуальные подсказки кода, проверка синтаксиса, графические инструменты отладки, подключаемые расширения, управление версиями и т. д.
Кроссплатформенная поддержка нескольких платформ, включая MacOS, Windows и Linux.
Исходный код VS Code находится в открытом доступе под лицензией MIT.
Поддержите сторонние плагины, мощные функции и идеальная экосистема.
Поставляется с богатыми функциями отладки.
Встроенный emmet: поддерживает автодополнение кода и быстро создает простые синтаксические структуры. Вы должны знать, что эта функция доступна в Sublime Text, и вы должны сначала установить плагин.
VS Code поставляется с поддержкой синтаксиса для JavaScript, TypeScript и Node.js. То есть, когда вы пишете JS и TS, у вас есть свои интеллектуальные подсказки. Разумеется, для других языков можно установить соответствующиеПакет расширенияПлагины также будут иметь умные подсказки.

Война фронтенд-оружия: VSCode и WebStorm

Один из вопросов, которые любит задавать клиент Xiaobai: Какой редактор/IDE прост в использовании? Это VS Code или WebStorm (WebStorm на самом деле является специализированной версией IntelliJ IDEA)? Позвольте мне сделать сравнение:

что круче: Очевидно VS Code круче.
использование памяти: По моим наблюдениям, VS Code очень требователен к памяти (особенно когда у вас открыто несколько окон), но если у вас достаточно памяти, вы не почувствуете никаких задержек при его использовании. Напротив, IntelliJ IDEA не только очень интенсивно использует память, но и очень тормозит. Если вы хотите перейти на легкий редактор, который не занимает память, лучше всего использовать редактор «Sublime Text».
Используйте соотношение: Конечно VS Code лучше. Если я не буду больше ничего говорить, я расскажу о данных, Моя текущая команда R&D насчитывает около 200 человек (120 back-end, 80 front-end), и большинство из них кодируют в VS Code, что уместно.

Так что, если вы зададите этот вопрос в будущем, это немного удручает.

Установка кода VS

Официальный сайт VS Code:code.visualstudio.com

Установка VS Code очень проста: перейдите прямо на официальный сайт, чтобы загрузить установочный пакет, а затем дважды щелкните для установки.

Как показано на рисунке выше, нажмите «Загрузить напрямую», чтобы загрузить и установить одним щелчком мыши.

VS Code поддерживает следующие платформы:

2. Новое преимущество: ярлыки VS Code

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

Любого инструмента, освоив 20% навыков, достаточно, чтобы справиться с 80% работы. В таком случае вы можете спросить: а будет ли сохранено только 20% возможностей, скоро ли это удовлетворит 80% пользователей?

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

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

1. Клавиши быстрого доступа к рабочему пространству

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Cmd + Shift + P	Ctrl + Shift + P, F1	Показать палитру команд
Cmd + B	Ctrl + B	показать/скрыть боковую панель	Очень практично
`Cmd + \`	`Ctrl + \`	Создайте несколько редакторов	[Важно] Инструмент копирования кода
Ctrl + 1, 2	Ctrl + 1, 2	Сосредоточьтесь на 1-м, 2-м редакторе	То же самое важно
Cmd + +, Cmd + -	Ctrl + +, Ctrl + -	Увеличение/уменьшение рабочей области (включая шрифты кода, левую панель навигации)	Часто используется в сценах проектора
Cmd + J	Ctrl + J	показать/скрыть консоль
Cmd + Shift + N	Ctrl + Shift + N	Повторно открыть окно программного обеспечения	очень часто используется
Cmd + Shift + W	Ctrl + Shift + W	Закрыть текущее окно программы
Cmd + N	Ctrl + N	создать новый файл
Cmd + W	Ctrl + W	закрыть текущий файл

2. Операция перехода

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Cmd + `	нет	в том же софтенесколько рабочих пространствпереключаться между	используется очень часто
Cmd + Option + клавиши со стрелками влево и вправо	Ctrl + Pagedown/Pageup	в уже открытомнесколько файловпереключаться между	очень практично
Ctrl + Tab	Ctrl + Tab	Переход между несколькими открытыми файлами	Не так быстро, как сочетания клавиш выше
Cmd + Shift + O	Ctrl + shift + O	различные в текущем файлемежду методамисделать прыжок
Ctrl + G	Ctrl + G	Перейти к указанной строке
`Cmd+Shift+\`	`Ctrl+Shift+\`	Перейти к соответствующей скобке

3. Переместите курсор

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Клавиши со стрелками	Клавиши со стрелками	существуетодин символпереместите курсор между	каждый знает
опция + клавиши со стрелками влево и вправо	Ctrl + клавиши со стрелками влево и вправо	существуетсловопереместите курсор между	очень часто используется
Cmd + клавиши со стрелками влево и вправо	Fn + клавиши со стрелками влево и вправо	существуетвся линияпереместите курсор между	очень часто используется
Ctrl + ←	Fn + ← (или Win + ←)	Поместите курсор в крайнее левое положение текущей строки	очень часто используется
Cmd + →	Fn + → (или Win + →)	Поместите курсор в крайнее правое положение текущей строки	очень часто используется
Ctrl + ↑	Ctrl + Home	Установите курсор на первую строку статьи
Ctrl + ↓	Ctrl + End	Установите курсор на последнюю строку статьи
Cmd + Shift + \		существуеткодовый блокпереместите курсор между

4. Операция редактирования

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Cmd + C	Ctrl + C	копировать
Cmd + X	Ctrl + X	резать
Cmd + C	Ctrl + V	вставить
Cmd + Enter	Ctrl + Enter	Добавьте новую строку ниже текущей строки, затем перейдите к этой строке	Быстро вставить строку вниз, даже если курсор не находится в конце строки
Cmd+Shift+Enter	Ctrl+Shift+Enter	Добавьте новую строку над текущей строкой, затем перейдите к этой строке	Быстро вставить строку вверх, даже если курсор не находится в конце строки
Вариант + ↑	Альт + ↑	переместить код вверх	очень часто используется
Вариант + ↓	Альт + ↓	переместить код вниз	очень часто используется
Опция + Shift + ↑	Alt + Shift + ↑	Скопируйте код на одну строку вверх
Опция + Shift + ↓	Alt + Shift + ↓	Скопируйте код на одну строку ниже	Инструмент для написания повторяющегося кода

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

Сценарий 1. Предположим, что курсор находится в строке 5.любое место, затем сразу нажмитеCmd + Cа такжеCmd + V, скопирует эту строку кода в строку 6. продолжайте нажиматьCmd + Cа такжеCmd + V, скопирует эту строку кода в строку 7. скопировать код так просто.
Сценарий 2: Предположим, что курсор сейчас находится в строке 5, затем сначала нажмитеCmd + C, затем дважды щелкните↑Клавиши со стрелками, курсор находится в 3-й строке, затем продолжайте нажиматьCmd + V, строка кода только что была скопирована в строку 3, а код, изначально находившийся в строке 3, будетдвигаться вниз.

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

5. Мультикурсорное редактирование

Ярлыки для Mac	Выиграть ярлыки	эффект
Cmd + Option + клавиши вверх и вниз	Ctrl + Alt + клавиши вверх и вниз	В нескольких последовательных столбцах курсор появляется одновременно
Option + щелчок мышью в любом месте	Alt + щелчок мышью в любом месте	В любой позиции курсор появляется одновременно
Option + Shift + перетаскивание мышью	Alt + Shift + перетаскивание мышью	В конце каждой строки в выделенной области появляется курсор
Cmd + Shift + L	Ctrl + Shift + L	При всем одинаковом содержании выделенного текста появляется курсор

Другие операции редактирования с несколькими курсорами: (очень важно)

Выделите текст, затем нажмите и удерживайте клавишу быстрого доступа "Cmd + D" (пользователи Windows нажимают и удерживают "Ctrl + D»), вы можете добавлять одни и те же слова в полном тексте к выделению по одному.
Выделив кучу текста, нажмите и удерживайтеOption + Shift + i" (пользователи Windows нажимают и удерживают "Alt + Shift + I”, либо вконец каждой строкиОба создают курсор.

6. Удалить операцию

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Cmd + shift + K	Ctrl + Shift + K	удалить всю строку	Эффект «Cmd + X» заключается в вырезании, но также может удалить всю строку
option + Backspace	Ctrl + Backspace	удалить слово перед курсором	Английский допустим, очень часто используется
option + delete	Ctrl + delete	удалить слово после курсора
Cmd + Backspace		Удалить всю строку перед курсором	очень часто используется
Cmd + delete		Удалить всю строку после курсора

Примечания: Клавиши быстрого доступа для перемещения курсора, операций редактирования и удаления, упомянутые выше, в основном применимы в других редакторах.

7. Связанный с языком программирования

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Cmd + /	Ctrl + /	Добавить однострочный комментарий	очень часто используется
Option + Shift + F	Alt + shift + F	форматирование кода	очень часто используется
F2	F2	РефакторингПереименовать	изменение кода
Ctrl + J		Объединение нескольких строк кода в одну	Пользователи Win могут искать «объединить строки» в палитре команд.
Cmd +
Cmd + U	Ctrl + U	Перемотать движение курсора на предыдущую позицию	Отменить движение курсора и выбор

8. Связанные с поиском

Ярлыки для Mac	Выиграть ярлыки	эффект	Примечание
Cmd + Shift + F	Ctrl + Shift +F	код глобального поиска	очень часто используется
Cmd + P	Ctrl + P	В текущем проекте проекта,Глобальныйимя файла поиска
Cmd + F	Ctrl + F	Поиск кода в текущем файле с помощью курсора в поле поиска
Cmd + G	F3	Искать код в текущем файле, курсор остается в редакторе	очень умно

9. Настройте сочетания клавиш

Нажмите и удерживайте сочетание клавиш «Cmd + Shift + P», чтобы открыть панель команд, введите «горячая клавиша» на панели команд, вы можете ввести настройку сочетания клавиш.

Конечно, вы также можете выбрать строку меню «Настройки -> Сочетания клавиш», чтобы ввести настройки сочетания клавиш:

10. Список сочетаний клавиш

Вы можете нажать кнопку шестеренки в левом нижнем углу VS Code, эффект будет следующим:

На приведенном выше рисунке выберите «Сочетания клавиш» в расширенном меню, вы можете просмотреть и изменить весь список сочетаний клавиш:

Ярлык справочной ссылки

Краткая справочная таблица сочетаний клавиш [официальная]:code.visual studio.com/shortcuts/…

3. Наслаждайтесь шелковистой гладкостью: стандартные операции

1. Быстро сгенерируйте HTML-скелет

Сначала создайте пустой HTML-файл, а затем используйте следующие методы для быстрого создания HTML-скелета.

способ 1:войти!, затем нажмитеenterключ для создания html-скелета. Как показано ниже:

способ 2:войтиhtml:5, затем нажмите и удерживайтеTabключ для создания html-скелета.

Сгенерированный скелет содержит следующее содержимое:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

С приведенным выше html-скелетом мы можем с радостью вставить в него код CSS и код JS.

2. Отображение нескольких окон редактора слева и справа (инструмент копирования кода)

Пользователи Mac удерживают горячую клавишуCmd + \, пользователи Windows нажимают и удерживают горячую клавишуCtrl + \, вы можете открыть несколько окон редактора одновременно, эффект будет следующим:

Нажмите сочетание клавиш «Cmd + 1», чтобы переключиться на левое окно, и нажмите сочетание клавиш «Cmd + 2», чтобы переключиться на правое окно. В любое время и в любом месте, режьте столько, сколько хотите.

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

В-четвертых, высококлассный доступ: использование командной панели

Пользователи Mac удерживают горячую клавишуCmd+Shift+P(Пользователи Windows удерживают ярлыкCtrl+Shift+P), чтобы открыть палитру команд. Эффект следующий:

Если нам нужно изменить некоторые элементы настроек, мы можем управлять ими через «Командную панель», что будет более эффективно. Вот несколько.

1. Установите VS Code на китайский язык

Пользователи Mac удерживают горячую клавишуCmd+Shift+P(Пользователи Windows удерживают ярлыкCtrl+Shift+P), чтобы открыть палитру команд.

В палитре команд введитеConfigure Display Language,выберитеInstall additional languages, затем установите плагинChinese (Simplified) Language Pack for Visual Studio CodeВот и все.

Кроме того, мы можем установить плагин напрямуюChinese (Simplified) Language Pack for Visual Studio Code,это то же самое.

После завершения установки перезапустите VS Code.

2. Установите размер шрифта

Введите «шрифт» в командной панели, чтобы установить шрифт, эффект будет следующим:

Конечно, вы также можете выбрать «Настройки — Настройки — Общие настройки» в строке меню и изменить размер шрифта в этом элементе настройки.

3. Настройки сочетания клавиш

Введите «Сочетания клавиш» на панели команд, чтобы войти в настройки сочетания клавиш.

4. Преобразование регистра

Выделив текст, введите в палитре командtransfrom, вы можете изменить заглавные буквы текста.

5. Запустите VS Code с помощью командной строки

(1) Введите сочетание клавиш «Cmd + Shift + P», выберитеinstall code command:

(2) С помощью командной строки:

codeКоманда: Запустите программное обеспечение VS Code.
code pathName/fileNameКоманда: Откройте указанный каталог/указанный файл с помощью программного обеспечения VS Code.

5. Частная настройка: общая конфигурация VS Code

Перед изменением конфигурации VS Code нам нужно знать, где найти запись элемента конфигурации.

способ 1: для пользователей Mac выберите "Код-->Настройки-->Настройки" в строке меню, чтобы открыть элементы конфигурации:

способ 2: щелкните значок настроек в правом нижнем углу программы:

1. Измените цветовую тему

Выберите строку меню «Код --> Настройки --> Цветовые темы»:

Во всплывающем диалоговом окне выберите понравившуюся цветовую тему:

2. Панировочные сухари

Откройте настройки VS Code и выберите «Настройки пользователя -> Workbench -> Путь навигации», как показано на следующем рисунке:

На картинке выше просто поставьте галочку в красном поле.

После успешной настройки мы можем просмотреть «иерархическую структуру» текущего файла, что очень удобно. Как показано ниже:

С помощью этой навигационной крошки мы можем щелкнуть по ней, чтобы перейти между любым каталогом и любым файлом по желанию.

4. Отображать ли номер строки кода

VS Code по умолчанию отображает номер строки кода. можно поискать в настройкахeditor.lineNumbersИзмените настройки, элементы конфигурации следующие:

Я рекомендую оставить этот параметр без изменений.

5. Отображается ли миниатюра кода справа

VS Code по умолчанию отображает миниатюры справа от кода. можно поискать в настройкахeditor.minimapВыполните настройки, элементы конфигурации следующие:

6. Выделите текущую строку кода (измените цвет фона строки, в которой находится курсор)

Когда мы ставим курсор на строку, цвет фона этой строки не меняется. Если хочешьВыделятьДля текущей строки кода необходимо установить два шага:

(1) Поиск в пункте настроекeditor.renderLineHighlight, установите значение параметра наallилиline.

(2) Добавьте следующее содержимое в элемент настройки:

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#00000090",
    "editor.lineHighlightBorder": "#ffffff30"
}

В приведенном выше коде первая строка кода означает: изменить цвет фона строки, в которой расположен курсор (цвет фона установлен полностью черный, а непрозрачность равна 90%); вторая строка кода означает: изменить цвет фона. цвет границы строки, на которой находится курсор.

7. Автоматическое сохранение сразу после смены кода

метод первый:

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

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

Способ 2:

Конечно, вы также можете напрямую выбрать «Файл — Автосохранение» в строке меню. Если флажок установлен, файл будет сохранен в режиме реального времени, как только вы закончите писать код.

8. Нужно ли форматировать сразу после сохранения кода

После сохранения кода по умолчаниюне сразуОтформатируйте код. можно поискать в настройкахeditor.formatOnSaveПроверьте этот элемент конфигурации:

Я думаю, что можно оставить этот элемент конфигурации по умолчанию, не проверяя его.

9. Пробел или табуляция

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

Общие настройки следующие:

editor.detectIndentation: Автоматическое обнаружение (по умолчанию включено). Скриншот ниже:

editor.insertSpaces: вставка пробела при нажатии клавиши Tab (по умолчанию). Скриншот ниже:

editor.tabSize: один символ табуляции по умолчанию равен четырем пробелам. Скриншот ниже:

10. Тип файла по умолчанию после создания нового файла

Когда мы нажимаем сочетание клавиш «Cmd + N», чтобы создать новый файл, VS Code не может распознать тип файла по умолчанию, поэтому он не может распознать соответствующую подсветку синтаксиса.

Если вы хотите изменить тип файла по умолчанию, вы можете выполнить поиск в настройкахfiles.defaultLanguage, элементы настройки следующие:

В красном поле на изображении выше введите тип файла по умолчанию, который вы ожидаете. я заполнилhtmlтип, вы также можете заполнить какjavascriptилиmarkdown, или другие типы языка.

11. При удалении файла должно ли всплывать окно подтверждения

Когда мы удаляем файл в VS Code, появляется окно подтверждения по умолчанию. Если вы хотите изменить настройки, вы можете искать элементы в набореxplorer.confirmDelete. Скриншот ниже:

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

Далее поговорим о некоторых более продвинутых конфигурациях.

12. Сравнение файлов

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

Функция сравнения, которая поставляется с VS Code, недостаточно мощная, мы можем установить плагины.compareit, для более богатого сравнения. Например, после установки плагинаcompareitПосле этого мы можем сравнить «текущий файл» с содержимым «буфера обмена»:

13. Найдите, где вызывается функция

Как будто я ужеa.jsфайл называетсяfoo()функция. Ну, если я хочу знатьfoo()Вызывается ли функция и в других файлах и как это сделать?

Делается это следующим образом: вa.jsфайл, выберитеfoo()функцию (или поместите курсор наfoo()функция), затем нажмите и удерживайте сочетание клавиш «Shift + F12», вы можете увидетьfoo()Где функция вызывается, более практично.

14. Работа с мышью

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

15. Рефакторинг

Существует множество видов рефакторинга, давайте рассмотрим несколько примеров.

Именование рефакторинга:

Когда мы пытаемся изменить функцию (или имя переменной), мы можем поместить на нее курсор и нажать клавишу «F2», после чего место, где появляется функция (или имя переменной), будет изменено.

рефакторинг метода:

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

16. Поиск в текущем файле

В приведенном выше списке сочетаний клавиш мы уже знаем следующие сочетания клавиш:

Cmd + F (Ctrl + F для пользователей Win): поиск в текущем файле с помощью курсора в поле поиска.
Cmd + G (F3 для пользователей Win): поиск в текущем файле, курсор остается в редакторе

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

На изображении выше вы можете переключаться между полем ввода и полем замены, нажимая клавишу «Tab» и клавишу «Shift + Tab».

Функция «найти в выбранном контенте» более практична. Так же можно поискать в пункте настроекeditor.find.autoFindInSelection, после проверки этого пункта настройки, то при выборе указанного содержимого, затем нажмите и удерживайте "Cmd+F", вы сможетеавтоматическийПросто загляните в эти. Этот элемент настройки показан на рисунке ниже:

17. Глобальный поиск

В приведенном выше списке сочетаний клавиш мы уже знаем следующие сочетания клавиш:

Cmd + Shift + F (Ctrl + Shift + F для пользователей Win): поиск в глобальных папках. Эффект следующий:

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

18. Управление версиями Git

VS Code поставляется с системой управления версиями Git, как показано на следующем рисунке.

На изображении выше мы можем выполнять здесь стандартные командные операции git. Если вы не знакомы сУправление версиями Git, вы можете сначала пойти на уроки макияжа.

А пока рекомендую установить плагинGitLens, это один из моих наиболее рекомендуемых плагинов в VS Code, это просто артефакт Git, обязательный для программистов.

19. Увеличить/уменьшить рабочее пространство

После того, как мы изменим размер шрифта в указанных выше настройках, мы изменим только размер шрифта кода.

Если вы хотите увеличить всю рабочую область (включая шрифт кода, шрифт левой панели навигации и т. д.), вы можете нажать клавишу быстрого доступа "cmd +/-". Пользователи Windows нажимают "ctrl +/-"

Этот трюк отлично работает, когда мы демонстрируем код кому-то на проекторе..

Если вы хотите восстановить размер рабочего пространства по умолчанию, вы можете ввести в палитре команд重置缩放(Английский этоreset zoom)

20. Создайте несколько подпапок

Когда мы создаем новую папку, если мы напрямую вводимaa/bb/cc,Например:

Затем вы можете создать несколько слоев подпапок, эффект будет следующим:

двадцать один,`.vscode`Роль папок

Чтобы унифицировать конфигурацию vscode команды, мы можем создать ее в корневом каталоге проекта..vscodeкаталог и поместите в него некоторое содержимое конфигурации, например:

settings.json: настройки рабочей области, конфигурация форматирования кода, конфигурация плагина.
sftp.json: Конфигурация для передачи файлов по ftp.

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

22. Автономный терминал

Мы можем нажать «Ctrl + `», чтобы открыть терминал, который поставляется с VS Code. Я не думаю, что встроенный терминал так прост в использовании, я рекомендую вам использовать сторонний терминалitem2.

23, поддержка синтаксиса Markdown

VS Code поставляется с подсветкой синтаксиса уценки. То есть, если вы пишете статьи в формате уценки, вы можете полностью писать в VS Code.

После записи файла md вы можете нажать кнопку в правом верхнем углу, чтобы просмотреть его, как показано ниже:

Обычно я устанавливаю плагин «Markdown Preview Github Styling», чтобы просмотреть стиль Markdown в стиле GitHub. Стиль очень простой и красивый.

Вы также можете войти в панель управленияMarkdown: 打开预览, непосредственно просмотреть файл уценки в полноэкранном режиме.

24. Эммет в VS Code

EmmetЭто может значительно повысить эффективность написания html и css, а также дает очень краткое грамматическое правило.

Например, введем сокращенный код в редакторе:ul>li*6, затем нажмите клавишу Tab, чтобы получить следующий фрагмент кода:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

VS Code по умолчанию поддерживает Emmet. Дополнительные правила грамматики Эммета вы можете найти сами.

25. Измените шрифт и используйте шрифт «Fira Code».

Этот шрифт красивый и отлично подходит для написания кода:

Шаги установки следующие:

(1) ВойтиGitHub.com/ton sky/FIR A…сайте, скачайте и установите шрифт "Fira Code".

(2) Откройте «Настройки» VS Code и найдитеfont, измените соответствующую конфигурацию следующим образом:

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
"editor.fontLigatures": false,//控制是否启用字体连字，true启用，false不启用

Вторая строка конфигурации выше, зависит от личных привычек, я устанавливаю ее прямо на"editor.fontLigatures": null, потому что я не очень привык к лигатурам.

26. Форматирование кода: красивее

мы можем использоватьPrettierФорматирование кода сделает отображение кода более красивым. Действуйте следующим образом:

(1) Установите плагинPrettier.

(2) В корневом пути проекта создайте новый файл.prettierrc, и добавьте в файл следующее:

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

Приведенный выше контент является моей собственной конфигурацией, вы можете обратиться к нему.

Для дополнительной настройки вы можете обратиться к официальной документации:красивее.IO/docs/en/opt…

27. Передача файлов: sftp

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

Действуйте следующим образом:

(1) Установите плагинsftp.

(2) Конфигурацияsftp.jsonдокумент. После установки плагина введите сочетание клавиш «cmd+shift+P», чтобы открыть командную панель, а затем введитеsftp:config, Enter, текущий проект.vscodeПапка автоматически создастsftp.jsonфайл, содержимое, которое нам нужно настроить в этом файле, может быть:

host: IP-адрес сервера
username:имя пользователя
privateKeyPath: Локально сконфигурированный ключевой файл для входа на рабочую станцию (он также может быть файлом ppk)
remotePath: Путь к папке на рабочей станции, которая синхронизируется с локальным проектом.Имя должно совпадать с корневым каталогом файла локального проекта.Перед загрузкой файлов по sftp необходимо вручную сгенерировать этот корневой каталог с помощью mkdir на рабочей станции.
ignore: укажите файлы и папки, которые будут игнорироваться при использовании sftp: синхронизировать с удаленным, обратите внимание, что после каждой строки есть запятая, а в последней строке запятая отсутствует

Пример такой: (обратите внимание, что комментарии нужно убрать)

{
  "host": "192.168.xxx.xxx", //服务器ip
  "port": 22, //端口，sftp模式是22
  "username": "", //用户名
  "password": "", //密码
  "protocol": "sftp", //模式
  "agent": null,
  "privateKeyPath": null,
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "remotePath": "/root/node/build/", //服务器上的文件地址
  "context": "./server/build", //本地的文件地址

  "uploadOnSave": true, //监听保存并上传
  "syncMode": "update",
  "watcher": {
    //监听外部文件
    "files": false, //外部文件的绝对路径
    "autoUpload": false,
    "autoDelete": false
  },
  "ignore": [
    //忽略项
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

(3) В текущем файле VS Code выберите «Щелкните правой кнопкой мыши -> загрузить», чтобы загрузить локальный код на указанный ftp-сервер (то есть вышеhostIP-адрес сервера настроен в ).

Мы также можем выбрать «Вправо -> Diff с удаленным», вы можете кодировать код локального ftp-сервера и сделать сравнение.

28. Установите отступ вкладки

искать в конфигеDetect Indentation, изменено на false. Ссылка на ссылку:ys.com/consult/32739…

Шесть, три головы и шесть рук: рекомендация по плагину VS Code

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

На фигуре выше, щелкните раздел Red Box в поле ввода, вы хотите выглядеть воспламенение имени, а затем установить его.

Позвольте мне перечислить несколько общих плагинов, которые очень полезны. Уведомление:Чем выше порядок, тем практичнее.

1. GitLens [рекомендуется]

Я настоятельно рекомендую вам установить плагинGitLens, это один из моих наиболее рекомендуемых плагинов в VS Code, это просто артефакт Git, обязательный для программистов. Если вы не знаете, это действительно вне.

GitLens имеет много мощных функций для управления Git, таких как:

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

Откройте репозиторий Git, который выглядит так, если GitLens не установлен:

После установки GitLens это выглядит так:

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

2. История Git

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

3. Живой сервер [рекомендуется]

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

Как использовать: После установки плагина начните писать код, после написания кода щелкните правой кнопкой мыши и выберите «Открыть с помощью Live Server».

4. Китайский (упрощенный) языковой пакет для Visual Studio Code

Пусть программное обеспечение отображается на упрощенном китайском языке.

5. Bracket Pair Colorizer 2: выделение пар скобок [рекомендуется]

Bracket Pair Colorizer 2Плагин: отображать пары скобок разными цветами и отмечать диапазоны скобок линиями. короткое имярадужные скобки.

Кроме того, существуетRainbow BracketsПлагины также могут выделять пары скобок.

6. sftp: передача файлов [рекомендуется]

Подробная конфигурация была упомянута выше.

7. открыть в браузере

Установитьopen in browserПосле установки плагина щелкните правой кнопкой мыши HTML-файл и выберите --> Открыть в браузере по умолчанию, чтобы просмотреть веб-страницу в браузере.

8. highlight-icemode: когда выбран тот же код, сделайте выделение более очевидным [рекомендуется]

Подсветка, которая поставляется с VSCode, действительно недостаточно заметна. Поддержите его с помощью плагина.

После использования этого плагина подсветку, идущую в VS Code, можно отключить:

добавить в пользовательских настройках"editor.selectionHighlight": falseВот и все.

Ссылка на ссылку:После выбора vscode рекомендуется использовать тот же плагин для выделения контента.

9. vscode-иконки

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

10. Менеджер проекта

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

11. Основные моменты TODO

В процессе написания кода я вдруг обнаружил баг, но не хочу останавливать работу в руке, чтобы не прерывать свои размышления, что мне делать? В соответствии со спецификациями кода мы обычно добавляем в код комментарий TODO. Например: (обратите внимание, что это должно быть написано в верхнем регистреTODO, вместо нижнего регистраtodo)

//TODO:这里有个bug，我一会儿再收拾你

или:

//FIXME:我也不知道为啥， but it works only that way.

плагин установленTODO HighlightПосле этого зажмите «Cmd + Shift + P», чтобы открыть панель команд, введите «Todohighlist», выберите соответствующую команду, и мы сможем увидеть список todoList.

12. WakaTime [рекомендуется]

Подсчитайте время, потраченное на написание кода в VS Code. Статистические результаты следующие:

13. Время кода

Code TimeПлагин: записывайте время программирования, подсчитывайте строки кода.

После установки плагина вы можете увидеть статистику времени в правом нижнем углу строки состояния в нижней части VS Code. Нажав на это место, выберите «Панель управления временем кода», чтобы просмотреть статистику.

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

14. Markdown Preview Github Styling [рекомендуется]

Предварительный просмотр стиля Markdown в стиле GitHub, очень лаконичный и элегантный. Как и в следующем примере, текст Markdown записывается слева, а эффект рендеринга Markdown отображается справа:

15. Улучшенный предварительный просмотр уценки

Предварительный просмотр стиля Markdown.

Markdown All in One

Этот плагин поможет вам писать документы в Markdown более эффективно.

16. Синхронизация настроек

адрес:GitHub.com/sha там плачь...
Функция: синхронизация конфигурации VS Code между несколькими устройствами. Используйте этот инструмент синхронизации, войдя в свою учетную запись GitHub.

Подробная операция синхронизации будет рассмотрена в следующем параграфе.

Кроме того, по пекинскому времени14 августа 2020 г., Microsoft выпустила стабильную версию Visual Studio Code 1.48. эта версияРоднойПоддержите пользователей для синхронизации конфигурации VS Code, просто войдите в учетную запись Microsoft или учетную запись GitHub.

17. vscode-синхронизация

адрес:GitHub.com/NONO пусть OA Зоро…
Функция: синхронизация конфигурации VS Code между несколькими устройствами.

18, Ветур

Многофункциональный плагин интеграции Vue, в том числе: подсветка синтаксиса, умные подсказки, emmet, подсказки об ошибках, форматирование, автозаполнение, отладчик. Официальный плагин Vue для VS Code является обязательным для разработчиков Vue.

19. Фрагменты ES7 React/Redux/GraphQL/React-Native

Синтаксис Intellisense для React/Redux/react-router.

20. minapp: поддержка апплета

Необходимый плагин для разработки апплета.

21. Красивее: форматирование кода

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

22, ESLint: проверка формата кода

В повседневной разработке рекомендуется использовать Prettier для форматирования кода, а затем использовать eslint для проверки.

23. Украсить

Инструмент форматирования кода.

Примечание. Для сравнения, Prettier в настоящее время является самым популярным инструментом форматирования кода, который используется чаще, чем Beautify.

24. Фрагменты кода JavaScript (ES6)

Интеллектуальный синтаксис ES6, поддерживает быстрый ввод.

25. Поиск node_modules [рекомендуется]

node_modulesВ модуле слишком много папок и модулей, и найти его совсем не просто. хорошо установитьSearch node_modulesПосле этого плагина введите сочетание клавиш «Cmd+Shift+P», затем введитеnode_modules, выберите из всплывающих опцийSearch node_modulesдля поиска модулей в node_modules.

26. indent-rainbow: выделить отступ кода

indent-rainbowПлагин: выделение отступа кода.

После завершения установки эффект будет таким, как показано ниже:

27. Утилиты консоли javascript: быстрая печать журналов журналов [рекомендуется]

После установки этого плагина, когда мы зажимаем сочетание клавиш "Cmd+Shift+L", автоматически появится логconsole.log(). Просто Евангелие от бревенчатой вечеринки.

когда мы выбираем переменнуюname, затем зажмите сочетание клавиш "Cmd+Shift+L", автоматически появится лог этой переменнойconsole.log(name).

Другие подобные плагины: журнал Turbo Console.

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

Есть три области программирования:

Третье направление — логирование, это самый простой и удобный способ.
Вторая область — отладка по точкам останова, которая очень часто используется в разработке интерфейсов, Java, PHP и iOS.Отладка по точкам останова может интуитивно отслеживать логику выполнения кода, стеки вызовов, переменные и т. д., что является очень практичным навыком.
Первая область — это разработка через тестирование, когда тесты пишутся до написания кода. В отличие от отладки с точками останова второго сорта, большинство людей не очень привыкли к этому методу, но в глазах иностранных разработчиков или agile-энтузиастов это самый эффективный метод разработки с точки зрения обеспечения качества кода, рефакторинга и т. д. Очень полезная и неотъемлемая часть современного программирования.

28. Проверка заклинаний кода: проверьте ошибки правописания

Цель этого средства проверки орфографии — помочь обнаружить распространенные орфографические ошибки в словах и обнаружить верблюжий регистр. Попрощайтесь с Чинглиш.

29. Краеведение [рекомендуется]

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

30. Polacode-2020: Создание скриншотов кода [рекомендуется]

Фрагменты кода можно сохранять в виде красивых картинок.Разные темы имеют разные цветовые схемы кода.Также можно настроить цвет границы, размер и тень картинки.

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

Полученный эффект выглядит следующим образом:

Другие подобные плагины:CodeSnap. Мы также можем пройтиcarbon.now.sh/Этот сайт генерирует изображения кода

Кто-то может сказать: нельзя ли просто использовать QQ, чтобы делать скриншоты? Можно, но некрасиво и недостаточно чисто.

31. Предварительный просмотр изображения [рекомендуется]

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

32. Автоматическое закрытие тега, автоматическое переименование тега

Автоматически закрывать ярлыки, автоматически переименовывать ярлыки.

33. Лучшие комментарии

Добавляйте к аннотациям более смелые категоризированные цвета.

34. Просмотр CSS

Улучшите связь между HTML и CSS, чтобы быстро увидеть стили CSS для этого элемента.

35. Просмотр CSS Vue

CSS PEEK не поддерживает Vue, плагин обеспечивает поддержку файлов Vue.

36. Информация о цвете

Этот удобный плагин предоставит вам информацию о цветах, которые вы используете в CSS. Вы можете просмотреть информацию о цветовой модели (HEX, RGB, HSL и CMYK) в цветовом патче, просто наведя курсор на цвет.

37. Удаленный концентратор

Не удивляйтесь, RemoteHub и GitLens разработаны одним и тем же автором.

RemoteHubЦель плагина — просматривать код на веб-сайте GitHub локально, не загружая код локально.

В настоящее время мало кто использует этот плагин, поэтому установите его и попробуйте.

38. Live Share: совместное использование кода в режиме реального времени.

Live ShareЭтот волшебный плагин официально выпущен Microsoft, и его функции:Совместное использование кода в реальном времени. То есть это позволяет вам и вашим коллегам писать код вместе. это абсолютнопарное программированиеАртефакт.

Способ установки:

Откройте управление плагинами, найдите «живую акцию» и установите его. Перезапустите VS Code после установки, и слева появится дополнительная кнопка:

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

39. Стоимость импорта

В процессе разработки проекта мы введем много пакетов npm.Иногда мы можем использовать только один метод в определенном пакете, но вводится весь пакет, что приводит к значительному увеличению размера кода.Import CostПлагин может напоминать нам в коде, насколько увеличится в настоящее время введенный пакет, что очень помогает нам оптимизировать размер кода.

Paste JSON as Code

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

Семь, плавное переключение: облачная синхронизация конфигурации VS Code

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

Два метода синхронизации, упомянутые ниже, могут использоваться в зависимости от ваших собственных потребностей. Метод 1 — это функция синхронизации, которая поставляется с VS Code, и с ней легко работать. Способ 2 требует установки подключаемых модулей для поддержки дополнительных настраиваемых конфигураций.

Способ 1. Используйте функцию синхронизации, которая поставляется с VS Code.

1,Настроить синхронизацию:

(1) Выберите «Код --> Настройки --> Открыть синхронизацию настроек» в строке меню:

(2) Выберите конфигурацию синхронизации:

(3) Войдите в свою учетную запись Microsoft или GitHub. На картинке выше нажмите «Войти и открыть», и появится следующий интерфейс:

На изображении выше войдите в свою учетную запись Microsoft или учетную запись GitHub:

(4) После завершения синхронизации в строке меню отобразится «Синхронизация первого элемента включена», а в крайнем левом углу появится дополнительный значок синхронизации, как показано на следующем рисунке:

2,Управление синхронизацией:

(1) Щелкните строку меню «Код --> Настройки --> Включить синхронизацию», появится следующий интерфейс, и можно будет выполнить соответствующее управление синхронизацией:

(2) При переключении на другой компьютер войдите в ту же учетную запись, чтобы завершить синхронизацию.

Ссылка на ссылку:

Встроенная функция синхронизации конфигурации VS Code — синхронизация настроек

Способ 2: Используйте плагин`settings-sync`

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

1,Настроить синхронизацию: (Синхронизируйте собственное локальное облако конфигурации с GitHub)

(1) Установите плагинsettings-sync.

(2) После установки плагина войдите в свою учетную запись GitHub в плагине.

(3) После входа в интерфейс vscode вы можете выбрать чужую суть, вы также можете проигнорировать ее и создать свою собственную суть.

(4) Используйте сочетание клавиш «Command + Shift + P», введите sync во всплывающем окне команды и выберите «Обновить/загрузить конфигурацию», чтобы последнюю конфигурацию можно было загрузить на GitHub.

2,Управление синхронизацией: (При переходе на другой компьютер синхронизируйте конфигурацию с облака на локальную)

(1) Когда мы переходим на другой компьютер, мы можем сначала установить его в VS Code.settings-syncплагин.

(2) После установки плагина войдите в свою учетную запись GitHub в плагине.

(3) После входа в систему в интерфейсе плагина автоматически появится предыдущая запись синхронизации:

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

Если ваша удаленная конфигурация не была успешно синхронизирована с локальной, это может быть проблема с сетью.В это время вы можете использовать сочетание клавиш «Command + Shift + P», ввести синхронизацию во всплывающем окне команды и выбрать « Скачать конфигурацию». Попробуйте несколько раз.

Использовать чужую конфигурацию:

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

(1) Установите плагинsettings-sync.

(2) Используйте сочетание клавиш «Command + Shift + P», введите синхронизацию во всплывающем окне команды и выберите «Загрузить конфигурацию».

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

Восемь, общие плагины темы

Дайте вашему VS Code новый скин, бесплатный.

Dracula Theme
Material Theme
Nebula Theme
One Dark Pro
One Monokai Theme
Monokai Pro
Ayu
Snazzy Plus
Dainty
SynthWave '84
GitHub Plus Theme: Белая тема
Тема Horizon: красная тема

Последний абзац

Если у вас есть другие рекомендуемые плагины VS Code, оставьте сообщение.

Вам не нужно беспокоиться о том, что эта статья устареет. С обновлением версии и плагина VS Code эта статья будет соответствующим образом обновлена. Для последующих обновлений содержимого VS Code вы можете следить за моим входным проектом на GitHub, адрес проекта:

GitHub.com/Древний…

Супер подробный и искренний стартовый проект.

В этой работе используетсяCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.

предисловие

1. Введение в код VS

IDE против редактора

Особенности кода VS

Война фронтенд-оружия: VSCode и WebStorm

Установка кода VS

2. Новое преимущество: ярлыки VS Code

1. Клавиши быстрого доступа к рабочему пространству

2. Операция перехода

3. Переместите курсор

4. Операция редактирования

5. Мультикурсорное редактирование

6. Удалить операцию

7. Связанный с языком программирования

8. Связанные с поиском

9. Настройте сочетания клавиш

10. Список сочетаний клавиш

Ярлык справочной ссылки

3. Наслаждайтесь шелковистой гладкостью: стандартные операции

1. Быстро сгенерируйте HTML-скелет

2. Отображение нескольких окон редактора слева и справа (инструмент копирования кода)

В-четвертых, высококлассный доступ: использование командной панели

1. Установите VS Code на китайский язык

2. Установите размер шрифта

3. Настройки сочетания клавиш

4. Преобразование регистра

5. Запустите VS Code с помощью командной строки

5. Частная настройка: общая конфигурация VS Code

1. Измените цветовую тему

2. Панировочные сухари

4. Отображать ли номер строки кода

5. Отображается ли миниатюра кода справа

6. Выделите текущую строку кода (измените цвет фона строки, в которой находится курсор)

7. Автоматическое сохранение сразу после смены кода

8. Нужно ли форматировать сразу после сохранения кода

9. Пробел или табуляция

10. Тип файла по умолчанию после создания нового файла

11. При удалении файла должно ли всплывать окно подтверждения

12. Сравнение файлов

13. Найдите, где вызывается функция

14. Работа с мышью

15. Рефакторинг

16. Поиск в текущем файле

17. Глобальный поиск

18. Управление версиями Git

19. Увеличить/уменьшить рабочее пространство

20. Создайте несколько подпапок

двадцать один,.vscodeРоль папок

22. Автономный терминал

23, поддержка синтаксиса Markdown

24. Эммет в VS Code

25. Измените шрифт и используйте шрифт «Fira Code».

26. Форматирование кода: красивее

27. Передача файлов: sftp

28. Установите отступ вкладки

Шесть, три головы и шесть рук: рекомендация по плагину VS Code

1. GitLens [рекомендуется]

2. История Git

3. Живой сервер [рекомендуется]

4. Китайский (упрощенный) языковой пакет для Visual Studio Code

5. Bracket Pair Colorizer 2: выделение пар скобок [рекомендуется]

6. sftp: передача файлов [рекомендуется]

7. открыть в браузере

8. highlight-icemode: когда выбран тот же код, сделайте выделение более очевидным [рекомендуется]

9. vscode-иконки

10. Менеджер проекта

11. Основные моменты TODO

12. WakaTime [рекомендуется]

13. Время кода

14. Markdown Preview Github Styling [рекомендуется]

15. Улучшенный предварительный просмотр уценки

Markdown All in One

16. Синхронизация настроек

17. vscode-синхронизация

18, Ветур

19. Фрагменты ES7 React/Redux/GraphQL/React-Native

20. minapp: поддержка апплета

21. Красивее: форматирование кода

22, ESLint: проверка формата кода

23. Украсить

двадцать один,`.vscode`Роль папок

Способ 2: Используйте плагин`settings-sync`