altheajs-prettier-config
Althea Web Service's prettier
configuration.
View this package on NPM: click here
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");
NPM Scripts Command
You can add in an npm script to your package.json
which will apply prettier rules across all the file patterns specified. Simply add the following to apply to all files:
"scripts": {
"lint:prettier": "npx prettier --config ./prettier.config.js **/*.* --write",
"lint:prettiercheck": "npx prettier --config ./prettier.config.js **/*.* --check"
}
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 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;