Skip to content

Commit 5200478

Browse files
tenqztenqz
authored
Merge pull request #64 from tenqz/feature/linter-integration
FEAT: integrate linter to ci pipeline and fix all code quality issues
2 parents f00fd77 + 09fa299 commit 5200478

46 files changed

Lines changed: 1020 additions & 360 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/lint.yml‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
name: Lint
2+
3+
on:
4+
push:
5+
pull_request:
6+
7+
jobs:
8+
biome:
9+
name: Biome Linter
10+
runs-on: ubuntu-latest
11+
steps:
12+
- name: Checkout code
13+
uses: actions/checkout@v4
14+
15+
- name: Setup Node.js
16+
uses: actions/setup-node@v4
17+
with:
18+
node-version: '20'
19+
cache: 'npm'
20+
21+
- name: Install dependencies
22+
run: npm ci
23+
24+
- name: Run Biome linter
25+
run: npm run lint:biome
26+
27+
eslint:
28+
name: ESLint
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout code
32+
uses: actions/checkout@v4
33+
34+
- name: Setup Node.js
35+
uses: actions/setup-node@v4
36+
with:
37+
node-version: '20'
38+
cache: 'npm'
39+
40+
- name: Install dependencies
41+
run: npm ci
42+
43+
- name: Run ESLint
44+
run: npm run lint
45+
46+
typecheck:
47+
name: TypeScript Type Check
48+
runs-on: ubuntu-latest
49+
steps:
50+
- name: Checkout code
51+
uses: actions/checkout@v4
52+
53+
- name: Setup Node.js
54+
uses: actions/setup-node@v4
55+
with:
56+
node-version: '20'
57+
cache: 'npm'
58+
59+
- name: Install dependencies
60+
run: npm ci
61+
62+
- name: Run TypeScript type check
63+
run: npm run type-check
64+

‎.husky/pre-commit‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
npm run format
2+
npm run lint:biome
3+
npm run type-check

