Практическое руководство по VS Code: необходимые навыки и рекомендации по инструментам для эффективных разработчиков

Visual Studio Code (VS Code) — это бесплатный, с открытым исходным кодом, кроссплатформенный редактор кода, который пользуется большой популярностью среди разработчиков. Он обладает мощными функциями, богатой экосистемой расширений и простым в использовании интерфейсом. В этой статье, основываясь на недавних обсуждениях в X/Twitter, мы обобщим практические советы и рекомендации по инструментам VS Code, чтобы помочь вам повысить эффективность разработки.

В чем привлекательность VS Code?

Из обсуждений в X/Twitter мы видим энтузиазм разработчиков по отношению к VS Code. @@freeCodeCamp неоднократно упоминал популярность и бесплатность VS Code, подчеркивая богатый набор предоставляемых им функций. @@chomado поделилась своим любимым редактором и рекомендовала расширения для фронтенд-разработчиков.

Подводя итог, основные преимущества VS Code включают в себя:

• Бесплатный и с открытым исходным кодом: Любой может использовать его бесплатно и участвовать в разработке сообщества.
• Кроссплатформенный: Поддерживает различные операционные системы, такие как Windows, macOS, Linux.
• Легкий: Быстрая загрузка, низкое потребление ресурсов.
• Мощная экосистема расширений: Установив расширения, можно расширить функциональность VS Code и удовлетворить различные потребности разработки.
• Встроенные инструменты отладки: Поддерживает отладку различных языков программирования, что позволяет разработчикам быстро находить и решать проблемы.
• Интеграция с Git: Удобство для разработчиков в управлении версиями.
• Интеллектуальные подсказки: Предоставляет такие функции, как автозавершение кода, проверка синтаксиса, что повышает эффективность кодирования.

Практические советы по VS Code: повысьте свою эффективность разработки

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

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Открыть командную палитру. Это одна из основных функций VS Code, с помощью которой можно выполнять различные операции.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Быстро открыть файл.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Быстрый переход к символу (функции, классу и т. д.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Глобальный поиск.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Выбрать следующее совпадение. Можно одновременно редактировать несколько одинаковых фрагментов текста.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Скопировать текущую строку в следующую/предыдущую строку.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Закомментировать/раскомментировать текущую строку или выделенный блок кода.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Переместить текущую строку или выделенный блок кода вверх/вниз.
   • Ctrl+K Ctrl+S: Открыть интерфейс настроек сочетаний клавиш, где можно просматривать и настраивать сочетания клавиш.

2. Эффективно используйте командную палитру: Открыв командную палитру с помощью Ctrl+Shift+P / Cmd+Shift+P, можно выполнять различные операции, например:

   • Settings: Открыть интерфейс настроек.

   • Extensions: Install Extension: Установить расширение.

   • Git: Commit: Зафиксировать изменения Git.

   • Format Document: Отформатировать текущий документ.

   • Go to Symbol in Workspace: Быстрый переход к символу в рабочей области.3. Пользовательские настройки: VS Code позволяет пользователям настраивать различные параметры, включая темы, шрифты, отступы и т. д. Вы можете открыть интерфейс настроек через File -> Preferences -> Settings или напрямую отредактировать файл settings.json.

   • Тема: Выбор темы, которая вам нравится, может повысить комфорт кодирования.

   • Шрифт: Выбор подходящего шрифта может повысить читаемость кода. Рекомендуется использовать моноширинные шрифты, такие как Fira Code, JetBrains Mono и т. д.

   • Отступ: Установите отступ в соответствии со спецификациями проекта, вы можете использовать пробелы или клавишу Tab.

   • Автосохранение: Включите функцию автосохранения, чтобы избежать потери кода из-за забывчивости сохранения.

3. Использование сниппетов кода (Code Snippets): Сниппеты кода могут помочь вам быстро вставлять часто используемые блоки кода. VS Code имеет встроенные общие сниппеты кода, и вы также можете настроить сниппеты кода.

   • Откройте командную палитру, введите Preferences: Configure User Snippets, выберите язык, который хотите отредактировать, и вы можете редактировать сниппеты кода.
   • Например, вы можете создать сниппет кода clog для JavaScript, чтобы быстро вставить console.log():

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console" // Вывод в консоль
   }
   

