@forter/prettier-config v1.1.4

Linting Prettier

Use Prettier to format your JS, CSS and HTML code.

👨‍🏭Installing

• Install @forter/prettier-config

  npm add --save-dev @forter/prettier-config

• Adjust your package.json with the following

  {
    "scripts": {
      "lint:prettier": "prettier \"src/**/*.{js,md}\" \"**/package.json\" --check"
      "format:prettier": "prettier \"src/**/*.{js,md}\" \"**/package.json\" --write"
    },
  }

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.

This will install @forter/prettier-config, 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
• Apply formatting to CSS inside of css tagged template literals used by lit-element
• 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:

"@forter/prettier-config"

An example configuration repository is available here.

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:

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:

{
  "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.

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

Run:

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

Example

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

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