Skip to content

Instantly share code, notes, and snippets.

@pietrop
Last active May 6, 2020 14:46
Show Gist options
  • Save pietrop/c3ae649b5881bde4931593a06e28a52e to your computer and use it in GitHub Desktop.
Save pietrop/c3ae649b5881bde4931593a06e28a52e to your computer and use it in GitHub Desktop.

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.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment