20 лучших расширений кода Visual Studio для фронтенд-разработчиков

Отличные инструменты могут помочь разработчикам писать более быстрый, чистый и последовательный код. Расширения Visual Studio Code позволяют добавлять инструменты, языки, отладчики и многое другое, чтобы помочь вам в этом. Некоторое время назад я спросил фронтенд-разработчиков здесь, в Shopify, без каких расширений, пакетов и плагинов они не могут жить.

На основе этих разговоров я написал две статьи о лучших плагинах Sublime Text и лучшие пакеты Atom для фронтенд-разработчиков. В этой статье я выделил свои лучшие варианты расширений Visual Studio Code (VS Code) и разбил их на следующие шесть категорий. Если вы хотите убедиться, что то, что вы создаете, безопасно, вы также можете ознакомиться с нашей статьей о том, как повысить безопасность веб-сайта вашего клиента.

В этой статье


  • Установка расширений кода Visual Studio
  • Фрагменты и стиль кода
  • Интеграция с Git
  • Линтеры и подсветка синтаксиса
  • Улучшения редактора
  • Темы и развлечения 🌈

Установка Расширения Visual Studio Code

Следует отметить, что Visual Studio Code имеет много встроенной поддержки для многих широко используемых расширений, подключаемых модулей или пакетов, имеющихся в других редакторах. К ним относятся поддержка Emmet, интегрированного терминала, IntelliSense для множества различных языков (JavaScript, TypeScript, JSON, HTML, CSS, Less и Sass), а также поддержка контроля версий.

Просмотр и установка расширений из Visual Studio Code довольно проста. Просто введите cmd + shift + x (на Mac) или ctrl + shift + x (на ПК), чтобы вызвать Панель «Просмотр: Расширения «, затем нажмите кнопку Установить , чтобы установить нужное расширение Visual Studio Code.

Вы также можете просматривать и устанавливать расширения щелкнув вкладку Extensions на панели действий в верхней части домашней страницы VS Code. Или вы можете использовать Командную палитру для установки расширений (все одновременно), набрав cmd + shift + p (OSX) или ctrl + shift + p (Windows, Linux), затем введите «Установить расширения» и выберите Extensions: Install Extensions .

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

Развивайте свой бизнес с партнерской программой Shopify

Предлагаете ли вы услуги веб-дизайна и разработки или хотите создавать приложения для Shopify App Store, партнерская программа Shopify поможет вам добиться успеха. Присоединяйтесь бесплатно и получите доступ к возможностям распределения доходов, средам предварительного просмотра для разработчиков и образовательным ресурсам.

Зарегистрироваться

1. Синхронизация параметров

Расширение «Синхронизация параметров», ранее известное как «Синхронизация параметров кода Visual Studio», синхронизирует параметры, фрагменты, темы, привязки клавиш, рабочие области, расширения и многое другое на нескольких компьютерах. Я думаю, что это, вероятно, одно из самых важных и полезных расширений, которое гарантирует, что независимо от того, на каком компьютере вы работаете, у вас будут все инструменты, к которым вы привыкли.

Просмотр настроек синхронизации

Фрагменты и стиль кода

Фрагменты довольно просты: начните вводить ключевое слово, которое активирует фрагмент, а затем разверните текст. В VS Code по умолчанию встроено несколько фрагментов, которые отображаются с помощью IntelliSense ^ + space вместе с другими предложениями или в специальном средстве выбора фрагментов.

Вы можете вставить фрагмент из средства выбора, открыв палитру команд и затем набрав «Вставить фрагмент». Вы также можете создавать свои собственные фрагменты, используя синтаксис фрагментов TextMate. Примеры можно найти в документации по фрагментам VS Code. Или загрузите их через расширение, вот несколько расширений фрагментов, которые вошли в список.

Вам также могут понравиться: 30 ресурсов для разработчиков, которые разнообразят ваш набор навыков. р>

2. Shopify Liquid Template Snippets

Расширение Shopify Liquid Template Snippets включает в себя различные фрагменты Liquid, чтобы ускорить разработку тем. Сюда входят фрагменты тегов потока управления, теги итерации, теги переменных, фильтры массивов и многое другое. Это расширение имеет одну зависимость — расширение Liquid.

