The How - ESLint Quick Install
- Open a node terminal in the same folder of your package.json file
- Check if you have are using node version 14 or greater
- Run: npm install --global yarn
- Run: yarn add eslint -D
- Run: yarn eslint --init
- Choose the options:
- To check syntax, find problems, and enforce code style
- JavaScript modules (import/export)
- React
- No
- Browser
- Use a popular style guide
- Airbnb
- JSON
- Yes
- Yarn
- Copy this code to the content of your .elsintrcjson file
- Run: yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
- Create the a .prettierrc.json in the same folder of your package.json file
- Copy this code to the content of your .prettierrc.json file
- Create the .vscode folder
- Create a settings.json file inside the .vscode folder
- Copy this code to the content of your settings.json file
- Add the editorconfig plugin into your code editor
- Create a .editorconfig file
- Copy this code to the content of your editorconfig file
- 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
Top comments (1)