Prettier code formatter

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

Введение

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

В этой статье мы настроим 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 обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Prettier code formatter

Copy raw contents

Copy raw contents

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

prettier/prettier-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

Prettier

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Installation

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Default Formatter

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

Prettier Resolution

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Plugins

Configuration

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Usage

Using Command Palette (CMD/CTRL + Shift + P)

Keyboard Shortcuts

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Format On Save

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format Selection

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

Linter Integration

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

Workspace Trust

Settings

Prettier Settings

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

Extension Settings

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

prettier.configPath

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.prettierPath

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

prettier.documentSelectors

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Error Messages

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

prettier/prettier

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Opinionated Code Formatter

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

Show the world you’re using Prettier →

Prettier code formatter

Copy raw contents

Copy raw contents

Opinionated Code Formatter

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

Show the world you’re using Prettier →

bySabi Files

forked extension for use Standard integrate to prettier-eslint

Prettier formatter for Visual Studio Code

VS Code package to format your Javascript / Typescript / CSS using Prettier.

Installation

Can also be installed using

Usage

Using Command Palette (CMD + Shift + P)

Format On Save

Respects editor.formatOnSave setting.

Settings

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from eslint rules.

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: ‘none’)

Controls the printing of trailing commas wherever possible. Valid options:

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

Which parser to use. Valid options are ‘flow’ and ‘babylon’.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.javascriptEnable (default: [«javascript», «javascriptreact»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser babylon or flow depending on prettier.parser for given language ids. Use with care.

prettier.typescriptEnable (default: [«typescript», «typescriptreact»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser typescript for given language ids. Use with care.

prettier.cssEnable (default: [«css», «less», «scss»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser postcss for given language ids. Use with care.

prettier.jsonEnable (default: [«json»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser json for given language ids. Use with care.

prettier.graphqlEnable (default: [«graphql»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser graphql for given language ids. Use with care.

Prettier resolution

This extension will use prettier from your project’s local dependencies. Should prettier not be installed locally with your project’s dependencies, a copy will be bundled with the extension.

Contribute

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issue or PRs!

What is Prettier?

Prettier is an opinionated code formatter with support for:

It removes all original styling* and ensures that all outputted code conforms to a consistent style. (See this blog post)

Prettier takes your code and reprints it from scratch by taking the line length into account.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

If you want to learn more, these two conference talks are great introductions:

* Well actually, some original styling is preserved when practical—see empty lines and multi-line objects.

How To Format Code with Prettier in Visual Studio Code

Introduction

Formatting code consistently can be a challenge, especially when working on a team. The beauty of modern-day web development is that the tooling has gotten so much better! This article will guide you through setting up Prettier to format your code in Visual Studio Code automatically.

Sample Code

For demo purposes, here’s the sample code we will be formatting. If you’re picky about code formatting, you might pick up on some apparent missteps immediately.

Installing the Prettier Extension

The Format Document Command

With the Prettier extension installed, we can now leverage it to format our code. We’ll work more on this later, but we can use the Format Document command to start.

To open the command palette, you can use Command + Shift + P on Mac or Control + Shift + P on Windows. In the command palette, search format, then choose Format Document.

You may then be prompted to choose which format to use. To do so, click the Configure button.

And then VOILA! Your code is nice and formatted. Notice all the fancy improvements!

This can also work on CSS files. From this:

Automatically Format on Save

So far, we have had to run a command to format our code manually. Instead, you can choose a setting in VS Code to have your files automatically formatted when you save them. This has some great benefits.

You never have to format your code again manually!

With this setting in place, you can go about your business writing sloppily formatted code like we all do, knowing that it will all be taken care of automatically for you.

Prettier Configuration in VS Code Settings

Prettier does a lot of things for you by default, but you can also customize the settings. Here are a few of the most common settings.

Open the settings menu as above. Then, search for Prettier. This will bring up all of the settings that you can change right there in your editor.

For example, what if I change the tab width to 10.

Then save my file.

This is probably not the tab width size you want to keep, but it’s all up to you!

Creating a Prettier Configuration File

The downside to using the built-in settings menu in VS Code is that it doesn’t ensure consistency across developers on your team. If you change settings in your VS Code, someone else could have an entirely different set of settings in theirs.

Establish consistent formatting across your team by creating a configuration file!

To solve this, you can create a Prettier configuration file. It has to be titled .prettierrc.(ext) with one of the following extensions.

Here’s an example of a simple configuration file.

For more specifics on the configuration files, check out the Prettier Docs. After creating one of these and checking it into your project, you can ensure that every team member follows the same formatting rules.

Conclusion

Prettier is a helpful tool for manually formatting your code. It takes time that can be better spent writing more code. Take advantage of the amazing modern tools out there and set up Prettier.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

arijs/prettier-miscellaneous

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

This is a fork of prettier/prettier, with a goal of supporting additional options not picked up by official Prettier.

If you want to add an option to Prettier Miscellaneous, please send a PR! 😃

Prettier is an opinionated code formatter with support for:

It removes all original styling* and ensures that all outputted code conforms to a consistent style. (See this blog post)

What does Prettier do?

Prettier takes your code and reprints it from scratch by taking the line length into account.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

*Well actually, some original styling is preserved when practical—see empty lines and multi-line objects.

If you want to learn more, these two conference talks are great introductions:

Building and enforcing a style guide

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.

Prettier is usually introduced by people with experience in the current codebase and JavaScript but the people that disproportionally benefit from it are newcomers to the codebase. One may think that it’s only useful for people with very limited programming experience, but we’ve seen it quicken the ramp up time from experienced engineers joining the company, as they likely used a different coding style before, and developers coming from a different programming language.

What usually happens once people are using Prettier is that they realize that they actually spend a lot of time and mental energy formatting their code. With Prettier editor integration, you can just press that magic key binding and poof, the code is formatted. This is an eye opening experience if anything else.

We’ve worked very hard to use the least controversial coding styles, went through many rounds of fixing all the edge cases and polished the getting started experience. When you’re ready to push Prettier into your codebase, not only should it be painless for you to do it technically but the newly formatted codebase should not generate major controversy and be accepted painlessly by your co-workers.

Clean up an existing codebase

Since coming up with a coding style and enforcing it is a big undertaking, it often slips through the cracks and you are left working on inconsistent codebases. Running Prettier in this case is a quick win, the codebase is now uniform and easier to read without spending hardly any time.

2000 module ES6 code base, developed by 20 different developers over 18 months, in a global team. Felt like such a win without much research.

Ride the hype train

Purely technical aspects of the projects aren’t the only thing people look into when choosing to adopt Prettier. Who built and uses it and how quickly it spreads through the community has a non-trivial impact.

A few of the many projects using Prettier:

How does it compare to ESLint (or TSLint, stylelint. )?

Linters have two categories of rules:

Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it’s not possible for the programmer to make a mistake there anymore 🙂

Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!

You can install it globally if you like:

We’re using yarn but you can use npm if you like:

Run Prettier through the CLI with this script. Run it without any arguments to see the options.

In practice, this may look something like:

Don’t forget the quotes around the globs! The quotes make sure that Prettier expands the globs rather than your shell, for cross-platform usage. The glob syntax from the glob module is used.

If you are using ESLint, integrating Prettier to your workflow is straightforward:

Just add Prettier as an ESLint rule using eslint-plugin-prettier.

We also recommend that you use eslint-config-prettier to disable all the existing formatting rules. It’s a one liner that can be added on-top of any existing ESLint configuration.

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as «staged» via git add before you commit.

Install it along with husky:

and add this config to your package.json :

See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.

Find more info from here.

Option 3. bash script

Prettier ships with a handful of customizable format options, usable in both the CLI and API.

Valid options:
— «array»
— «object»
— «import»
— «export»
— «arguments»«none»You can use a comma separated string list, or an object in the API.

format is used to format text using Prettier. Options may be provided to override the defaults.

Options

Prettier ships with a handful of format options.

To learn more about Prettier’s stance on options – see the Option Philosophy.

If you change any options, it’s recommended to do it via a configuration file. This way the Prettier CLI, editor integrations and other tooling knows what options you use.

Specify the line length that the printer will wrap on.

For readability we recommend against using more than 80 characters:

In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.

Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when to break a line.

In other words, don’t try to use printWidth as if it was ESLint’s max-len – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.

(If you don’t want line wrapping when formatting Markdown, you can set the Prose Wrap option to disable it.)

Specify the number of spaces per indentation-level.

Indent lines with tabs instead of spaces.

(Tabs will be used for indentation but Prettier uses spaces to align things, such as in ternaries.)

Print semicolons at the ends of statements.

Use single quotes instead of double quotes.

See the strings rationale for more information.

Change when properties in objects are quoted.

Note that Prettier never unquotes numeric property names in Angular expressions, TypeScript, and Flow because the distinction between string and numeric keys is significant in these languages. See: Angular, TypeScript, Flow. Also Prettier doesn’t unquote numeric properties for Vue (see the issue about that).

Use single quotes instead of double quotes in JSX.

Default value changed from none to es5 in v2.0.0

Print trailing commas wherever possible in multi-line comma-separated syntactic structures. (A single-line array, for example, never gets trailing commas.)

Print spaces between brackets in object literals.

Put the > of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

[Deprecated] JSX Brackets

Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

Arrow Function Parentheses

First available in v1.9.0, default value changed from avoid to always in v2.0.0

Include parentheses around a sole arrow function parameter.

At first glance, avoiding parentheses may look like a better choice because of less visual noise. However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making other changes. Consistent use of parentheses provides a better developer experience when editing real codebases, which justifies the default value for the option.

Format only a segment of a file.

These two options can be used to format code starting and ending at a given character offset (inclusive and exclusive, respectively). The range will extend:

Specify which parser to use.

Prettier automatically infers the parser from the input file path, so you shouldn’t have to change this setting.

Custom parsers are also supported. First available in v1.5.0. Deprecated. Will be removed in v3.0.0 (superseded by the Plugin API)

Note: the default value was «babylon» until v1.13.0.

Specify the file name to use to infer which parser to use.

For example, the following will use the CSS parser:

This option is only useful in the CLI and API. It doesn’t make sense to use it in a configuration file.

First available in v1.7.0

Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to Prettier.

First available in v1.8.0

First available in v1.8.2

HTML Whitespace Sensitivity

First available in v1.15.0. First available for Handlebars in 2.3.0

Specify the global whitespace sensitivity for HTML, Vue, Angular, and Handlebars. See whitespace-sensitive formatting for more info.

Vue files script and style tags indentation

Rationale

Prettier is an opinionated code formatter. This document explains some of its choices.

What Prettier is concerned about

The first requirement of Prettier is to output valid code that has the exact same behavior as before formatting. Please report any code where Prettier fails to follow these correctness rules — that’s a bug which needs to be fixed!

JSX has its own option for quotes: jsxSingleQuote. JSX takes its roots from HTML, where the dominant use of quotes for attributes is double quotes. Browser developer tools also follow this convention by always displaying HTML with double quotes, even if the source code uses single quotes. A separate option allows using single quotes for JS and double quotes for «HTML» (JSX).

Prettier maintains the way your string is escaped. For example, «🙂» won’t be formatted into «\uD83D\uDE42» and vice versa.

It turns out that empty lines are very hard to automatically generate. The approach that Prettier takes is to preserve empty lines the way they were in the original source code. There are two additional rules:

By default, Prettier’s printing algorithm prints expressions on a single line if they fit. Objects are used for a lot of different things in JavaScript, though, and sometimes it really helps readability if they stay multiline. See object lists, nested configs, stylesheets and keyed methods, for example. We haven’t been able to find a good rule for all those cases, so Prettier instead keeps objects multiline if there’s a newline between the < and the first key in the original source code. A consequence of this is that long singleline objects are automatically expanded, but short multiline objects are never collapsed.

Tip: If you have a multiline object that you’d like to join up into a single line:

…all you need to do is remove the newline after < :

…and then run Prettier:

And if you’d like to go multiline again, add in a newline after < :

…and run Prettier:

♻️ A note on formatting reversibility

The semi-manual formatting for object literals is in fact a workaround, not a feature. It was implemented only because at the time a good heuristic wasn’t found and an urgent fix was needed. However, as a general strategy, Prettier avoids non-reversible formatting like that, so the team is still looking for heuristics that would allow either to remove this behavior completely or at least to reduce the number of situations where it’s applied.

What does reversible mean? Once an object literal becomes multiline, Prettier won’t collapse it back. If in Prettier-formatted code, we add a property to an object literal, run Prettier, then change our mind, remove the added property, and then run Prettier again, we might end up with a formatting not identical to the initial one. This useless change might even get included in a commit, which is exactly the kind of situation Prettier was created to prevent.

Just like with objects, decorators are used for a lot of different things. Sometimes it makes sense to write decorators above the line they’re decorating, sometimes it’s nicer if they’re on the same line. We haven’t been able to find a good rule for this, so Prettier keeps your decorator positioned like you wrote them (if they fit on the line). This isn’t ideal, but a pragmatic solution to a difficult problem.

There’s one exception: classes. We don’t think it ever makes sense to inline the decorators for them, so they are always moved to their own line.

Note: Prettier 1.14.x and older tried to automatically move your decorators, so if you’ve run an older Prettier version on your code you might need to manually join up some decorators here and there to avoid inconsistencies:

This is about using the noSemi option.

Consider this piece of code:

While the above code works just fine without semicolons, Prettier actually turns it into:

This is to help you avoid mistakes. Imagine Prettier not inserting that semicolon and adding this line:

Oops! The above actually means:

With a semicolon in front of that [ such issues never happen. It makes the line independent of other lines so you can move and add lines without having to think about ASI rules.

This practice is also common in standard which uses a semicolon-free style.

The printWidth option is more of a guideline to Prettier than a hard rule. It is not the upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified print width.

There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which Prettier doesn’t do). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation 🙂

Apart from that, there are a few cases where Prettier intentionally exceeds the print width.

Prettier can break long import statements across several lines:

The following example doesn’t fit within the print width, but Prettier prints it in a single line anyway:

This might be unexpected by some, but we do it this way since it was a common request to keep import s with single elements in a single line. The same applies for require calls.

Another common request was to keep lengthy test descriptions in one line, even if it gets too long. In such cases, wrapping the arguments to new lines doesn’t help much.

Prettier prints things a little differently compared to other JS when JSX is involved:

There are two reasons.

First off, lots of people already wrapped their JSX in parentheses, especially in return statements. Prettier follows this common style.

Secondly, the alternate formatting makes it easier to edit the JSX. It is easy to leave a semicolon behind. As opposed to normal JS, a leftover semicolon in JSX can end up as plain text showing on your page.

When it comes to the content of comments, Prettier can’t do much really. Comments can contain everything from prose to commented out code and ASCII diagrams. Since they can contain anything, Prettier can’t know how to format or wrap them. So they are left as-is. The only exception to this are JSDoc-style comments (block comments where every line starts with a * ), which Prettier can fix the indentation of.

Then there’s the question of where to put the comments. Turns out this is a really difficult problem. Prettier tries its best to keep your comments roughly where they were, but it’s no easy task because comments can be placed almost anywhere.

Imagine this piece of code:

Then you need to add another condition:

Prettier will turn the above into:

Which means that the eslint-disable-next-line comment is no longer effective. In this case you need to move the comment:

Disclaimer about non-standard syntax

Prettier is often able to recognize and format non-standard syntax such as ECMAScript early-stage proposals and Markdown syntax extensions not defined by any specification. The support for such syntax is considered best-effort and experimental. Incompatibilities may be introduced in any release and should not be viewed as breaking changes.

What Prettier is not concerned about

Prettier only prints code. It does not transform it. This is to limit the scope of Prettier. Let’s focus on the printing and do it really well!

Here are a few examples of things that are out of scope for Prettier:

Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода

Вы стремитесь к тому, чтобы писать аккуратный код, но не знаете с чего начать… Вы вчитываетесь в руководства по стилю, вроде этого от Airbnb, стараетесь следовать практическим рекомендациям ведущих специалистов… Вам приходится удалять неиспользуемый код? Приходится искать ненужные переменные? Вы пытаетесь выявлять неудачные паттерны, применённые в ваших программах? Например — хотите понять, читая хитросплетения кода некоей функции, возвратит ли она что-нибудь или нет. Звучит знакомо? Проблема заключается в том, что программисту очень тяжело и многое успевать, и многому учиться.

Может быть вы — тимлид, под началом которого трудится команда разработчиков разного уровня? В вашей команде есть новые люди? Беспокоит ли вас то, что код, который они напишут, не будет соответствовать вашим стандартам? Проходят ли ваши дни в проверках чужого кода, когда эти проверки, в основном, касаются соблюдения стандартов, а не программной логики?

Автор этого материала говорит, что он сталкивался со всем тем, чему посвящены только что заданные вопросы. То, с чем он столкнулся, утомляет и изматывает. Здесь он хочет рассказать об инструментах, правильное применение которых позволяет решить вышеописанные проблемы.

А именно, здесь пойдёт речь о таких средствах как Prettier, ESLint, Husky, Lint-Staged, EditorConfig, об автоматизации форматирования и линтинга кода. Этот материал ориентирован, в основном, на React-разработку, но рассмотренные здесь принципы можно применить в любом веб-проекте. Вот репозиторий, где, кроме прочего, собрано то, о чём тут пойдёт речь.

Prettier

Prettier — это средство для форматирования кода, которое нацелено на использование жёстко заданных правил по оформлению программ. Оно форматирует код автоматически. Вот как это выглядит.

Prettier форматирует код, следуя правилам

▍Сильные стороны Prettier

Вот какие возможности и особенности Prettier позволяют говорить о полезности этого инструмента:

▍Настройка Prettier

Установим пакет prettier в качестве зависимости разработки нашего проекта:

Благодаря этой команде в package.json будет добавлена запись о зависимости разработки, которая выглядит так:

В этот файл внесём следующий код (именно в таком вот неприглядном виде):

Как это исправить? Существует три подхода к работе с плохо отформатированным кодом:

Разберём эти правила:

Вот что произойдёт, если оно установлено в значение false :

Теперь, когда правила настроены, поговорим об этом скрипте:

Запустим скрипт из командной строки:

Вот что стало после этого с показанным выше плохо отформатированным кодом.

Результат форматирования кода с помощью Prettier

На этом будем считать, что с Prettier мы разобрались. Поговорим о линтерах.

ESLint

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

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

▍Зачем нужен линтер для JavaScript?

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

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

▍Почему ESLint — это особенный инструмент?

В заголовок этого раздела вынесен хороший вопрос. Дело тут в том, что ESLint поддерживает плагины. Так, правила проверки кода не должны представлять собой монолитный пакет. Всё, что нужно, можно подключать по мере необходимости. Каждое добавляемое в систему правило линтинга автономно, оно может быть, независимо от других, включено или выключено. Каждому правилу можно назначить уровень оповещения в соответствии с желанием разработчика — это может быть предупреждение (warning) или ошибка (error).

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

Среди существующих руководств по стилю JavaScript можно отметить следующие, весьма популярные:

Это руководство активно поддерживается — взгляните на его репозиторий на GitHub. Здесь я буду использовать набор правил, основанный именно на нём.

Поэтому обсудим роль представленных здесь пакетов:

Этот файл имеет следующую структуру:

Рассмотрим блоки этого файла, представленные объектами с соответствующими именами:

Здесь заданы три папки:

Запуск скрипта lint

Если выполнить второй скрипт ( yarn lint:write ), то ESLint выполнит такую же проверку, которая была выполнена раньше. Единственное различие заключается в том, что в таком режиме система попытается исправить обнаруженные ошибки, постарается привести код в как можно более пристойный вид.

Расширение ESLint для VS Code

У нас уже есть настроенные Prettier и ESLint, но, чтобы пользоваться возможностями этих инструментов, нам приходится запускать скрипты. Это не очень-то удобно, поэтому попробуем это исправить. А именно, мы хотим добиться того, чтобы форматирование и линтинг кода выполнялись бы по команде сохранения файла в редакторе. Кроме того, выполнять линтинг и форматирование кода мы хотим перед выполнением коммитов.

Рассмотрим его содержимое.

Представьте свои ощущения, если бы к вам попал код проекта размером в 20000 строк, который вам надо было бы проверить и улучшить. А теперь представьте себе, что вам пришлось бы это делать вручную. Такая работа заняла бы, наверное, месяц. А с помощь вышеописанных средств автоматизации всё это делается секунд за тридцать.

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

Husky

Пакет Husky позволяет задействовать хуки Git. Это означает, что у вас появляется возможность выполнять некие действия перед выполнением коммита или перед отправкой кода репозиторий.

Для того чтобы воспользоваться возможностями Husky, сначала установим этот пакет:

После этого добавим в package.json следующее:

Это приведёт к тому, что перед выполнением команды commit или push будет вызван некий скрипт, который, например, выполняет тестирование кода или его форматирование.

Подробности о Husky можно почитать здесь.

Lint-staged

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

Линтинг имеет смысл проводить до коммита кода. Благодаря этому можно сделать так, чтобы ошибки не проникали в репозиторий, и обеспечить единую стилизацию кода, попадающего туда. Однако выполнение линтинга для проверки всего проекта может оказаться слишком длительной задачей, а результаты такой проверки могут оказаться бессмысленными. В конечном счёте, линтингу может понадобиться подвергнуть файлы, которые планируется закоммитить.

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

Установим пакет Lint-staged:

Совместное использование Husky и Lint-staged

Приведём снова, для удобства, содержимое нашего package.json :

Теперь, зная о Husky и Lint-staged, вы можете оценить их влияние на работу с Git. А именно, предположим, что были выполнены следующие команды:

Теперь вы знаете о том, как интегрировать Prettier, ESLint, Husky и Lint-staged в свой проект.

На сайте проекта можно найти список редакторов, которые поддерживают этот файл. В него, в частности, входят WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit и другие.

Поясним настройки, использованные в этом файле:

Итоги

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

Уважаемые читатели! Какими инструментами вы пользуетесь для проверки и форматирования кода? Как автоматизируете эти процессы?

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

To use the Prettier tool with Java, refer to Prettier-Java plugin that you can add to your Java project.

Before you start

Download and install Node.js.

Install and configure Prettier in IntelliJ IDEA

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, IntelliJ IDEA locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window.

Then select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

IntelliJ IDEA can apply the key code style rules from the Prettier’s configuration to the IntelliJ IDEA Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

Before you start

Make sure you have Node.js on your computer.

Install and configure Prettier in WebStorm

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, WebStorm locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window.

Then press Ctrl+Alt+Shift+P or select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

WebStorm can apply the key code style rules from the Prettier’s configuration to the WebStorm Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

Prettier Now

Remi Marsal

Prettier Now

Code Formatter for Visual Studio Code

VS Code package to format your Javascript using Prettier Miscellaneous. Based on Esben Petersen’s extension and Bastian Kistner’s extension. Prettier Miscellaneous is a fork of Prettier and allows more customization of the output.
This extension is a wrapper around Prettier Miscellaneous, please report issues regarding the output on Prettier Now or Prettier Miscellaneous.

Changelog

Update 1.4.0

Update 1.3.0

Added support for GraphQL and CSS files with PostCSS syntax.

Update 1.2.0

New options jsxSingleQuote, spaceBeforeParen, alignObjectProperties. breakBeforeElse should now break properly.

Update 1.1.0

Added support for TypeScript, CSS, LESS and SASS files.

What does prettier do?

Prettier takes your code and reprints it from scratch by taking into account the line length.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

Installation

Can also be installed using

Usage

Format On Save

Set editor.formatOnSave to true in settings to automatically format files on save.

Or using Command Palette (CMD + Shift + P)

If you are using the Prettier output option, it is recommanded to use the Output Colorizer extension to get some syntactic coloring in the logs.

Settings

Extension settings are specified within VSCode Settings. Example config:

Prettier Misc options

You can now try to add other languages IDs that have JavaScript syntax but result is not guaranteed. No restart is required.[«javascript»,»javascriptreact»]typescriptEnableWill apply Prettier Misc using TypeScript parser.

You can now try to add other languages IDs that have TypeScript syntax but result is not guaranteed. No restart is required.[«typescript»,»typescriptreact»]cssEnableWill apply Prettier Misc using PostCSS parser.

You can now try to add other languages IDs that have CSS syntax but result is not guaranteed. No restart is required.[«css»,»less»,»scss»,»postcss»]jsonEnableWill apply Prettier Misc using JSON parser.

You can now try to add other languages IDs that have JSON syntax but result is not guaranteed. No restart is required.[«json»]graphqlEnableWill apply Prettier Misc using GraphQL parser.

Руководство Eslint + Prettier

Руководство для настройки автоматического форматирования кода и проверки синтаксиса языка JavaScript. Рассказываем про утилиты Eslint и Prettier.

Введение

В этой статье мы рассмотрим основные правила линтера и способы его настройки под проект.

Какой цели я хочу достигнуть в результате?

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

Какие проблемы решает eslint?

Линтер — это статический анализатор для языка программирования. Он сообщает о потенциально опасных выражениях в коде, которые могут привести к аварийному завершению программы. Также линтер может сообщить об устаревших участках кода, синтаксических ошибках и неиспользованных переменных. Всего существует около 300 правил, которые можно включить/выключить по желанию.

Для чего тогда нам нужен Prettier?

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

Перейдем к настройке

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

Можете поэкспериментировать с настройками, чтобы понять, какой пункт меню за что отвечает. Итогом настройки будет являться сформированный файл .eslintrc.json. Вы можете создать файл с настройками самостоятельно и поместить его на один уровень с package.json.

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

Пример настройки файлов для работы ESLint:

[0]=off // выключает правило

[1]=warn // выводит предупреждение в консоль

[2]=error // выводит error и останавливает исполнение программы

*Правила оформления кода. Полный список настроек вы можете найти здесь.

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

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

Для автоматического форматирования нам нужно

Tip. Если у вас возникли проблемы во время работы с ESLint, перейдите во вкладку Output и посмотрите вывод об ошибках.

TROUBLESHOOTING

Заключение

Часто в проектах могут использовать популярный конфиг от Airbnb. Он содержит больше правил и может вас запутать, поэтому рекомендую к нему обращаться после того, как усвоите базовые принципы работы линтера. Спасибо, что дочитали до конца. Работать с кодом теперь будет более приятно и гораздо быстрее.

Прокачивайте свой уровень программирования: На Хекслете есть несколько десятков треков — специальных курсов для опытных программистов, позволяющие повысить уровень компетентности разработчика в разных направлениях.

Install

First, install Prettier locally:

Then, create an empty config file to let editors and other tools know you are using Prettier:

Now, format all files with Prettier:

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

What is yarn doing at the start? yarn prettier runs the locally installed version of Prettier. We’ll leave off the yarn part for brevity throughout the rest of this file!

If you have a CI setup, run the following as part of it to make sure that everyone runs Prettier. This avoids merge conflicts and other collaboration issues!

Set up your editor

Formatting from the command line is a good way to get started, but you get the most from Prettier by running it from your editor, either via a keyboard shortcut or automatically whenever you save a file. When a line has gotten so long while coding that it won’t fit your screen, just hit a key and watch it magically be wrapped into multiple lines! Or when you paste some code and the indentation gets all messed up, let Prettier fix it up for you without leaving your editor.

See Editor Integration for how to set up your editor. If your editor does not support Prettier, you can instead run Prettier with a file watcher.

Note: Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)

And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.

ESLint (and other linters)

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

(See Prettier vs. Linters to learn more about formatting vs linting, Integrating with Linters for more in-depth information on configuring your linters, and Related projects for even more integration possibilities, if needed.)

For example, you can do the following to have Prettier run before each commit:

Prettier+

Benas Svipas

Prettier+ ·

Prettier (code formatter) for the VS Code. To see the difference between official Prettier extension you can take a look at the CHANGELOG.

Works with the Tools You Use

Installation

⚠ If you have any other code formatting extensions installed they might take precedence and format your code instead of Prettier+ leading to unexpected results.

Usage

Command palette

Keyboard shortcuts

Format a file on save

Bundled dependencies

These dependencies are bundled with the extension:

After installing this extension you can immediately start to format your code, you don’t need to do anything additionally. But if you want to include some integrations or plugins, continue to read below.

Integrations

ESLint

TSLint

stylelint

Plugins

⚠ The plugin API is in a beta state. This extension supports only official plugins.

Settings

Settings will be read from (listed by priority):

Or if there’s no Prettier config file:

prettier.printWidth (default: 80)

Specify the line length that the printer will wrap on. Learn more here.

prettier.tabWidth (default: 2)

Specify the number of spaces per indentation-level. Learn more here.

prettier.singleQuote (default: false)

Use single quotes instead of double quotes. Learn more here.

prettier.trailingComma (default: ‘es5’)

Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.) Learn more here.

prettier.bracketSpacing (default: true)

Print spaces between brackets in object literals. Learn more here.

prettier.jsxBracketSameLine (default: false)

Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements). Learn more here.

prettier.parser (default: »)

Specify which parser to use. Learn more here.

⚠ Prettier automatically infers the parser from the input file path, so you shouldn’t have to change this setting.

prettier.semi (default: true)

Print semicolons at the ends of statements. Learn more here.

prettier.useTabs (default: false)

Indent lines with tabs instead of spaces. Learn more here.

prettier.proseWrap (default: ‘preserve’)

prettier.arrowParens (default: ‘always’)

Include parentheses around a sole arrow function parameter. Learn more here.

prettier.jsxSingleQuote (default: false)

Use single quotes instead of double quotes in JSX. Learn more here.

prettier.htmlWhitespaceSensitivity (default: ‘css’)

Specify the global whitespace sensitivity for HTML files. Learn more here.

svipas/vscode-prettier-plus

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

This branch is 258 commits ahead of prettier:main.

Open a pull request to contribute your changes upstream.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier (code formatter) for the VS Code. To see the difference between official Prettier extension you can take a look at the CHANGELOG.

Works with the Tools You Use

⚠ If you have any other code formatting extensions installed they might take precedence and format your code instead of Prettier+ leading to unexpected results.

Format a file on save

These dependencies are bundled with the extension:

After installing this extension you can immediately start to format your code, you don’t need to do anything additionally. But if you want to include some integrations or plugins, continue to read below.

⚠ The plugin API is in a beta state. This extension supports only official plugins.

Settings will be read from (listed by priority):

Or if there’s no Prettier config file:

prettier.printWidth (default: 80)

Specify the line length that the printer will wrap on. Learn more here.

prettier.tabWidth (default: 2)

Specify the number of spaces per indentation-level. Learn more here.

prettier.singleQuote (default: false)

Use single quotes instead of double quotes. Learn more here.

prettier.trailingComma (default: ‘es5’)

Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.) Learn more here.

prettier.bracketSpacing (default: true)

Print spaces between brackets in object literals. Learn more here.

prettier.jsxBracketSameLine (default: false)

Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements). Learn more here.

Specify which parser to use. Learn more here.

⚠ Prettier automatically infers the parser from the input file path, so you shouldn’t have to change this setting.

prettier.semi (default: true)

Print semicolons at the ends of statements. Learn more here.

prettier.useTabs (default: false)

Indent lines with tabs instead of spaces. Learn more here.

prettier.proseWrap (default: ‘preserve’)

prettier.arrowParens (default: ‘always’)

Include parentheses around a sole arrow function parameter. Learn more here.

prettier.jsxSingleQuote (default: false)

Use single quotes instead of double quotes in JSX. Learn more here.

prettier.htmlWhitespaceSensitivity (default: ‘css’)

Specify the global whitespace sensitivity for HTML files. Learn more here.

prettier.vueIndentScriptAndStyle (default: false)

Whether or not to indent the code inside and tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor. Learn more here.

prettier.endOfLine (default: ‘lf’)

Specify the end of line used by Prettier. Learn more here.

prettier.quoteProps (default: ‘as-needed’)

Change when properties in objects are quoted. Learn more here.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.eslintIntegration (default: false)

Use prettier-eslint to format JavaScript, TypeScript and Vue.

prettier.tslintIntegration (default: false)

Use prettier-tslint to format TypeScript.

prettier.stylelintIntegration (default: false)

Use prettier-stylelint to format CSS, SCSS and Less.

prettier.requireConfig (default: false)

Require a config file to format code.

List of languages IDs to ignore. Restart required. Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run.

Prettier

We’ve verified that the organization prettier controls the domain:

prettier.io

Pinned

Prettier is an opinionated code formatter.

Turns off all rules that are unnecessary or might conflict with Prettier.

Visual Studio Code extension for Prettier

Prettier PHP Plugin

Prettier Ruby Plugin

Prettier XML plugin

Prettier is an opinionated code formatter.

245 Updated Aug 28, 2022

Automates the prettier/prettier regression checks with GitHub Actions.

23 Updated Aug 28, 2022

Prettier PHP Plugin

13 Updated Aug 27, 2022

Prettier Pug Plugin

12 Updated Aug 27, 2022

Prettier Ruby Plugin

1 Updated Aug 26, 2022

Visual Studio Code extension for Prettier

9 Updated Aug 26, 2022

12 Updated Aug 26, 2022

Synchronous version of Prettier

0 Updated Aug 26, 2022

Prettier XML plugin

1 Updated Aug 26, 2022

CLI for prettier-eslint

0 Updated Aug 25, 2022

People

Top languages

Most used topics

Footer

© 2022 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

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

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

Данный мануал научит вас использовать инструмент Prettier, который автоматически форматирует код в Visual Studio Code (или VS Code)

Для демонстрации мы возьмем такой фрагмент кода:

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

Требования

1: Команда Format Document

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

Чтобы открыть панель команд, нажмите Command+Shift+P в macOS или Ctrl+Shift+P в Windows.

В палитре команд найдите format, а затем выберите Format Document.

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

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

Примечание. Если панель не предложила вам выбрать формат по умолчанию, вы можете выбрать его вручную в Settings. Установите в Editor: Default Formatter значение ebsenp.prettier-vscode.

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

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

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

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. На вашем экране появятся все параметры Prettier, которые вы можете изменить.

Вот несколько параметров, которые меняют чаще всего:

Главный недостаток встроенного меню конфигураций в VS Code – это то, что оно не обеспечивает согласованности настроек в вашей команде.

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

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

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

<
«trailingComma»: «es5»,
«tabWidth»: 4,
«semi»: false,
«singleQuote»: true
>

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

Заключение

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

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

Mathieu SCHROETER

Prettier for Visual Studio Code using prettier-space-parenthesis fork

Prettier formatter for Visual Studio Code

VS Code package to format your Javascript using Prettier.

Installation

Can also be installed using

Usage

Using Command Palette (CMD + Shift + P)

Format On Save

Respects editor.formatOnSave setting.

Settings

prettier.eslintIntegration (default: false)

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from eslint rules.

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.useFlowParser (default: false)

Use the flow parser instead of babylon. Deprecated use parser: ‘flow’ instead

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: ‘none’)

Controls the printing of trailing commas wherever possible. Valid options:

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

prettier.parser (default: ‘babylon’)

Which parser to use. Valid options are ‘flow’ and ‘babylon’

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

Prettier resolution

This extension will use prettier from your project’s local dependencies. Should prettier not be installed locally with your project’s dependencies, a copy will be bundled with the extension.

Contribute

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issue or PRs!

Prettier+

Shunqian

Prettier+

More information please refer to prettier-plus.

Installation

Install through VS Code extensions. Search for Prettier+

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

⚠ A word of warning-if you have any other code formatting extensions installed such as for example hugely popular HookyQR.beautify or taichi.react-beautify they might take precedence and format your code instead of Prettier leading to unexpected results.

Usage

Using Command Palette (CMD/CTRL + Shift + P)

Custom keybindings

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Format On Save

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

VSCode ESLint and TSLint Integration

prettier-eslint and prettier-tslint are included with the installation of this extension. There is no need for a separate local or global install of either for functionality.

Settings

Prettier’s Settings

Settings will be read from (listed by priority):

Or if no prettier configuration file exist

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: ‘none’)

Controls the printing of trailing commas wherever possible. Valid options:

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

Which parser to use. Valid options are ‘flow’ and ‘babylon’.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.proseWrap (default: ‘preserve’)

(Markdown) wrap prose over multiple lines.

prettier.arrowParens (default: ‘avoid’)

Include parentheses around a sole arrow function parameter

prettier.jsxSingleQuote (default: false)

Use single quotes instead of double quotes in JSX.

prettier.htmlWhitespaceSensitivity (default: ‘css’)

Specify the global whitespace sensitivity for HTML files. Learn more here

prettier.endOfLine (default: ‘auto’)

Specify the end of line used by prettier. Learn more here

VSCode specific settings

These settings are specific to VSCode and need to be set in the VSCode settings file. See the documentation for how to do that.

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from ESLint rules.

Use prettier-tslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from TSLint rules.

Use prettier-stylelint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.

prettier.requireConfig (default: false)

Require a ‘prettierconfig’ to format

prettier.disableLanguages (default: [«vue»])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Prettier resolution

This extension will use prettier from your project’s local dependencies. Should prettier not be installed locally with your project’s dependencies, a copy will be bundled with the extension.

Contribute

Feel free to open issues or PRs!

Running extension

Running tests

Without having an instance VSCode running (or it won’t start) npm run test

Prettier в крупных проектах: тратим 20 минут на настройку, забываем о форматировании навсегда

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

Год назад одна из команд в Skyeng сталкивалась с такими холиварами почти на каждом ревью. Но затем человек, у которого больше всех болело, сказал: «Теперь живем на Prettier’e, согласны?» За следующие месяцы ребята ни разу не поднимали вопрос о форматировании, а теперь эта штука стоит на всем монорепозитории фронтенда — и его использует каждая команда, которая туда заезжает.

Prettier – инструмент для автоформатирования кода с поддержкой кучи инструментов, включая наши любимые Angular и Typescript. Он не модифицирует код, не заменяет тернарные операторы на if’ы и не разбивает длинные строки на несколько конкатенированных (об этом уже должен думать разработчик), а просто выводит то, что есть, с нужным форматированием.

Как было раньше

На тот момент в Skyeng было уже несколько десятков разработчиков, и каждый месяц могли приходить по 10-20 новичков. Все работали (и работают) в небольших командах — каждая, фактически, считается независимой “боевой единицей” со своими задачами и договоренностями.

Давайте представим одну такую — безусловно, все совпадения случайны, — команду:

Борис – миддл, который пришёл к нам из другой большой компании. У них был свой стайл-гайд, но он старается переучиться на наш: в целом, справляется, но время от времени делает что-то по части форматирования не так и узнаёт об этом только на код-ревью. Мелочь, но неприятно.

Павел – более опытный разработчик. Знает своё дело, всегда выполняет задачи качественно и в срок, но иногда напрочь забывает про договоренности и пишет по-своему. В итоге его код не вписывается в большой проект, хоть и написан качественно и со вкусом.

Артур – перфекционист с философией «чистый код – понятный код»: вечно парится по поводу код-стайла. Безусловно, отклонит код коллег с кучей комментов «здесь перенесите фигурную скобочку на следующую строчку» — и Борис потратит время на правки, а Павел – на споры уровня «тебе не нравится, ты и меняй».

Как стало

Задача Prettier – заставить разработчика не думать о форматировании: в нем минимум настроек. Это и подкупило Павла, когда Артур кинул в чат команды ссылку на проект:

— поставил сам Prettier,
— поставил пре-коммит хук (подробнее),
— оставил в чате пару комментариев, что код-стайл там свой (например, логические операции в if’ах ставятся в конце строки, а не в начале).

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

Даже если бы это было написано в одну строку, оно всё равно бы переформатировалось так, как надо:

Ещё кусочек кода, уже без точек с запятой. До:

Теперь код-ревью проходит быстрее, Борис не тратит кучу рабочего времени на форматирование уже написанного кода, Павел продолжает писать так, как и писал (но теперь с ним никто не ругается), а Артур наконец-то доволен, заходя в репозиторий и улыбаясь от красоты кода. Используя простой инструмент с февраля 2019-го, ребята сэкономили кучу времени, перестав спорить из-за форматирования. А затем убедили остальные команды сделать так же.

Automated code formatting with Prettier

Prettier is a tool that automatically makes your code more readable and consistent with your project’s style guide.

Prettier integrates with your editor, so your code is tidied up every time you save your changes:

Let’s look at two examples:

Prettier will rewrite this as follows.

Here are the changes Prettier made:

I’m using the default configuration here, but you can configure Prettier to prefer single quotes and no semicolons instead.

Another example. We’ve got a function with a lot of options. (If you’ve not seen it before, this code uses the ES6 object destructuring syntax).

But this is slowly becoming difficult to read. Prettier can fix the problem:

No need to move the cursor and press enter 8 times! And if you realize you don’t need option7 after all Prettier will instantly revert to the single line format.

Benefits

Prettier has had a surprisingly big impact on my productivity and happiness! I miss it every time I work on a project that’s not set up with it.

Here’s why Prettier is awesome:

Setup with Visual Studio Code

There are Prettier plugins for many different editors available. Here I’ll show the setup in Visual Studio Code.

1. Install the Prettier VS Code plugin

Open the Command Palette (under the View submenu, or using Cmd+Shift+P on Mac and Ctrl+Shift+P on Windows). Then select «Extensions: Install Extensions».

Search for «Prettier», click «Install», and then «Reload» once the installation is complete.

2. Run Prettier on a file

Now, if you open a JavaScript file and select «Format Document» in the Command Palette Prettier will tidy up your code!

3. Automatically run Prettier when saving a file

Open your workspace settings through the Command Palette. Then enable formatOnSave :

Save your settings and now your code should be formatted every time a file is updated!

Prettier also supports languages other than JavaScript, e.g. TypeScript, HTML, CSS, or JSON. However, if you don’t want those to be formatted you can control the formatOnSave setting by file type:

Formatting existing code with command line

You can format the code for your entire project using the Prettier command line interface (CLI). First install the CLI tool:

Then update your current code:

Matt Zeunert

Read more posts by this author.

Share this post

Using a JavaScript library versus building the functionality yourself

Libraries save time by letting developers reuse existing work done by others. Especially for languages like JavaScript, that come…

Prettier code formatter

Use the prettier command to run Prettier from the command line.

In practice, this may look something like:

This command formats all files supported by Prettier in the current directory and its subdirectories.

A more complicated example:

Don’t forget the quotes around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.

Given a list of paths/patterns, the Prettier CLI first treats every entry in it as a literal path.

If the path points to an existing file, Prettier CLI proceeds with that file and doesn’t resolve the path as a glob pattern.

If the path points to an existing directory, Prettier CLI recursively finds supported files in that directory. This resolution process is based on file extensions and well-known file names that Prettier and its plugins associate with supported languages.

Otherwise, the entry is resolved as a glob pattern using the glob syntax from the fast-glob module.

Console output if all files are formatted:

Console output if some of the files require re-formatting:

Do not look for a configuration file. The default settings will be used.

Defines how config file should be evaluated in combination of CLI options.

cli-override (default)

CLI options take precedence over config file

file-override

Config file take precedence over CLI options

prefer-file

If a config file is found will evaluate it and ignore other CLI options. If no config file is found, CLI options will evaluate as normal.

This option adds support to editor integrations where users define their default configuration but want to respect project specific configuration.

Change the level of logging for the CLI. Valid options are:

A path to the file that the Prettier CLI will treat like stdin. For example:

Prevent errors when pattern is unmatched.

Disable plugin autoloading.

If this option is enabled, the following values are used as cache keys and the file is formatted only if one of them is changed.

Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.

If no strategy is specified, content will be used.

prettier/plugin-php

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier PHP Plugin

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

This plugin adds support for the PHP language to Prettier.

Can this be used in production?

If you want to use the plugin in production, we recommend limiting its scope to pure PHP files.

You can give the plugin a try in our playground!

and then run it via

If you installed globally, run

This package exposes a standalone.js that can be used alongside Prettier’s own standalone.js to make the PHP plugin work in browsers without a compile step.

First, grab both standalone scripts from an npm CDN like unpkg:

Then use Prettier with PHP, just like this:

See this code in action in this basic demo.

Bundlers like webpack, Rollup or browserify automatically recognize how to handle the PHP plugin. Remember that even when using a bundler, you still have to use the standalone builds:

Prettier for PHP supports the following options. We recommend that all users set the phpVersion option.

A comment // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.

will be transformed to

The official prettier plugin for atom supports plugins.

The official prettier plugin for vscode supports plugins since Version 1.10.0. To enable it, install the extension and make sure the plugin is installed locally (in your project folder). After restarting VScode the plugin should work as expected.

PhpStorm / IntelliJ / Jetbrains IDE

Note: Just pressing save does not reformat your current file unless the file has been modified in some way, alternatively you can use the Prettier shortcut Ctrl+Alt+Shift+P

Sublime Text support is available through Package Control and the JsPrettier plugin.

Regarding plugin support in the official plugin vim-prettier see this issue.

The linting plugin ALE has built-in support for prettier and its plugins. Just add prettier to your list of fixers. For example:

Integration for other tools

See docs/recipes/php-cs-fixer for integration help, code can also be found in https://gist.github.com/Billz95/9d5fad3af728b88540fa831b73261733

If you’re interested in contributing to the development of Prettier for PHP, you can follow the CONTRIBUTING guide from Prettier, as it all applies to this repository too.

Using Prettier and ESLint to automate formatting and fixing JavaScript

February 11, 2022 8 min read 2421

Editor’s note: This post was updated on 11 February 2022 to correct any outdated information and add the Prettier vs. ESLint section.

Linting and pretty-printing JavaScript code can help developers catch errors early, make code more legible, and improve overall code quality. However, when using a formatter for pretty-printing and a linter side-by-side, there can be some friction.

For example, the formatter might do something that the linter deems problematic. The linter can then overwrite style changes from the formatter, causing the two to pull in different directions.

To use them together successfully, developers must get them on the same page. In this article, we’ll discuss how to use the popular formatter, Prettier, with the popular linter, ESLint.

We’ll learn how to set them up and use them together on the command line and in Visual Studio Code (VS Code) to automatically fix and format code.

I have seen different methods for tackling how to use them together, but some are hacky solutions because of limitations in code editors. So, I will discuss the pros and cons of some of these, and you can make your own decision on what is best.

In this post, we’ll cover the following:

First, let’s get a clear understanding of what ESLint and Prettier do, and highlight how they differ.

Prettier vs. ESLint

What is Prettier?

Prettier is an opinionated code formatter for JavaScript and other popular languages. Prettier enforces a consistent format by parsing code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary.

This rewriting process prevents developers from introducing any formatting mistakes.

Over 200k developers use LogRocket to create better digital experiences

The primary reason Prettier was created was to eliminate debates over code styles. The idea is that Prettier’s style guide is fully automatic. Even if Prettier does not format your code 100% the way you like, it’s worth the sacrifice for the simplicity of the approach.

While a big reason to use Prettier is to avoid configuration altogether, Prettier does support its own configuration file that has a handful of formatting options.

So, why are there any options at all?

It is mostly due to historical reasons. A few were added during Prettier’s infancy to entice more people into using it, a couple of options were added due to demand, and some rules were added for compatibility reasons.

The bottom line is that the development team intends to never add more options from now on; you can read more about this in Prettier’s Option Philosophy.

What is ESLint?

ESLint is a JavaScript linting utility that was first released in June 2013 and now is by far the number one linting utility.

Linting is a type of static analysis that finds problematic patterns and code that doesn’t adhere to certain style guidelines.

More great articles from LogRocket:

Since JavaScript is a dynamic and loosely-typed language, it is especially prone to developer errors. Without the benefit of a compilation process, JavaScript code typically executes to find syntax or other errors.

However, ESLint enables developers to discover problems with their code without actually executing their code.

The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint has built-in rules that make it useful from the start, but you can add rules specific to your project and whatever flavor of JavaScript you use.

Many people have done the heavy lifting for you by creating shareable configs, which have rulesets for popular JavaScript frameworks and common style guides/coding standards such as Google’s JavaScript Style Guide.

You can find some of these shared configs on npmjs.com by searching for “eslint-config” (the naming convention for shared configs).

ESLint has a pluggable architecture that enables creating plugins, which can add extra capabilities to ESLint, and gives a new baseline to add your own custom rules.

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

Before you start

Download and install Node.js.

Install and configure Prettier in PhpStorm

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, PhpStorm locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window.

Then select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

PhpStorm can apply the key code style rules from the Prettier’s configuration to the PhpStorm Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

Editor Integration

To get the most out of Prettier, it’s recommended to run it from your editor.

If your editor does not support Prettier, you can instead run Prettier with a file watcher.

Note! It’s important to install Prettier locally in every project, so each project gets the correct Prettier version.

Visual Studio Code

Check out the prettier-emacs repo, or prettier.el. The package Apheleia supports multiple code formatters, including Prettier.

vim-prettier is a Prettier-specific Vim plugin. Neoformat, ALE, and coc-prettier are multi-language Vim linter/formatter plugins that support Prettier.

Sublime Text support is available through Package Control and the JsPrettier plug-in.

JetBrains WebStorm, PHPStorm, PyCharm.

Atom users can install the prettier-atom package, or one of the more minimalistic mprettier and miniprettier packages.

Espresso users can install the espresso-prettier plugin.

How to make «Prettier» the default formatter in VS Code?

I’ve installed Prettier extension in VS Code, and when I attempt to format a file, VS Code asked me:

Do you want to format with the default formatter or with prettier formatter?

I accidentally chose the default formatter. How can I change this to format with Prettier as default?

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Don’t know why but setting Default Formatter to ebsenp.prettier didn’t work for me. But I found a similar command that worked.

Open settings by clicking the cog in the bottom left of the vs code side bar and selecting settings from the menu, or by hitting Ctrl+,

At the top right of the settings pane, hit the open file icon (if you hover, the tooltip will read ‘Open Settings (JSON)’

Add the following line to the settings json:

Note: If you do not see a prompt for selecting a default format, you can manually change this in your Settings. Set Editor: Default Formatter to ebsenp.

The easiest method I found was this:

Right-Click on a file you wish to format

You will be offered a drop-down of different formatters. The final entry will be

After your selection, if you repeat, you will see the default formatter marked with

Prettier code formatter

If you want to run Prettier programmatically, check this page out.

format is used to format text using Prettier. options.parser must be set according to the language you are formatting (see the list of available parsers). Alternatively, options.filepath can be specified for Prettier to infer the parser from the file extension. Other options may be provided to override the defaults.

formatWithCursor both formats the code, and translates a cursor position from unformatted code to formatted code. This is useful for editor integrations, to prevent the cursor from moving when code is formatted.

resolveConfig can be used to resolve configuration for a given source file, passing its path as the first argument. The config search will start at the file path and continue to search up the directory (you can use process.cwd() to start searching from the current directory). Or you can pass directly the path of the config file as options.config if you don’t wish to search for it. A promise is returned which will resolve to:

The promise will be rejected if there was an error parsing the configuration file.

Use prettier.resolveConfig.sync(filePath [, options]) if you’d like to use sync version.

resolveConfigFile can be used to find the path of the Prettier configuration file that will be used when resolving the config (i.e. when calling resolveConfig ). A promise is returned which will resolve to:

The promise will be rejected if there was an error parsing the configuration file.

Use prettier.resolveConfigFile.sync([filePath]) if you’d like to use sync version.

When Prettier loads configuration files and plugins, the file system structure is cached for performance. This function will clear the cache. Generally this is only needed for editor integrations that know that the file system has changed since the last format took place.

getFileInfo can be used by editor extensions to decide if a particular file needs to be formatted. This method returns a promise, which resolves to an object with the following properties:

Setting options.ignorePath ( string ) and options.withNodeModules ( boolean ) influence the value of ignored ( false by default).

Providing plugin paths in options.plugins ( string[] ) helps extract inferredParser for files that are not supported by Prettier core.

Use prettier.getFileInfo.sync(filePath [, options]) if you’d like to use sync version.

Returns an object representing the options, parsers, languages and file types Prettier supports.

The support information looks like this:

Custom Parser API (deprecated)

Will be removed in v3.0.0 (superseded by the Plugin API)

Before plugins were a thing, Prettier had a similar but more limited feature called custom parsers. It will be removed in v3.0.0 as its functionality is a subset of what the Plugin API does. If you used it, please check the example below on how to migrate.

❌ Custom parser API (deprecated):

Note: Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using jscodeshift if you need codemods.

Option Philosophy

Prettier has a few options because of history. But we won’t add more of them.

Read on to learn more.

Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is opinionated. Quoting the Why Prettier? page:

By far the biggest reason for adopting Prettier is to stop all the ongoing debates over styles.

Yet the more options Prettier has, the further from the above goal it gets. The debates over styles just turn into debates over which Prettier options to use. Formatting wars break out with renewed vigour: “Which option values are better? Why? Did we make the right choices?”

And it’s not the only cost options have. To learn more about their downsides, see the issue about resisting adding configuration, which has more 👍s than any option request issue.

So why are there any options at all?

Options that are easier to motivate include:

For a long time, we left option requests open in order to let discussions play out and collect feedback. What we’ve learned during those years is that it’s really hard to measure demand. Prettier has grown a lot in usage. What was “great demand” back in the day is not as much today. GitHub reactions and Twitter polls became unrepresentative. What about all silent users? It looked easy to add “just one more” option. But where should we have stopped? When is one too many? Even after adding “that one final option”, there would always be a “top issue” in the issue tracker.

However, the time to stop has come. Now that Prettier is mature enough and we see it adopted by so many organizations and projects, the research phase is over. We have enough confidence to conclude that Prettier reached a point where the set of options should be “frozen”. Option requests aren’t accepted anymore. We’re thankful to everyone who participated in this difficult journey.

Prettier ESLint

Rebecca Vest

VS Code Prettier ESLint

A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.

Please create an issue before adding a rating. Keep in mind that I work full-time. I’d LOVE to have more contributors. See the Contributing section below.

Prerequisites

This extension requires the following NPM packages to be installed either locally or globally:

Note: For earlier versions of Prettier and/or ESLint, see Support for Earlier Versions section

Installation

Notes:

The Prettier extension is not required.

The ESLint extension is not required. However, it is needed to have lint errors show while editing your file.

Install Dependencies

Minimum Requirements

TypeScript Projects

Vue Projects

Project Settings

Restart VS Code

With settings listed above, your project should now be setup to automatically format your code when you save. If you run into any problems, check the troubleshooting guide below.

Configuration

The extension uses your ESLint and Prettier configuration files. These files are resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

ESLint Configuration File

Prettier Configuration File

Prettier uses cosmiconfig for configuration file support. This means you can configure prettier via (in order of precedence):

Example Projects

These projects are setup to work with the VS Code Prettier ESLint extension. Use them to help troubleshoot or as a boilerplate for your project. If you don’t see an example for your tech stack, create a PR of a working example.

Troubleshooting

Notes:

Most issues are caused by using an unsupported ESLint version or an invalid ESLint configuration.

Running your files through the Prettier ESLint CLI first is a good way to determine if it’s the extension, the prettier-eslint package, or your configuration.

There are known performance issues with quad-core or slower processors. The slowness comes from the prettier-eslint package the extension uses.

Support for Earlier Versions

Contributing

If you have suggestions for how this extension could be improved, or want to report a bug, open an issue! I’d love all and any contributions. If you are interested in contributing to the project, check out the Contributing Guide.

Current Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

Before you start

Download and install Node.js.

Install and configure Prettier in JetBrains Rider

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, JetBrains Rider locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Solution explorer.

Then select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

JetBrains Rider can apply the key code style rules from the Prettier’s configuration to the JetBrains Rider Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

Before you start

Download and install Node.js.

Install and configure Prettier in RubyMine

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, RubyMine locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window.

Then select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

RubyMine can apply the key code style rules from the Prettier’s configuration to the RubyMine Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

Prettier code formatter

JetBrains IDEs (WebStorm, IntelliJ IDEA, PyCharm, etc.)

WebStorm comes with built-in support for Prettier. If you’re using other JetBrains IDE like IntelliJ IDEA, PhpStorm, or PyCharm, make sure you have this plugin installed and enabled in Preferences / Settings | Plugins.

First, you need to install and configure Prettier. You can find instructions on how to do it here.

Once it’s done, you can do a few things in your IDE. You can use the Reformat with Prettier action (Opt+Shift+Cmd+P on macOS or Alt+Shift+Ctrl+P on Windows and Linux) to format the selected code, a file, or a whole directory.

You can also configure WebStorm to run Prettier on save (Cmd+S/Ctrl+S) or use it as the default formatter (Opt+Cmd+L/Ctrl+Alt+L). For this, open Preferences / Settings | Languages & Frameworks | JavaScript | Prettier and tick the corresponding checkbox: On save and/or On ‘Reformat Code’ action.

For more information, see WebStorm online help.

Pretty Formatter

mblode

VS Code Pretty Formatter

VS Code extension to format your files using Pretty Diff

Is Pretty Formatter for you?

Pretty Formatter VS Code extension provides advanced formatting functionality using Pretty Diff (http://prettydiff.com/) beautify with support for a large variety of programming languages. You can customise all different settings and a rules while adding the best in class formatting support for all these languages that VS Code can’t normally format.

Supported programming languages

45 total languages

Installation

Install through Visual Studio Code extensions. Search for Pretty Formatter

How to use

Launch VS Code. Open the Command Palette (Ctrl+Shift+P) and type ‘format document’ while the file is open.

How to Format All Files in a Directory with Prettier

Format any project, folder, or workspace using Prettier code formatter one line in the Prettier CLI.

Prettier code formatter (prettier.io) is a treasure and a delight. If you aren’t using it, you should begin immediately.

But how do you use it on a brand-new project?

When cloning, forking, or starting a repository, the formatting may be off from what you like.

Thankfully, it’s easy to fix the formatting in 5 seconds using Prettier.

More than just a VS Code extension

I usually just use Prettier from inside VS Code (using the prettier-vscode extension), so I was surprised by Prettier’s command line power.

“Use the prettier command to run Prettier from the command line. Run it without any arguments to see the options.” — Prettier CLI Docs

CLI · Prettier

Use the prettier command to run Prettier from the command line. Run it without any arguments to see the options. To…

The Prettier CLI makes it easy to apply formatting to an entire directory.

How to format a whole directory

This will format the entire directory recursively with Prettier.

If you’d rather not install Prettier globally, then you can achieve the same effect with the npx command (the npm package runner):

How to customize Prettier

A forked project may already have one, such as:

Enjoy Prettier

I strongly believe using Prettier reduces bugs by making my code easier to read, so I use it automatically inside VS Code.

When opening a new project from starter files or boilerplate, I want to format the entire thing to match my preferences.

I hope you enjoy Prettier as much as I do!

Join my email list to get free access to all of my Medium articles.

Level Up Coding

Thanks for being a part of our community! Level Up is transforming tech recruiting. Find your perfect job at the best companies.

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

Before you start

Download and install Node.js.

Install and configure Prettier in AppCode

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, AppCode locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window.

Then select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

AppCode can apply the key code style rules from the Prettier’s configuration to the AppCode Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press ⌃ ⇧ A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

How to set up Prettier and automatic formatting on VS Code

Prettier is a code formatter that makes your code look neat and consistent. To learn more about Prettier, please visit the website here.

Below is an easy way to set up Prettier on your VS Code and allow automatic formatting.

Step 1: Install Prettier

Click on the extension tab and type in Prettier.

Once found, click on it to proceed to installation.

Step 2: Set autosave

Step 3: Format your code

Now, highlight your code and right-click. Select Format Document.

Once you click on Format Document, a dialog box will tell you to configure your code formatter. This is to set your default code formatter. Click on the configure button.

Step 4: Select Prettier as the default

After you click on configure, select Prettier as the default formatter.

Now, your code should be formatted with Prettier anytime you save your file.

jishutuan

Prettier formatter for Visual Studio Code

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

ChangeLog

update callExpressions.length >= 3 to callExpressions.length >= 10

prettier.eslintIntegration default false to true

Installation

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

⚠ A word of warning-if you have any other code formatting extensions installed such as for example hugely popular HookyQR.beautify or taichi.react-beautify they might take precedence and format your code instead of Prettier leading to unexpected results.

Usage

Using Command Palette (CMD/CTRL + Shift + P)

Custom keybindings

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Format On Save

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

VSCode ESLint and TSLint Integration

prettier-eslint and prettier-tslint are included with the installation of this extension. There is no need for a separate local or global install of either for functionality.

Settings

Prettier’s Settings

Settings will be read from (listed by priority):

Or if no prettier configuration file exist

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: ‘none’)

Controls the printing of trailing commas wherever possible. Valid options:

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

Which parser to use. Valid options are ‘flow’ and ‘babylon’.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.proseWrap (default: ‘preserve’)

(Markdown) wrap prose over multiple lines.

prettier.arrowParens (default: ‘avoid’)

Include parentheses around a sole arrow function parameter

prettier.jsxSingleQuote (default: false)

Use single quotes instead of double quotes in JSX.

prettier.htmlWhitespaceSensitivity (default: ‘css’)

Specify the global whitespace sensitivity for HTML files. Learn more here

prettier.endOfLine (default: ‘auto’)

Specify the end of line used by prettier. Learn more here

VSCode specific settings

These settings are specific to VSCode and need to be set in the VSCode settings file. See the documentation for how to do that.

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from ESLint rules.

Use prettier-tslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from TSLint rules.

Use prettier-stylelint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.

prettier.requireConfig (default: false)

Require a ‘prettierconfig’ to format

prettier.disableLanguages (default: [«vue»])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Prettier resolution

This extension will use prettier from your project’s local dependencies. Should prettier not be installed locally with your project’s dependencies, a copy will be bundled with the extension.

Contribute

Feel free to open issues or PRs!

Running extension

Running tests

Without having an instance VSCode running (or it won’t start) npm run test

Configure ESLint, Prettier, and Flow in VS Code for React Development

This short guide will provide you a consistent and reusable development workflow for all React/ React Native projects. The more effort you put into writing quality code, the less time you spend on debugging. You can increase your code quality and reduce the time spent on debugging with a consistent development workflow. In this guide I will show you how to configure your editor to handle your code formatting, linting, and type checking.

Test Driven Development and a preconfigured build configuration are recommended. I won’t go into much detail on either of these. I recommend create-react-app for the web and using the React Native CLI for mobile development. Both require zero build configuration. Jest is fantastic for testing React.

Installation

To get started download and install VS Code. You can launch VS Code from the terminal, here’s how.

I use VS Code for my editor of choice. If you use Sublime Text or Atom this article still applies but you’ll need to use the relevant text editor extensions for your text editor.

Let’s generate our app without any configuration! For this article we’ll use the React Native CLI, but you can follow along with create-react-app as well.

$ react-native init SweetApp && cd SweetApp

Open the SweetApp project with VS Code.

Once you have VS Code open, click the Extensions button in the Activity Bar. Install the following extensions:

ESLint Setup

We will install ESLint using Airbnb’s linter rules. Refer to Airbnb’s JavaScript Github Repo for the installation instructions.

Prettier Setup

We will configure Prettier to format our code based on our ESLint rules.

We want VS Code to format our code using Prettier after saving a file.

Flow Setup

Flow is a static type checker for JavaScript and is included in your project if you use the React Native CLI or create-react-app build configurations.

From your terminal install Flow using Homebrew.

$ brew install flow

“Flow works best when installed per-project with explicit versioning rather than globally.” https://flow.org/en/docs/install/

To run Flow per project we will install flow-bin from npm. Later we will configure VS Code to run Flow from node_modules in lieu of the global Flow installation.

Now we want to tell our editor to use Flow from the projects node_modules directory. We also want to disable JavaScript validation for this project only to fix a known issue.

Open the Workspace settings.json file and configure flow to use the NPM package in node_modules.

Disabling the default JavaScript formatter allows Prettier to handle our code formatting.

Open the package.json file and add the following scripts.

Your scripts in package.json should now look like this:

From the same directory as your package.json file run the following terminal command.

$ npm run flow start

The Flow server is running and will perform type checking on any file with a // @flow annotation at the top of the file.

Testing your new development workflow

Open the index.ios.js file in the SweetApp project.

ESLint Linter

You should notice red squiggly lines in your code. You can hover your mouse cursor over the red squiggly line and ESLint will tell you the linter rule causing the warning.

Delete the semicolon at the end of the return statement inside the class render method. Hover your mouse cursor over the red squiggly line and you’ll see ESLint warns you about the missing semicolon!

If you are not receiving any linter warnings please review the ESLint Setup portion of this guide.

Prettier Code Formatter

Prettier will auto-format your code based on it’s rules whenever you save a file.

Add an array of numbers and save the array to a variable called test. Format the array of numbers like so:

Now save the file and watch the magic of Prettier take effect!

The test array is now formatted correctly!

Flow Type Checking

To ensure Flow is working run the flow start npm script to start the Flow server that runs in the background.

$ npm run flow start

Create an add function that returns the sum of two numbers.

Now let’s add the WRONG types (string) to the add function parameters and return type.

Notice after saving the file red squiggly lines appear under the number parameters of the add function invocation. Hover your mouse cursor over the red squiggly lines and Flow informs you:

[flow] this type is incompatible with the expected parameter type of string

Let’s fix the add function to use the correct number types.

The Flow type errors are gone!

A cool feature of the Flow VS Code extension is the always up-to-date Flow coverage percentage in the Status Bar.

Hopefully this guide saves you the headache I experienced and makes for a great reference guide now and in the future.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

prettier/prettier

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Opinionated Code Formatter

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

Show the world you’re using Prettier →

Scott Sauber

Software Developer – Full Stack – ASP.NET Core, JavaScript, and DevOps

Prettier + Format On Save = Never worry about formatting JavaScript again

Last updated: 2019-5-13

In my last post, I mentioned a tip to using the Format on Save option in VS Code. I’d like to take that one step further and mention how you can combine that with the Prettier – Javascript Formatter plugin for VS Code to make a really nice editing experience.

What is Prettier?

Prettier is an open source project (originally started by James Long) that is an opinionated JavaScript formatter. Prettier takes JavaScript code in, runs some of its formatting rules against it, and then spits out that JavaScript code with its formatting rules applied.

One of the things I love about it is it’s not completely rigid with its rules. It makes some “logical” choices that I would make myself. For instance, Prettier will make a short const array declaration a one liner, but a declaration with a bunch of items in the array, it will split out into multiple lines to avoid horizontal scrolling (see demo GIF at the end). I love that.

While I only mentioned JavaScript so far, technically Prettier can do more than just JavaScript. It can do CSS, LESS, SASS, TypeScript, JSX, Markdown, and more as well.

VS Code Integration

Format on Save in VS Code

To enable Format on Save in VS Code:

Overriding Prettier settings

By default Prettier uses 2 spaces for your tab width for indenting your code. You can increase that to the VS Code default of 4 if you want extremely easily.

The rest of the Prettier configuration options can be found here.

Formatting is something I never worry about anymore

I find when using Prettier, along with the Format On Save option in VS Code, I don’t think about how to format my code anymore. I don’t ever wonder “oh should I put this on multiple lines or keep it all in one line?” Instead, I focus on solving my problem, hit Save and let Prettier do the rest. It’s shocking how liberating this is. I end up with consistent formatting across my entire project instead of just doing whatever I felt was best at the time.

Prettier in Action

Enforcing Prettier

If you’d like to learn more about how to enforce Prettier via git commit hooks, checkout my blog post on Husky and Lint Staged with Prettier that even works with nested folders.

How to use Prettier with ESLint and TypeScript in VSCode

This post is a part of the Clean Code Tooling series.
You may want to read the previous post.
1. How to use ESLint with TypeScript

Intro

In the previous article in this series, «How to use ESLint with TypeScript», we learned how add ESLint to our project and configure it to determine if our code was adhering to our project’s coding conventions.

This is great, but it can get pretty annoying having to re-run npm run lint everytime we want lint (and optionally fix) our code.

Here’s where Prettier, particularly the VS Code extension for Prettier, comes in.

Understanding Prettier

Prettier is an opinionated (yet fully configurable) code formatter. ESLint can kind of format code too, but it’s mostly intended to sniff out when we’re not following the mandated coding conventions.

Prettier can be configured to format your code (makes it look prettier 😉) after you save a file or manually tell it to, and by default, it comes configured with a set of common code cleanliness rules.

We get the most benefit out of Prettier when we combine it with ESLint though.

Using Prettier with ESLint

Combining both ESLint and Prettier, the responsibility division is this:

Now that’s a bomb combo.

Goals for this blog post

At the end of this post, you should be able to:

Prerequisites

Installing Prettier

First thing’s first, we’ll install Prettier as a dev dependency.

Configuring Prettier

These settings specify the following rules:

You can view the rest of the options here and change them as you like! This is just my personal preference.

Testing Prettier using the Prettier CLI

So far, we’ve locally configured Prettier, and we’re in shape to test formatting some code.

When we add a script to format all the code in the folder and execute it, the only change we should notice is an added semicolon.

And then run it.

The console output shows that one file has been changed and that it took 186ms to execute.

This is a neat way to use Prettier, but it’s not the best, in my opinion. Here’s what I prefer.

Using Prettier

One of the most common ways that people use Prettier is to install the VS Code extension that adds it to your editor.

It enables you to, on save, format your code. This is good because the feedback loop is incredibly short, and it turns formatting into something that you don’t have to occupy any brain cycles thinking about.

Formatting using VSCode on save (recommended)

You want to select the JSON option so that we can manually edit the preferences via a JSON file.

Options for typing in «preferences open settings». You want to select the JSON option.

In the JSON file, if it’s not already added, add the following lines to the root of the object.

Let’s say you’re working with multiple languages and automatically formatting code in another language is a no go for you. You can also override the default settings by specifying the language as shown below.

Using the above config, Prettier will not format TypeScript code on paste or save but it will format code on paste or save for any other language that it understands.

Formatting before a commit (recommended)

When working with other developers as a team, it can be challenging to keep the formatting of the code clean constantly. Not everyone will want to use the Prettier VS Code extension. Not everyone will want to use VS Code!

How do we ensure that any code that gets commited and pushed to source control is properly formatted first?

Formatting using an filesystem watcher

If you really don’t like VS Code or there are too many people on your team not using it, there’s another option to tighten the feedback loop of formatting code as you’re writing it.

The Prettier docsc suggest using a package called onchange in order to watch the filesystem for when changes are made to your source code, then run the Prettier CLI tool against any changed files.

Here’s how that works.

Manually formatting a single file

This might be different for you. You can see what the command is by typing COMMAND + SHIFT + P and entering «format».

The command to format the current file in VS Code is shown here for me.

Configuring Prettier to work with ESLint

Here’s where the real magic happens.

As a reminder, you’ll want to have completed the previous ESLint tutorial first.

With ESLint and Prettier already installed, install these two packages as well.

Running npm run lint (from the previous article) lints the files and tells us all of the unformatted lines in addition to any code convention violations we’ve protected against through ESLint rules.

That’s it! Run npm run prettier-format to format everything.

Conclusion

You can find the code for this post here.

We’re pretty lucky that tooling has advanced to the point where enforcing coding conventions and formatting code isn’t something we have to personally concern ourselves with anymore.

Even if you’re not using VS Code, you should be able to add some basic formatting to your code using the steps outlined in this post.

After that, the next step is to enforce your conventions and formatting within your team by using a tool like Husky.

Как настроить ESLint и Prettier в VS Code и Create React App и подключить Airbnb стайлгайд

Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи Prettier и ESLint согласно стайлгайду Airbnb.

Во время работы над последним проектом я опробовал в деле два прекрасных иструмента, ESLint и Prettier. Захотелось написать о том, что это такое, чем полезен линтер и prettier, как их настроить, и как использовать.

Что такое Lint?

Теперь можно их исправить, и все заработает как надо:

ESLint в Create React App и расширение для VS Code

В Create React App линтер уже установлен, он называется ESLint. Именно его сообщения об ошибках мы видим в терминале.

Существует так же ESLint расширение для VS Code:

Установив это расширение в VS Code, получим сообщения ESLint и подсветку ошибок в редакторе кода:

Настройка ESLint

У ESLint есть конфиг, в котором находятся правила, согласно которым он выполняет проверку кода. Как я говорил ранее, ESLint уже встроен в Create React App, и использует конфиг который называется eslint-config-react-app

В Create React App этот конфиг подключается к ESLint в package.json, 22 строка:

Eslint сейчас настроен так, как решили создатели CRA. Давайте инициализируем ESLint и заново сами все настроим, так, как нам необходимо. Для этого выполним команду:

Exit fullscreen mode

Запустится мастер настройки ESLint.
Пройдем настройку согласно предложенным вариантам:

В конце мастер создаст файл настроек линтера, .eslintrc.json:

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

Установка и подключение дополнительных плагинов ESLint

Exit fullscreen mode

В этом случае конфиг будет выглядеть так:

Exit fullscreen mode

Установим правила доступности для людей с ограниченными возможностями eslint-plugin-jsx-a11y

Exit fullscreen mode

установим правила, которые будут отвечать за синтаксис импортов и экспортов eslint-plugin-import

Exit fullscreen mode

С ESLint мы пока что закончили, переходим к Prettier

Prettier

Prettier. Что это такое и зачем вообще нужно?

Prettier берет код, который вы ему дали, и преобразует этот код к единому стилю.

Вот простой пример:

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

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

Установка Prettier в проект

Установка хорошо описана в официальной документации, пройдем ее вместе, по шагам.

Первым делом устанавливаем Prettier в наш Create React App проект, локально:

Exit fullscreen mode

Exit fullscreen mode

Отключаем конфликтующие правила ESLint

Теперь нужно сделать так, чтобы Prettier не конфликтовал с линтером. Дело в том, что когда ESLint ищет ошибки в коде, он руководствуется определенными правилами, которые хранятся в его конфиге. Эти правила отвечают как за качество кода, так и за стиль кода. Так вот, у Prettier есть свои собственные правила, которые тоже отвечают за стиль кода. Чтобы у линтера и Prettier не было конфликтов по части оформления кода, нужно отключить кофликтующие правила у линтера, чтобы за стиль кода отвечал только Prettier.
Сделать это можно очень просто, установив eslint-config-prettier

Exit fullscreen mode

Мы установили Prettier в наш проект. Давайте теперь добавим поддержку Prettier в VS Code.

Интеграция Prettier в VS Code

Установим расширение Prettier для VS Code:

После того как мы установили расширение Prettier в VS Code, можно сделать так, чтобы Prettier автоматически форматировал наш код, когда мы сохраняем файл. Для этого нужно добавить два значения в JSON конфиг VS Code, (файл settings.json).

Добавим в него следующие строки:

Exit fullscreen mode

Первая строка устанавливает Prettier как инструмент форматирования кода по-умолчанию.
Вторая строка включает форматирование кода при сохранении файла.

Пара слов об этих двух файлах.

Перечислю базовые настройки, которые в него можно добавить:

Exit fullscreen mode

В нем я запретил использование точек с запятыми в конце строк. Такое вот личное предпочтение, при работе над персональными проектами.

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

вот как это выглядит:

.prettierignore

Установка правил Airbnb для ESLint

Теперь, когда мы настроили ESLint и Prettier в нашем проекте, давайте установим популярный конфиг eslint-config-airbnb, который настроен с учетом стайлгайда по JavaScript от Airbnb

для этого выполним команду:

Exit fullscreen mode

Чтобы ESLint не ругался на то, что у нас JSX присутствует в файлах с расширением ‘.js’, можно добавить правило

Exit fullscreen mode

Установка и настройка ESLint и Prettier закончена!

How to Automatically Format Code in Visual Studio Code Using Prettier

Whenever we’re working on any project, It’s important to have a default formatter set up for your Code Editor.

This will improve your productivity by not wasting time in formatting the code If the line gets longer and does not fit on the screen.

Also, using a formatter avoids bugs in your code so you will clearly see where your specific block starts and where it ends and helps to identify matching brackets in the code.

So in this article, we will see how to set up Prettier formatter in Visual Studio Code(VS Code).

So let’s get started.

Install the Prettier extension for VS Code which formats code written in Javascript, Angular, Vue, React, Typescript and many other languages.

That’s it! Congratulation! You have configured prettier to format as per the default settings.

Now, open any JavaScript/React code. Let’s say your code looks like this:

If you don’t see the code formatted automatically on file save then it might be because you have multiple formatters installed in VS Code. Follow the below steps to get it working.

Now If you save any file then you will see the file formatted properly.

If you have code like this:

Then on saving, it will be formatted like this:

So now, you don’t have to worry about adding or removing space or moving code to the second line if it does not fit on one line. Prettier does that job for you.

Now, write the code any way you want and just save the file to format it.

This will make you more productive as you will not be wasting your time in formatting code.

But sometimes, it may happen that, you don’t want the formatting done by prettier and you want to keep your own formatting for a particular file, then you can follow the following step:

If you want more control over the formatting, prettier also allows that.

SingleQuote: false will use double quotes instead of single quotes for strings in your code

trailingComma: «none» will remove all trailing commas from object declaration in your file

You can find more configuration options HERE.

Check out my recently published Mastering Redux course.

In this course, you will build 3 apps along with food ordering app and you’ll learn:

and then finally we’ll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

neoclide/coc-prettier

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Readme.md

Prettier formatter for coc.nvim

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Run vim command:

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

You can use coc.nvim settings to configure prettier. Settings will be read from (listed by priority):

Create custom vim command

Then you can use :Prettier to format the current buffer by coc-prettier.

Or use :CocCommand to open command list.

(coc-format-selected) nmap f

Then you can f for range format.

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Open settings file with:

to setup the languages which you want to format on save.

Note: if prettier extension have lower priority, and document have other registered document format provider, prettier will be ignored.

Other useful commands:

Format Document (Forced)

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refere to the Prettier documentation.

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your coc-prettier settings or local project configurations.

These settings are specific to coc-prettier and need to be set in coc-settings.json. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart coc.nvim when you change this setting.

prettier.disableLanguages (default: [«vue»])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

You must restart coc.nvim when you change this setting.

prettier.statusItemText (default: «Prettier»)

Text of status item indicating current buffer can be formatted by prettier.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You have to upgrade to a newer version of prettier.

prettier/prettier-eslint

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

The fix feature of eslint is pretty great and can auto-format/fix much of your code according to your ESLint config. prettier is a more powerful automatic formatter. One of the nice things about prettier is how opinionated it is. Unfortunately, it’s not opinionated enough and/or some opinions differ from my own. So after prettier formats the code, I start getting linting errors.

This module is distributed via npm which is bundled with node and should be installed as one of your project’s devDependencies :

The source code to format.

The path of the file being formatted can be used to override eslintConfig (eslint will be used to find the relevant config for the file).

NOTE: these options override the eslint config. If you want the fallback options to be used only in the case that the rule cannot be inferred from eslint, see «fallbackPrettierOptions» below.

logLevel (?Enum: [‘trace’, ‘debug’, ‘info’, ‘warn’, ‘error’, ‘silent’])

This is basically the same as eslintPath except for the prettier module.

prettier-eslint will only propagate parsing errors when either prettier or eslint fails. In addition to propagating the errors, it will also log a specific message indicating what it was doing at the time of the failure.

inferring prettierOptions via eslintConfig

An important thing to note about this inference is that it may not support your specific eslint config. So you’ll want to check src/utils.js to see how the inference is done for each option (what rule(s) are referenced, etc.) and make a pull request if your configuration is supported.

Defaults if you have all of the relevant ESLint rules disabled (or have ESLint disabled entirely via /* eslint-disable */ then prettier options will fall back to the prettier defaults:

NOTE: When you’re doing this, it’s recommended that you only run this on a single file because there are a LOT of logs 🙂

None that I’m aware of. Feel free to file a PR if you know of any other solutions.

Thanks goes to these people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Plugins

Plugins are ways of adding new languages or formatting rules to Prettier. Prettier’s own implementations of all languages are expressed using the plugin API. The core prettier package contains JavaScript and other web-focused languages built in. For additional languages you’ll need to install a plugin.

Plugins are automatically loaded if you have them installed in the same node_modules directory where prettier is located. Plugin package names must start with @prettier/plugin- or prettier-plugin- or @ /prettier-plugin- to be registered.

should be replaced by a name, read more about NPM scope.

When plugins cannot be found automatically, you can load them with:

The API, via the pluginSearchDirs and plugins options:

pluginSearchDirs and plugins are independent and one does not require the other.

Prettier plugins are regular JavaScript modules with five exports:

Parsers convert code as a string into an AST.

The signature of the parse function is:

The location extraction functions ( locStart and locEnd ) return the starting and ending locations of a given AST node:

(Optional) The pragma detection function ( hasPragma ) should return if the text contains the pragma comment.

(Optional) The preprocess function can process the input text before passing into parse function.

Printers convert ASTs into a Prettier intermediate representation, also known as a Doc.

The printing process

Prettier uses an intermediate representation, called a Doc, which Prettier then turns into a string (based on options like printWidth ). A printer‘s job is to take the AST generated by parsers[

].parse and return a Doc. A Doc is constructed using builder commands:

The printing process works as follows:

Most of the work of a plugin’s printer will take place in its print function, whose signature is:

The print function is passed the following parameters:

Here’s a simplified example to give an idea of what a typical implementation of print looks like:

Check out prettier-python’s printer for some examples of what is possible.

The embed function is called when the plugin needs to print one language inside another. Examples of this are printing CSS-in-JS or fenced code blocks in Markdown. Its signature is:

For example, a plugin that had nodes with embedded JavaScript might have the following embed function:

The preprocess function can process the AST from parser before passing into print function.

Handling comments in a printer

Comments are often not part of a language’s AST and present a challenge for pretty printers. A Prettier plugin can either print comments itself in its print function or rely on Prettier’s comment algorithm.

By default, if the AST has a top-level comments property, Prettier assumes that comments stores an array of comment nodes. Prettier will then use the provided parsers[

].locStart / locEnd functions to search for the AST node that each comment «belongs» to. Comments are then attached to these nodes mutating the AST in the process, and the comments property is deleted from the AST root. The *Comment functions are used to adjust Prettier’s algorithm. Once the comments are attached to the AST, Prettier will automatically call the printComment(path, options): Doc function and insert the returned doc into the (hopefully) correct place.

Called whenever a comment node needs to be printed. It has the signature:

This function is used for deciding whether a comment can be attached to a particular AST node. By default, all AST properties are traversed searching for nodes that comments can be attached to. This function is used to prevent comments from being attached to a particular node. A typical implementation looks like

Returns whether or not the AST node is a block comment.

The handleComments object contains three optional functions, each with signature

Based on the text surrounding a comment node, Prettier dispatches:

Manually attaching a comment

The util.addTrailingComment / addLeadingComment / addDanglingComment functions can be used to manually attach a comment to an AST node. An example ownLine function that ensures a comment does not follow a «punctuation» node (made up for demonstration purposes) might look like:

options is an object containing the custom options your plugin supports.

If your plugin requires different default values for some of Prettier’s core options, you can specify them in defaultOptions :

A util module from Prettier core is considered a private API and is not meant to be consumed by plugins. Instead, the util-shared module provides the following limited set of utility functions for plugins:

Since plugins can be resolved using relative paths, when working on one you can do:

This will resolve a plugin relative to the current working directory.

gabrieldoty/prettier-now-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

This branch is not ahead of the upstream remimarsal:master.

No new commits yet. Enjoy your day!

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Code Formatter for Visual Studio Code

VS Code package to format your Javascript using Prettier Miscellaneous. Based on Esben Petersen’s extension and Bastian Kistner’s extension. Prettier Miscellaneous is a fork of Prettier and allows more customization of the output.
This extension is a wrapper around Prettier Miscellaneous, please report issues regarding the output on Prettier Now or Prettier Miscellaneous.

Added support for GraphQL and CSS files with PostCSS syntax.

New options jsxSingleQuote, spaceBeforeParen, alignObjectProperties. breakBeforeElse should now break properly.

Added support for TypeScript, CSS, LESS and SASS files.

What does prettier do?

Prettier takes your code and reprints it from scratch by taking into account the line length.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

Can also be installed using

Set editor.formatOnSave to true in settings to automatically format files on save.

Or using Command Palette (CMD + Shift + P)

If you are using the Prettier output option, it is recommanded to use the Output Colorizer extension to get some syntactic coloring in the logs.

Extension settings are specified within VSCode Settings. Example config:

Prettier Misc options

You can now try to add other languages IDs that have JavaScript syntax but result is not guaranteed. No restart is required.[«javascript»,»javascriptreact»]typescriptEnableWill apply Prettier Misc using TypeScript parser.

You can now try to add other languages IDs that have TypeScript syntax but result is not guaranteed. No restart is required.[«typescript»,»typescriptreact»]cssEnableWill apply Prettier Misc using PostCSS parser.

You can now try to add other languages IDs that have CSS syntax but result is not guaranteed. No restart is required.[«css»,»less»,»scss»,»postcss»]jsonEnableWill apply Prettier Misc using JSON parser.

You can now try to add other languages IDs that have JSON syntax but result is not guaranteed. No restart is required.[«json»]graphqlEnableWill apply Prettier Misc using GraphQL parser.

remimarsal/prettier-now-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

This branch is 55 commits ahead of passionkind:master.

Open a pull request to contribute your changes upstream.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Code Formatter for Visual Studio Code

VS Code package to format your Javascript using Prettier Miscellaneous. Based on Esben Petersen’s extension and Bastian Kistner’s extension. Prettier Miscellaneous is a fork of Prettier and allows more customization of the output.
This extension is a wrapper around Prettier Miscellaneous, please report issues regarding the output on Prettier Now or Prettier Miscellaneous.

Added support for GraphQL and CSS files with PostCSS syntax.

New options jsxSingleQuote, spaceBeforeParen, alignObjectProperties. breakBeforeElse should now break properly.

Added support for TypeScript, CSS, LESS and SASS files.

What does prettier do?

Prettier takes your code and reprints it from scratch by taking into account the line length.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

Can also be installed using

Set editor.formatOnSave to true in settings to automatically format files on save.

Or using Command Palette (CMD + Shift + P)

If you are using the Prettier output option, it is recommanded to use the Output Colorizer extension to get some syntactic coloring in the logs.

Extension settings are specified within VSCode Settings. Example config:

Prettier Misc options

You can now try to add other languages IDs that have JavaScript syntax but result is not guaranteed. No restart is required.[«javascript»,»javascriptreact»]typescriptEnableWill apply Prettier Misc using TypeScript parser.

You can now try to add other languages IDs that have TypeScript syntax but result is not guaranteed. No restart is required.[«typescript»,»typescriptreact»]cssEnableWill apply Prettier Misc using PostCSS parser.

You can now try to add other languages IDs that have CSS syntax but result is not guaranteed. No restart is required.[«css»,»less»,»scss»,»postcss»]jsonEnableWill apply Prettier Misc using JSON parser.

You can now try to add other languages IDs that have JSON syntax but result is not guaranteed. No restart is required.[«json»]graphqlEnableWill apply Prettier Misc using GraphQL parser.

numso/prettier-standard-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

This branch is 31 commits ahead of prettier:main.

Open a pull request to contribute your changes upstream.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier formatter for Visual Studio Code

Can also be installed using

Using Command Palette

Open the command palette using Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows and Linux. Then search for and select «Format Document».

You can format a part of your document by selecting the text you want to format, opening the command palette, and selecting «Format Selection».

Using Keyboard Shortcuts

Respects editor.formatOnSave in your vscode settings.

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issues or PRs on the GitHub page!

This plugin started with a fork of esbenp’s great plugin with cues taken from dtinth’s atom plugin to apply standard to it.

About

Visual Studio Code plugin for Prettier + Standard

passionkind/prettier-vscode-with-tabs

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

This branch is 5 commits ahead of prettier:main.

Open a pull request to contribute your changes upstream.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier formatter for Visual Studio Code with tabs support

VS Code package to format your Javascript using Prettier. Based on Esben Petersen’s extension

Can also be installed using

Using Command Palette (CMD + Shift + P)

Respects editor.formatOnSave setting.

printWidth (default: 120)

Fit code within this line limit

tabWidth (default: 4)

Number of spaces it should use per tab

useFlowParser (default: false)

Use the flow parser instead of babylon. Deprecated use parser: ‘flow’ instead

singleQuote (default: true)

If true, will use single instead of double quotes

trailingComma (default: ‘es5’)

Controls the printing of trailing commas wherever possible. Valid options:

bracketSpacing (default: true)

Controls the printing of spaces inside object literals

jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

parser (default: ‘babylon’)

Which parser to use. Valid options are ‘flow’ and ‘babylon’

useTabs (default: ‘true’)

Use tabs instead of spaces

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issue or PRs!

Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official

A remarkable milestone is the long-awaited release of the Ember / Handlebars formatter. It’s supposed to be the last formatter included directly in the core library. In the future, for sustainability, languages should be added only by plugins.

We are grateful to our financial contributors: Salesforce, Indeed, Frontend Masters, Airbnb, Shogun Labs, Skyscanner, Konstantin Pschera, and many others who help us keep going. If you enjoy Prettier and would like to support our work, head to our OpenCollective. Please consider also supporting the projects Prettier depends on, such as typescript-eslint, remark, and Babel.

Most of the changes in this release are thanks to the hard work of Fisker Cheung, Georgii Dolzhykov, and Sosuke Suzuki, along with many other contributors.

Previously, Prettier had a lot of trouble with figuring out how to break lines in assignments. E.g., long right-hand sides often stayed unbroken. Not anymore.

Prevent wrapping object properties with short keys (#10335 by @thorn0)

Move Handlebars support out of alpha to release (#10290 by @dcyriller & @thorn0)

This started in 2017. Handlebars support has been in Prettier for a while, but it wasn’t released officially as it wasn’t really ready. Its status went from “alpha” to “experimental” to “beta” and then, if you checked older release notes, you can see that after “beta” somehow it was “alpha” again…

Well, anyway, it finally is happening: Prettier can now officially format HTML templates with Handlebars! 🎉

It uses Glimmer, Ember’s Handlebars parser, so it should be compliant with the HTML spec thanks to the Ember team.

The feature is called “Ember / Handlebars” and not just “Handlebars” because Glimmer doesn’t support some syntax and use cases of Handlebars. This is mostly due to the fact that Handlebars, being a template engine (a preprocessor), doesn’t care about the underlying syntax of the content it processes whereas Glimmer parses two syntaxes – HTML and Handlebars – at the same time and combines the result into a single tree, which Prettier can print. This means Prettier won’t format Handlebars files that can’t be parsed into such a tree, either because the underlying syntax isn’t HTML or because template directives and tags overlap in a way that can’t be represented in a tree (e.g., <<#if foo>>

See the formatter in action on the playground!

Refine formatting of curried arrow functions (#9992, #10543 by @sosukesuzuki & @thorn0)

Improve formatting for React Hooks calls (#10238 by @sosukesuzuki)

Improve visual separation between header and body in classes with multiline headers (#10085 by @sosukesuzuki)

Concise formatting of number-only arrays (#10106, #10160 by @thorn0)

While in general, Prettier avoids this kind of formatting because it’s not diff-friendly, in this special case we decided that the benefits outweigh the risks.

Improve formatting for nested await expressions in heads of member and call expressions (#10342 by @thorn0)

Even though Prettier tries to be helpful here, please don’t write code like this. Have mercy upon your teammates and use intermediate variables.

Improve formatting for do expressions in function calls (#10693 by @sosukesuzuki)

Consistent indentation for conditional operators (#10187, #10266 by @sosukesuzuki)

Prefix-based multiline formatting for the class attribute (#7865 by @thorn0)

Formatting of HTML class names will now keep classes on one line until the line length limit is reached; at that point, consecutive classes with the same prefix will be grouped together on each line. For layout frameworks such as Bootstrap and Tailwind CSS, which add many classes to an element, this is important for readability and maintainability vs. the previous behavior (keeping all classes on one line) or e.g. putting each class on its own line.

Fix unstable multiple comments on the same line (#9672 by @fisker)

Don’t format nodes that end just before rangeStart (#9704 by @fisker)

Previously, when range formatting was performed, such nodes were considered part of the range, now they’re excluded. This affects other languages that the range formatting feature supports, not only JavaScript.

Fix comments inside JSX end tag (#9711 by @fisker)

Fix inconsistent language comment detection (#9743 by @fisker)

An /* HTML */ comment should directly precede a template literal for the latter to be recognized as HTML-in-JS. Previously, the comment was erroneously recognized is some other locations.

Fix extra semicolon added to ignored directives (#9850 by @fisker)

Fix unstable JSX formatting with U+3000 (#9866 by @fisker)

Fix error thrown on expressions like a(b => c => function ()<>) (#10278 by @thorn0)

Regression from v2.2.0.

Improve formatting for inline decorators (#10296 by @fisker)

Fix ASI protection for private fields (#10334 by @thorn0)

Fix missing parentheses for yield in a pipeline (#10446 by @fisker)

Make Babel’s error recovery more selective (#10495 by @fisker, #9787 by @sosukesuzuki, #10065, #10322 by @thorn0)

Previously, because of the error recovery, the Babel parser was too permissive, which lead to all kinds of AST shapes that Prettier couldn’t print. Prettier 2.3 lets Babel recover only from a few harmless types of errors – for example, multiple const declarations with the same name. Anything else is reported as syntax errors.

Avoid last-argument hugging for number-only arrays (#10517 by @thorn0)

Another special case for number-only arrays.

Improve detection of AMD define (#10528 by @thorn0)

Prettier special-cases AMD define calls to avoid unexpected line breaks in them. We now only format define calls if they are at the top level of a function or program and are passed arguments in the way AMD expects.

Fix duplicated prettier-ignore comments (#10666 by @fisker)

Process conditional groups in mapDoc (#10695 by @thorn0)

In particular, this fixes broken substitutions in HTML-in-JS.

Avoid arg expansion that leads to broken code (#10712 by @thorn0)

Fix missing parentheses around async in for-of (#10781 by @fisker)

Support async do expressions proposal (#10813 by @sosukesuzuki)

Fix missing comments in MethodDefinition (#9872 by @fisker)

typescript parser only, babel-ts doesn’t have this issue.

Fix unnecessary line breaks in method type declaration parameters (#10024 by @sosukesuzuki, #10357 by @thorn0)

Print trailing commas in type parameters (#10109 by @sosukesuzuki, #10353 by @thorn0)

Allow hugging arguments that are non-concise arrow functions with return type annotations (#10316 by @thorn0)

Correct parentheses for non-null assertions (#10337 by @thorn0)

Necessary parentheses sometimes weren’t printed in expressions containing non-null assertions. This has been fixed.

Indent type assertions in heads of member and call expressions (#10341 by @thorn0)

Support intrinsic keyword (#10390 by @sosukesuzuki)

jinxdash

Prettier Rust

The massively popular Prettier code formatter, now with Rust support!

This extension is a standalone bundle of Prettier + Prettier Plugin Rust.

Why Prettier?

What usually happens once people start using Prettier is that they realize how much time and mental energy they actually spend formatting their code. No matter how incomplete or broken the code you’re working on is, with the Prettier Editor Extension you can always just press the Format Document key binding and *poof*, the code snaps right into place.

Formatting succeeds and fixes 7 syntax errors.

Configuration

Alternative config using TOML

How to ignore things

How are macros formatted?

Are nightly features supported?

Project integration

Command line

Install prettier and prettier-plugin-rust globally

Use the prettier CLI to format rust files. E.g. run:

NodeJS package

Install prettier and prettier-plugin-rust in the project

Link to the plugin’s location in your prettier config:

Use the prettier CLI to format rust files. E.g. run:

Rust crate

No crate yet. Above options are available in the meantime.

It’s all about the Editor Integration — Having the ability to format your code while you work on it really makes for a great developer experience, and autocompletion for Rust’s strict syntax is such a massive time save. Once you’ve tried the extension there really is no coming back.

All-in-all the difference in code style is minimal, so adopting Prettier Rust won’t drastically change your codebase. The real downside is the harsher integration with the Rust ecosystem, but it’ll get better eventually.

Why not just add those features to rustfmt instead?

Unfortunately Rustfmt cannot implement those features by design.

Rustfmt parses code with rustc. Rustc is strict and unforgiving as it always assumes code is at its «final version», thus every slight deviation from the accepted syntax crashes the parser. There’s also that rustc has many lint-like checks within the parser. The intention is to save work for the compiler down the line, unfortunately it also means that rustc sometimes fails to parse syntactically correct code.

Jinx-rust has a little plaidoyer in its readme arguing for Rust Tooling not to use the official rustc parser here.

When exactly does Prettier Rust change code syntax?

The Prettier Rust syntax autocorrection feature is intended to be an adaptation of how Prettier Typescript autocorrects javascript code with missing semicolons.

You can effectively think of Prettier Rust syntax autocorrection as auto-applying the Rust compiler’s suggested syntax fixes automatically (e.g. «semicolon missing here», «parenthesize this» or «add a block around that»)

Otherwise if your codebase compiles, then Prettier Rust is just a formatter like any other. It won’t change the syntax of valid rust code. Moreover, it doesn’t reorganize imports, split comments or combine attributes.

This is an «opinionated formatter». But it’s brand new! How reliable are those opinions?

Rest assured, Prettier Rust actually does not take style decisions on its own. Prettier Rust is essentially a 1:1 adaptation of Prettier Typescript, hence the opinions it implements have been battle tested and agreed-upon by millions and millions of users already.

Configuration File

Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):

The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.

The options you can use in the configuration file are the same as the API options.

Overrides let you have different configuration for certain file extensions, folders and specific files.

Prettier borrows ESLint’s override format.

files is required for each override, and may be a string or array of strings. excludeFiles may be optionally provided to exclude files for a given rule, and may also be a string or array of strings.

An example configuration repository is available here.

Setting the parser option

By default, Prettier automatically infers which parser to use based on the input file extension. Combined with overrides you can teach Prettier how to parse files it does not recognize.

If you’d like a JSON schema to validate your configuration, one is available here: http://json.schemastore.org/prettierrc.

Here’s an annotated description of how different properties map to Prettier’s behavior:

What is Prettier?

Prettier is an opinionated code formatter with support for:

It removes all original styling* and ensures that all outputted code conforms to a consistent style. (See this blog post)

Prettier takes your code and reprints it from scratch by taking the line length into account.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

If you want to learn more, these two conference talks are great introductions:

* Well actually, some original styling is preserved when practical—see empty lines and multi-line objects.

Prettier code formatter

Prettier is an opinionated code formatter. This document explains some of its choices.

What Prettier is concerned about

The first requirement of Prettier is to output valid code that has the exact same behavior as before formatting. Please report any code where Prettier fails to follow these correctness rules — that’s a bug which needs to be fixed!

JSX has its own option for quotes: jsxSingleQuote. JSX takes its roots from HTML, where the dominant use of quotes for attributes is double quotes. Browser developer tools also follow this convention by always displaying HTML with double quotes, even if the source code uses single quotes. A separate option allows using single quotes for JS and double quotes for «HTML» (JSX).

Prettier maintains the way your string is escaped. For example, «🙂» won’t be formatted into «\uD83D\uDE42» and vice versa.

It turns out that empty lines are very hard to automatically generate. The approach that Prettier takes is to preserve empty lines the way they were in the original source code. There are two additional rules:

By default, Prettier’s printing algorithm prints expressions on a single line if they fit. Objects are used for a lot of different things in JavaScript, though, and sometimes it really helps readability if they stay multiline. See object lists, nested configs, stylesheets and keyed methods, for example. We haven’t been able to find a good rule for all those cases, so Prettier instead keeps objects multiline if there’s a newline between the < and the first key in the original source code. A consequence of this is that long singleline objects are automatically expanded, but short multiline objects are never collapsed.

Tip: If you have a multiline object that you’d like to join up into a single line:

…all you need to do is remove the newline after < :

…and then run Prettier:

And if you’d like to go multiline again, add in a newline after < :

…and run Prettier:

♻️ A note on formatting reversibility

The semi-manual formatting for object literals is in fact a workaround, not a feature. It was implemented only because at the time a good heuristic wasn’t found and an urgent fix was needed. However, as a general strategy, Prettier avoids non-reversible formatting like that, so the team is still looking for heuristics that would allow either to remove this behavior completely or at least to reduce the number of situations where it’s applied.

What does reversible mean? Once an object literal becomes multiline, Prettier won’t collapse it back. If in Prettier-formatted code, we add a property to an object literal, run Prettier, then change our mind, remove the added property, and then run Prettier again, we might end up with a formatting not identical to the initial one. This useless change might even get included in a commit, which is exactly the kind of situation Prettier was created to prevent.

Just like with objects, decorators are used for a lot of different things. Sometimes it makes sense to write decorators above the line they’re decorating, sometimes it’s nicer if they’re on the same line. We haven’t been able to find a good rule for this, so Prettier keeps your decorator positioned like you wrote them (if they fit on the line). This isn’t ideal, but a pragmatic solution to a difficult problem.

There’s one exception: classes. We don’t think it ever makes sense to inline the decorators for them, so they are always moved to their own line.

Note: Prettier 1.14.x and older tried to automatically move your decorators, so if you’ve run an older Prettier version on your code you might need to manually join up some decorators here and there to avoid inconsistencies:

This is about using the noSemi option.

Consider this piece of code:

While the above code works just fine without semicolons, Prettier actually turns it into:

This is to help you avoid mistakes. Imagine Prettier not inserting that semicolon and adding this line:

Oops! The above actually means:

With a semicolon in front of that [ such issues never happen. It makes the line independent of other lines so you can move and add lines without having to think about ASI rules.

This practice is also common in standard which uses a semicolon-free style.

The printWidth option is more of a guideline to Prettier than a hard rule. It is not the upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified print width.

There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which Prettier doesn’t do). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation 🙂

Apart from that, there are a few cases where Prettier intentionally exceeds the print width.

Prettier can break long import statements across several lines:

The following example doesn’t fit within the print width, but Prettier prints it in a single line anyway:

This might be unexpected by some, but we do it this way since it was a common request to keep import s with single elements in a single line. The same applies for require calls.

Another common request was to keep lengthy test descriptions in one line, even if it gets too long. In such cases, wrapping the arguments to new lines doesn’t help much.

Prettier prints things a little differently compared to other JS when JSX is involved:

Greetings, traveler! Sign up today!

There are two reasons.

First off, lots of people already wrapped their JSX in parentheses, especially in return statements. Prettier follows this common style.

Secondly, the alternate formatting makes it easier to edit the JSX. It is easy to leave a semicolon behind. As opposed to normal JS, a leftover semicolon in JSX can end up as plain text showing on your page.

Greetings, traveler! Sign up today!

When it comes to the content of comments, Prettier can’t do much really. Comments can contain everything from prose to commented out code and ASCII diagrams. Since they can contain anything, Prettier can’t know how to format or wrap them. So they are left as-is. The only exception to this are JSDoc-style comments (block comments where every line starts with a * ), which Prettier can fix the indentation of.

Then there’s the question of where to put the comments. Turns out this is a really difficult problem. Prettier tries its best to keep your comments roughly where they were, but it’s no easy task because comments can be placed almost anywhere.

Imagine this piece of code:

Then you need to add another condition:

Prettier will turn the above into:

Which means that the eslint-disable-next-line comment is no longer effective. In this case you need to move the comment:

Disclaimer about non-standard syntax

Prettier is often able to recognize and format non-standard syntax such as ECMAScript early-stage proposals and Markdown syntax extensions not defined by any specification. The support for such syntax is considered best-effort and experimental. Incompatibilities may be introduced in any release and should not be viewed as breaking changes.

What Prettier is not concerned about

Prettier only prints code. It does not transform it. This is to limit the scope of Prettier. Let’s focus on the printing and do it really well!

Here are a few examples of things that are out of scope for Prettier:

We’ve also added support formatting for TypeScript 4.7 syntax!

If you enjoy Prettier and would like to support our work, consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, including typescript-eslint, remark, and Babel.

Prettier 2.6: new singleAttributePerLine option and new JavaScript features!

This release includes a new singleAttributePerLine option. This is an option to print only one attribute per line in Vue SFC templates, HTML, and JSX. Per our Option Philosophy, we would prefer not to add such an option. However, there are many users who want this feature, and major style guides like Airbnb’s JavaScript Style Guide and Vue’s style guide recommend the single attribute per line style. A PR to add this feature was opened in October 2019, and both it and the corresponding issue have received a significant amount of support from users. For us it was a hard decision to add this option. We hope the addition of this option will benefit many users without significantly harming our principles.

We’ve also added support formatting for some new JavaScript syntax proposals via Babel.

Prettier begins paying maintainers

Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax!

November 25, 2021

This release adds support for TypeScript 4.5’s new syntax and MDX v2 comment syntax!

If you enjoy Prettier and would like to support our work, consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, including typescript-eslint, remark, and Babel.

Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!

September 9, 2021

We’ve also added support for TypeScript 4.4, including new syntax features such as class static blocks.

If you enjoy Prettier and would like to support our work, consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, including typescript-eslint, remark, and Babel.

Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official

A remarkable milestone is the long-awaited release of the Ember / Handlebars formatter. It’s supposed to be the last formatter included directly in the core library. In the future, for sustainability, languages should be added only by plugins.

We are grateful to our financial contributors: Salesforce, Indeed, Frontend Masters, Airbnb, Shogun Labs, Skyscanner, Konstantin Pschera, and many others who help us keep going. If you enjoy Prettier and would like to support our work, head to our OpenCollective. Please consider also supporting the projects Prettier depends on, such as typescript-eslint, remark, and Babel.

Most of the changes in this release are thanks to the hard work of Fisker Cheung, Georgii Dolzhykov, and Sosuke Suzuki, along with many other contributors.

Prettier for Ruby goes v1.0 🎉

December 11, 2020

After 1500 commits and 50 releases since July 2018, we’re happy to announce that we’ve just released v1.0 of Prettier for Ruby. In this blog post, we’d like to give a short overview of how the plugin works, its philosophy, and what to expect in the future.

Prettier 2.2: new JavaScript parsers, TS 4.1 and ESM standalone bundles

November 20, 2020

This release supports new JavaScript parsers espree and meriyah, supports TypeScript 4.1, ships ESM standalone bundles for modern browsers, and includes many bug fixes and improvements!

Prettier 2.0 “2020”

Better defaults, a better CLI and better heuristics. Oh, and TypeScript 3.8.

EB-Forks/vscode-prettier

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

This branch is not ahead of the upstream prettier:main.

No new commits yet. Enjoy your day!

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project run:

Configuring Default Options

Some users may not wish to create a new Prettier config for every project or use the VS Code settings. Because Prettier searches recursively up the file path, you can place a global prettier config at

/.prettierrc to be used as a fallback.

You can also use the setting prettier.configPath to provide a global configuration. However, be careful, if this is set this value will always be used and local configuration files will be ignored.

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Migrating from Versions 2.x

Version 3.0 has a number of breaking changes. The settings for Linters have been removed. Linters are still supported, but the settings are no longer needed. See the documentation on linters below. See also Error Messages

NOTE: If you are seeing messages about legacy configuration settings, double check that you don’t have any settings for the linters in your workspace or global settings. You must remove these. See also Error Messages

Finally, there are a few smaller breaking changes, including removal of support for older versions of prettier. See the CHANGELOG for details.

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

The preferred way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can see how this is done here. To continue to use Prettier and your linter we recommend you use the ESLint, TSLint or Stylelint extensions directly.

You can enable Auto-Fix on Save for ESLint, TSLint or Stylelint and still have formatting and quick fixes:

NOTE: If you are seeing conflicts between Prettier and ESLint this is because you don’t have the right ESLint or TSLint rules set as explained in the Prettier documentation.

Prettier Linter Integration (advanced)

WARNING: Due to a bug in the prettier-eslint library, this extension is NOT compatible with ESLint version 6.

This extension will automatically detect when you have these extensions installed and use them instead of prettier by itself. For configuration of these linter integrations, see their respective documentation.

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Supply a custom path to the prettier module.

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

A list of languages IDs to disable this extension on.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

prettier.useEditorConfig (default: true )

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

You have legacy linter settings in your VS Code config. They are no longer being used.

If you receive this error message it means that one of the following settings were found in your VS Code config. Either in your global or workspace settings. These configuration options should be deleted as they are no longer used for anything. See these instructions for linter configuration.

This extension uses Application Insights to track anonymous feature usage and version info. We don’t record IP addresses or any other personally identifiable information. The reason we track this data is simply to help with prioritization of features.

This extension respects the VS Code telemetry setting so if you have telemetry disabled in VS Code we will also not collect telemetry. See the Visual Studio Code docs for information on how to disable telemetry.

Prettier code formatter

Prettier ships with a handful of format options.

To learn more about Prettier’s stance on options – see the Option Philosophy.

If you change any options, it’s recommended to do it via a configuration file. This way the Prettier CLI, editor integrations and other tooling knows what options you use.

Specify the line length that the printer will wrap on.

For readability we recommend against using more than 80 characters:

In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.

Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when to break a line.

In other words, don’t try to use printWidth as if it was ESLint’s max-len – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.

(If you don’t want line wrapping when formatting Markdown, you can set the Prose Wrap option to disable it.)

Specify the number of spaces per indentation-level.

Indent lines with tabs instead of spaces.

(Tabs will be used for indentation but Prettier uses spaces to align things, such as in ternaries.)

Print semicolons at the ends of statements.

Use single quotes instead of double quotes.

See the strings rationale for more information.

Change when properties in objects are quoted.

Note that Prettier never unquotes numeric property names in Angular expressions, TypeScript, and Flow because the distinction between string and numeric keys is significant in these languages. See: Angular, TypeScript, Flow. Also Prettier doesn’t unquote numeric properties for Vue (see the issue about that).

Use single quotes instead of double quotes in JSX.

Default value changed from none to es5 in v2.0.0

Print trailing commas wherever possible in multi-line comma-separated syntactic structures. (A single-line array, for example, never gets trailing commas.)

Print spaces between brackets in object literals.

Put the > of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

[Deprecated] JSX Brackets

Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

Arrow Function Parentheses

First available in v1.9.0, default value changed from avoid to always in v2.0.0

Include parentheses around a sole arrow function parameter.

At first glance, avoiding parentheses may look like a better choice because of less visual noise. However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making other changes. Consistent use of parentheses provides a better developer experience when editing real codebases, which justifies the default value for the option.

Format only a segment of a file.

These two options can be used to format code starting and ending at a given character offset (inclusive and exclusive, respectively). The range will extend:

Specify which parser to use.

Prettier automatically infers the parser from the input file path, so you shouldn’t have to change this setting.

Custom parsers are also supported. First available in v1.5.0. Deprecated. Will be removed in v3.0.0 (superseded by the Plugin API)

Note: the default value was «babylon» until v1.13.0.

Specify the file name to use to infer which parser to use.

For example, the following will use the CSS parser:

This option is only useful in the CLI and API. It doesn’t make sense to use it in a configuration file.

First available in v1.7.0

Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to Prettier.

First available in v1.8.0

First available in v1.8.2

HTML Whitespace Sensitivity

First available in v1.15.0. First available for Handlebars in 2.3.0

Specify the global whitespace sensitivity for HTML, Vue, Angular, and Handlebars. See whitespace-sensitive formatting for more info.

Vue files script and style tags indentation

First available in v1.19.0

Whether or not to indent the code inside and tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor.

First available in v1.15.0, default value changed from auto to lf in v2.0.0

For historical reasons, there exist two common flavors of line endings in text files. That is \n (or LF for Line Feed) and \r\n (or CRLF for Carriage Return + Line Feed). The former is common on Linux and macOS, while the latter is prevalent on Windows. Some details explaining why it is so can be found on Wikipedia.

If you want to make sure that your entire git repository only contains Linux-style line endings in files covered by Prettier:

All modern text editors in all operating systems are able to correctly display line endings when \n ( LF ) is used. However, old versions of Notepad for Windows will visually squash such lines into one as they can only deal with \r\n ( CRLF ).

Embedded Language Formatting

First available in v2.1.0

Control whether Prettier formats quoted code embedded in the file.

When Prettier identifies cases where it looks like you’ve placed some code it knows how to format within a string in another file, like in a tagged template in JavaScript with a tag named html or in code blocks in Markdown, it will by default try to format that code.

Sometimes this behavior is undesirable, particularly in cases where you might not have intended the string to be interpreted as code. This option allows you to switch between the default behavior ( auto ) and disabling this feature entirely ( off ).

Single Attribute Per Line

First available in v2.6.0

Enforce single attribute per line in HTML, Vue and JSX.

jonlabelle/SublimeJsPrettier

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter.

JsPrettier is compatible with both Sublime Text 2 and 3, and all supported Operating Systems.

If you’ve already installed Prettier (using one of the yarn or npm commands below), you’re all set. otherwise:

Install JsPrettier via Package Control

The easiest and recommended way to install Js​Prettier is using Package Control.

From the application menu, navigate to:

Install JsPrettier Manually

Default Sublime Text Packages Paths:

NOTE Replace the [2|3] part with the appropriate Sublime Text version for your installation.

Install JsPrettier Using Git

If you’re a Git user, you can install JsPrettier and keep it up-to-date by cloning the repository directly into your Sublime Text Packages directory.

There are three available options to format code:

Custom Key Binding

To add a custom key binding, please reference the following example which binds the js_prettier command to ctrl + alt + f :

Plug-in settings and Prettier options can be configured by navigating the application menu to:

Sublime Text Settings

prettier_cli_path (default: empty)
If Sublime Text has problems automatically resolving a path to Prettier, you can set a custom path here. When the setting is empty, the plug-in will attempt to find Prettier by:

Examples:

node_path (default: empty)
If Sublime Text has problems resolving the absolute path to node, you can set a custom path here.

Examples:

auto_format_on_save (default: false)
Automatically format the file on save.

auto_format_on_save_excludes (default: [])
File exclusion patterns to ignore when auto_format_on_save is enabled.

Example:

auto_format_on_save_requires_prettier_config (default: false)
Enable auto format on save only when a Prettier config file is (or isn’t) found.

is specified in the additional_cli_args setting, then by searching the location of the file being formatted, and finally navigating up the file tree until a config file is (or isn’t) found.

allow_inline_formatting (default: false)
Enables the ability to format selections of in-lined code. For example, to format a selection of JavaScript code within a PHP or HTML file. When true, the JsPrettier command is available for use across all Sublime Text syntaxes.

Put additional file extensions here, and be sure not to include the leading dot in the file extension.

max_file_size_limit (default: -1)
The max allowed file size to format in bytes. For performance reasons, files with a greater file size than the specified max_file_size_limit will not format. Setting the max_file_size_limit value to -1 disables the file size checking (default).

disable_prettier_cursor_offset (default: false)
There’s an apparent (and nasty) defect in Prettier that seems to occur during Prettier’s cursor offset calculation, and when attempting to format large or minimized files (but not limited to just these cases). The issue effectively results in the CPU spiking to a constant 100%. indefinitely, or until the node executable/process running Prettier is forcefully terminated.

additional_cli_args (default: <>)
A key-value pair of arguments to append to the prettier command.

Examples:

useTabs (internally set by the translate_tabs_to_spaces setting)
Indent lines with tabs.

printWidth (default: 80)
Specifies that the formatted code should fit within this line limit.

tabWidth (default: 2)
Specify the number of spaces per indentation-level.

singleQuote (default: false)
Format code using single or double-quotes.

trailingComma (default: «es5«)
Controls the printing of trailing commas wherever possible. Valid options:

bracketSpacing (default: true)
Controls the printing of spaces inside object literals.

bracketSameLine (default: false)
Put the > of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

jsxSingleQuote (default: false)
Use single quotes instead of double quotes in JSX.

parser (default: «babel«)
The parser is automatically set by the plug-in (JsPrettier), based on the contents of current file or selection.

semi (default: true)
true to add a semicolon at the end of every line, or false to add a semicolon at the beginning of lines that may introduce ASI failures.

requirePragma (default: false)
Prettier can ignore formatting files that contain a special comment, called a pragma at the top of the file. This is useful when gradually transitioning large, unformatted codebases to prettier.

proseWrap (default: «preserve«)
(Markdown and YAML Only) By default, Prettier will wrap Markdown and YAML text as-is since some services use a linebreak-sensitive renderer, e.g. GitHub comment and BitBucket. In some cases you may want to rely on SublimeText soft wrapping instead, so this option allows you to opt out with «never».

arrowParens (default: «always«)
Include parentheses around a sole arrow function parameter.

htmlWhitespaceSensitivity (default: «css«)
(HTML Only) Specify the global whitespace sensitivity for HTML files, see whitespace-sensitive formatting for more info.

quoteProps (default: «as-needed«)
Change when properties in objects are quoted. Requires Prettier v1.17+.

vueIndentScriptAndStyle (default: false)
(Vue files Only) Whether or not to indent the code inside and tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in Sublime Text.

embeddedLanguageFormatting (default: «auto«)
Control whether Prettier formats quoted code embedded in the file.

When Prettier identifies cases where it looks like you’ve placed some code it knows how to format within a string in another file, like in a tagged template in JavaScript with a tag named html or in code blocks in Markdown, it will by default try to format that code.

Sometimes this behavior is undesirable, particularly in cases where you might not have intended the string to be interpreted as code. This option allows you to switch between the default behavior ( auto ) and disabling this feature entirely ( off ).

singleAttributePerLine (default: false)
Enforce single attribute per line in HTML, Vue and JSX.

See the Prettier Options doc page for more details and examples.

JsPrettier supports project-level settings, specified in

Example Sublime Text Project File

Prettier Configuration Files

Custom Prettier Config File Path

Disable Prettier Config File Discovery

Prettier Plugin Support

To install Prettier PHP in your project root, and use it as a drop-in replacement for Prettier:

Prettier Community Plugins

Here’s an example SublimeText project (posted in Issue #239) that uses the Prettier Community Plugin NiklasPor/prettier-plugin-go-template to format *.gohtml files.

To report a bug or a make suggestion, please open a new issue selecting the appropriate Issue Template (Bug report or Feature request). Be sure to follow the guidelines outlined in each template. otherwise your submission will be subject to immediate closure.

Please visit the Changelog page for a complete list of changes.

Pre-commit Hook

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.

Make sure Prettier is installed and is in your devDependencies before you proceed.

This will install husky and lint-staged, then add a configuration to the project’s package.json that will automatically format supported files in a pre-commit hook.

Read more at the lint-staged repo.

Use Case: Great for when you want an entire file formatting on your changed/staged files.

Install it along with husky:

Read more at the pretty-quick repo.

Use Case: Great when working with multi-language projects.

Use Case: Great for when you want to format partially-staged files, and other options do not provide a good fit for your project.

Git-format-staged is used to run any formatter that can accept file content via stdin. It operates differently than other tools that format partially-staged files: it applies the formatter directly to objects in the git object database, and merges changes back to the working tree. This procedure provides several guarantees:

Git-format-staged requires Python v3 or v2.7. Python is usually pre-installed on Linux and macOS, but not on Windows. Use git-format-staged with husky:

Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

Before you start

Download and install Node.js.

Install and configure Prettier in CLion

Learn more about installation modes from the Prettier official website.

From the Prettier package list, select the prettier installation to use.

If you followed the standard installation procedure, CLion locates the prettier package itself and the field is filled in automatically.

Reformat code with Prettier

In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window.

Then select Reformat with Prettier from the context menu.

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually.

This behaviour can be enabled in the current project as well as for all new projects.

Run Prettier automatically on save

In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one.

With the default pattern, <**/*,*>. , Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, or TSX file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern.

For example, to automatically reformat Style Sheet files as well, add css,sass,scss to the default pattern as follows:

To reformat files from a specific folder, replace <**/*,*>with

Suppose, you have a project with the following structure:

To apply Prettier automatically only to the files in the src folder, update the pattern as follows:

As a result, the file dog.ts will be reformatted on save while animal.ts will remain unchanged.

Set Prettier as default formatter

In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in Run Prettier automatically on save.

Configure Prettier to run on save or on reformat in new projects

Use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

If necessary, update the default pattern in the Run for files field as described in Run Prettier automatically on save.

Apply Prettier code style rules

CLion can apply the key code style rules from the Prettier’s configuration to the CLion Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

To re-apply the Prettier code style (after you’ve clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Learn more about configuring Prettier code style rules from the Prettier official website.

Formatting code with Prettier

Prettier is an opinionated code formatter that will take all your code, removes the inconsistency in the codebase in styling the code, and ensures the output code should be formatted in the desired pattern by using the predefined styles in prettier. The reason for being used prettier is given below:

There are so many other reasons also there for using the Prettier but we will not be covering those reasons here.

But why use Prettier? It is generally considered good practice if a project has a common coding style guide, Due to this, it becomes easier for maintainers to maintain the codebase, for newcomers to adapt to those stylings which will also eventually result in having a great understanding of syntax. Even if you have your old codebase, you can run Prettier on your codebase which will reformat all your massive code files in a matter of seconds. Most importantly, it gives you the freedom to write code anyways you want as you can format it correctly immediately. If you’re worried about the acceptance rating then here are the possible stats given below:

Installation Procedure: In order to implement the Prettier to our codebase, we need to follow certain steps.

Step 1: Install Prettier in your project by running the following command:

Step 2: After adding Prettier as a devDependency, let’s create a file called `.prettierrc` which is a configuration file for Prettier, at the root of the project directory and just add curly braces `<>` in that file, so anyone will know that your project uses Prettier with the default configuration.

.prettierrc file at the root of the project

Step 3: Now, let’s add a command in our package.json’s “scripts” property to run Prettier.

`npm run format` command will format every `*.js` or `*.jsx` file in the “src/”, even if your “src/” folder contains multiple directories in it, this regex command will go down recursively on them and format them.

Output:

Editor Integration: You can get the most out of Prettier by using it with code editors, Prettier supports many editors like Emacs, Atom, VS Code, Sublime Text, Vim, etc. Follow the below steps to install Prettier in Visual studio code:

Sometimes, it may happen that some projects don’t use Prettier in such cases you need to disable this setting as it will format your code even if your project doesn’t have a Prettier setup. But we geeks do have a solution for that, In the setting, menu search for this setting “prettier.requireConfig” and tick it to turn it on, by doing so it will ensure that Prettier will only format the code if there is a Prettier config file (.prettierrc) present in the project directory.

ESLint Integration: If your Project uses ESLint, then you can have a setup where Prettier will be used for formatting purposes and ESLint will do the work of catching bugs and maintaining code quality. See this article for ESLint set up in your project.
For integrating Prettier with ESLint follow the below steps:

Install eslint-config-prettier, which will turn off some ESLint rules that conflict while using Prettier

Append “prettier” to the last in extends array in your `.eslintrc.*` file

Conclusion: After installing Prettier and integrating it with our Code Editor and ESLint, we have a perfect development setup ready, where we don’t have to clutter our mind by worrying about styling the code, remembering the proper syntax, or any other formatting rules of projects while writing the code because ESLint and Prettier will take care of that and we can focus more on building our project.

Prettier

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Installation

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Default Formatter

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

Prettier Resolution

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Plugins

Configuration

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Usage

Using Command Palette (CMD/CTRL + Shift + P)

Keyboard Shortcuts

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Format On Save

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format Selection

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

Linter Integration

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

Workspace Trust

Settings

Prettier Settings

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

Extension Settings

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

prettier.configPath

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.prettierPath

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

prettier.documentSelectors

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Error Messages

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

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

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

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

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

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

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

arrowParens

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

bracketSpacing

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

endOfLine

htmlWhitespaceSensitivity

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

insertPragma

jsxBracketSameLine

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

jsxSingleQuote

printWidth

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

proseWrap

quoteProps

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

requirePragma

singleQuote

tabWidth

trailingComma

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

useTabs

vueIndentScriptAndStyle

embeddedLanguageFormatting

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

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

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

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

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

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

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