点赞再看，养成习惯

Редактор кода, который сейчас используют все больше и больше людей, — это Visual Studio Code. Atom, Sublime Text и WebStorm, который также является очень мощным, были заброшены один за другим.

🎨 Темы

Тема VS Code — Dark+ Material

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

Oceanic Next — я использовал Oceanic Next (темный фон)
emedy - я использовал Remedy Dark (прямой)
Snazzy Operator
One Dark Pro

📁 значок

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

Material Icon Theme — одна из самых популярных тем значков для VS Code.
Иконки тем материалов — используются в настоящее время.
vscode-icons

✒ Шрифты

Рекомендуемый шрифт для редакторов кода — JetBrains Mono. Это бесплатный шрифт с поддержкой лигатуры.

⭐ Некоторые другие шрифты, которые я использовал раньше:

Оператор Mono — поддерживает лигатуры.
Fira Code — бесплатный и поддерживает лигатуры.
Dank Mono - платный и поддерживает лигатуры.

⭐ 您要使用我的设置，使用我的 VS Code 字体吗？在 VS Code 中，按 Ctrl + P，输入 settings.json 并打开该文件。 Теперь замените приведенное ниже значение свойства моим заданным значением.

{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid"
}

некоторые используемые расширения

⭐ Git-график

Просмотр графа Git репозитория и выполнение операций Git из графа.

⭐ Отладчик для Chrome

Отлаживайте свой код JavaScript в браузере Chrome или любой другой цели, поддерживающей протокол отладки Chrome.

⭐ GitLens — Git с наддувом

усиливатьVisual Studioвстроенный в кодGitфункция - пройтиGit blameКомментарии и линзы кода, чтобы сразу увидеть личность автора кода для удобной навигации и исследованияGit存储库, получить ценную информацию с помощью мощных команд сравнения

⭐ Автозакрытие тега

добавить автоматическиHTML/XMLзакрыть вкладку, сisual Studio IDEилиSublimeTextтакой же. Когда мы заполним начальный тег, конечный тег будет добавлен автоматически. Это очень практично и сокращает объем нашего письма.htmlа такжеxmlвремя.

⭐ Автоматическое переименование тега

Автоматически переименовывать парные теги HTML/XML, также доступные в JSX.

существуетsettings.jsonв файлеauto-rename-tag.activationOnLanguageДобавьте пункт для установки языка, на котором будет активировано расширение. По умолчанию это**[“ *”]**, будет активирован для всех языков.

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

⭐ BPath IntelliSense

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

⭐ Раскрашивание пары скобок 2

Это расширение позволяет кодировать совпадающие скобки цветом, и пользователь может определить, какие символы должны соответствовать и какие цвета использовать.

⭐ Просмотр CSS

Peek: загружайте css-файлы в строку и вносите в них быстрые изменения. (Ctrl + Shift + F12)
Перейти: Перейти непосредственно к файлу CSS или открыть в новом редакторе (F12)
Наведение: наведите курсор на символы, чтобы отобразить определения (Ctrl+наведение)

⭐ ДотЭНВ

Выделите пары ключ-значение в файле .env.

⭐ Предварительный просмотр в браузере

VSCodeПлагин предварительного просмотра в браузере позволяет нам открыть настоящий предварительный просмотр в редакторе. Предварительный просмотр браузера сделанChrome Headlessпри условии, что он работает, запуская новый процесс вHeadless Chromeпример.

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

ES6в грамматикеJavaScriptсегмент кода

⭐ язык-стилус

stylusязыковая поддержка

⭐ Краеведение

Сохранить файл в локальной истории

⭐ Улучшенный предварительный просмотр Markdown

Улучшение предварительного просмотра Markdown перенесено на vscode

⭐ Ветур

для VSCodeVueинструмент

⭐ Простые фрагменты реакции

ReactБазовая коллекция фрагментов кода и команд.

⭐ минап

Интеллектуальное завершение тегов и атрибутов апплета WeChat (поддерживает собственные апплеты, mpvue и wepy framework, а также предоставляет фрагменты)

⭐ Колоризатор пары скобок

Настраиваемое расширение для квадратных скобок, соответствующих цвету.

⭐ Выделите соответствующий тег

Заметное отображение, чтобы соответствовать метку старта или конечного.

⭐ Предварительный просмотр изображения

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

использоватьGitHub GistСинхронизируйте настройки, фрагменты, темы, значки файлов, запуск, привязки клавиш, рабочие области и расширения на нескольких компьютерах.

Конкретные операции см. в расширенном описании

⭐ нпм расширение

Это расширение поддерживает выполнение сценариев npm, определенных в пакетах. И проверьте установленные модули на соответствие зависимостям, определенным в пакете.

⭐ Настройки терминала

моя ОСWindows, использую через командную строкуGit, поэтому у меня естьGit terminal, я использую этот терминал как свою интеграциюterminal. мойterminalНастройки следующие:

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true

⭐ Дополнительная языковая поддержка

✔ Полезные сочетания клавиш VS Code

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

Ctrl + P: Перейти к файлу, вы можете переместить любой файл в Visual Studio Code в открытый файл/папку.
Ctrl + `: открыть терминал в VS Code
Alt + Down: перейти на одну строку вниз
Alt + Вверх: Движение
Ctrl + D: переместить выбранный символ на следующую совпадающую строку
Ctrl + пробел: активировать предложение
Shift + Alt + Down: Копировать строку вниз
Shift + Alt + Up: скопировать строку вверх
Ctrl + Shift + T: повторно открыть последнее закрытое окно
Shift + Alt + использование с мышью: выделение большого блока кода и нескольких строк для редактирования