altheajs-prettier-config
Althea Web Service's prettier
configuration.
Installation
npm
npm install --save-dev @altheajs-prettier-config
If you don't have it installed already, also install prettier
as a devDependency.
npm install --save-dev prettier
yarn
yarn add --dev @altheajs-prettier-config prettier
Usage
We export two ESLint configurations for your usage:
- AWS Default
- Prettier's Default
AWS Default Config
Create a prettier.config.js
file at the root of your project that contains:
module.exports = require('altheajs-prettier-config');
Prettier's Default Config
If you prefer to use Prettier's defaults, use this in your prettier.config.js
instead:
module.exports = require('altheajs-prettier-config/default');
Pre-commit Hook
As another line of defense, if you want Prettier to automatically fix your errors on commit, you can use lint-staged
with husky
, which manages git hooks.
npm install --save-dev prettier lint-staged husky
- Update your
package.json
like this:
{
"lint-staged": {
"*.{js,css,json,md}": [
"prettier --write",
"git add"
],
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
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"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
Visual Studio Code
- Install Prettier extension:
View → Extensions
then find and install Prettier - Code formatter - Reload the editor
- In your user settings
Code -> Preferences -> Settings
add editor.formatOnSave: true
Sublime Text 3
https://packagecontrol.io/packages/JsPrettier
Atom
https://atom.io/packages/prettier-atom
Enforced Rules
Check out all of Prettier's configuration options.
-
Print Width
Line wrap at 100 characters.
-
Tab Width
2 spaces per indentation-level.
-
Tabs
Indent lines with taps, not spaces.
-
Semicolons
Always print semicolons at the ends of statements.
const greeting = 'hi';
-
Quote
Use single quotes instead of double quotes.
const quote = 'single quotes are better';
-
Trailing Commas
Use trailing commas wherever possible.
const obj = {
a: 'hi',
b: 'hey',
};
-
Bracket Spacing
Print spaces between brackets in object literals.
{
foo: bar;
}
-
JSX Brackets
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>
-
Arrow Function Parentheses
Omit parens when possible.
x => x;