Notes

Using Prettier to automatically fix syntax for you

Edit on GitHub

Programming
1npm i -D Prettier
1# Pretty a file
2npm prettier src/Filename.js --write
1# Prettier config file
2touch ~/.prettierrc
{}

{} just means take everything default. VS Code will automatically start using prettier to format your files if it sees a .prettierrc file. Make sure you have the following settings enabled in VS Code settings

1# VS Code config
2Editor: Format On Save
3Prettier: Require Config
1"scrpts": {
2	"format": "prettier --write 'src/**/*.{js,jsx,html,css,json}'"
3}

https://frontendmasters.com/courses/complete-react-v4/adding-prettier-cli-script/

ESLint

Prettier handles formatting (spacing etc.), ESLint handles stylistic choices (variables not being used)

With ESLint you can use the Standard, Airbnb or ESLint recommended rules.

1npm i -D eslint eslint-config-prettier eslint-plugin-prettier

You can see what ESLint did with the --debug flag

1"scrpts": {
2    "lint": "eslint '**/*.{js,jsx}'"
3}
1eslint 'src/**/*.{js,jsx}' --debug
2
3# the -- let's it know that we want to pass in ore params with the npm command
4npm run lint -- --debug

ESLint came after JSHint which came after JSLint

1// allow these globals and don't warn for them
2"globals": {
3	"React": true
4}