Prettier is an opinionated code formatter. It supports many languages and integrates with most editors. Prettier formats code on save
Install
### npm
npm install --save-dev --save-exact prettier
### bun
bun install --save-dev --save-exact prettier
Format files
### npm
npx prettier . --write
### bun
bunx prettier . --write
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.
prettier-vscode
can be installed using the extension sidebar – it’s called “Prettier - Code formatter.”
Be sure that format on save
setting is enabled in your editor.
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
You can install and configure ESLint using this command:
### npm
npm init @eslint/config
### bun
bun init @eslint/config
Linters usually contain not only code quality rules, but also stylistic rules. This is the reason why linters might conflict with Prettier. Use Prettier for code formatting concerns, and linters for code-quality concerns.
It’s easy to work with both together, by using eslint-config-prettier
, a pre-made configuration that turns off ESLint all rules that are unnecessary or might conflict with Prettier.
You can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.
You can create a branch protection rule in a repository for a specific branch, all branches, or any branch that matches a name pattern you specify with fnmatch syntax. For example, to protect any branches containing the word release, you can create a branch rule for release.
lint-staged
runs linters against staged git files. Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style.
But running a lint process on a whole project is slow, and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.
Husky improves your commits and more 🐶 woof!
You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all client-side Git hooks.
Install
### npm
npx mrm@2 lint-staged
### bun
bunx mrm@2 lint-staged
This will:
- install husky and lint-staged,
- add
lint-staged
configuration to the project’spackage.json
that will automatically format supported files in a pre-commit hook. - add
.husky
folder withpre-commit
hook.
- Prettier: https://prettier.io/
- prettier-vscode: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- eslint-config-prettier: https://github.com/prettier/eslint-config-prettier
- lint-staged: https://github.com/okonet/lint-staged
- Husky: https://github.com/typicode/husky
- branch protection rule: https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-protected-branches/managing-a-branch-protection-rule