Авторизоваться
Аким Солянкин 4 дня назад Опубликована

Лучшие расширения VS code для веб-разработки 

Привет, ребята, сегодня я собираюсь показать вам некоторые расширения VSCode, которые помогли мне повысить мою продуктивность в веб-разработке (особенно фронтенд, поскольку я не знаком с бэкэндом). Этот пост предназначен для всех, включая новичков.

Давайте начнем

1. HTML Snippets

Введите часть фрагмента, нажмите клавишу ВВОД, и фрагмент развернется.

Фрагменты, названные как тег без фигурных скобок

div --> <div></div>
doc --> <!DOCTYPE html>
a --> <a href=""></a>

2. Intellisense for CSS classnames

Это расширение имеет функцию автозаполнения имени класса в html специально для имен классов Bootstrap, если вы знакомы с начальной загрузкой, тогда вы знаете о классах начальной загрузки и компонентах стиля с именами классов начальной загрузки.

3. Emmet Live

Откройте палитру команд (F1 в Windows) и найдите команду «Emmet Live». Нажмите Enter и введите аббревиатуру HTML Emmet.
Это помогает быстро писать HTML-код, а также экономит время.

4. Javascript Booster

Это расширение VS Code обеспечивает различные действия кода (быстрые исправления) при редактировании кода в JavaScript (или TypeScript / Flow). Просто обратите внимание на лампочку слева и нажмите ее, чтобы узнать, как можно преобразовать код под курсором.
Вы можете преобразовать обычную функцию в функцию стрелки одним нажатием кнопки и наоборот, и у нее есть много подобных функций.

5. Bootstrap 4

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

Пример
b4-$ и нажмите Enter, он создаст главный шаблон начальной загрузки, который имеет файлы cdn начальной загрузки и все необходимые теги для использования начальной загрузки.
Вы также можете создавать формы, карточки, кнопки и т. д. С помощью простых однострочных фрагментов.
Ознакомьтесь с этим расширением, чтобы увидеть все фрагменты начальной загрузки.

6. Live Server

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

7. ES7 / React/Redux....

Простые расширения для React, Redux и Graphql в JS / TS с синтаксисом ES7.
Если вы разработчик React, вам следует проверить это расширение. Оно имеет множество фрагментов для автозаполнения кодов.
Например

rfce and hit enter

Оно сгенерирует шаблон функционального компонента React.

8. Vscode-styled-components

Если вы используете стилизованные компоненты для стилизации ваших компонентов в React, то этот вариант лучше всего подходит для вас, поскольку он автоматически заполняет код css, написанный в файле js, поэтому обязательно проверьте его.

9. Bracket-Pair-Colorizer

Настраиваемое расширение для раскрашивания совпадающих скобок.
Это простое расширение, которое окрашивает скобки в разные цвета, чтобы вы могли легко определить блок кодов, например, в каком блоке кода есть открывающие и закрывающие скобки.

10. Lorem Ipsum

Генерирует и вставляет текст lorem ipsum.
Это простое расширение, которое генерирует фиктивный текст для использования на ваших веб-страницах.

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

Источник

Forem logo
Коментарии
Авторизоваться что-бы оставить комментарий
Присоединяйся в тусовку
Наш сайт использует файлы cookie для вашего максимального удобства. Пользуясь сайтом, вы даете свое согласие с условиями пользования cookie