Prettier

Amplify Self-Serve case study

A LOOK INSIDE

Prettier

Opinionated code formatter

A LOOK INSIDE

Demo

A LOOK INSIDE

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
    <em>
	{ greeted }
	</em>
    { (silent)
      ? "."
      : "!"}

    </div>;

}

A LOOK INSIDE

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

Why?

A LOOK INSIDE

Consist code style

A LOOK INSIDE

Keep you from some errors

A LOOK INSIDE

Helps with linting

A LOOK INSIDE

Alternatives

ESLint

StandardJS

A LOOK INSIDE

Integration

A LOOK INSIDE

package.json

{
  ...

  "scripts": {
    "prettier:base": "prettier --parser typescript --single-quote",
    "prettier:check": "npm run prettier:base -- --list-different './**/*.ts'",
    "prettier:write": "npm run prettier:base -- --write './**/*.ts'"
  },

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

  "lint-staged": {
    "*.ts": [
      "npm run prettier:base -- --write",
      "git add"
    ]
  },

  "devDependencies": {
    "husky": "^1.1.3",
    "lint-staged": "^8.0.4",
    "prettier": "^1.14.3",
  }
}