Studio Hyperdrive Prettier config

Installation

$ npm install --save-dev @studiohyperdrive/prettier-config

Then, add a prettier.config.js-file where you include "@studiohyperdrive/prettier-config".

module.exports = require("@studiohyperdrive/prettier-config");

If you would like to add local overrides to the configuration:

module.exports = Object.assign(
  require("@studiohyperdrive/prettier-config"),
  {
    //add overrides here
    singleQuote: true,
    bracketSpacing: true,
    ...
  }
);

Integration with ESLint

We follow the guidelines defined by Prettier here: Use ESLint to run Prettier.

You need to install the following packages to integrate Pretter with Eslint:

• prettier
• eslint-plugin-prettier
• eslint-config-prettier

$ npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

In your Eslint configuration file, extend "plugin:prettier/recommended" before your other rulesets.

extends: [
    "plugin:prettier/recommended",
    "@studiohyperdrive/eslint-config",
    "@studiohyperdrive/eslint-config/lib/es6.js",
]

When setting up your npm-scripts, you could add an extra format-script that runs Eslint with an extra --fix parameter.

"lint": "eslint . --ext js",
"format": "npm run lint -- --fix",

Automatic formatting with common editors

By default, you don't need an editor-specific package/extension/plugin to run Prettier, just use the npm scripts provided in the project.

If you would like to run the formatter to run automatically "on save", you could use the following guides:

Visual Studio Code

You don't need an additional Visual Studio Code extension to run Prettier, you can just enable autoFixOnSave from the vscode-eslint extension.

"eslint.autoFixOnSave": true