-
Couldn't load subscription status.
- Fork 14
5.1 | Formatting
The project uses 2 formatting tools: Prettier is the main one, and EditorConfig is kind of the fallback solution.
The project's main formatting tool is Prettier. If you use VS Code for development, I recommend using the official Prettier extension, because in the .vscode/settings.json file, Prettier is set to the default formatter, so you could correctly format your files with a shortcut (ALT+SHIFT+F by default).
You can always validate all your files if you run the prettier-lint script. If you want to format all your files, you can do it by running the prettier-format script. Prettier formats JavaScript, TypeScript, JSON, and YAML files if they're not listed in the .prettierignore file. You can find Prettier's configuration in the .prettierrc.json file.
Prettier also organizes imports while formatting. This basically means removing unnecessary imports and ordering them. The goal of this is to filter noise in commits by keeping import order consistent. It uses the prettier-plugin-organize-imports plugin for it.
Prettier runs in the pre-commit hook and formats the modified files before committing. For this, it uses lint-staged and Husky.
Prettier validation runs in the build CI pipeline, and it makes it fail if there are incorrectly formatted files in the codebase. Note that the .gitattributes file forces the use of lfs as newline characters in git because otherwise, the CI pipeline would fail on Windows because of Prettier's validation.
EditorConfig is not the primary formatter of the project. It is meant to be a fallback solution if you edit the source code without installing Prettier, since some IDEs, like Visual Studio, or WebStorm use EditorConfig by default. EditorConfig won't format everything like Prettier would, but at least indentation, newline characters, and some other basic attributes will be the same. You can find EditorConfig's configuration in the .editorconfig file, and you can also install the official extension.