Formatter overview

Formatter helps you format your components' code according to a pre-defined set of styling rules.

Code formatting is the process of styling code to make it "cleaner", clearer and more consistent. Having your team's code formatted automatically saves time otherwise wasted on discussions and code reviews about code styling.

The Formatter aspect simplifies and standardizes the process of code formatting for components. It does so for code formatting during development (in the workspace) and for code formatting during component build (in a capsule, as part of the build pipeline)

Format in development

Bit formats all components in the workspace using just a single command. That is true for components of all types, regardless of their specific env, and as a consequence of that, their specific Formatter implementation and configuration.

bit format

formatting total of 2 component(s) in workspace 'my-workspace'

my-scope/custom-aspect
the following files have been re-formatted:
custom-aspect.aspect.ts

my-scope/ui/button
no issues found
CopiedCopy

To learn more on formatting code during development, please refer to 'Workspace Formatting'.

Format during build

During build, the format task is only used for checking formatting issues. it will not re-write the components with the fixed format.

Formatting components' code for distribution is done during build by the Bit Builder.

Component build can be simulated with bit build and done through bit snap or bit tag

bit build
CopiedCopy

By default, formatting is not part of the Build Pipeline.

To learn more on formatting code during build and how to add a formatter Build Task, please refer to Formatting During Build.

Configuring and implementing Linters

The Formatter implementation is configured in the env which is configured on your component. Customizing it can be done by customizing an existing env with your formatter or by implementing your own Env.

Formatter can also be implemented into Bit through few interfaces.