Как настроить prettier vs code

Форматирование кода с Prettier — установка, настройка, конфиг

Prettier это утилита для автоматического форматирования кода. И вот несколько вещей которые вы получите, внедрив его на свой проект или как личный инструмент.

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

Также prettier дает возможность с помощью одной команды автоматически отформатировать определенную часть или весь код проекта за раз. Это может быть очень удобно на старых проектах, на которых по каким-то причинам не было четких правил по оформлению кода. Исправить в ручную 100+ файлов будет очень затратно по времени, а prettier сделает это за секунды.

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

В зависимости от того что вы используете на проекте npm или yarn запустите одну из следующих команд npm i -D prettier или yarn add —dev prettier . После этого вы уже можете ввести в консоли npx prettier —write . чтобы отформатировать весь код проекта.

Чтобы каждый раз не вводить эту длинную команду, можно в package.json добавить скрипт «prettier»: «prettier —write .» который по сути будет делать то же самое. Теперь в консоли достаточно будет ввести npm run prettier .

Если вы хотите форматировать код только в определенных файлах и/или каталогах, то можно изменить команду примерно следующим образом «prettier:js»: «prettier —write src/**/*.js» , эта команда произведет форматирование только .js файлов в директории src и ее поддиректориях.

�� Run on save

Скорее всего вы захотите автоматически запускать prettier для файла в момент его сохранения. Проще всего это сделать установив соответствующее расширение для вашего редактора и следовать инструкциям. У меня есть заметка как настроить prettier в vs code.

Настройка Prettier (конфиг)

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

❤ Примеры кода «до-после» будут?

Нет, не будут �� Мне не хотелось захламлять заметку целой кучей примеров с кодом. Поэтому все примеры я вынес в свой онлайн конструктор конфига для prettier. Там можно посмотреть как каждая конкретная настройка влияет на конечное форматирование. Это намного наглядней чем куски кода «до-после».

printWidth

Рекомендуемая длина строки. Это не жесткий лимит, в ситуациях когда иначе не сделать prettier будет превышать лимит (например переменные с длинным текстом).

По умолчанию: 80

Размер табуляции (в пробелах).

Использовать табы вместо пробелов.

По умолчанию: false

Автоматически добавлять точки с запятой в конце каждого оператора.

По умолчанию: true

singleQuote

Использовать одинарные кавычки, где это возможно. Игнорируется в JSX.

По умолчанию: false

jsxSingleQuote

Использовать одинарные кавычки вместо двойных в JSX.

По умолчанию: false

trailingComma

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

• es5 только для объектов, массивов и прочих структур данных
• none не использовать завершающие запятые
• all ставить запятые везде, где это возможно (например в параметрах функций)

По умолчанию: «es5»

arrowParens

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

• always всегда добавлять скобки
• avoid добавлять скобки только когда это обязательно

По умолчанию: «always»

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

.prettierrc

 "printWidth": 80, "tabWidth": 2, "useTabs": true, "singleQuote": false, "jsxSingleQuote": false, "endOfLine": "lf" >

�� К сведенью!

Prettier будет пытаться подгрузить параметры для printWidth, tabWidth, useTabs и endOfLine из файла настроек редактора .editorconfig если он есть в вашем проекте.

В случае конфликта предпочтение будет отдано настройкам из конфига .prettierrc.

Расширение «Prettier — Code formatter» для VS Code

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

Установка расширения

После установки расширения нужно добавить в файл настроек VS Code settings.json новые опции. Можно установить форматирование для всех языков или только для некоторых.

// файл настроек VS Code settings.json  .......... "prettier.enable": true, "editor.formatOnSave": false, // форматировать код при сохранении файла "editor.formatOnPaste": false, // форматировать при вставке фрагмента кода "editor.defaultFormatter": null, "[javascript]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettier-vscode" >, "[markdown]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettier-vscode", >, .......... >