После установки введите часть ключевого слова фрагмента и нажмите enter или return , и фрагмент развернется. Вы также можете активировать фрагменты из редактора, набрав cmd + space (OSX) или ctrl + space (Windows, Linux).

Просмотр жидких фрагментов Shopify

3. HTML-фрагменты

HTML-фрагменты добавляют расширенную языковую поддержку для разметки HTML, включая фрагменты, краткую информацию и описания, в которых указывается, является ли тег устаревшим.

Просмотр фрагментов HTML

4. Конечные пробелы

Что в имени? Что ж, расширение конечных пробелов делает в значительной степени именно то, что описывает название — оно позволяет вам выделять конечные пробелы и быстро их удалять. Это расширение является портом популярного плагина Sublime Text Trailing Spaces и предлагает быстрое удаление конечных пробелов, обрезку при сохранении и многое другое.

Просмотр конечных пробелов

Вам также может понравиться: Учебный комплект Shopify GraphQL.

5. Пустая строка в конце файла

Пустая строка в конце файла — это минимальное и очень простое расширение, которое добавляет дополнительную пустую строку в конец любого сохраненного файла.

Просмотр пустой строки в конце файла

Подпишитесь на нашу информационную рассылку Developer Digest

Будьте в курсе последних изменений в Shopify API и других продуктах для разработчиков с нашим ежеквартальным дайджестом разработчиков.

Подпишитесь

Линтеры и подсветка синтаксиса

При программировании важно обеспечить согласованность, а это значит, что крайне важно использовать правильные инструменты, которые будут анализировать исходный код и отмечать любые программные или стилистические ошибки, ошибки и т. д. Линтеры обеспечивают это согласованность и помогает установить передовые методы для вашей команды. Подсветка синтаксиса также является ключевым моментом, когда дело доходит до простоты использования в текстовом редакторе. VS Code поддерживает множество языков прямо из коробки, поэтому расширений не так много необходимы для улучшения этого опыта.

Вам также могут понравиться: 4 простых способа развертывания вашего веб-сайта или приложения.

6. Liquid

Расширение Liquid необходимо тем, кто разрабатывает темы Shopify с использованием V S-код. Несмотря на то, что есть поддержка значков на боковой панели, позволяющих отличать файлы Liquid из коробки, VS Code не имеет подсветки синтаксиса для Liquid без помощи этого расширения. Это расширение добавляет подсветку синтаксиса для Liquid и действует как поддержка расширения Shopify Liquid Snippets. Он также поддерживает блоки кода раздела и автозаполнение фрагментов для тегов и фильтров Liquid.

Просмотр поддержки жидких языков

7. stylelint

stylelint — это расширение, которое поддерживает CSS, SCSS и Less. Вы можете контролировать, включен ли stylelint для разных языков или нет, в зависимости от того, как вы хотите настроить его параметры.

Просмотр stylelint

8. ESLint

Это расширение интегрирует ESLint в VS Code и требует, чтобы вы уже установили ESLint на свой компьютер локально или глобально. Вы можете сделать это с помощью npm , запустив npm install -g eslint . Более подробные настройки и инструкции по настройке и установке можно найти на странице магазина расширений Visual Studio Code.

View ESLint

9. TSlint

Эта новая версия TSLint похожа на предыдущее расширение, поскольку требует, чтобы у вас уже был установлен TSLint локально в проекте или глобально на вашем компьютере. Это расширение интегрирует линтер TSLint для языка TypeScript в VS Code.

Просмотр TSLint

Вам также может понравиться: Введение в CSS: руководство для начинающих по каскадным таблицам стилей.

Интеграция с Git

Интеграция с терминалом происходит автоматически с VS Code, что упрощает фиксацию изменений, не выходя из редактора . Просто используйте сочетание клавиш ^ + , чтобы открыть встроенный терминал из VS Code.. Нам всем нужно отслеживать изменения, которые мы вносим в наш код, и что может быть лучше, чем с помощью Git. Вот одно полезное расширение Visual Studio Code, которое помогает еще больше интегрировать Git в процесс написания кода.

10. GitLens

Расширение GitLens действительно потрясающее; он позволяет визуализировать авторство кода в VS Code. Вы можете просматривать и исследовать историю файла, просматривать аннотацию git blame для каждой строки файла и даже добавлять аннотацию изменений (diff) при наведении курсора, все из которых полностью настраиваемы.

