Add Prettier and ESLint to Frontend Develop Branch
Closed this issue · 5 comments
Overview
As a developer, we need to ensure our code adheres to quality standards and remains maintainable. For this issue, we will configure Prettier and ESLint for the frontend to enforce consistent code formatting and identify any linting errors. This setup will help us keep our code clean and improve overall code quality.
Action Items
- Install Prettier for Dev env
- Install ESLint and configure it
- Create a script for both in package.json
Resources/Instructions
https://eslint.org/docs/latest/use/configure/
https://blog.logrocket.com/linting-typescript-eslint-prettier/
Next steps for linter after this PR #589 :
- add a linter plugin for tailwind
- resolve rest of linter errors
- maybe add linter settings for ts imports if necessary
@LoTerence, was there any specific rules you had in mind to enable on ESLint for TailwindCSS. I added this one "no-contradicting-classname" which looks for contradictions where class names fundamentally conflict or cancel each other out and this one "no-unnecessary-arbitrary-value" just in case Tailwind already has a style we wrote, ESLint and Tailwind Plugin will give an error.
If you had any more in mind lmk and I will add them :). Here's a few more: TailwindCSS rules
. I added this one "no-contradicting-classname" which looks for contradictions where class names fundamentally conflict or cancel each other out and this one "no-unnecessary-arbitrary-value" just in case Tailwind already has a style we wrote, ESLint and Tailwind Plugin will give an error.
Sounds good! Good choices. Thanks for taking the initiative on that :)
The only other rule I would add/make sure its turned on is classnames-order (link). But we can do that in a separate PR. What we have in 589 is already a lot of changes.
In a new PR, lets also add plugins for hooks and accessibility:
- Rules of Hooks:
eslint-plugin-react-hooks - JSX accessibility:
eslint-plugin-jsx-a11y
Let's separate this PR from the classnames-order PR if you decide to do it, to keep the diffs small.
Also forgot to mention - just for completeness, in a new PR could you quickly write up a page in the mkdocs for frontend developers explaining how your eslint configuration works so far?
It might be a good idea to recommend the prettier and eslint extensions for vscode if they don't have it installed already.
Links
- https://marketplace.visualstudio.com/items?itemName=IronGeek.vscode-env
- https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Feel free to use chatgpt to write it up. Thats what I've been doing 🙃