‎DEVELOPMENT.md‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
# Development Guide
2+
3+
This guide explains how to set up and work with the VideoSOS development environment.
4+
5+
## Prerequisites
6+
7+
- Docker and Docker Compose installed
8+
- Git
9+
10+
## Quick Start with Docker
11+
12+
1. Clone the repository:
13+
```bash
14+
git clone https://github.com/timoncool/videosos
15+
cd videosos
16+
```
17+
18+
2. Start the development environment:
19+
```bash
20+
make up
21+
```
22+
23+
3. Open [http://localhost:3000](http://localhost:3000)
24+
25+
## Available Commands
26+
27+
### Docker Commands
28+
29+
```bash
30+
make up # Start development environment
31+
make down # Stop development environment
32+
make restart # Restart development environment
33+
make logs # Show container logs
34+
make shell # Open shell in container
35+
```
36+
37+
### Code Quality Commands
38+
39+
All these commands run inside the Docker container:
40+
41+
```bash
42+
make lint # Run linters (Biome + ESLint)
43+
make format # Format code with Biome
44+
make type-check # Run TypeScript type checking
45+
make check # Run all checks (lint + type-check)
46+
```
47+
48+
### Build Commands
49+
50+
```bash
51+
make build # Build Next.js application
52+
make clean # Remove build artifacts
53+
```
54+
55+
## Development Workflow
56+
57+
### 1. Start Development Server
58+
59+
```bash
60+
make up
61+
```
62+
63+
The Next.js development server will start with hot-reload enabled.
64+
65+
### 2. Make Changes
66+
67+
Edit files in your IDE. Changes will be reflected immediately thanks to hot-reload.
68+
69+
### 3. Check Code Quality
70+
71+
Before committing, run:
72+
73+
```bash
74+
make check
75+
```
76+
77+
This will:
78+
- Run Biome linter and formatter
79+
- Run ESLint
80+
- Run TypeScript type checking
81+
82+
### 4. Format Code
83+
84+
To auto-format your code:
85+
86+
```bash
87+
make format
88+
```
89+
90+
### 5. Access Container Shell
91+
92+
If you need to run commands inside the container:
93+
94+
```bash
95+
make shell
96+
```
97+
98+
## Code Quality Tools
99+
100+
### Biome
101+
102+
Biome is our primary linter and formatter. It's fast and configured in `biome.json`.
103+
104+
Configuration:
105+
- Format style: 2 spaces, double quotes
106+
- Linting: recommended rules enabled
107+
- Auto-fix on save (when using `make lint`)
108+
109+
### ESLint
110+
111+
ESLint with Next.js config for additional React-specific checks.
112+
113+
### TypeScript
114+
115+
Strict type checking is enabled. Run `make type-check` to verify types.
116+
117+
## Pre-commit Hooks
118+
119+
Husky is configured to run formatting before each commit:
120+
- `.husky/pre-commit` - runs `npm run format`
121+
122+
## Troubleshooting
123+
124+
### Port 3000 already in use
125+
126+
```bash
127+
make down
128+
# Kill any process using port 3000
129+
make up
130+
```
131+
132+
### Container not starting
133+
134+
```bash
135+
make logs # Check logs for errors
136+
```
137+
138+
### Hot reload not working
139+
140+
Try restarting:
141+
```bash
142+
make restart
143+
```
144+
145+
### Clear caches
146+
147+
```bash
148+
make clean
149+
```
150+
151+
## Manual Development (without Docker)
152+
153+
If you prefer to run without Docker:
154+
155+
1. Install dependencies:
156+
```bash
157+
npm install
158+
```
159+
160+
2. Start dev server:
161+
```bash
162+
npm run dev
163+
```
164+
165+
3. Run checks:
166+
```bash
167+
npm run check
168+
```
169+
170+
## Environment Variables
171+
172+
API keys are stored in browser's localStorage. No `.env` file needed for development.
173+
174+
Configure your API keys in the app settings (gear icon).
175+
176+
## Contributing
177+
178+
Before submitting a PR:
179+
180+
1. Run `make check` to ensure code quality
181+
2. Test your changes locally
182+
3. Follow [CONTRIBUTING.md](CONTRIBUTING.md) guidelines
183+
4. Write atomic commits with clear messages
184+
185+
## Resources
186+
187+
- [Next.js Documentation](https://nextjs.org/docs)
188+
- [Biome Documentation](https://biomejs.dev)
189+
- [Remotion Documentation](https://remotion.dev)
190+

‎Makefile‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.PHONY: help up down restart logs shell install lint format type-check check build clean
2+
3+
# Docker Compose service name
4+
SERVICE = app
5+
6+
# Help command
7+
help:
8+
@echo "VideoSOS Development Commands"
9+
@echo ""
10+
@echo "Docker Commands:"
11+
@echo " make up - Start development environment"
12+
@echo " make down - Stop development environment"
13+
@echo " make restart - Restart development environment"
14+
@echo " make logs - Show container logs"
15+
@echo " make shell - Open shell in container"
16+
@echo ""
17+
@echo "Development Commands:"
18+
@echo " make install - Install dependencies"
19+
@echo " make lint - Run linters (biome + eslint)"
20+
@echo " make format - Format code with biome"
21+
@echo " make type-check - Run TypeScript type checking"
22+
@echo " make check - Run all checks (lint + type-check)"
23+
@echo " make build - Build Next.js application"
24+
@echo ""
25+
@echo "Utility Commands:"
26+
@echo " make clean - Remove build artifacts and caches"
27+
28+
# Docker commands
29+
up:
30+
docker compose up -d
31+
32+
down:
33+
docker compose down
34+
35+
restart:
36+
docker compose restart
37+
38+
logs:
39+
docker compose logs -f $(SERVICE)
40+
41+
shell:
42+
docker compose exec $(SERVICE) sh
43+
44+
# Development commands (run inside Docker)
45+
install:
46+
docker compose exec $(SERVICE) npm ci
47+
48+
lint:
49+
@echo "Running Biome linter..."
50+
docker compose exec $(SERVICE) npx biome check --write .
51+
@echo "Running ESLint..."
52+
docker compose exec $(SERVICE) npm run lint
53+
54+
format:
55+
@echo "Formatting code with Biome..."
56+
docker compose exec $(SERVICE) npm run format
57+
58+
type-check:
59+
@echo "Running TypeScript type check..."
60+
docker compose exec $(SERVICE) npx tsc --noEmit
61+
62+
check: lint type-check
63+
@echo "All checks passed!"
64+
65+
build:
66+
@echo "Building Next.js application..."
67+
docker compose exec $(SERVICE) npm run build
68+
69+
# Utility commands
70+
clean:
71+
@echo "Cleaning build artifacts..."
72+
docker compose exec $(SERVICE) rm -rf .next
73+
docker compose exec $(SERVICE) rm -rf node_modules/.cache
74+
@echo "Clean complete!"
75+

‎biome.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,14 @@
2020
"linter": {
2121
"enabled": true,
2222
"rules": {
23-
"recommended": true
23+
"recommended": true,
24+
"suspicious": {
25+
"noExplicitAny": "off"
26+
},
27+
"a11y": {
28+
"noNoninteractiveElementToInteractiveRole": "off",
29+
"useSemanticElements": "warn"
30+
}
2431
}
2532
},
2633
"javascript": {

0 commit comments

Comments
 (0)