DEV Community

Cover image for Prettier and ESLint Automation Cheat Sheet
TrinhDinhHuy
TrinhDinhHuy

Posted on

Prettier and ESLint Automation Cheat Sheet

#react #javascript

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
Enter fullscreen mode Exit fullscreen mode

🐨 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 }
Enter fullscreen mode Exit fullscreen mode

🐨 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", }
Enter fullscreen mode Exit fullscreen mode

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

⚒️ 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
Enter fullscreen mode Exit fullscreen mode

🐨 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 } }
Enter fullscreen mode Exit fullscreen mode

Check list of Eslint rules here

Note that

🐨 Script
Add this to package.json

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

💰 Check the code here

See eslint feedback in your editor:

❓️ QA:

🙋‍♂️ Differences between eslint and prettier?

🙋‍♂️ 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" }
Enter fullscreen mode Exit fullscreen mode

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

🐨 Dependencies

npm install -D npm-run-all
Enter fullscreen mode Exit fullscreen mode

🐨 Update Script

"scripts": { "validate": "npm-run-all --parallel lint check-format" }
Enter fullscreen mode Exit fullscreen mode

💰 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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

🐨 Configuration

Add this to package.json

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

🐨 Update Husky pre-commit script

npx husky set .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

🐨 Configuration

Add this to .stylelintrc.json

{ "extends": [ "stylelint-config-standard", "stylelint-config-prettier" ] }
Enter fullscreen mode Exit fullscreen mode

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\"" },
Enter fullscreen mode Exit fullscreen mode

🐨 Update lint-staged

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

💰 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

Top comments (1)

Collapse
 
kushal_dai profile image
Kushal Raj Shrestha •

Very well put together. I was in search for this recipe for while now, finally found it. Thanks a lot.