adding prettier linting to your project.md

adding prettier linting to your project

Originally from slatejs-transcript-editor/PR#3 by @jamesdools

install dependencies

npm install -save-dev husky prettier pretty-quick

package.json

then in your npm scripts

"lint": "prettier --write \"**/*.js\""

configure husky pre-commits hooks

husky provides a convinient way to add git pre commit hooks

  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }

configure

.prettierignore

**/node_modules
*.json
# if you are creating a dist bundle
dist/
# for storybook output
.out/

.prettierrc

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 150,
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

see these options to customise the rules

That's it, you can run npm run lint and it should apply your linting rules. But for convinience you might want to do these last two steps.

visual code setup

If you are using visual code

1. install Prettier - Code formatter extension
2. and configure visual code to use prettier preferences --> settings --> search for format, choose esbenp.prettier-vscode from default formatter list.
3. optional configure visual code to do things like format on save.

add a notice to your README

in the README under "Development Environment", eg if you are using a README tempalte like this one

---

Linting

This repo uses prettier for linting. If you are using visual code you can add the Prettier - Code formatter extension, and configure visual code to do things like format on save.

You can also run the linting via npm scripts

npm run lint

and there's also a pre-commit hook that runs it too.

---