4. Использование многокурсорного редактирования: Удерживайте клавишу Alt (Windows/Linux) / Option (macOS), затем щелкните мышью, чтобы создать курсоры в нескольких местах и одновременно редактировать несколько строк кода. Вы также можете использовать Ctrl+D / Cmd+D, чтобы выбрать следующее совпадение для многокурсорного редактирования.

5. Разделение редактора: Вы можете разделить редактор на несколько окон для одновременного просмотра и редактирования нескольких файлов. Вы можете использовать команду View -> Editor Layout -> Split Editor, чтобы разделить редактор.

6. Удаленная разработка: VS Code предоставляет расширение Remote Development, которое позволяет редактировать код на удаленном сервере локально. Это очень полезно для разработки серверных приложений.

7. Использование VS Code в браузере: Как отметил @@Prathkum, посетив vscode.dev, вы можете использовать VS Code непосредственно в браузере, что удобно и быстро. Это полезно для временного редактирования или работы на устройствах, на которых не установлен VS Code. Работа @@CompuIves еще больше улучшила это, он успешно запустил VS Code непосредственно в браузере и подключил его к API CodeSandbox.

VS Code Инструменты: Рекомендации по созданию вашей собственной IDE

Сила VS Code заключается в его богатой экосистеме расширений. Вот некоторые общие рекомендации по расширениям:

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

  ext install esbenp.prettier-vscode
  

• ESLint: Инструмент проверки кода JavaScript, который может проверять код на наличие ошибок и потенциальных проблем.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Инструмент для поддержания единообразия стиля кода между различными редакторами.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Быстрый запуск локального сервера для удобной отладки фронтенд-кода. @@ThreatSynop упомянул уязвимость безопасности в Live Server, напоминая разработчикам о необходимости соблюдать осторожность при использовании расширения.

  ext install ritwickdey.LiveServer
  

• Code Runner: Поддерживает запуск различных языков программирования, что удобно для быстрой проверки фрагментов кода. Аналогично, @@ThreatSynop также указал на уязвимость безопасности в Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: Расширение, улучшающее функциональность Git, позволяющее просматривать историю коммитов кода, информацию об авторах и т.д.

  ext install eamodio.gitlens
  

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

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Предоставляется Microsoft) AI-помощник для автозавершения кода, который может предоставлять более интеллектуальные предложения кода в зависимости от контекста.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Предоставляется GitHub, платно) AI-помощник по коду, который может генерировать фрагменты кода, функции или даже целые файлы на основе вашего кода. @@aadhilkh упомянул высокую рентабельность использования VS Code Copilot.

• Markdown Preview Enhanced: Улучшенный плагин для предварительного просмотра Markdown. @@ThreatSynop также указывает на наличие проблем с безопасностью в этом плагине, о чем следует помнить.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: Включает расширения SSH, Containers, WSL и т.д. для удобной удаленной разработки.

Об интеграции LLM и VS Code

В X/Twitter также появились дискуссии об интеграции LLM и VS Code. @@akshay_pachaar поделился методом обучения LLM в VS Code. @@MacopeninSUTABA упомянул интеграцию AI-агента кодирования Anthropic "Claude Code" с VS Code. Все это предвещает, что AI будет играть все более важную роль в будущей разработке.

Советы по безопасности

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

• Выбирайте официальные расширения или расширения с хорошей репутацией.
• Регулярно обновляйте расширения.
• Внимательно читайте описания разрешений расширений.
• Установите инструменты проверки кода, такие как ESLint, которые могут помочь вам обнаружить потенциальные проблемы в коде.
• Следите за объявлениями о безопасности VS Code и расширений и своевременно устраняйте уязвимости.## Заключение

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