плагин для выравнивания кода в vs code

9 полезных плагинов VS Code для вёрстки

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

Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.

Сделали подборку популярных и полезных плагинов VS Code.

Emmet

Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор, устанавливать не нужно.

Material Theme

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

Live Server

Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.

Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с помощью «Stop Live Server»

CSS Peek

Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.

Bracket pair colorizer

Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.

Prettier — code formatter

Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.

Auto rename tag

Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.

Path autocomplete

Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.

HTML CSS Support

Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.

Используйте эти плагины на курсе по вёрстке сайтов

Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

8 расширений VS Code для продуктивной работы

Редактор кода — часть вашего рабочего места и программа, в которой вы проводите больше всего времени во время работы (ну, не считая браузера со StackOverflow). А рабочее место должно не мешать продуктивно работать. Сам по себе редактор — просто поле для ввода текста, он не умеет экономить время. Но расширения вполне помогают сделать работу проще и эффективнее.

Мы спросили у фронтенд-разработчиков, какими плагинами VS Code они пользуются для продуктивной работы, и делимся подборкой с вами.

Snippets — экономим время на написании того, что уже давно написано за вас

Основные сниппеты, с которых стоит начать изучение — это сниппеты для HTML и JavaScript. Если втянетесь — легко найдёте расширения и для React, и для Vue, и для любого популярного фреймворка или языка. Рекомендуем.

Settings Sync — экономим время на настройке редактора кода

Если вы сталкивались с тем, что на каждом новом компьютере нужно настраивать редактор кода заново, то знаете, как это может быть неудобно. И если на новой Windows или переустановленном браузере можно просто войти в учётную запись, то в VS Code с этим чуть сложнее.

Но это вообще не проблема — плагин Settings Sync поможет синхронизировать настройки через профиль на GitHub (который всё равно есть у всех разработчиков). Если у вас ещё нет — зарегистрируйтесь, портфолио на гитхабе помогает найти работу.

Настройка простая — достаточно войти через профиль на гитхабе и синхронизировать всё, что вы хотите синхронизировать.

HTML Preview — экономим время на переключение в браузер

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

Плагин HTML Preview решает эту проблему и экономит массу времени — размеченную страницу видно прямо в окне VS Code, и превью меняется сразу после очередного сохранения HTML-файла. Для включения предпросмотра нужно нажать ctrl+k v в Windows или cmd+k v в OS X. Используем это расширение даже в редакции, чтобы удобнее верстать статьи, а что уж говорить о реальной работе фронтендера? Однозначная рекомендация.

LiveServer — экономим время на обновлении страницы

Если с разметкой всё понятно, то сразу смотреть страницу со стилями и JavaScript лучше в браузере. Но если обновлять страницу вручную не хочется, используйте расширение LiveServer.

LiveServer запускает сервер прямо в редакторе кода — после этого результат видно сразу после нажатия кнопки «Сохранить». Волшебство!

Prettier — экономим время на оформлении кода

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

Prettier поддерживает код и разметку на основных языках, которые могут встретиться вам во время работы над проектом — HTML, CSS, JavaScript, Markdown, JSON, JSX, Less. А если вы пишете на TypeScript, то даже его поддержка есть.

Auto Rename Tag — экономим время на поиске парных тегов

Бывает, по незнанию разметили всю страницу через div, а потом прочитали статью о том, почему так делать не надо и решили всё переделать. Но искать, где один div открывается, а потом закрывается, а потом снова открывается, бывает сложно.

В решении вопроса поможет расширение Auto Rename Tag — с ним можно быстро переименовать только открывающий тег, а закрывающий найдётся сам и переименуется автоматически. И никаких больше дивов, только семантика, доступность и радость.

Colorize — экономим время (и нервы) на проверке, какой там цвет в макете

Бывает так — написали стили, всё работает, всё хорошо. А потом через какое-то время заказчик попросил добавить побольше красненького. Вы открываете файл, а перед глазами только #E54320, #DA2F0A и #F0890E. Значит, нужно идти и гуглить, что это вообще за цвета, и кому пришло в голову их так назвать. Долго и неудобно.

