Prettier and ESLint Automation Cheat Sheet

Why

👉 Preventing you from committing bad code. This is the cheapest thing you can do to make sure your code is valid

Setup

• Prettier
• Eslint
• StyleLint
• Ability to validate code locally
• Automatically run code validation with Husky and lint-staged

🛠 1. Prettier

• Make the code styling of the project more consistent
• Stop argument about coding styles between developers

🐨 Dependencies

npm install -D prettier

🐨 Configuration

Try the Playground and copy your preferred config by clicking the Copy config JSON button. Then put it in the .prettierrc.json

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": false,
    "singleQuote": false,
    "tabWidth": 4,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}

🐨 Scripts

Add this to package.json

"scripts": {
    "prettier": "prettier --ignore-path .gitignore \"**/*.+(ts|tsx|js|jsx|json|css|md|mdx|html)\"",
    "format": "npm run prettier -- --write",
    "check-format": "npm run prettier -- --list-different",
}

To exclude files from formatting, create a .prettierignore file in the root of your project or you can use --ignore-path to ignore files listed in the gitignore docs

💰 Check the code here

Check how to enable auto format on save with prettier

• VSCode
• Webstorm

⚒️ 2. ESLint

• Analyze your code to quickly find problems
• Fix Automatically
• You can customize ESLint to work exactly the way you need

🐨 Dependencies

npm install -D eslint eslint-config-prettier eslint-plugin-react

🐨 Configuration

Put it in the .eslintrc

{
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "eslint-config-prettier", "plugin:react/recommended"],
  "rules": {
    "no-unused-vars": ["error", {}],
  },
  "plugins": [
    "react"
  ],
  "env": {
    "browser": true
  }
}

Check list of Eslint rules here

Note that

• We use eslint-config-prettier to turns off all rules that are unnecessary or might conflict with Prettier
• Feel free to remove eslint-plugin-react if you don't use React

🐨 Script
Add this to package.json

"scripts": {
    "lint": "eslint --ignore-path .gitignore \"**/*.+(js|jsx)\"",
}

💰 Check the code here

See eslint feedback in your editor:

• VSCode
• Webstorm

❓️ QA:

🙋‍♂️ Differences between eslint and prettier?

• Use prettier for formatting and linters for catching bugs
• Check Prettier vs. Linters

🙋‍♂️ Differences between extends and plugins?

• Extends: existing set of predefined rules
• Plugins: provides a set of new rules
• Check stackoverflow

🛡 3. Validate script

Now Eslint and Prettier are all set. We add a script that runs prettier and lint to validate our code

🐨 Script
Add this to package.json

"scripts": {
    "validate": "npm run check-format & npm run lint"
}

We can run all these scripts in parallel by using npm-run-all

🐨 Dependencies

npm install -D npm-run-all

🐨 Update Script

"scripts": {
    "validate": "npm-run-all --parallel lint check-format"
}

💰 Check the code here

🔭 4. Husky

• We don't want to run the validate script npm run validate manually before committing our code.
• Husky helps us run a script automatically before committing the code

🐨 Dependencies

npm install -D husky
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npm run validate"

Basically we say that please automatically run npm run validate before every commit

Try to break the styling of your code then commit the files!

💰 Check the code here

🔬 5. Lint-staged

Running lint and styling check on the whole project is slow, you only want to lint files that will be committed.

🐨 Dependencies

npm install -D lint-staged

🐨 Configuration

Add this to package.json

"lint-staged": {
  "**/*.+(js|jsx)": [
    "eslint"
  ],
  "**/*.+(ts|tsx|js|jsx|json|css|md|mdx|html)": [
    "prettier --write",
    "git add"
  ]
}

🐨 Update Husky pre-commit script

npx husky set .husky/pre-commit "npx lint-staged"

Try to break the styling of your code then commit the files!

💰 Check the code here

🎁 6. Stylelint (Bonus)

It's like Eslint but for your css.

🐨 Dependencies

npm install -D stylelint stylelint-config-standard stylelint-config-prettier

🐨 Configuration

Add this to .stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ]
}

We use stylelint-config-prettier to turns off all rules that are unnecessary or might conflict with Prettier

🐨 Script

"scripts": {
  "lint:css": "stylelint --ignore-path .gitignore --fix \"**/*.css\""
},

🐨 Update lint-staged

"lint-staged": {
  // other configs ...
  "**/*.css": [
    "stylelint --fix"
  ],
}

💰 Check the code here

• Working with SCSS? Check here
• Working with Styled-component? Check here

Resources

🍀 Check the final code
🍀 I learned this setup from Kent's static-testing-tools repo. I added Stylelint and also migrated Husky to v6.
🍀 Working with TypeScript? Check here