mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-12-10 19:32:32 -05:00
formatting
This commit is contained in:
Shreyaschorge
226
FORMATTING.md
Normal file
226
FORMATTING.md
Normal file
@@ -0,0 +1,226 @@
|
||||
# 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._
|
||||
Reference in New Issue
Block a user