# Linting Prettier 
> Use [Prettier](https://prettier.io) to format your JS, CSS and HTML code.

## 👨‍🏭Installing

- Install `@forter/prettier-config`
  ```bash
  npm add --save-dev @forter/prettier-config
  ```
- Adjust your package.json with the following
  ```js
  {
    "scripts": {
      "lint:prettier": "prettier \"src/**/*.{js,md}\" \"**/package.json\" --check"
      "format:prettier": "prettier \"src/**/*.{js,md}\" \"**/package.json\" --write"
    },
  }
  ```

>
> ```js
> module.exports = {
>   ...require("@forter/prettier-config"),
>   semi: false,
> };
> ```
If you've installed `@forter/prettier-config` locally within your project, just set your `prettier` config to:

## 👩‍🚀  What you get

Extends [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier).

This will install [`@forter/prettier-config`](https://github.com/forter/web-components/blob/master/lib/prettier-config/index.js), a config based on forter but allows for some specialities needed for Web Components.

- Apply formatting to JS files
- Apply formatting to HTML inside of `html` tagged template literals used by [lit-html](https://github.com/Polymer/lit-html)
- Apply formatting to CSS inside of `css` tagged template literals used by [lit-element](https://lit-element.polymer-project.org/guide/styles#static-styles)
- Integration with ESLint to prevent potentially conflicting rules

## 👨‍💻 Usage

If you don't want to use `package.json`, you can use any of the supported extensions to export a string, e.g. `.prettierrc.json`:

```json
"@forter/prettier-config"
```

An example configuration repository is available [here](https://github.com/azz/prettier-config).

> Note: This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g:
>
> ```js
> module.exports = {
>   ...require("@forter/prettier-config"),
>   semi: false,
> };
> ```
If you've installed `@forter/prettier-config` locally within your project, just set your `prettier` config to:

```json
{
  "extends": "@forter/prettier-config"
}
```

If you've globally installed `@forter/prettier-config` using the `-g` flag, then you'll need to use the absolute path to `@forter/prettier-config` in your config e.g.

```json
{
  "extends": "/absolute/path/to/@forter/prettier-config"
}
```

Run:

- `npm run lint:prettier` to check if any file is not correctly formatted

## Example

```js
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>;

}
```

Into

```js
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>
  );
}
```