altheajs-prettier-config

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 --save-exact

yarn

yarn add --dev altheajs-prettier-config prettier

Usage

We export two ESLint configurations for your usage:

1. AWS Default
2. Prettier's Default

AWS Default Config

The simplest way to install and use the default config is to reference it directly in your package.json file as follows:

{
	// ...package.json
	"prettier": "altheajs-prettier-config"
}

If you'd like to extend the configurations, create a .prettierrc.js file at the root of your project that contains:

module.exports = {
	...require("altheajs-prettier-config"),
	semi: true,
};

Prettier's Default Config

If you prefer to use Prettier's defaults, you can access it via "altheajs-prettier-config/default". Just use it as a reference to what package to extend from or point to, as used in the above two examples.

## 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:

```js
	"scripts": {
		// --write will apply the rules
		"lint:prettier": "npx prettier --config ./prettier.config.js **/*.* --write",
		// if you prefer to just check for errors use the --check flag
		"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.

1. npm install --save-dev lint-staged husky
2. 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"
		}
	}
}

Editor Integration

Visual Studio Code

1. Install Prettier extension: View → Extensions then find and install Prettier - Code formatter
2. Reload the editor
3. 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 tabs, 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;