Global Prettier Configuration

This repository contains a global prettier configuration which should work with the global eslint.

What is Prettier?

• an opinionated code formatter
• supports many languages
• integrates with most editors like IntelliJ, VS Code, VIM
• powerful with a few config options

Why do you should use Prettier?

• You press save and code is formatted
• No need to discuss style in code review
• saves you time and energy
• let you focus on code functionality not formatting

IDE support

• Webstorm
• VS CodeVS Code
• VIM
• Atom
• Sublime
• and many more ...

Works with

• JavaScript, TypeScript, JSON
• HTML (Vue, Angular)
• CSS, Less, SCSS
• GraphQL
• Markdown
• YAML

Configuration

To see the meaning of the different configuration options you can goto https://prettier.io/docs/en/options.html.

Usage of the global prettier-config

Installation

You have to install prettier as a devDependency in your project.

npm install -D prettier prettier-config-wernerf

Configuration in package.json

You have to add the following line in your package.json:

{
    "prettier": "prettier-config-wernerf-web"
}

After that the global prettier configuration is used for your project.

Hint/Recommendation

I can recommend to use prettier with husky and lint-staged. So a pre-commit (husky) will be created which can execute commands only on stages files (lint-staged). You can install these tools with:

npm run -D husky lint-staged

and add these lines to your package.json:

  "lint-staged": {
      "*": [
        "prettier"
      ],
    },
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged && npm run lint"
      }
    },

If you add these line prettier runs only on staged files as pre-commit. If there is not a formatted section, the pre-commit will fail. If you use prettier --write the code will be auto-formatted and added to the stage.