@rennalabs/prettier-config
v1.0.3
Published
Renna Labs' base prettier configuration
Downloads
34
Readme
Renna Labs' Prettier Config
Pairs well with our ESLint config.
Table of Contents
Installation
Make sure your project is using a Node version >=
10
Install dependencies
npm install --save-dev @rennalabs/prettier-config [email protected] # or yarn add --dev @rennalabs/prettier-config [email protected]
Create a
prettier.config.js
file at the root of your project with the following:module.exports = require('@rennalabs/prettier-config');
Configurations
We export two ESLint configurations for your usage:
Default Config
In your prettier.config.js
:
module.exports = require('@rennalabs/prettier-config');
Four Spaces Config
Includes everything in the default config, but replaces the tabWidth
rule with 4 spaces instead of 2 spaces.
In your prettier.config.js
:
module.exports = require('@rennalabs/prettier-config/four-spaces');
Editor Integration & Autoformatting
VS Code
Install the Prettier extension:
View → Extensions
then find and installPrettier - Code formatter
Reload the editor
Open your settings JSON file and add the following
// Format on save with Prettier rules "editor.formatOnSave": true, // Tell the ESLint plugin to run on save "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // Turn off Prettier format on save, use ESLint to format instead "[javascript]": { "editor.formatOnSave": false }, "eslint.alwaysShowStatus": true, // An array of language identifiers specify the files to be validated "eslint.options": { "extensions": [".html", ".js", ".jsx"] },
Sublime Text 3
https://packagecontrol.io/packages/JsPrettier
Atom
https://atom.io/packages/prettier-atom
Pre-commit Hooks
As another line of defense, if you want Prettier to automatically fix your errors on commit, you can use lint-staged with husky.
Make sure your
npm
version is >= 7.0.0npm install -g npm@latest
Make sure your repo has been initialized with git
git init --initial-branch=main
Install the npm packages
npm install --save-dev lint-staged husky
Set up the
package.json
stuffnpm set-script prepare "husky install" && npm run prepare \ && npm set-script lint-staged "lint-staged" \ && npx husky add .husky/pre-commit "npm run lint-staged"
Then in your
package.json
add"lint-staged": { "*.{js,css,json,md}": [ "prettier --write", "git add" ] }
If you already have
lint-staged
running ESLint, just add the prettier step on top of it:"lint-staged": { "*.{js,css,json,md}": [ "prettier --write", "git add" ], "*.js": [ "eslint --fix", "git add" ] }
Publishing to npm
Read npm's docs on How to Update a Package.
Checkout and pull the
main
branchRun the release script to bump the version numbers (the script will create a commit and push up the release branch to GitHub for you)
./scripts/release
Use semantic versioning to choose the appropriate version number.
Submit and merge a PR from the release branch into
main
Make sure you're logged into npm from the command line using
npm whoami
. If you're not logged in,npm login
with the credentials in 1passnpm publish
Enforced Rules
Check out all of Prettier's configuration options.
Line wrap at 100 characters.
4 spaces per indentation-level
Indent lines with spaces, not tabs.
Always print semicolons at the ends of statements.
const greeting = 'hi';
Use single quotes instead of double quotes.
const quote = 'single quotes are better';
Use trailing commas wherever possible.
const obj = {
a: 'hi',
b: 'hey',
};
Print spaces between brackets in object literals.
{
foo: bar;
}
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).
<button className="prettier-class" id="prettier-id" onClick={this.handleClick}>
Click Here
</button>
Omit parens when possible.
x => x;