Просмотр GitLens

Улучшения редактора

Эти усовершенствования редактора ускоряют отладку, написание и чтение кода. Они помогают вам в повседневном программировании, будь то поиск по методу, написанному кем-то другим, или получение подсказок имени класса в качестве вашей разметки.

11. Path Intellisense

Расширение Path Intellisense помогает автоматически заполнять имена файлов. Очень полезно при написании путей в разметке или в любом файле со ссылками на пути.

Просмотр пути в Intellisense

12. IntelliSense для имен классов CSS

Расширение IntelliSense для имен классов CSS помогает автоматически заполнять имена классов для атрибута класса HTML, просматривая определения классов CSS в вашей рабочей области и внешние файлы, на которые ссылается элемент ссылки .

Просмотр имен классов IntelliSense для CSS

13. CSS Peek

CSS Peak расширяет шаблоны HTML и Embedded JavaScript с поддержкой Go To Definition для классов CSS и идентификаторов, найденных в вашей разметке.

Просмотр CSS Peek

14. Руководства

Расширение Guides Visual Studio Code добавляет в ваш редактор дополнительные направляющие для отступов. Он отличается от встроенных направляющих отступов тем, что добавляет стек и активные направляющие отступа, фон отступов, и вы можете раскрашивать и стилизовать эти настройки.

Просмотреть руководства

15. Отладчик для Chrome

Расширение «Отладчик для Chrome» добавляет отладчик браузера Google Chrome в ваш редактор. Он позволяет запускать экземпляр Chrome, связанный с вашим приложением, или может подключаться к работающему экземпляру Chrome. Используя параметр url , вы сообщаете VS Code, какой URL-адрес открыть или запустить в Chrome.

Просмотреть отладчик для Chrome

Вам также может понравиться: Использование Git для упрощения развертывания темы Shopify.

16. Instant Markdown

Расширение Instant Markdown позволяет редактировать документы Markdown в VS Code и мгновенно просматривать их в браузере. Это очень полезно для редактирования файлов readme и других документов, написанных на Markdown.

Просмотр мгновенной разметки

17. открыть в браузере

Это расширение Visual Studio Code делает именно то, что написано: оно позволяет вам просматривать HTML-файл в браузере. Он открывает HTML-страницы в вашем браузере по умолчанию, но вы также можете выбрать «открыть в других браузерах», чтобы открыть их в другом, щелкнув правой кнопкой мыши.

Открыть в браузере

Темы и развлечения 🌈

Не нужно относиться к себе слишком серьезно, чтобы написать отличный код для фронтенд-разработки. На самом деле, если сделать ваше рабочее пространство более ярким с помощью удачной цветовой кодировки, это может даже помочь вам оставаться более организованным и минимизировать ошибки. Хорошая новость заключается в том, что для VS Code доступно множество тем, которые вы можете найти на веб-сайте тем VS Code. Может быть интересно добавить в редактор немного цвета. Вот несколько особенно популярных расширений и тем Visual Studio Code, которые могут показаться вам интересными и полезными.

18. Радужные скобки

Добавьте веселья в свой редактор с помощью 🌈 Радужные скобки! Это расширение Visual Studio Code предоставляет цвета радуги для круглых скобок, квадратных скобок и фигурных скобок. Это может быть особенно полезно для программистов на JavaScript!

View Rainbow Скобки

19. «Радуга отступов»

«Радуга отступов» — это простое расширение, которое окрашивает отступ перед текстом, чередуя разные цвета на каждом этапе. Это упрощает чтение вашего отступа, особенно если вы пишете код для Python или Nim.

View Indent Rainbow

Вам также может понравиться : Универсальный дизайн: 11 практических советов, которые сделают ваши сайты и приложения более доступными.

20. Темы, вдохновленные атомами

Для многих разработчиков VS Code — не первый редактор. Они уже использовали другой редактор и познакомились с ним, прежде чем исследовать возможности VS Code. Вероятно, поэтому некоторые из самых популярных расширений и тем Visual Studio Code были перенесены из других редакторов, таких как Atom. Вот три самые популярные темы для VS Code, перенесенные из Atom:

  • Atom One Dark Theme
  • Atom One Light Theme
  • One Dark Pro

С чего начать!

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

Оцените статью
techsly.ru
Добавить комментарий