Если хочешь делать что-то хорошо, надо сначала отточить свои инструменты.Я занимаюсь фронтенд-разработкой более двух лет.В свободное время включаю некоторые плагины, которые, как мне кажется, часто используются.
Манипуляции с DOM
Auto Close Tag
Автоматически закрывать теги HTML.
Auto Rename Tag
Автоматически переименовывать ярлыки.
Autoprefixer
Автоматически анализировать CSS, SCSS, LESS и префикс.
завершение пути
Path Intellisense
Автозаполнение путей и имен файлов в коде.
Npm Intellisense
Автозаполнение модулей npm в операторах импорта.
Подсказки фрагмента кода
HTML Snippets
Очень полезные и элементарные фрагменты кода H5 и подсказки.
IntelliSense for CSS class names
HTML, CSS название класса интеллектуальные советы по именованию.
JavaScript (ES6) code snippets
Запрашивать фрагменты синтаксиса ES6.
Прекрасный
vscode-icons
Различные типы файлов или папок в проекте отмечены значками.
Guides
Линия выравнивания метки кода.
Bracket Pair Colorizer
Выделите скобки отдельным цветом для облегчения идентификации.
форматирование кода
Prettier - Code formatter
Более красивое форматирование.
ESLint
Код, соответствующий стилю кода.
мобильный
px to rem
Если вы запутались с px в rem, вам нужно только, чтобы база в плагине по умолчанию была равна 16px, и вы можете конвертировать одним щелчком мыши. Ярлыки преобразованияoption+z
управление проектом
Project Manager
Если ваша компания имеет много проектов и необходимо переключаться взад и вперед, управление проектом рекомендуется, чтобы позволить вам легко заменить проект непосредственно без открытия его в папке импорта проекта.
Bookmarks
Закладки, отмечать/снимать места в коде.
Git
GitLens
Проверяйте авторство кода, а также легко перемещайтесь по репозиториям Git и просматривайте их. Это означает, что ямы, которые вы пишете, должны быть заполнены вами самими, а если это серьезно, вас будут ругать.
Git History
Просмотр и поиск в журнале git вместе с графиками и подробностями.
отладка
Code Runner
Поддерживает немедленное выполнение кода на таких языках, как C, C++, Java, JavaScript, PHP, Python и т. д. Как пользоваться правой кнопкой мышиRun CodeЗапустите файл.
Live Server
Подобно созданию страницы локального сервера, изменение вступает в силу напрямую.
Правая кнопка мыши на html-страницеopen with Live ServerОткрывшаяся страница есть.
Quokka.js
Quokka.js автоматически вычисляет результаты по мере ввода и распечатывает их в среде IDE.
Vue-фреймворк
vetur
- подсветка синтаксиса
- Фрагмент
- Emmet
- уборка/проверка ошибок
- формат
- автоматическое завершение
- отладка
Vue Peek
Быстро переходите или просматривайте файлы, указанные как компоненты (из шаблонов) или импортированные модули (из скриптов).
Vue 2 Snippets
Подскажите Vue 2 API, очень удобно.
Реагировать фреймворк
React.js code snippets
Очень удобно разрабатывать приложения React.js с синтаксисом ES6.
быстрый класс
Import Cost
Рассчитайте размер импортируемого пакета. Если размер пакета можно импортировать, он будет реализовывать небольшую часть функции. Вы можете найти другие пакеты для его замены или реализовать функцию самостоятельно.
управление временем программирования
WakaTime
Создавайте отчеты с данными из вашего времени программирования.
тема
One Dark Pro
Темная тема в Атоме. Очень хорошо, я использую его все время.
Синхронизация конфигурации VScode
Settings Sync
Если у вас несколько устройств или вы не хотите перенастраивать vscode, рекомендуемSettings Sync, загрузите vscode в суть, а затем войдите в учетную запись, чтобы завершить его одним щелчком мыши.
Если вы не знаете, как работать, вы можете увидетьУчебник на официальном сайте