Visual Studio Code(называется ""VS Code») незаменим в процессе разработки внешнего интерфейса. Как редактор кода, vscode имеет открытый исходный код, бесплатный и красивый. Что еще более важно, многофункциональные плагины могут повысить эффективность разработки, и вы этого заслуживаете.
Большинство людей в нашей команде используют его, и мы также суммируем полезные плагины. Далее мы узнаем больше и обогатим ваш код VS от установки до использования.
Установка и настройка кода
каждый можетздесьУстановите последнюю версию.
переключить язык
После завершения установки по умолчанию отображается английский язык. Мы можем отображать китайский язык, установив подключаемый модуль пакета китайского языка. Операции следующие:
Откройте vscode, щелкните значок плагина (или ⌘ + ⇧ + X), введите «китайский» в поле поиска и установите
Используйте сочетание клавиш «⌘ + ⇧ + P», чтобы открыть командное окно vscode, введитеdisplay, нажмите «Настроить язык отображения», чтобы переключить язык
сменить тему
Если вам не нравится цвет темы самого кода VS, вы также можете изменить тему по умолчанию и ввести в поле командыcolor theme, нажмите Enter, он войдет в список тем, переключайте тему клавишами вверх и вниз, она не устраивает, это не имеет значения, нажмите, чтобы установить другие цветные темы, с левой стороны будут различные плагины темы, выберите один для установки.
добавить значок
Порекомендуйте плагин для иконокvscode-icons, после успешной установки будут добавлены разные стили значков в соответствии с разными типами файлов, которые будут выглядеть более интересно.
Добавить фрагмент кода
- Открыть
用户片段
- нажмите
新代码片段, введите название фрагмента в поле ввода
- Введите собственный фрагмент кода
- используется в коде, введите
vue3-template, выберите новый клип
Плагин VS Code
Auto Close Tag
Автоматически закрывать теги HTML/XML
Auto Rename Tag
Автоматически переименовывать теги HTML/XML
Autoprefixer
Автоматически анализировать CSS и префикс
Bracket Pair Colorizer
Используется для раскрашивания соответствующих скобок, чтобы сделать иерархию кода более понятной.
Code Runner
Запуск фрагментов кода или файлов кода на нескольких языках
Code Spell Checker
Проверка орфографии исходного кода, подсказки для слов с ошибками в коде
CSS Peek
Разрешить просмотр css и переходить от файла HTML к файлу css, переход к определению файла
DotENV
Поддержка синтаксиса файла .env, подсветка
Draw.io Integration
Нарисуйте блок-схему в коде VS, запишите свою идею в любое время, не слишком удобно
ESLint
Инструмент проверки формата кода, взаимодействует с правилами проверки в проекте, реализует форматирование кода при сохранении, это необходимо для разработки, вы это заслужили!
Конфигурационный файл, добавьте его в settings.json, на него можно ссылаться
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
],
Git History
Интегрируйте инструменты git в код VS, просматривайте записи git, историю файлов, сравнивайте ветки и код фиксации и т. д.
Git Graph
Git Graph — это плагин визуального контроля версий, похожий на SourceTree, который может обновлять, фиксировать код, просматривать записи фиксаций и проверять код.
GitLens - Git supercharged
Легко просмотреть записи отправки каждой строки кода, включая отправителя, время отправки и т. д. Если вы не знаете, какой студент изменил код, вы можете попробовать, это ясно и понятно
Highlight Matching Tag
Выделите совпадающие теги
Image Preview
При импорте миниатюра изображения будет отображаться слева для удобного предварительного просмотра.
Import Cost
Отображение размера пакета, на который указывает ссылка, в редакторе, чтобы вы могли лучше понять пакет, который вы импортируете.
Javascript console utils
Помогите вам быстрее добавить консоль и удалить консоль, это действительно удобно
- Выберите вашу переменную, ⌘ + ⇧ + L, выведет что-то вроде console.log(' test ', test )
- ⌘ + ⇧ + D удалит все операторы console.log в текущем документе.
koroFileHeader
Плагин, используемый для создания комментариев к заголовкам файлов и комментариев к функциям в vscode.После нескольких итераций плагин: поддерживает все основные языки, мощный, гибкий и удобный, с полной документацией и легко съедается!
- ⌃ + ⌘ + i для создания комментариев к заголовку файла
<!--
* @Author: your name
* @Date: 2021-11-18 18:08:32
* @LastEditTime: 2021-11-19 11:29:00
* @LastEditors: your name
* @Description:
* @FilePath:
-->
- ⌃ + ⌘ + t, автоматически анализирует параметры функции, генерирует комментарии к параметрам функции
/**
* @description:
* @param {*}
* @return {*}
*/
npm Intellisense
Плагин кода для автозаполнения модулей npm в операторах импорта
open in browser
Позволяет открыть текущий файл в браузере или приложении по умолчанию.
- ⌥ + B, открыть браузер по умолчанию
Path Intellisense
Автоматически определять пути к файлам, упрощая поиск
Prettier
Инструмент форматирования кода, который мне очень нравится, вы также можете настроить свои правила в проекте.
Svg Preview
Удобный предварительный просмотр файла svg
Todo Tree
Быстрый поиск тегов, добавленных в редактор, таких как todo и fixme, и отображение их в виде дерева на панели проводника. Щелкнув по задаче в дереве, вы откроете файл и поместите курсор на строку, содержащую задачу.
Trailing Spaces
Выделите конечные пробелы и быстро удалите их!
Volar
Как и vetur, volar — это плагин vscode для vue, который поддерживает поддержку синтаксиса, подсветку, проверку формата, обнаружение ошибок и т. д. для файлов .vue, но в отличие от vetur, volar предоставляет более мощные функции.
- Разделение ярлыков редактора
-
classВыслеживать
-
langподсказки по грамматике
Просто чтобы назвать несколько, есть и другие функции, которые вы должны попробовать!
и некоторые плагины
Power Mode
Ваш код мощный, выпустите его!
......
Есть ли у вас какие-нибудь полезные плагины, вы также можете порекомендовать их~