# Contributing to File Preview
English | [็ฎไฝไธญๆ](./CONTRIBUTING.zh-CN.md)
Thank you for your interest in contributing to File Preview! This document provides guidelines and instructions for contributing.
---
## 
Table of Contents
- [Code of Conduct](#code-of-conduct)
- [Getting Started](#getting-started)
- [Development Workflow](#development-workflow)
- [Project Structure](#project-structure)
- [Coding Standards](#coding-standards)
- [Commit Guidelines](#commit-guidelines)
- [Pull Request Process](#pull-request-process)
- [Testing](#testing)
- [Documentation](#documentation)
---
## Code of Conduct
This project adheres to a code of conduct. By participating, you are expected to uphold this standard:
- Be respectful and inclusive
- Accept constructive criticism gracefully
- Focus on what is best for the community
- Show empathy towards other community members
---
## 
Getting Started
### Prerequisites
- Node.js >= 18
- pnpm >= 8
### Fork and Clone
1. Fork the repository on GitHub
2. Clone your fork locally:
```bash
git clone https://github.com/YOUR_USERNAME/file-preview.git
cd file-preview
```
3. Add upstream remote:
```bash
git remote add upstream https://github.com/wh131462/file-preview.git
```
### Install Dependencies
```bash
pnpm install
```
### Verify Setup
```bash
# Start React demo
pnpm dev
# Start Vue demo
pnpm dev:vue
# Start documentation site
pnpm dev:docs
```
---
## 
Development Workflow
### Create a Feature Branch
```bash
git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix
```
### Make Your Changes
1. Edit files in the appropriate package
2. Test your changes locally
3. Add tests if applicable
4. Update documentation if needed
### Build and Test
```bash
# Build all packages
pnpm build
# Build library only
pnpm build:lib
# Run linter
pnpm lint
# Run type checking
pnpm type-check
```
### Keep Your Branch Updated
```bash
git fetch upstream
git rebase upstream/master
```
---
## 
Project Structure
```
file-preview/
โโโ packages/
โ โโโ file-preview-core/ # Framework-agnostic core
โ โ โโโ src/
โ โ โ โโโ types/ # TypeScript type definitions
โ โ โ โโโ utils/ # Utility functions
โ โ โ โโโ loaders/ # File loaders and parsers
โ โ โโโ package.json
โ โ
โ โโโ react-file-preview/ # React bindings
โ โ โโโ src/
โ โ โ โโโ components/ # React components
โ โ โ โโโ renderers/ # File type renderers
โ โ โ โโโ hooks/ # Custom React hooks
โ โ โโโ package.json
โ โ
โ โโโ vue-file-preview/ # Vue bindings
โ โ โโโ src/
โ โ โ โโโ components/ # Vue components
โ โ โ โโโ composables/ # Vue composables
โ โ โโโ package.json
โ โ
โ โโโ example/ # React demo app
โ โโโ vue-example/ # Vue demo app
โ โโโ docs/ # VitePress documentation
โ
โโโ openspec/ # OpenSpec change records
โโโ pnpm-workspace.yaml
```
---
## 
Coding Standards
### TypeScript
- Use TypeScript for all new code
- Define proper types, avoid `any`
- Export public types from package entry points
### Code Style
- Follow existing code style
- Use ESLint configuration provided
- Run `pnpm lint` before committing
### Naming Conventions
- **Components**: PascalCase (e.g., `FilePreviewModal`)
- **Files**: PascalCase for components, camelCase for utilities
- **Variables/Functions**: camelCase
- **Constants**: UPPER_SNAKE_CASE
- **Types/Interfaces**: PascalCase
### Best Practices
- Keep components focused and single-purpose
- Extract reusable logic into hooks/composables
- Write self-documenting code with clear names
- Add comments for complex logic
- Avoid deep nesting (max 3 levels)
---
## 
Commit Guidelines
### Commit Message Format
Follow the [Conventional Commits](https://www.conventionalcommits.org/) specification:
```
():