mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-16 08:08:56 -05:00
Remove AI generated docs
This commit is contained in:
Shreyaschorge
parent
2a1a3d7c40
commit
6b0350d477
144
DEV-SETUP.md
144
DEV-SETUP.md
@ -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! 🚀
|
||||
226
FORMATTING.md
226
FORMATTING.md
@ -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._
|
||||
Loading…
x
Reference in New Issue
Block a user