Расширение Colorize решает эту проблему — вы сразу видите, какие там цвета в вашем CSS, Less или SASS-файле. Удобно, хорошо, лайк от редакции.

Используйте эти плагины на курсе по вёрстке сайтов

Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

27 супер плагинов VS Code для JavaScript разработчика

Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!

Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.

Представляем топ-лист расширений для JavaScript разработчика!

1. Project Snippets

Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.

Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:

Этот кусок можно просто поместить в набор пользовательских сниппетов. Тогда вместо того, чтобы в следующий раз писать его с нуля (или копировать из другого проекта и вставлять в новый), вы просто введете кастомный префикс этого фрагмента.

Сниппет будет выглядеть вот так:

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

Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:

Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.

2. Better Comments

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

Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:

3. Bracket Pair Colorizer

Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!

Программирование на JavaScript должно быть приятным, а не раздражающим.

4. VSCode Material Theme

Material Theme – легендарная тема оформления, доступная и для вашего VSCode.

Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!

5. @typescript-eslint/parser

Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.

Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.

С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.

6. Stylelint

Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:

7. Markdownlint + docsify

Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.

Существует множество инструментов, которые делают процесс работы с markdown-разметкой еще приятнее. В их числе markdownlint, который следит за форматированием файлов.

А для генерирования документации используйте плагин docsify, который поддерживает Markdown.

8. TODO Highlight

Плагин TODO Highlight просто выделяет TODO-комментарии, которые JavaScript разработчик оставляет в коде. Теперь вы точно не забудете, что хотели исправить или улучшить.

9. Import Cost

Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.

Этот инструмент особенно полезен в первый период использования. Некоторое время (и много написанного кода) спустя, вы уже запоминаете размер основных пакетов. Тем не менее, попробуйте, это может оказаться хорошим опытом.

10. Highlight Matching Tag

Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.

11. vscode-spotify

Многие программисты предпочитают работать под музыку и часто используют для прослушивания композиций сервис Spotify. Когда нужно переключить песню, приходится отвлекаться от редактора (иногда даже сворачивать его), а потом бывает сложно вновь вернуться в прерванный на секунду рабочий процесс.

Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.

12. GraphQL for VS Code

GraphQL стремительно набирает популярность, и мы всё активнее используем его в JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.

Плагин умеет подсвечивать синтаксис, проверять и автоматически дополнять код.

13. Indent-Rainbow

Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:

14. Color Highlight

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

15. Color Picker

Это расширение для VS Code предлагает вам графический интерфейс для выбора нужного цвета.

16. REST Client

Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.

Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:

Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:

Этот фрагмент соответствует POST-запросу с параметрами <"email": "someemail@gmail.com", "пароль": 1 >.

Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.

17. Settings Sync

Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин – Settings Sync.

18.Todo Tree

Расширение Todo Tree для VS Code соберет по вашей команде все задачи, разбросанные по приложению, в одно дерево в левой части рабочей области редактора.

19. Toggle Quotes

Toggle Quotes – забавная утилита, позволяющая переключаться между разными типами кавычек. Это особенно удобно при использовании строковых интерполяций.

20. Better Align

21. Auto Close Tag

Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.

22. Sort Lines

Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.

23. VS Code Google Translate

Совершенно незаменимая вещь для программиста! Если вы не знаете, как правильно назвать переменную или работаете в проекте с поддержкой нескольких языков, обязательно установите VS Code Google Translate. Теперь вы можете переводить, не уходя из редактора.

24. Prettier

Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.

25. VS Code Material Icon Theme

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

26. IntelliSense for CSS Class Names in HTML

Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!

27. Path Intellisense

Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.

Источник

Топ VSCode расширений, которые ускорят вашу разработку на JavaScript

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

Для VSCode созданы тысячи расширений. Я намерен представить несколько из них, которые использую каждый день. Приступим!

Quokka.js

Quokka.js — это плагин для JavaScript и TypeScript, который отображает результаты выполнения кода в редакторе, непосредственно во время его написания. Попробуйте сами!

