Skip to main content

Best practice or way to use eslint/prettier in the project

Created
Active
Viewed 58 times
2 replies
0

As ESLint and Prettier are two popular or most used tools in the JavaScript ecosystem for code formatting and ensuring code quality through linting.

Here, I want to start a discussion to understand where it's best to integrate ESLint and Prettier ?

  • Directly within our IDEs for real-time development

  • Or with in our deployment workflows for consistency across the project

  • Or in both places

And above mentioned question is a scenario based, what would be the ideal setup if we have :

  1. Only one developer working on the frontend code?

  2. Multiple developers with different IDE setups collaborating on the same frontend code base?

2 replies

Sorted by:
78724786
1

If I talk about your second scenario first, then if only one developer is working on the frontend code consistency is less concerned as there’s no team to synchronize with.

Now, we come to the real scenario where multiple developers with different IDE setups require a uniform standard to maintain consistency across the project. Integrating both the IDE and development workflows provides the best result.

IMO, by integrating ESLint and Prettier at multiple points in the development workflow, we can achieve a high level of code quality and consistency, regardless of the number of developers or their IDE preferences.

There are a few ways you can find if seeking to maintain the code formatting and lining consistency across the project. All developers need to follow them before committing the code and apart from the IDE setup-

1. Configuration Files: You can use common configuration files (e.g., .eslintrc.json and .prettierrc) in the project root to ensure that all developers use the same settings.
2. NPM Scripts: Create npm scripts for running ESLint and Prettier, making it easier to integrate these tools into various parts of the workflow (e.g., npm run lint, npm run format).
3. Pre-commit Hooks: Implement pre-commit hooks to catch issues before they are committed. It will force all the developers to run the format and lint npm commands before committing the code.

There is a very good plugin outside named @antfu/eslint-config that has a thousand of rules available to provide the smooth consistency across development workflow. You can customise the rules accordingly.

To enforce that each developer runs those format and lint rules, as above mentioned pre-commit hooks are useful. You can configure your pre-commit hook in the git itself but if you prefer some sort of plugin, then husky again is a wonderful choice.

Those are my personal opinions based on my development experience. Please let le know if you find something to improve in this.

78725516
0
Author

Thanks Neha for the detailed explanation. Definitely it will help to improve the system.