Эффективное кодирование: настройка моего кода VS

JavaScript Visual Studio Code
Эффективное кодирование: настройка моего кода VS

При перепечатке просьба указывать источник и автора оригинала

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

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

🎨тема

Мои самые используемые темы VS Code:Snazzy Operator, В настоящее время используется.

Эта тема основана наhyper-snazzyи дляOperator MonoШрифты оптимизированы для совместного использования. Я люблю 😍 эту тему.

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

  • Oceanic Next- Я использовал Oceanic Next (темный фон)
  • emedy- Я использовал Remedy Dark (прямой)

✒шрифт

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

Лигатуры — это новый формат шрифта, который поддерживает украшение символов вместо= >,< =.

В использованииJetBrains MonoРаньше я использовалOperator Mono. Это также хороший шрифт.

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

  • Operator 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"
}

📁 значок

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

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

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

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

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

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

🟠Bracket Pair Colorizer 2

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

🟠Color Highlight

Это расширение стилизует цвета css/web, которые можно найти в документации.

🟠CSS Peek

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

🟠DotENV

существует.envПары ключ-значение выделены в файле.

🟠ES7 React/Redux/GraphQL/React-Native snippets

Это расширение предоставляет фрагменты JavaScript и React/Redux в ES7, а также функциональные возможности плагина Babel для VS Code.

🟠Highlight Matching Tag

Выделите начальный или конечный тег совпадения.

Расширенные стили, которые я использую:

"highlight-matching-tag.styles": {
  "opening": {
    "left": {
      "custom": {
        "borderWidth": "0 0 0 1.5px",
        "borderStyle": "solid",
        "borderColor": "yellow",
        "borderRadius": "5px",
        "overviewRulerColor": "white"
      }
    },
    "right": {
      "custom": {
        "borderWidth": "0 1.5px 0 0",
        "borderStyle": "solid",
        "borderColor": "yellow",
        "borderRadius": "5px",
        "overviewRulerColor": "white"
      }
    }
  }
}

🟠Image preview

Показывать превью изображения при наведении.

🟠Indent Rainbow

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

🟠REST Client

Клиент REST позволяет отправлять HTTP-запросы и просматривать ответы непосредственно в Visual Studio Code.

🟠Settings Sync

Синхронизируйте настройки, фрагменты, темы, значки файлов, запуск, сочетания клавиш, рабочие области и расширения на нескольких компьютерах с помощью GitHub Gist. Подробности смотрите в моей статье«Советы | Синхронизируйте настройки и расширения VSCode, не беспокойтесь о переключении компьютеров! 》

🟠TODO Highlight

Выделите TODO, FIXME и другие комментарии в коде.

🟠Version Lens

Отображает последнюю версию каждого пакета в файле package.json.

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

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

"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 + Up: Переместите одну строку
  • Ctrl + D: переместить выбранный символ в следующую совпадающую строку
  • Ctrl + Space: вызвать предложение
  • Shift + Alt + Down: копировать строки вниз
  • Shift + Alt + Up: копировать линию
  • Ctrl + Shift + T: повторно открыть последнее закрытое окно

Спасибо за прочтение и подписку.

Если это вдохновляет и помогает вам, вы можете нажатьСледуйте, вперед, фаворитом, также можносообщениеОбсуждение, это самое большое поощрение для автора.

Об авторе: Веб-инженер, инженер-разработчик полного стека, постоянный ученик.

Теперь обратите внимание на публичный аккаунт WeChat «Выбор иностранного языка переднего плана»,Теперь обратите внимание на онлайн-информацию о диске определенного видеокурса сетевого качества, это сэкономит вам много денег!

Категории