Рекомендация по внешнему плагину VSCode 2021 г.

предисловие

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

Комплексная рекомендация по развитию

прыжок пути псевдонима

Название плагина: прыжок пути псевдонима

Инструкции по применению:Плагин перехода по псевдониму пути, поддерживает любой проект,

Сценарий использования: когда вы разрабатываете страницу, вы хотите нажатьПри присвоении пути к импортированному компоненту(демо ниже)

Инструкции по настройке

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

  • Щелкните правой кнопкой мыши плагин --> Расширенные настройки --> Отображение пути вsettinas.jsonСреднийПравить

  // 文件名别名跳转
    "alias-skip.mappings": {
      "~@/": "/src",
      "views": "/src/views",
      "assets": "/src/assets",
      "network": "/src/network",
      "common": "/src/common"
    },
  

Показать результаты

Псевдоним пути intellisense

• Название плагина:path-alias
• Сценарий: при импорте компонентов используйтеПсевдоним пути бесполезные советы👇 (можно использовать с псевдонимом перехода по пути, без конфликтов)
• Подробное руководство по использованию (простой вор)

Установить эффекты и функции

indent-rainbow

• Название плагина:indent-rainbow
• Функция: радужный отступ

Bracket Pair Colorizer 2

• Название плагина:Bracket Pair Colorizer 2
• Функция: добавить соответствующий цвет в соответствующие скобки () или объект {}.. для различения

Auto Rename Tag

• Название плагина:Auto Rename Tag
• Функция: автоматическое переименование меток.

Code Spell Checker

• Название плагина:Code Spell Checker
• Функция: проверьте правильность написания слов (поддержка английского языка)

Code Runner

• Название плагина:Code Runner
• Функция: выполнение различных языковых кодов одним щелчком мыши (обычно используется для тестирования).

Debugger for Chrome

• Название плагина:Debugger for Chrome
• Функция: на стороне VSCode отлаживать код.

Live ServerPP

• Название плагина:Live ServerPP
• Функция: откройте файл на стороне сервера и отобразите измененный код в режиме реального времени.
  • Поддержка службы сообщений websocket, может использоваться для отладки клиента websocket.
  • Поддерживает программируемые виртуальные файлы, которые можно использовать для имитации интерфейсов API на стороне сервера.

Svg Preview

• Название плагина:Svg Preview
• Функция: вы можете отображать изображение SVG и редактировать его.

Tabnine

• Название плагина:Tabnine
• Функция: интеллектуальный код подсказки, который может предсказать код, который вы напишете для подсказки.

Template String Converter

• Название плагина:Template String Converter
• Функция: введите $ в строке для запуска, преобразуйте строку в строку шаблона.

vscode-pigments

• Название плагина:vscode-pigments
• Функция: предварительный просмотр установленного цвета в режиме реального времени.

Parameter Hints

• Название плагина:Parameter Hints
• Функция: подскажите тип параметра и сообщение функции.

Quokka.js

• Название плагина:Quokka.js
• Использование: После установки плагинаctrl+shift+pвойтиQuokka new JavaScr..готов использовать
• Функция: отображение результатов печати в режиме реального времени, дополнительные функции для самостоятельного изучения (обычно используются для тестирования)

Highlight Matching Tag

• Название плагина:Highlight Matching Tag
• Функция: когда курсор остается на метке, выделяет соответствующую метку.

Популярные плагины

• Есть в основном инсталляции без подробного ознакомления.

плагин

• Bookmarks
  • Функция: часто используется для чтения исходного кода для маркировки строк и переходов (кодовые метки для быстрого перехода).
• ESLint
  • Функция: проверка спецификации кода
• Prettier - Code formatter
  • Функция: украшение кода, автоматическое форматирование в стандартный формат
• Project Manager
  • Функция: плагин управления проектами, при разработке нескольких проектов вы можете быстро перейти
• Path Intellisense
  • Функция: подсказка интеллектуального пути
• Image preview
  • Функция: когда путь импорта является изображением, вы можете предварительно просмотреть текущее изображение.
• GitLens
  • Особенности: улучшенныйgitФункционал, поддержка просмотра автора, время модификации и т.д. в VSCode
• open in browser
  • Функция: Открыть текущий файл в браузере

Рекомендации по разработке Vue

vue-component

• Название плагина:vue-component
• Функция:Введите имя компонента, чтобы автоматически импортировать найденные компоненты, автоматически импортировать путь и компоненты
  • Автоматически вводить имя компонента (включая обязательные атрибуты), оператор импорта, атрибут компонентов после выбора

Vetur

• Название плагина:Vetur
• Необходим для разработки Vue

Vue 3 Snippets

• Название плагина:Vue 3 Snippets

• Основные обязательные элементы: многоVueСегмент кода очень удобен для разработки

Рекомендация по разработке React

React Style Helper

• Название плагина:React Style Helper
• Функция: вReactБыстрее пишите встроенные стили в , а также предоставляйте мощные вспомогательные функции разработки для файлов CSS, LESS, SASS и других стилей.
  • автодополнение
  • Перейти к стилю и местоположению определения переменной
  • Создание встроенных стилей для JSX/TSX
  • Предварительный просмотр стилей и переменного содержимого

• Автозаполнение встроенных стилей и поддержка перехода и предварительного просмотра переменных SASS.

ES7 Reactsnippets

• Название плагина:ES7 React/Redux/React-Native/JS snippets
• Функция: многоReactСегмент кода очень удобен для разработки

vscode-styled-components

• Название плагина:vscode-styled-components
• Функция: вJSЕсть умные советы по написанию стилей в файлах

Тематический класс

Dracula Official

• Название плагина:vscode-styled-components

One Dark Pro

• Название плагина:One Dark Pro

vscode-icons

• Название плагина:vscode-icons
• VSCodeЗначки папок и файлов

Другие рекомендации

• Следующие плагины могут быть редко используемыми, если вам интересно, вы можете попробовать их😉

CSS Initial Value

• Название плагина:vscode-icons
• Функция: отображение начального значения каждого свойства CSS, когда курсор остается включенным.cssвремя атрибута

чертежная доска

• Название плагина:Draw.io Integration

• Функция: вVSCodeCPIC поддерживает совместное редактирование диаграмм несколькими людьми.

Плагин Echars Smart Tips

• Название плагина:echarts-vscode-extension

• Использование: После установки плагинаctrl+shift+pвойтиactive Echarsчтобы включить умные оповещения

• Функция: подсказка различныхEchar中Optionсвойства, достаточно мощный

Плагин перевода

• Название плагина:A-super-translate

• Как использовать: Выберите строку, Ctrl+Shift+p для ввода Перевести

  • Введите ctrl+` и нажмите ctrl+1, чтобы напрямую заменить выделенную область для перевода.

• Функция: переводить и распознавать часть комментария в коде, не мешая чтению. Поддержка разных языков, однострочные, многострочные комментарии,

  • Поддержка пользовательской строки и перевода переменных, поддержка разделения верблюжьего регистра

Резюме (с картинками всех плагинов)

• В соответствии с потребностями вы можете установить соответствующие плагины (установите слишком много плагинов, VSCode будет сильно застревать)
• Конечно конфигурация компьютера достаточно мощная, если я не говорил 🤔