Initial Setup: ESLint, Husky, Prettier, Sass, and State Management (@legendapp/state)

[ansopedia]

Description

This is the first task for setting up a new Next.js project. It involves installing and configuring various tools for code linting, formatting, pre-commit hooks, styling, and state management.

Tasks:

1. Linting and Formatting:
   • Install ESLint and Prettier.
   • Configure ESLint with a recommended preset (e.g., eslint-config-airbnb) and adjust rules as needed.
   • Integrate Prettier with ESLint to ensure consistent formatting.
2. Pre-commit Hooks:
   • Install Husky to manage pre-commit hooks.
   • Set up pre-commit hooks to run ESLint and Prettier before commits.
3. Styling:
   • Install Sass for preprocessor-based styling.
   • Configure Sass to compile SCSS files into CSS.
4. State Management:
   • Install @legendapp/state for state management.
   • Provide basic configuration for using @legendapp/state within the project.

Expected Outcome:

• Code linting and formatting happen automatically before commits.
• Developers can write SCSS for styling.
• State management is set up using @legendapp/state.

Additional Information:

• Next.js version: 14.1.4 (or specify the version used)
• Package manager: pnpm (or specify the one used)

This initial setup will improve code quality, maintain consistency, and streamline development workflow for the Ansopedia web-app project.