Setup ESLint and Prettier for Nest Frontend

[arkid15r]

This task aims to set up ESLint and Prettier for the frontend of our monorepo, which is a React-based application. Proper linting and formatting will ensure consistent code quality and styling across the project.

Tasks

1. Install Dependencies

   • Add ESLint and Prettier along with necessary plugins for TypeScript and React.

     npm install eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

2. Setup ESLint

   • Create an .eslintrc or eslint.config.js file with the following configuration:

     {
       "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:react-hooks/recommended",
         "plugin:@typescript-eslint/recommended",
         "prettier"
       ],
       "parser": "@typescript-eslint/parser",
       "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
       "env": {
         "browser": true,
         "node": true,
         "es6": true
       },
       "rules": {
         "prettier/prettier": ["error"]
       },
       "settings": {
         "react": {
           "version": "detect"
         }
       }
     }

3. Setup Prettier

   • Create a .prettierrc file with the following configuration:

     {
       "singleQuote": true,
       "semi": true,
       "trailingComma": "es5",
       "printWidth": 80
     }

   • Add a .prettierignore file to exclude certain files:

     node_modules
     build
     dist
     

4. Add Lint and Format Scripts

   • Update package.json in the frontend package with the following scripts:

     {
       "scripts": {
         "lint": "eslint 'src/**/*.{ts,tsx}'",
         "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
         "format": "prettier --write 'src/**/*.{ts,tsx}'",
         "format:check": "prettier --check 'src/**/*.{ts,tsx}'"
       }
     }

5. Integrate Pre-Commit Hook

   • Add Husky and lint-staged to enforce linting and formatting on staged files:

     npm install husky lint-staged --save-dev

   • Set up Husky pre-commit hook:

     npx husky install
     npx husky add .husky/pre-commit "npx lint-staged"

   • Add lint-staged configuration to package.json:

     {
       "lint-staged": {
         "*.ts": ["eslint --fix", "prettier --write"],
         "*.tsx": ["eslint --fix", "prettier --write"]
       }
     }

6. Verify Setup

   • Test the configuration by running linting and formatting commands:

     npm run lint
     npm run format

7. Update Documentation

   • Add a section in the README about linting and formatting setup, including instructions for usage.

Acceptance Criteria

• ESLint and Prettier are installed and configured for the frontend package.
• Linting and formatting commands are working as expected.
• Husky pre-commit hook enforces linting and formatting.
• Documentation is updated.

---

Feel free to suggest additional configurations or improvements!

[arkid15r]

There is a good example of how it can be done -- https://github.com/actions/typescript-action/

[Yashgupta9330]

/assign

[tsu-ki]

@Yashgupta9330 can you please unassign yourself, as @arkid15r couldn't directly assign it to me due to some github glitch. thank you!

[arkid15r]

@Yashgupta9330 could you focus on jest setup and let @tsu-ki work on this one?
Thank you!

[Yashgupta9330]

Yes, I can focus on setting up Jest for the project. I'll handle that, and @tsu-ki can work on this task. Thank you!

[arkid15r]

@tsu-ki how is it going with getting this one done? We're pretty close to the point where we want to assemble different parts of the new frontend into one piece and the code quality tools are much needed there.

[yashpandey06]

@tsu-ki do we have any updates on this ?

[tsu-ki]

@arkid15r @yashpandey06 I'm working on it and should be done by tomorrow, I was busy with college exams so couldn't get it done earlier

[yashpandey06]

@tsu-ki great ! best of luck !