Есть несколько мест, где можно задать правила форматирования — это файл .prettierrc , файл .editorconfig или файл настроек VS Code settings.json . Если есть файл .prettierrc — настройки из .editorconfig и settings.json будут проигнорированы. Правила из settings.json — это запасной вариант и обычно предназначены только для использования с файлами, не относящимися к проекту.

// файл настроек VS Code settings.json  .......... // расширение «Prettier — Code formatter» для форматирования кода "prettier.arrowParens": "avoid", "prettier.bracketSpacing": true, "prettier.endOfLine": "lf", "prettier.htmlWhitespaceSensitivity": "css", "prettier.insertPragma": false, "prettier.jsxBracketSameLine": false, "prettier.jsxSingleQuote": false, "prettier.printWidth": 80, "prettier.proseWrap": "preserve", "prettier.quoteProps": "as-needed", "prettier.requirePragma": false, "prettier.semi": false, "prettier.singleQuote": true, "prettier.tabWidth": 4, "prettier.trailingComma": "es5", "prettier.useTabs": false, "prettier.vueIndentScriptAndStyle": false, "prettier.embeddedLanguageFormatting": "auto", .......... >

Расширение будет искать файл конфигурации .prettierrc сначала в рабочей директории проекта, а в случае неудачи — во всех родительских директориях вплоть до корневой. Так что можно использовать один файл конфигурации для всех проектов.

[projects] .prettierrc [project-one] index.js package.json . [project-two] index.js package.json .

Расширение будет использовать prettier из локальных зависимостей проекта (рекомендуется). Если prettier.resolveGlobalModules:true — будет использоваться глобальная установка (не рекоменуется). Если модуль не установлен ни локально, ни глобально — будет использоваться версия prettier , связанная с расширением.

$ npm install prettier --save-dev # локальная установка

Правила форматирования

Давайте создадим файл .prettierrc и установим для всех опций форматирования значения по умолчанию.

 "arrowParens": "always", // скобки вокруг единственного параметра стрелочной функции "bracketSpacing": true, // пробелы между скобками в литералах объектов "endOfLine": "lf", // окончания строк "htmlWhitespaceSensitivity": "css", // форматирование html с учетом пробелов "insertPragma": false, // вставлять спец.комментарий в начало файла "jsxBracketSameLine": false, // где будет завершающий > многострочного jsx-элемента "jsxSingleQuote": false, // использовать в jsx одинарные кавычки вместо двойных "printWidth": 80, // на какой позиции выполнять перенос строки "proseWrap": "preserve", // как обрабатывать markdown файлы "quoteProps": "as-needed", // свойства объекта в кавычках или без кавычек "requirePragma": false, // форматировать только файлы со спец.комментарием в начале "semi": false, // точка с запятой в конце операторов "singleQuote": false, // использовать одинарные кавычки вместо двойных "tabWidth": 4, // заменять табуляцию на 4 пробела "trailingComma": "es5", // конечные запятые в объектах и массивах "useTabs": false, // делать отступы с помощью табуляции "vueIndentScriptAndStyle": false, // отступ внутри и в vue файлах "embeddedLanguageFormatting": "auto" // форматировать встроенный код >

arrowParens

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

• always — всегда добавлять скобки, например (x) => x * x
• avoid — опускать скобки, когда это возможно, например x => x * x

bracketSpacing

Добавлять пробелы между скобками в литералах объектов. Возможные значения

• true — добавлять пробелы, например
• false — не добавлять пробелы, например

endOfLine

Символы конца строки, возможные значения lf , crlf и auto . Значение auto сохраняет существующие окончания строк (смешанные значения в одном файле нормализуются путем просмотра того, что используется в конце первой строки).

htmlWhitespaceSensitivity

Чувствительность к пробелам для html кода. Нельзя безопасно преобразовать первый фрагмент кода ниже во второй фрагмент, так как это может изменить отображаемый вывод в браузере. Нужно учитывать, какой это элемент — строчный ( display:inline ) или блочный ( display:block ).

href="https://prettier.io/">Prettier is an opinionated code formatter. 

href="https://prettier.io/"> Prettier is an opinionated code formatter. 

