Benefits of enforcing code style include:
- Smoother, easier, and deeper code reviews
- Less time debating nits
- Better developer experience
- Less time doing mundane tasks, more time doing real developer "stuff"
- Lower entry threshold
- Less bugs caused by common mistakes
- Higher code quality and confidence
Prettier is an opinionated code formatter.
- To format your code
- To stop code style debates
- To make code reviews about code, not code style and nits
- Many more, read here
npm install --save-dev prettier
Prettier configuration file reference.
See ./.prettierrc.js for example configuration, but it could be as simple as:
module.exports = {};Use .prettierignore to ignore files and/or directories. See ./.prettierignore for an example.
Use Prettier's CLI --ignore-unknown option to ignore files with extensions Prettier has no parser for, e.g.: npx prettier --check --ignore-unknown .
To check code style issues in all files run npx prettier --check ..
To fix code style issues in all files run npx prettier --write ..
ESLint is a static code analyzer for JavaScript, and by extension for TypeScript.
- To quickly find common problems in code
In a TypeScript codebase, alongside Prettier:
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier
In a JavaScript codebase, alongside Prettier:
npm install --save-dev eslint @babel/core @babel/eslint-parser @babel/preset-env eslint-config-prettier eslint-plugin-prettier
ESLint configuration reference.
See ./.eslintrc.js for example configuration for TypeScript codebase with Prettier. For JavaScript codebase with Babel and Prettier it would be something like:
module.exports = {
parser: "@babel/eslint-parser",
env: {
node: true,
},
extends: ["eslint:recommended", "plugin:prettier/recommended"],
};Use .eslintignore to ignore files and/or directories. See ./.eslintignore for an example.
To check code problems in all files run npx eslint ..
To fix code problems in all files run npx eslint --fix ..
GitHub Actions is only an example of a CI/CD tool. There are many, many more, both paid and free. Here are a few examples:
- To automate code inspection, builds, and tests before adding it to a codebase
- To automate deployments
GitHub Actions are available out-of-the box in, drum roll, GitHub repositories.
GitHub Actions workflow reference.
See ./.github/workflows/continuous-inspection.yaml for example continuous inspection workflow.
Husky is a Git hooks tool.
- To inspect the code before it reaches the remote
- To shorten the feedback loop regarding code changes
npx husky-init && npm install
See ./.husky/pre-commit for an example hook.
There is a way, but please, don't do this 🙏
Just run Git commands which hooks you subscribed to and Husky will run automatically 🐶 woof!
lint-staged is a tool to run commands on Git staged files only.
- To inspect only the code relevant to current change
- To shorten the feedback loop regarding code changes even more
npm install --save-dev lint-staged
Lint-staged configuration reference.
See ./lint-staged.config.js for example configuration.
Subscribe lint-staged to a Git hook for maximum effect. For example using Husky
Files lint-stages runs on are configured using glob patterns in lint-staged configuration file, so ignore files simply by not include them in lint-staged configuration.
It's possible to run lint-staged using npx lint-staged, but the power of lint-staged comes from running it on Git hooks. Therefore, subscribe lint-staged to Git hooks, using Husky for example, and just run Git commands.
Branch protection is a practice of guarding branches from pushes, if set rules aren't followed, on a repository level. Different Git hosting services have their own implementation:
- To make sure the code that doesn't meet set standards ends up in the main branches
Provided by your Git hosting service.
Configuration depends on your Git hosting service, but the things to look for are:
- protect the main branch at least
- require pull requests before merging
- require pull request approvals
- require status checks to pass before merging
Push your branch, create a pull request to main branch, and see the magic happen 🧙♀️