плагин для vs code выравнивание кода
Форматирование кода с помощью Prettier в Visual Studio Code
Published on November 2, 2020
Введение
Согласованное форматирование кода — сложная задача, но современные инструменты разработчиков позволяют автоматически обеспечивать согласованность базы кода вашей команды.
В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.
Для демонстрации мы будем форматировать следующий код:
Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:
Предварительные требования
Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.
Шаг 1 — Использование команды форматирования документа
После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.
Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.
Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.
Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:
Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:
Это работает и для файлов CSS. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Например:
Будет переформатирован как:
Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.
Шаг 2 — Форматирование кода при сохранении
До сих пор вам нужно было вручную запускать команды для форматирования кода. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.
Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:
Теперь вы можете писать код как обычно, и он будет автоматически форматироваться при сохранении файла.
Шаг 3 — Изменение параметров конфигурации Prettier
Prettier выполняет много действий по умолчанию, но вы также можете внести индивидуальные изменения в его настройки.
Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:
Вот несколько наиболее распространенных параметров:
Недостаток использования меню встроенных параметров VS Code заключается в том, что при этом не обеспечивается согласованность между разработчиками в вашей команде.
Шаг 4 — Создание файла конфигурации Prettier
Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.
Вот пример простого файла конфигурации в формате JSON:
Более конкретную информацию о файлах конфигурации можно найти в документации по Prettier. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.
Заключение
Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.
Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.
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
Другие плагины, которые могут вам пригодиться:
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. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.
Нажатие на кнопку — согласие на обработку персональных данных