• css — учитывать css-свойство display для безопасного форматирования
• strict — пробелы (или их отсутствие) вокруг всех тегов считаются значительными
• ignore — пробелы (или их отсутствие) вокруг всех тегов считаются незначительными

insertPragma

Добавлять в начало файла комменарий со специальным маркером @format , который указывает, что файл был отформатирован. Возможные значения true или false .

/** @format */ import  useState, useEffect > from 'react' import  useLocation > from 'react-router-dom'

jsxBracketSameLine

Разместить символ > многострочного html или jsx кода в конце последней строки или на следующей строке (не относится к самозакрывающимся элементам).

// jsxBracketSameLine = true className="prettier" id="prettier" onClick=this.handleClick>> Click Here 

// jsxBracketSameLine = false className="prettier" id="prettier" onClick=this.handleClick> > Click Here 

jsxSingleQuote

Заменять в jsx-коде двойные кавычки на одинарные, возможные значения true или false .

// jsxSingleQuote = true export default function Preloader()  return className='preloader'>  >

// jsxSingleQuote = false export default function Preloader()  return className="preloader">  >

printWidth

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

proseWrap

По умолчанию prettier не меняет markdown-текст, поскольку некоторые сервисы используют рендерер, чувствительный к разрыву строки. Чтобы разбить все блоки markdown-текста, когда они превышают ширину печати — следует использовать значение always . Чтобы убрать переносы строк из каждого блока markdown-текста — следует использовать значение never .

• always — разбить блок текста, если он превышает ширину печати
• never — развернуть каждый блок текста в одну длинную строку
• preserve — ничего не делать, оставить markdown-текст как есть

quoteProps

Добавлять или не добавлять кавычки для свойств объекта, возможные значения

• as-needed — добавлять кавычки для свойств только там, где это необходимо
• consistent — если хотя бы одно свойство требует кавычек, добавить для всех
• preserve — оставлять без изменений (но с заменой кавычек, см. singleQuote )

// код до форматирования const settings =  tabWidth: 4, "use-tabs": false, >

// quoteProps = as-needed (singleQuote:true) const settings =  tabWidth: 4, 'use-tabs': false, >

// quoteProps = consistent (singleQuote:true) const settings =  'tabWidth': 4, 'use-tabs': false, >

// quoteProps = preserve (singleQuote:true) const settings =  tabWidth: 4, 'use-tabs': false, >

requirePragma

Форматоровать только те файлы, которые имеют в начале комменарий со специальным маркером @format . Возможные значения true или false .

semi

Добавлять или нет точку с запятой в конце операторов, возможные значения true или false .

// semi = true import React from 'react'; import ReactDOM from 'react-dom';

// semi = false import React from 'react' import ReactDOM from 'react-dom'

singleQuote

Заменять или нет двойные кавычки на одинарные, возможные значения true или false .

// singleQuote = true import React from 'react'; import ReactDOM from 'react-dom';

// singleQuote = false import React from "react"; import ReactDOM from "react-dom";

tabWidth

Заменять табуляцию на tabWidth пробелов, если useTabs равно false .

trailingComma

Добавлять или нет конечную запятую в массивах и объектах, возможные значения:

• es5 — добавлять запятые в конце, если они допустимы в ES5 (объекты, массивы и т.д.)
• none — не добавлять запятые в конце
• all — добавлять запятые везде, где это возможно (включая параметры функций и вызовы)

// trailingComma = es5 const settings =  tabWidth: 4, useTabs: false, >

// trailingComma = none const settings =  tabWidth: 4, useTabs: false >

useTabs

Делать отступы в коде с помощью табуляции, возможные значения true или false .

vueIndentScriptAndStyle

Добавлять или нет отступ для кода внутри тегов и в файлах Vue, возможные значения true или false .

embeddedLanguageFormatting

Форматировать или нет встроенный код, возможные значения

• auto — форматировать встроенный код, если удалось его идентифицировать
• off — никогда не форматирать встроенный код автоматически

Дополнительные возможности

Для форматирования других языков программирования, например PHP, нужно установить плагин для Prettier — тогда расшинение «Prettier — Code formatter» подхватит этот плагин.

