Code Quality Skills

Overview

Code quality practices for writing clean, maintainable, and reliable code. These skills cover linting, static analysis, refactoring, naming conventions, documentation, and best practices.

Quality Metrics

Metric	Good	Warning	Bad
Cyclomatic Complexity	< 10	10-20	> 20
Function Length	< 20 lines	20-50	> 50
File Length	< 300 lines	300-500	> 500
Nesting Depth	< 3	3-4	> 4
Code Coverage	> 80%	60-80%	< 60%
Duplicate Code	< 3%	3-5%	> 5%
Technical Debt Ratio	< 5%	5-10%	> 10%

Categories

Linting

Automated code style enforcement and error detection:

• ESLint - JavaScript/TypeScript linting
• Prettier - Code formatting
• Stylelint - CSS/SCSS linting
• lint-staged - Pre-commit linting

Static Analysis

Deep code analysis beyond linting:

• TypeScript Strict Mode - Maximum type safety
• SonarQube - Comprehensive analysis platform
• Code Coverage - Test coverage metrics

Refactoring

Code improvement techniques:

• Code Smells - Identifying problematic patterns
• Refactoring Techniques - Systematic improvements
• Extract Method - Breaking down functions
• When to Refactor - Decision framework

Naming

Clear and consistent naming:

• Naming Conventions - Project-wide standards
• Variable Naming - Descriptive identifiers
• Function Naming - Action-oriented names

Documentation

In-code documentation:

• Code Comments - When and how to comment
• JSDoc/TSDoc - Type documentation
• README Standards - Project documentation

Practices

Development best practices:

• Clean Code Principles - Foundational concepts
• Code Review Checklist - Review guidelines
• Technical Debt - Managing and reducing debt
• Boy Scout Rule - Continuous improvement

Quality Gates Integration

# .f5/quality/code-quality-gate.yaml
code_quality_gate:
  name: "Code Quality Standards"
  metrics:
    lint_errors: 0
    lint_warnings: 10
    complexity_max: 15
    coverage_min: 80
    duplication_max: 3

  checks:
    - eslint --max-warnings 0
    - tsc --noEmit
    - jest --coverage --coverageThreshold='{"global":{"lines":80}}'

Tool Stack

Tool	Purpose	Configuration
ESLint	Linting	eslint.config.js
Prettier	Formatting	.prettierrc
TypeScript	Type checking	tsconfig.json
Jest	Testing/Coverage	jest.config.js
Husky	Git hooks	.husky/
lint-staged	Pre-commit	package.json

Quick Setup

# Install core tools
npm install -D eslint prettier typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Install formatting
npm install -D eslint-config-prettier eslint-plugin-prettier

# Install git hooks
npm install -D husky lint-staged
npx husky init

# Configure lint-staged
npm pkg set lint-staged='{"*.{ts,tsx}":["eslint --fix","prettier --write"]}'

Related Skills

• Testing - Test-driven quality
• Security - Secure coding practices
• Performance - Performance optimization
• Architecture - Structural quality