Плагин VS Code и конфигурация для проекта React

внешний интерфейс Visual Studio Code React.js CSS

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

Советы по установке VS Code в Windows

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

Автономная установка плагинов VS Code

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

  • ВходитьVS Code Market, найдите нужный плагин
  • Нажмите Загрузить расширение, загрузка.vsixформатировать файл
  • При установке VS Code переменные среды настраиваются и выполняются в консоли.code --install-extension your-extension-name.vsixготов к установке

Обновление 2019-10-19, способ визуальной установки плагина VS Code: Щелкните меню РАСШИРЕНИЕ слева, как показано, нажмите кнопку ... и выберите "Установить из VSIX..." для установки.

Некоторые полезные плагины

  • Китайский (упрощенный) языковой пакет для VS Code:
  • Один из самых загружаемых плагинов темы VS Code: One Dark Pro
  • ESLint:
  • Отладчик для Chrome:
    • адрес:Debugger for Chrome
    • Могут ли точки останова, такие как WebStorm
  • Плагин завершения пути: Path Intellisense
    • адрес:Path Intellisense
    • Хотя VS Code имеет собственную функцию автоматического завершения пути, проблем с html-файлами нет, но некоторые файлы в JSX не могут быть интеллектуально запрошены (например, src для img в JSX).Этот плагин очень прост в использовании, и есть нет проблем с относительными путями и абсолютными путями.
  • Инструменты JSON: Инструменты JSON
    • адрес:JSON Tools
    • Форматировать JSON очень удобно, всего две клавиши быстрого доступа: форматировать JSONCtrl(Cmd)+Alt+M, сжатый JSONAlt+M
  • Подключаемый модуль CSS IntelliSense: IntelliSense для имен классов CSS в HTML
    • адрес:IntelliSense for CSS class names in HTML
    • Этот плагин уже поддерживаетclassNameиclass (TypeScript React, JavaScript and JavaScript React language modes)
    • Не поддерживает модуль CSS Smart Tips
  • Умные советы по модулю CSS
    • адрес:CSS Modules
    • Этот плагин может решить IntelliSense для имен классов CSS в HTML, не поддерживает функцию интеллектуального приглашения модуля css.
    • Может реализовать автозаполнение css, перейти в определенную позицию
  • Сопоставление цветов скобок: Colorizer пары скобок
    • адрес:Bracket Pair Colorizer
    • Используйте цвета, чтобы соответствовать скобкам
  • Bookmarks
    • адрес:Bookmarks
    • Добавление часто используемых местоположений в закладки может значительно повысить эффективность
  • React/Redux/react-router Snippets
    • адрес:React/Redux/react-router Snippets
    • Фрагмент кода React, он очень удобен после того, как вы с ним ознакомитесь

Используйте Emmet для быстрого заполнения тегов в JSX

  • VS Code поставляется с Emmet, который может автоматически заполнять теги в файлах HTML.
  • хочу завершитьreactДля тегов в JSX в файле нужно добавить настройки Emmet в настройках пользователя:
{
 ...
    // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射。
    // 示例: {"vue-html": "html", "javascript": "javascriptreact"}
    "emmet.includeLanguages": {"javascript": "javascriptreact"},
    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true
 ...
}
  • вemmet.triggerExpansionOnTabнастроен какtrueТеги компонентов теперь можно заполнять автоматически с помощью клавиши TAB.
  • может автоматическиclassПреобразовать вclassName,очень удобно

О плагинах форматирования

Я чувствую, что встроенной функции форматирования кода в принципе достаточно, но Prettier и Beautify не установлены, а Beautify испортит форматирование jsx в реакции.

использованная литература

Категории