diff --git a/DEV-SETUP.md b/DEV-SETUP.md deleted file mode 100644 index 2a98b25..0000000 --- a/DEV-SETUP.md +++ /dev/null @@ -1,144 +0,0 @@ -# Development Setup Solutions - -## Issue 1: Running NPX Template as Development Project - -### Problem - -The template project uses `devDependencies` that aren't installed when developing the template itself, causing TypeScript and linting errors. - -### Solution - -We've installed the core dependencies needed for local development: - -```bash -# Already installed: -npm install --save-dev next@^15.0.0 react@^18.0.0 react-dom@^18.0.0 @types/react@^18.0.0 @types/react-dom@^18.0.0 -npm install --save-dev next-auth wagmi viem @tanstack/react-query clsx tailwind-merge tailwindcss @radix-ui/react-label class-variance-authority zod -``` - -### Development Commands - -For development of the template itself, use these commands: - -```bash -# Type checking (excluding Farcaster-specific modules) -npx tsc --project tsconfig.dev.json --noEmit - -# Format check -npm run format:check - -# Format all files -npm run format - -# Lint check -npm run lint:check - -# Development check (combines type-check:dev, lint:check, format:check) -npm run check:dev -``` - -### Notes: - -- `tsconfig.dev.json` excludes some Farcaster-specific files that depend on SDK packages not available in devDependencies -- This is normal for an npx template - the full dependencies are installed when users create new projects -- For template development, focus on code structure, formatting, and basic TypeScript validation - -## Issue 2: Prettier Formatting Discrepancy - -### Problem - -VS Code Prettier extension might format differently than the `npm run format` command due to: - -1. VS Code using cached or global Prettier settings -2. Extension not properly reading the project's `.prettierrc` -3. EditorConfig interference - -### Solution Applied - -1. **Updated VS Code settings** (`.vscode/settings.json`): - - ```json - { - "prettier.requireConfig": true, - "prettier.useEditorConfig": false, - "prettier.configPath": ".prettierrc", - "editor.formatOnPaste": false, - "editor.codeActionsOnSave": { - "source.organizeImports": "never" - } - } - ``` - -2. **Explicit Prettier configuration** (`.prettierrc`): - - All settings are explicitly defined - - No reliance on defaults - -### Testing the Fix - -1. **Check if formatting is consistent**: - - ```bash - npm run format:check - ``` - -2. **Format all files**: - - ```bash - npm run format - ``` - -3. **Test VS Code formatting**: - - Open any file - - Make a small change - - Save (should auto-format) - - Run `npm run format:check` to verify consistency - -### Additional Troubleshooting - -If formatting issues persist: - -1. **Reload VS Code**: `Cmd+Shift+P` → "Developer: Reload Window" - -2. **Clear Prettier cache**: - - ```bash - # Remove prettier cache if it exists - rm -rf node_modules/.cache/prettier - ``` - -3. **Verify Prettier extension is using project config**: - - In VS Code, open Output panel - - Select "Prettier" from dropdown - - Look for "Using config file at: .prettierrc" - -4. **Manual format test**: - - ```bash - # Format a specific file manually - npx prettier --write src/components/App.tsx - - # Check if it matches npm run format - npm run format:check - ``` - -## Development Workflow - -### For Template Development: - -1. Use `npm run check:dev` for validation -2. Use `npm run format` for formatting -3. Focus on structure and basic functionality - -### For Template Users: - -1. Full dependencies are installed automatically -2. All scripts work normally: `npm run check`, `npm run format`, etc. -3. Complete TypeScript validation available - -### Key Files Created/Modified: - -- `tsconfig.dev.json` - Development-specific TypeScript config -- `.vscode/settings.json` - Updated with explicit Prettier settings -- `package.json` - Added development scripts (if npm cache allows) - -The template is now ready for both development and end-user consumption! 🚀 diff --git a/FORMATTING.md b/FORMATTING.md deleted file mode 100644 index a388482..0000000 --- a/FORMATTING.md +++ /dev/null @@ -1,226 +0,0 @@ -# Formatting and Code Style Guide - -This project uses a comprehensive set of tools to ensure consistent code formatting and quality across the entire codebase. - -## Tools Configured - -### 🎨 **Prettier** - Code Formatter - -- Automatically formats JavaScript, TypeScript, CSS, JSON, and Markdown files -- Configuration: `.prettierrc` -- Ignore patterns: `.prettierignore` - -### 🔍 **ESLint** - Linter and Code Quality - -- Enforces code quality rules and catches potential bugs -- Configuration: `.eslintrc.json` -- Ignore patterns: `.eslintignore` - -### ⚙️ **EditorConfig** - Cross-Editor Consistency - -- Ensures consistent indentation and line endings across different editors -- Configuration: `.editorconfig` - -### 🔧 **VS Code Settings** - -- Pre-configured workspace settings for optimal development experience -- Configuration: `.vscode/settings.json` -- Recommended extensions: `.vscode/extensions.json` - -## Quick Start - -### Installation - -When you create a new project using this template, all formatting tools are already configured. Simply run: - -```bash -npm install -``` - -### Available Scripts - -#### Formatting - -```bash -npm run format # Format all files with Prettier -npm run format:check # Check if files are properly formatted -npm run format:fix # Format files and fix ESLint issues -``` - -#### Linting - -```bash -npm run lint # Run ESLint -npm run lint:fix # Run ESLint and auto-fix issues -npm run lint:check # Run ESLint with zero warnings tolerance -``` - -#### Type Checking - -```bash -npm run type-check # Run TypeScript compiler without emitting files -``` - -#### Combined Checks - -```bash -npm run check # Run type-check, lint:check, and format:check -``` - -## Editor Setup - -### VS Code (Recommended) - -1. Install recommended extensions when prompted -2. Formatting and linting will work automatically on save -3. Key extensions: - - **Prettier**: Code formatter - - **ESLint**: Linting and error detection - - **EditorConfig**: Consistent editor settings - -### Other Editors - -- **WebStorm/IntelliJ**: Built-in support for Prettier and ESLint -- **Vim/Neovim**: Use appropriate plugins for Prettier and ESLint -- **Emacs**: Configure with prettier-js and flycheck-eslint - -## Configuration Details - -### Prettier Configuration (`.prettierrc`) - -```json -{ - "semi": true, - "trailingComma": "es5", - "singleQuote": true, - "printWidth": 80, - "tabWidth": 2, - "useTabs": false, - "bracketSpacing": true, - "bracketSameLine": false, - "arrowParens": "avoid", - "endOfLine": "lf" -} -``` - -### Key ESLint Rules - -- TypeScript and React best practices -- Prettier integration (no conflicts) -- Async/await safety rules -- Import organization -- Console warnings (allows warn/error) - -### EditorConfig Settings - -- 2-space indentation for most files -- LF line endings -- UTF-8 encoding -- Trim trailing whitespace -- Insert final newline - -## Git Hooks (Optional) - -You can set up pre-commit hooks using `husky` and `lint-staged`: - -```bash -npm install --save-dev husky lint-staged -npx husky install -npx husky add .husky/pre-commit "npx lint-staged" -``` - -The project includes a `.lintstagedrc` configuration that will: - -- Run ESLint and Prettier on staged JS/TS files -- Run Prettier on staged JSON, CSS, and Markdown files - -## Team Guidelines - -### Before Committing - -1. Run `npm run check` to ensure code quality -2. Fix any linting errors or formatting issues -3. Commit your changes - -### Pull Request Requirements - -- All checks must pass -- Code must be properly formatted -- No ESLint warnings or errors -- TypeScript compilation must succeed - -### Customization - -If you need to modify the formatting rules: - -1. **Prettier**: Edit `.prettierrc` -2. **ESLint**: Edit `.eslintrc.json` -3. **EditorConfig**: Edit `.editorconfig` - -Remember to discuss any changes with your team first! - -## Troubleshooting - -### Common Issues - -#### "Prettier and ESLint conflict" - -- This shouldn't happen as we use `eslint-config-prettier` -- If it does, check that Prettier rules come last in ESLint extends - -#### "Format on save not working" - -- Ensure Prettier extension is installed and enabled -- Check VS Code settings for `editor.formatOnSave: true` -- Verify the file type is in ESLint validation array - -#### "TypeScript errors in JavaScript files" - -- Check file extension (.js vs .ts) -- Verify ESLint overrides for JavaScript files - -#### "Formatting different in CI vs local" - -- Ensure same Node.js version -- Check line ending settings (LF vs CRLF) -- Verify Prettier version consistency - -### Getting Help - -- Check the documentation for [Prettier](https://prettier.io/) -- Check the documentation for [ESLint](https://eslint.org/) -- Review [Next.js ESLint configuration](https://nextjs.org/docs/basic-features/eslint) - -## Best Practices - -### File Organization - -- Keep configuration files in project root -- Use meaningful names for custom ESLint rules -- Group related imports together - -### Code Style - -- Use meaningful variable names -- Prefer `const` over `let` when possible -- Use template literals for string interpolation -- Keep functions small and focused -- Add JSDoc comments for complex functions - -### React Specific - -- Use functional components with hooks -- Prefer explicit prop types (TypeScript interfaces) -- Use meaningful component names -- Keep components focused on single responsibility - -### TypeScript - -- Enable strict mode -- Use proper types instead of `any` -- Leverage type inference where appropriate -- Use proper generic constraints - ---- - -_This formatting guide is automatically included with every new project created from this template._