Установив расширение, нажмите Ctrl/Cmd(⌘) + Shift + P, чтобы запустить палитру команд редактора, и затем введите Quokka, чтобы увидеть список доступных команд плагина. Выберите и запустите команду New JavaScript File или нажмите ⌘ + K + J, чтобы создать новый файл. Любой введенный код будет выполнен немедленно.

Bracket Pair Colorizer & Indent Rainbow

Квадратные и круглые скобки — неотъемлемая часть многих языков программирования. В таком языке как Javascript, простая станица может иметь целый поток этих символов, среди которых тяжело отличить пары открытых и закрытых скобок. В этот момент на помощь приходят Bracket Pair Colorizer и Indent Rainbow. Это два разных расширения. Однако, вместе они представляют отличную комбинацию. Эти расширения наполнят ваш редактор морем красок, сделают блоки кода отличимыми друг от друга и придадут им приятный вид.

Без Bracket Pair Colorizer и Indent Rainbow

Установив Bracket Pair Colorizer и Indent Rainbow

Сниппеты

Существует множество сниппетов для разных направлений: JavaScript (или другие языки), React, Redux, Angular, Vue, Jest. Лично я считаю JavaScript сниппеты очень полезными, особенно с тех пор как начал работать преимущественно с JS.

Несколько хороших расширений со сниппетами:

Todo Highlighter

Плагин выделяет TODO/FIXME или другие комментарии в яркие цвета, что довольно тяжело не заметить. Модное нововведение Todo Highlighter — список выделенных комментариев, который выводится в консоли.

Todo Highlighter

Import Cost

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

Import Cost

Rest Client

Веб-разработчики часто взаимодействуют с различного рода REST API. Для изучения ссылок и проверки ответов на запрос, применяют такие инструменты как Postman. Так зачем использовать отдельное приложение, когда можно то же самое сделать в редакторе? Поприветствуйте Rest Client. Он позволяет отправлять HTTP-запросы и просматривать ответ непосредственно в Visual Studio Code.

Rest Client

Auto Close Tag & Auto Rename Tag

С приходом React и той популярностью, которую он набрал за последние несколько лет, HTML-подобный синтаксис, в виде JSX, стал последним писком моды. Любому веб-разработчику быстро надоест вручную писать теги в JS файлах. В таком случае, нам необходим инструмент, который сможет быстро и легко генерировать теги. Emmet — очень полезный плагин, решающий данную задачу. Однако, иногда нам хочется чего-то более простого и лаконичного. Нам бы пригодилось расширение, которое будет добавлять закрывающий тег к его открытой паре, и автоматически изменять закрывающий тег, когда вы изменяете открывающий. Существует два расширения, которые могут справиться с поставленными задачами.

Они также работают с JSX и множеством других языков (XML, PHP, Vue, JavaScript, TypeScript, TSX).

Auto Rename Tag

Auto Close Tag

GitLens

Со слов автора, GitLens расширяет возможности Git, встроенного в Visual Studio Code. Плагин включает удивительное количество функций, таких как указание автора, поиск коммитов, история и проводник. Вы можете изучить полное описание этих возможностей здесь. Если вы работаете с Git, то вы обязаны установить этот плагин.

GitLens

Существуют другие расширения, выполняющие специфические задачи. Если GitLens оказался для вас слишком объемным или вам не требуется большая часть его функций, то советую взглянуть на следующий список:

Git Project Manager

GPM позволяет открыть окно с новым репозиторием напрямую из редактора. Проще говоря, вы можете открыть другой репозиторий не покидая VSCode.

После установки данного расширения, пропишите gitProjectManager.baseProjectsFolders в список адресов, содержащих репозитории.

Indenticator

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

Indenticator

VSCode Icons

Новые иконки придадут редактору привлекательности!

VSCode Icons

Dracula (Theme)

Полюбившийся мне внешний вид.
Dracula theme

Другие плагины, которые могут вам пригодиться:

Источник

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

Фронтенд-разработчик, 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-файл. Позволяет просматривать и переходить к определению.

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. Среди функций:

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

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

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

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

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

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

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

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

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-среде рядом с кодом по мере его ввода.

Источник