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

• Node Download Link: https://nodejs.org/en/download/
• ESlint Getting started: https://eslint.org/docs/latest/use/getting-started
• Prettier Options: https://prettier.io/docs/en/options.html
• Editor Config: https://editorconfig.org/
• Configuration files: https://gitlab.com/-/snippets/2491049

Did it help you? Like and Subscribe for more ^~

Thanks for reading! Keep on learning!

Fernando JS Silva