refactor(tooling,client): add html-eslint/react and fix lint errors (freeCodeCamp#66015)

Author: yeonjuan

client/src/components/Donation/donate-form.tsx

@@ -112,7 +112,7 @@ const mapDispatchToProps = {
 
 const PaymentButtonsLoader = () => {
   return (
-    <div className=' donation-completion donation-completion-loading'>
+    <div className='donation-completion donation-completion-loading'>
       <Spinner
         className='script-loading-spinner'
         fadeIn='none'

client/src/templates/Challenges/components/independent-lower-jaw.tsx

@@ -203,7 +203,7 @@ export function IndependentLowerJaw({
               ref={submitButtonRef}
             >
               {t('buttons.submit-continue')}
-              <span className='tooltiptext left-tooltip '>
+              <span className='tooltiptext left-tooltip'>
                 {checkButtonText}
               </span>
             </Button>
@@ -215,7 +215,7 @@ export function IndependentLowerJaw({
               onClick={handleCheckButtonClick}
             >
               {t('buttons.check-code')}
-              <span className='tooltiptext left-tooltip '>
+              <span className='tooltiptext left-tooltip'>
                 {checkButtonText}
               </span>
             </button>

packages/eslint-config/base.js

@@ -12,6 +12,7 @@ import importPlugin from 'eslint-plugin-import';
 import testingLibraryPlugin from 'eslint-plugin-testing-library';
 import babelParser from '@babel/eslint-parser'; // TODO: can we get away from using babel?
 import turbo from 'eslint-plugin-turbo';
+import htmlReact from '@html-eslint/eslint-plugin-react';
 
 import { FlatCompat } from '@eslint/eslintrc';
 
@@ -131,7 +132,17 @@ export const configReact = [
     compat.extends(
       'plugin:react-hooks/recommended' // Note: at time of testing, upgrading to v5 creates false positives
     )
-  )
+  ),
+  {
+    plugins: {
+      '@html-eslint/react': htmlReact
+    },
+    rules: {
+      '@html-eslint/react/no-duplicate-classname': 'error',
+      '@html-eslint/react/classname-spacing': 'error',
+      '@html-eslint/react/no-ineffective-attrs': 'error'
+    }
+  }
 ];
 
 export const configTestingLibrary = defineConfig({

packages/eslint-config/package.json

@@ -15,6 +15,7 @@
     "@eslint/compat": "^1.2.6",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
+    "@html-eslint/eslint-plugin-react": "^0.57.0",
     "@vitest/eslint-plugin": "^1.4.3",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "10.0.1",