$ npm install @prettier/plugin-php --save-dev 

Файл настроек VS Code settings.json :

 .......... "prettier.enable": true, // разрешить работу расширения для форматирования кода "editor.formatOnSave": false, // форматировать код при сохранении файла "editor.formatOnPaste": false, // форматировать при вставке фрагмента кода "editor.defaultFormatter": null, "[javascript]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettier-vscode" >, "[php]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettier-vscode" >, .......... >

Файл опций форматирования .prettierrc :

 .......... "phpVersion": "7.1", "trailingCommaPHP": true, "braceStyle": "psr-2" >

Но вообще, для работы с PHP есть более подходящие расширения, см. здесь.

Вместо заключения

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

 /* * ОБЩИЕ НАСТРОЙКИ */ "editor.fontSize": 12, "files.encoding": "utf8", // кодировка файлов "files.eol": "\n", // концы строк как в linux "files.insertFinalNewline": true, // пустая строка в конце файла "files.trimTrailingWhitespace": true, // удалять пробелы в конце строк "editor.insertSpaces": true, // заменять табуляцию на пробелы "editor.tabSize": 4, // табуляция заменяется 4 пробелами "editor.renderWhitespace": "all", // показывать символы пробелов "workbench.colorCustomizations":  // волнистая линия "editorWarning.foreground": "#FF9933", "editorError.foreground": "#FF0000", "editorInfo.foreground": "#00AA00", >, /* * ФОРМАТИРОВАНИЕ */ // По умолчанию форматирование кода запрещено "editor.formatOnSave": false, // форматировать код при сохранении файла "editor.formatOnPaste": false, // форматировать при вставке фрагмента кода "editor.codeActionsOnSave": [], // набор действий при сохранении файла "editor.defaultFormatter": null, // Разрешить или запретить расширения eslint и prettier "prettier.enable": true, // нужен рестарт vs code "eslint.enable": true, // Настройки форматирования javascript "eslint.format.enable": true, // запретить или разрешить форматирование "eslint.run": "onType", // запускать проверку кода по мере печати кода "eslint.probe": [ // какие файлы нужно проверять "javascript" ], "eslint.rules.customizations": [ // для проблем форматирования кода уровень info "rule": "prettier/prettier", "severity": "info"> ], "[javascript]":  "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.defaultFormatter": "dbaeumer.vscode-eslint" >, // Настройки форматирования css "css.format.enable": true, "css.validate": true, "css.format.newlineBetweenRules": false, "css.format.newlineBetweenSelectors": false, "css.lint.duplicateProperties": "warning", "css.format.spaceAroundSelectorSeparator": true, "[css]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "vscode.css-language-features" >, // Настройки форматирования json "json.format.enable": true, "json.validate.enable": true, "[json]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "vscode.json-language-features" >, "[jsonc]":  "editor.defaultFormatter": "vscode.json-language-features" >, // Настройки форматирования html "html.format.enable": true, // разрешить форматирование html-кода "html.format.wrapLineLength": 100, // максимальная длина сроки до переносана новую "html.format.unformatted": null, // эти теги не форматировать (см.ссылку в подсказке) "html.format.contentUnformatted": "pre,code,textarea", // контент этих тегов не форматировать "html.format.extraLiners": "", // пустая строка перед этими тегами "html.format.preserveNewLines": false, // сохранять или нет пустые строки "html.format.maxPreserveNewLines": null, // сколько пустых строк сохранять "html.format.indentInnerHtml": false, // отступ и относительно "html.format.wrapAttributes": "preserve-aligned", // перенос и выравнивание атрибутов "html.format.wrapAttributesIndentSize": null, // размер отступа при переносе и выравнивании атр. "html.validate.scripts": true, // проверять js-скрипты внутри html-кода "html.validate.styles": true, // проверять css-стили внутри html-кода "[html]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "vscode.html-language-features", >, // Настройки форматирования markdown "[markdown]":  "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "vscode.markdown-language-features" >, /* * РАСШИРЕНИЯ */ // Расширение Render Line Endings, показывает символы CR LF "code-eol.newlineCharacter": "↓", "code-eol.crlfCharacter": "←↓", "code-eol.highlightNonDefault": true, // Расширение Live Server, простой веб-сервер для разработки "liveServer.settings.root": "/build", "liveServer.settings.host": "localhost", "liveServer.settings.fullReload": false, "liveServer.settings.port": 5555, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, // Расширение Prettier для форматирования кода "prettier.arrowParens": "avoid", // скобки вокруг единственного параметра стрелочной функции "prettier.bracketSpacing": true, // пробелы между скобками в литералах объектов "prettier.endOfLine": "lf", // окончания строк "prettier.htmlWhitespaceSensitivity": "css", // форматирование html с учетом пробелов "prettier.insertPragma": false, // вставлять спец.комментарий в начало файла "prettier.jsxBracketSameLine": false, // где будет завершающий > многострочного jsx-элемента "prettier.jsxSingleQuote": false, // использовать в jsx одинарные кавычки вместо двойных "prettier.printWidth": 100, // на какой позиции выполнять перенос строки при печати "prettier.proseWrap": "preserve", // как обрабатывать markdown файлы "prettier.quoteProps": "as-needed", // свойства объекта в кавычках или без кавычек "prettier.requirePragma": false, // форматировать только файлы со спец.комментарием в начале "prettier.semi": true, // точка с запятой в конце операторов "prettier.singleQuote": true, // использовать одинарные кавычки вместо двойных "prettier.tabWidth": 4, // заменять табуляцию на 4 пробела "prettier.trailingComma": "es5", // конечные запятые в объектах и массивах "prettier.useTabs": false, // делать отступы с помощью табуляции "prettier.vueIndentScriptAndStyle": false, // отступ внутри и в vue файлах "prettier.embeddedLanguageFormatting": "auto" // форматировать встроенный код >

