Fixed #88 -- Enhanced ESLint Configuration and improved Code Quality

[SureshPradhana]

Closes #88

Summary

Enhance ESLint rules to align with coding standards and improve code quality.

Changes

• Add ESLint rules: Implement coding standards for ESLint.
• Configure Tailwind CSS: Include lint rules specific to Tailwind CSS and update .eslintrc.json.
• Implement import sorting: Add rules for sorting imports and using type prefixes for importing types.
• Enforce variable naming: Apply camelCase naming conventions for variables (currently unresolved).
• Add plugins: Integrate relevant ESLint plugins.
• Fix ESLint errors: Address errors across the frontend codebase (commit IDs: 68a0066, 5168fb4, 0a6f8ce).

---

Type of change

• Bug fix
• Feature update
• Breaking change
• Documentation update

Flags

• CamelCase Naming: Unresolved camelCase naming conventions across the project; may cause potential issues.
• Consider implementing ESLint warnings as a pre-commit hook to enforce code quality.

Demo

• No visual changes; focuses on code quality improvements.

How has this been tested?

• Ran ESLint with new rules to ensure no new warnings or errors.

Author Checklist

• Code has been commented, particularly in hard-to-understand areas
• Changes generate no new warnings
• Vital changes have been captured in unit and/or integration tests
• New and existing unit tests pass locally with my changes
• Documentation has been extended, if necessary
• Merging to main from fork:branchname

Additional context

• Addressing camelCase naming conventions may impact existing code.
• Consider implementing ESLint warnings as a pre-commit hook to enforce code quality.

[SureshPradhana]

This is still giving conflict warnings. I need to check it again.

[Saurabhsharma884]

Also add rule to disallow imports from @/* like it should not have /

[Saurabhsharma884]

Is this PR ready for review ? @SureshPradhana

[SureshPradhana]

The rule requires camelCase for general naming, but React components use PascalCase, which creates a conflict. For components, PascalCase should be used, while camelCase applies to other names. Additionally, there are some ESLint warnings that need to be fixed before this is ready for review. A custom ESLint plugin is also needed to restrict imports from @/* with a / as there no default's.

[SureshPradhana]

@Saurabhsharma884 updated the ESLint rules to avoid using @/*, and the rules for camelCase and PascalCase are conflicting due to React component naming conventions. The rules are either camelCase or PascalCase for variables and functions

[Saurabhsharma884]

@SureshPradhana Can you please rebase/resolve conflicts in this branch ?

[SureshPradhana]

@Saurabhsharma884 updated

[Saurabhsharma884]

@Saurabhsharma884 updated

Sorry, missed this. Can you please update again?

[SureshPradhana]

@Saurabhsharma884 This might take some time to complete, but I'm working on it.

[Saurabhsharma884]

@Saurabhsharma884 This might take some time to complete, but I'm working on it.

Sure, thanks for that but there has been a major upgrade to eslint v9 which supports flat config only but there has been multiple issues floating on github regarding its compatibility with plugins so we should wait for sometime and let those issues get resolved. we can upgrade to eslint v9 after that.

[Saurabhsharma884]

Changes are picked #234. Hence, closing this MR. Thanks @SureshPradhana