В прошлом я работал со многими редакторами кода и IDE. С 2016 года использую VS-код. Я считаю, что это отличный редактор кода, и он становится лучше с каждым днем. Facebook принял код Visual Studio в качестве среды разработки по умолчанию. Поскольку VS Code становится популярным, я решил поделиться списком расширений, которые помогут мне работать продуктивно. Я перечислил их в категориях торговых площадок Visual Studio. Я использую Angular большую часть времени на работе, поэтому некоторые расширения специфичны для Angular.
Пакеты расширений
Пакет расширений Angular: этот пакет устанавливает множество других расширений, которые будут очень полезны во время разработки Angular.
Пакет расширений Live Share: это набор расширений, которые обеспечивают совместную разработку в реальном времени с VS Live Share. Это полезно, если вы работаете удаленно.
Языки программирования
Angular Files: я использую его постоянно, это экономит много времени. Это генерирует файлы angular без перехода в командную строку (щелкните правой кнопкой мыши папку и выберите то, что вы хотите сгенерировать и развернуть), он даже добавит это в ваш app.module.ts
Angular Follow Selector: еще одно полезное расширение при создании приложений Angular. Это позволяет щелкнуть селекторы Angular в ваших HTML-файлах и перенаправиться к их определению компонента, а также наоборот, щелкнув templateUrl и styleUrls в вашем компоненте.
Apollo GraphQL: расширенная поддержка редактора для разработки клиента и сервера GraphQL, которая легко интегрируется с платформой Apollo.
GraphQL: расширение GraphQL для VSCode добавляет подсветку синтаксиса, проверку и языковые функции, такие как переход к определению, информация о наведении и автозаполнение для проектов GraphQL. Это расширение также работает с запросами, помеченными тегом gql.
GraphQL для VSCode: выделение синтаксиса GraphQL, линтинг, автозаполнение и многое другое.
Cucumber (Gherkin) Полная поддержка: Cucumber (Gherkin) Полная поддержка языка + Форматирование + Автозаполнение. Это пригодилось, когда я писал BDD.
IntelliSense для имен классов CSS в HTML: завершение имени класса CSS для атрибута класса HTML на основе определений, найденных в вашей рабочей области.
json2ts: преобразование JSON из буфера обмена в интерфейсы TypeScript.
YAML: поддержка языка YAML компанией Red Hat, со встроенной поддержкой синтаксиса Kubernetes и Kedge.
TypeScript Hero: дополнительные инструменты для машинописного текста.
Vetur: инструменты Vue для VS Code.
Фрагменты
Angular Snippets (Version 8): Angular фрагменты 8, автор John Papa
Vue VSCode Snippets: фрагменты, которые улучшат ваш рабочий процесс Vue от Сары Драснер.
Отладчики
Отладчик для Chrome: если вы хотите отладить свое приложение в Chrome от Microsoft.
Отладчик для Firefox: я использую Firefox во время разработки, поэтому этот отладчик полезен для пользователей Firefox с помощью Firefox. (Мой браузер по умолчанию - Brave.)
Линтеры и форматтеры
Средство форматирования кода Prettier: средство форматирования кода, использующее более красивое, обеспечивает согласованный стиль.
TSLint: поддержка TSLint для Visual Studio Code от Microsoft.
Проверка орфографии кода: средство проверки орфографии для исходного кода.
SonarLint: это расширение помогает обнаруживать и исправлять проблемы с качеством при написании кода на JavaScript, TypeScript, Python и PHP.
Другой
Jira и Bitbucket: официальное расширение от Atlassian. Это дает возможности Jira и Bitbucket в VS Code - с помощью Atlassian для VS Code вы можете создавать и просматривать проблемы, начинать работу над проблемами, создавать запросы на вытягивание, выполнять проверки кода, запускать сборки, получать статусы сборки и многое другое. Я начал использовать это расширение недавно, сейчас почти не захожу на веб-страницу Jira. Я почти все делаю через расширение. Я создаю бэклоги, открываю PR, проверяю PR и даже начинаю работать над бэклогами с помощью этого расширения. Это мощное расширение. 👍🏽
Павлин: еще одно расширение от Джона Папы. Я считаю это очень полезным, когда работаю с несколькими редакторами / проектами. Он незаметно меняет цвет рабочего пространства вашего рабочего места.
Автоматическое переименование тега: автоматическое переименование парного тега HTML / XML (расширение может иметь проблемы с производительностью, особенно при редактировании большого файла. Обратите внимание на эту потенциальную проблему, прежде чем использовать это расширение!) .
Colorizer Pair Colorizer: настраиваемое расширение для раскрашивания соответствующих скобок.
colorize: помогает визуализировать цвета CSS в файлах.
Просмотр CSS: позволяет просматривать идентификаторы CSS и строки классов как определения из файлов HTML в соответствующий CSS. Позволяет просматривать и переходить к определению. (Может привести к чрезмерному использованию памяти.)
Выделить соответствующий тег: выделяет соответствующий закрывающий или открывающий тег.
npm: поддержка npm для VS Code
Visual Studio IntelliCode: разработка Microsoft с помощью ИИ.
GitLens - Git supercharged: расширьте возможности Git, встроенные в код Visual Studio.
Автоимпорт: автоматически находит, анализирует и предоставляет действия кода и автозавершение кода для всех доступных операций импорта. Работает с Typescript и TSX.
Темы
Тема значков материала: в настоящее время я использую значки дизайна материалов для кода Visual Studio, это помогает мне легко идентифицировать файлы.
Тема Gruvbox: это моя текущая цветовая тема (Gruvbox Dark Soft), у нее есть несколько тем на выбор. Вы можете увидеть их здесь.
Могут быть полезны и другие расширения, о которых я не знаю. Пожалуйста, поделитесь ими.
Спасибо за чтение 🙏🏽😀.