• Расширение «ESLint» для VS Code, часть 2 из 2
• Расширение «ESLint» для VS Code, часть 1 из 2
• Настройка PhpStorm для работы с Laravel
• Расширение «Remote — SSH» для VS Code
• Git. Символы конца строки EOL
• Webpack. Начало работы, часть 2 из 2
• Webpack. Начало работы, часть 1 из 2

Как сделать форматирование кода с помощью Prettier в Visual Studio Code

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

Здесь на помощь приходит Prettier Code Formatter. Это настраиваемый форматировщик кода, который поддерживает множество языков и интегрируется с большинством редакторов. В этой статье мы посмотрим, как работать с Prettier в Visual Studio Code. Другие интеграции и способы установки смотрите в документации Prettier .

Настройка рабочей среды

Будем исходить из того, что Visual Studio Code у вас уже установлен. А ещё есть файл с кодом, который срочно нуждается в форматировании. Например, вот такой фрагмент:

const name = "Timeweb";
const service =>
console.log(service);
const printName = (fName) => console.log(`This is $`)
>
printName ('Timeweb');

Здесь стандартные проблемы: не смогли определиться с тем, какие кавычки использовать, потеряли отступы и переносы. Если запустить код, то он выполнится — для машины все эти отступы в JavaScript особого значения не имеют. А вот человеку читать такое будет сложно.

Следующий шаг — установка расширения для автоматической простановки отступов, точек с запятыми и других вещей, которые делают код человекопонятным.

1. Выберите вкладку Extensions в меню VS Code (можно использовать сочетание Ctrl + Shift + X на Windows).
2. Найдите Prettier. У этого расширения для VS Code больше 20 млн установок.
3. Нажмите Install для установки.

Есть альтернативный способ. Нажмите сочетание Ctrl + P для вызова панели быстрого запуска и выполните команду:

ext install esbenp.prettier-vscode

Теперь можно использовать утилиту для быстрого исправления внешнего вида кода.

Автоформатирование

