DEV Community

Cover image for Eslint and Prettier - Quick install
Fernando Silva
Fernando Silva

Posted on • Updated on


Eslint and Prettier - Quick install

The How - ESLint Quick Install

  1. Open a node terminal in the same folder of your package.json file
  2. Check if you have are using node version 14 or greater
  3. Run: npm install --global yarn
  4. Run: yarn add eslint -D
  5. Run: yarn eslint --init
    1. Choose the options:
    2. To check syntax, find problems, and enforce code style
    3. JavaScript modules (import/export)
    4. React
    5. No
    6. Browser
    7. Use a popular style guide
    8. Airbnb
    9. JSON
    10. Yes
    11. Yarn
  6. Copy this code to the content of your .elsintrcjson file
  7. Run: yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
  8. Create the a prettierrc.json in the same folder of your package.json file
  9. Copy this code to the content of your .prettierrc.json file
  10. Create the .vscode folder
  11. Create a settings.json file inside the .vscode folder
  12. Copy this code to the content of your settings.json file
  13. Add the editorconfig plugin into your code editor
  14. Create a .editorconfig file
  15. Copy this code to the content of your editorconfig file
  16. Done! Happy coding! With Style ^~

"Curiosity: the "rc" in the name of the files means Rule Configuration."

The What - Libraries to show errors

ESLint: ESLint is a popular JavaScript linter that checks code for syntax, problems, and enforces code style. It can help catch errors before they run and enforce consistency in your codebase.

Prettier: Prettier is a code formatter that automatically formats code in a consistent style, eliminating the need for developers to manually format code. This can help maintain code readability and reduce the time spent on manual code formatting.

EditorConfig: EditorConfig is a file format that helps developers maintain consistent coding styles between different text editors and IDEs. It provides a common configuration for indentation, line endings, and other coding styles, reducing the need for manual adjustments between different development environments.

The Why - Keep a standard, code better

Using ESLint, Prettier, and EditorConfig together helps maintain consistent and error-free code.

  • Define code standards
  • Promote a clean code
  • Format automatically
  • Same code style in all your projects

"Prettier and ESLint are opinionated code formatting and linting tools. This means they use established standards and are constantly being improved by experts to make sure your code is written in the best way possible."

Usefull Links

Did it help you? Like and Subscribe for more ^~
Enter fullscreen mode Exit fullscreen mode

Thanks for reading! Keep on learning!

Fernando JS Silva

Top comments (1)

Sloan, the sloth mascot
Comment deleted