Visual studio code подсветка синтаксиса react

✨ Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень

Давайте поговорим о Code — Visual Studio Code.

Мои дорогие читатели попросили меня рассказать о тех расширения, которые я использую для разработки. Этим мы сейчас и займёмся.

Наш VSC будет пятирогим лазеростреляющим единорогом —после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день.

О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.

Material Theme

Самая эпичная тема для Visual Studio Code:

Auto Import

Автома т ически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.

Import Cost

Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.

Indent-Rainbow

Простое расширение, которое делает отступы более читабельными.

IntelliSense for CSS class names in HTML

Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .

SVG Viewer

Простой способ предпросмотра SVG.

Prettier — Code formatter

Не могу жить без него — пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier.

React Native Tools

Подсказки, отладка и встроенные команды для React Native.

Sublime Text Keymap and Settings Importer

Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш:
cmd ⌘ + P — Mac
ctrl + P — Windows

В этой консоли можно быстро перейти к файлам, а также, если добавить символ > перед поисковой строкой, можно искать действия, такие как переключение встроенного терминал, установку расширения и так далее.

Очень удобная штука для тех из нас, кто привык к ST3. 🎉

npm Intellisense

Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.

lit-html

Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.

highlight-matching-tag

Это расширение предназначено для подсветки парных открывающих или закрывающих тегов — функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.

GitLens — Git supercharged

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

Git Project Manager

Git Project Manager (GPM) — это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.

Git History

Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.

File Utils

Удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов.

Bracket Pair Colorizer

Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.

Color Highlight

Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.

CSS Peek

Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.

Debugger for Chrome

Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.

Quokka.js

Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).

Trailing Spaces

Мгновенно выделяет и удаляет конечные пробелы.

TypeScript Hero

Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.

WakaTime

Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.

Vetur

Code Runner

Запустите фрагмент кода или целый файл сразу в нескольких языках.

PHP IntelliSense

Расширенная поддержка автозаполнения и рефакторинга кода на PHP.

vscode-icons

Иконки для редактора VSCode.

Пользуйтесь Jest от Facebook с удовольствием.

React.js code snippets

Сниппеты кода для разработки на React.js в синтаксисе ES6.

Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤

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

Источник

34 полезных расширения VS Code, которые упростят работу разработчика

Редактор новостей Highload

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE.

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории:

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке.

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать.

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова.

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь ) и пользовательские команды.

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр).

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению.

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol .

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript.

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code.

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций:

• Визуализация авторства кода с помощью аннотаций Git;
• Плавное перемещение и исследование репозитория Git;
• Получение необходимой информации с помощью команд сравнения.

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора.

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как:

• Переход к определению;
• Просмотр информации о наведении и автозаполнение для проектов graphql ;
• Работа с запросами, помеченными тегом gql .

17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов . Использует грамматику CSS, построенную на основе language-sass и language-css .

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code.

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin .

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link .

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript.

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK.

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown . Имеет множество полезных функций, среди которых:

• Автосинхронизация скролла;
• Поддержка языка диаграмм PlantUML,
• Экспорт PDF,
• Создание презентация.

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит:

• Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
• Команду Palette Feature для настройки кода шаблона;
• Предложения по доработке для моделей Mongoose Models.

26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json , и проверку установленных модулей на соответствие зависимостям, определенным в package.json .

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта.

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr.

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами.

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки.

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ.

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code.

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.

Highload нужны авторы технических текстов. Вы наш человек, если разбираетесь в разработке, знаете языки программирования и умеете просто писать о сложном!
Откликнуться на вакансию можно здесь .

Источник