Повысьте свою продуктивность с помощью расширений

Я пробовал большинство, если не все, популярные текстовые редакторы, официально перешел на Visual Studio и с тех пор не оглядывался назад.

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

Вот мои любимые расширения VS Code для веб-разработки:

Текущий сервер

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



Текущий сервер
marketplace.visualstudio.com



Живой компилятор Sass

Компилируйте Sass или Scss в CSS в режиме реального времени с перезагрузкой браузера.



Live Sass Compiler
Если вы обнаружили какую-либо ошибку или у вас есть какие-либо предложения, не стесняйтесь сообщить или предложить мне.] Расширение VSCode, которое поможет… marketplace .visualstudio.com



красивее

Автоматически форматирует ваш код при сохранении. Тратьте меньше времени на исправление формата кода и сосредоточьтесь на функциональности. Работает с популярными языками, такими как JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular и GraphQL.



Prettier — средство форматирования кода
marketplace.visualstudio.com



Фрагменты кода JavaScript (ES6)

Очень удобно, если вы освоитесь с синтаксисом ES6.



Фрагменты кода JavaScript (ES6)
marketplace.visualstudio.com



ES7 React/Redux/GraphQL/React-Native фрагменты

Сводит к минимуму тот же объем кода, который вы могли бы написать, например, при создании компонентов React.



Фрагменты ES7 React/Redux/GraphQL/React-Native
Это расширение предоставляет вам фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code. Вы можете…marketplace.visualstudio.com



квокка

Живой блокнот для JavaScript. Я нашел это очень полезным при работе с проблемами практики собеседования. Это позволяет выполнять простую и быструю отладку без использования console.logs.



Quokka.js
Получить сейчас.marketplace.visualstudio.com



Автоматическое переименование тега

Автоматически переименовывать парные теги HTML/XML. Это убережет вас от того, что вы забудете изменить один из тегов, что впоследствии может вызвать ошибку.



Автоматическое переименование тега
Автоматическое переименование парных тегов HTML/XML, как это делает среда разработки Visual Studio. Запрашивайте и выполняйте проверку кода изнутри…marketplace.visualstudio.com



Раскрашивание пары скобок

Когда вы смотрите на свой код в течение нескольких часов, все начинает расплываться, поэтому четкое различие между функциями может быть очень полезным. Список цветов также можно настроить.



Раскрашивание пары скобок
Это расширение позволяет идентифицировать совпадающие скобки с цветами. Пользователь может определить, какие символы должны соответствовать…marketplace.visualstudio.com



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

Какие расширения вы считаете наиболее полезными? Любые дополнительные рекомендации по рабочему пространству для веб-разработки?