Новое сообщение в Слаке от проджект-менеджера — нужно срочно отправлять в продакшн обновлённую страницу с преимуществами Timeweb Cloud . Всё готово и работает, но вот форматирование кода подкачало — команда за такое по голове не погладит. Но у нас же теперь есть расширение, которое поможет разобраться с этими неприятными недостатками быстро и безболезненно.

1. Нажмите сочетание Ctrl + Shift + P, чтобы открыть палитру команд.

2. Найдите и выполните команду Format Document With.

3. Выберите в выпадающем списке Prettier.

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

const name = "Timeweb";
const person = < first: name >;
console.log(person);
const sayHelloLinting = (fName) => console.log(`Hello linting, $`);
>;
sayHelloLinting("Timeweb");

Очень удобная штука — быстрая установка инструментов для разных языков. Например, если вы запустите автоформатирование в файле кодом на Python, появится предложение добавить autopep8. Эта утилита автоматически форматирует код Python в соответствии с руководством по стилю PEP 8. Она использует pycodestyle, чтобы определить, какие части кода необходимо отформатировать. Autopep8 способен исправить большинство проблем, о которых сообщает pycodestyle.

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

1. Откройте Settings (на Windows это Ctrl + ,).
2. С помощью поисковой строки найдите параметр Editor: Format On Save.
3. Отметьте чекбокс, чтобы включить форматирование при сохранении файла.

Готово, теперь ручной запуск не понадобится.

Настройка собственных правил форматирования

Разработчики могут настраивать свои правила форматирования. Есть два способа:

1. Изменить конфигурацию прямо в настройках расширения.
2. Создать отдельный файл конфигурации.

В настройках самого расширения можно изменить распространённые параметры. Например, указать количество пробелов при табуляции или выбрать, нужно добавлять точку с запятой в конце строки или нет. Это быстро, но конфигурация будет только у вас. Чтобы раскатить конфигурацию на всю команду разработчиков, нужно создавать отдельный файл. В нём будут единые правила форматирования кода в Visual Studio Code.

Файл .prettierrc.extension с конфигурацией может иметь расширение yml, yaml, json, js или toml. Вот простейший пример в формате JSON:

 "trailingComma": "es5", 
"tabWidth": 2, 
"semi": true, 
"singleQuote": false
>

Другие базовые варианты смотрите в документации Prettier .

Заключение

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

После создания файла конфигурации у команды будут единые правила оформления файлов. Можно с чистой совестью разрабатывать следующую страницу про облачные серверы и не думать про форматирование. Благодаря Prettier поправить все эти запятые и отступы можно будет в пару кликов на этапе рефакторинга.

Форматирование кода с помощью Prettier в Visual Studio Code

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

В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

Для демонстрации мы будем форматировать следующий код:

const name = "James"; const person =first: name > console.log(person); const sayHelloLinting = (fName) =>  console.log(`Hello linting, $fName>`) > sayHelloLinting('James'); 

Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:

• Смесь одинарных и двойных кавычек.
• Первое свойство объекта person должно находиться в отдельной строке.
• Выражение консоли внутри функции должно быть выделено отступами.
• Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.

Предварительные требования

Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:

Шаг 1 — Использование команды форматирования документа

После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:

Затем выберите Prettier — Code Formatter.

Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение esbenp.prettier-vscode .

Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:

const name = 'James'; const person =  first: name >; console.log(person); const sayHelloLinting = (fname) =>  console.log(`Hello linting, $fName>`); > sayHelloLinting('James'); 

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

body color: red; > h1  color: purple; font-size: 24px > 

Будет переформатирован как:

body  color: red; > h1  color: purple; font-size: 24px; > 

Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.

Шаг 2 — Форматирование кода при сохранении

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

Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

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

Шаг 3 — Изменение параметров конфигурации Prettier

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

Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

Вот несколько наиболее распространенных параметров:

• Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
• Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
• Tab Width — укажите, сколько пробелов должно вставляться при табуляции.

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

Шаг 4 — Создание файла конфигурации Prettier

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

Создайте новый файл .prettierrc. extension с одним из следующих расширений:

Вот пример простого файла конфигурации в формате JSON:

 "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true > 

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

Заключение

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

Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.