Привет! С возвращением!
React и VS Code — это идеальная комбинация для фронтенд-разработчиков, с которой можно начать разработку своих веб-приложений. У них обоих есть тысячи библиотек и расширений для упрощения работы разработчиков. Тем не менее, выбрать один из длинного списка сложно, поскольку многие из них имеют аналогичные функции.
Итак, в этой статье я помогу вам выбрать 10 лучших расширений VS Code для вашей рабочей среды для разработки приложений React.
1. Фрагменты кода Reactjs🔗
Добавляет общие фрагменты кода Reactjs в VS Code.
Это расширение содержит фрагменты кода для Reactjs и основано на замечательном пакете babel-sublime-snippets.
2. ES7+ React/Redux/GraphQL/React-Native Snippets🔗
Добавляет фрагменты синтаксиса ES7 для React и связанных технологий.
Расширения для React, React-Native и Redux в JS/TS с синтаксисом ES7+. Настраиваемый. Встроенная интеграция с prettier.
3. ESLint🔗
Интегрирует ESLint в VS Code, чтобы выделять ошибки линтинга в коде React.
4. Красивее — в формате кода🔗
Автоматически форматирует ваш код в соответствии со стилем.
Prettier — это самоуверенное средство форматирования кода. Он обеспечивает согласованный стиль, анализируя ваш код и перепечатывая его с помощью собственных правил, учитывающих максимальную длину строки, при необходимости перенося код.
5. Путь IntelliSense🔗
Автозаполнение имен файлов для упрощения операций импорта.
6. Вавилон ES6/ES7🔗
Это отдельная версия синтаксиса, заданного с помощью vscode-flowtype. Значительно улучшена грамматика, распространяемая по умолчанию с помощью vscode. Это языковое расширение не вносит изменений в IntelliSense.
Добавляет подсветку синтаксиса для синтаксиса ES6/ES7 в ваш код React.
7. Бегущий по коду🔗
Позволяет быстро запускать фрагменты кода на разных языках.
Запуск фрагментов кода или файлов кода для нескольких языков: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script. , F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig и пользовательская команда.
8. Фрагменты кода JavaScript (ES6)🔗
Это расширение содержит фрагменты кода для Reactjs в синтаксисе ES6.
Это расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора Vs Code (поддерживает как JavaScript, так и TypeScript).
9. GraphQL для VSCode🔗
Подсветка синтаксиса GraphQL, линтинг, автозаполнение и многое другое!
👉 Перейти к определению: просто F12 или Ctrl+клик по любому типу графа, и вы перейдете прямо к его определению.
👉Автозаполнение: использует @playlyfe/gql для чтения всех определений вашей схемы graphql и обеспечения поддержки автозаполнения при написании и редактировании файлов .gql.
👉Проверка схемы: расширение также проверяет вашу схему, поэтому что вы обнаруживаете ошибки на ранней стадии.
👉Линтинг: это расширение использует метод, аналогичный тому, который используется в проекте Codemirror graphql для линтинга.
👉Отличная подсветка синтаксиса: теперь ваши запросы graphql, мутации и файлы gql будут выглядеть так же красиво, как и весь остальной код, благодаря замечательной подсветке синтаксиса. Он работает не только с вашими файлами схемы .gql/.graphql, но и внутри вашего кода
👉Фрагменты: предоставляются некоторые часто используемые фрагменты, которые помогают при написании мутаций и запросов, таких как определение типы, интерфейсы и типы ввода.
10. Отладчик для Chrome (ночной)🔗
Отлаживайте свой код JavaScript в браузере Chrome или любой другой цели, поддерживающей протокол Chrome Debugger.
Заключение
Надеюсь, вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.
Спасибо за прочтение! Следуйте за мной на этой платформе, чтобы читать больше материалов по программированию. Хорошего дня, скоро увидимся! 👋
