TypeScript Quality Checker Skill

Purpose

This skill provides comprehensive TypeScript/JavaScript code quality validation including formatting (Prettier), linting (ESLint), type checking (tsc), security analysis (npm audit), and code complexity analysis. Ensures code meets TypeScript best practices and project standards.

When to Use

Validating TypeScript/JavaScript code quality before commit
Running pre-commit quality checks
CI/CD quality gate validation
Code review preparation
Ensuring code style compliance
Type safety validation
Security vulnerability detection in dependencies

Quality Check Workflow

1. Environment Setup

Verify Tools Installed:

bash

# Check Node.js and npm versions
node --version
npm --version

# Check TypeScript compiler
npx tsc --version

# Check quality tools
npx eslint --version
npx prettier --version

Install Development Dependencies:

bash

# Install all dev dependencies
npm install --save-dev

# Or install quality tools specifically
npm install --save-dev \
  typescript \
  eslint \
  prettier \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-config-prettier \
  eslint-plugin-prettier

Deliverable: Quality tools ready

2. Code Formatting Check (Prettier)

Check Formatting:

bash

# Check if code is formatted
npx prettier --check "src/**/*.{ts,tsx,js,jsx,json,css,md}"

# Check specific files
npx prettier --check src/index.ts

# Check with detailed output
npx prettier --check --log-level debug "src/**/*.ts"

Auto-Format Code:

bash

# Format all code
npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,md}"

# Format specific directory
npx prettier --write "src/components/**/*.tsx"

# Check what would change (dry run)
npx prettier --check --list-different "src/**/*.ts"

Configuration (.prettierrc.json):

json

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

.prettierignore:

node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json

Deliverable: Formatting validation report

3. Type Checking (TypeScript Compiler)

Run Type Checks:

bash

# Check types
npx tsc --noEmit

# Check with specific config
npx tsc --noEmit --project tsconfig.json

# Check and show all errors
npx tsc --noEmit --pretty

# Incremental type checking
npx tsc --noEmit --incremental

Watch Mode for Development:

bash

# Watch and type check continuously
npx tsc --noEmit --watch

# With specific project
npx tsc --noEmit --watch --project tsconfig.json

Configuration (tsconfig.json):

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

Deliverable: Type checking report

4. Linting (ESLint)

Run ESLint:

bash

# Lint entire codebase
npx eslint "src/**/*.{ts,tsx,js,jsx}"

# Lint with auto-fix
npx eslint "src/**/*.{ts,tsx,js,jsx}" --fix

# Lint with detailed output
npx eslint "src/**/*.{ts,tsx,js,jsx}" --format=stylish

# Generate HTML report
npx eslint "src/**/*.{ts,tsx,js,jsx}" --format=html --output-file=eslint-report.html

Check Specific Rules:

bash

# Check for unused variables
npx eslint "src/**/*.ts" --rule '@typescript-eslint/no-unused-vars: error'

# Check complexity
npx eslint "src/**/*.ts" --rule 'complexity: ["error", 10]'

# Check max lines
npx eslint "src/**/*.ts" --rule 'max-lines: ["error", 500]'

Configuration (.eslintrc.json):

json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-unused-vars": ["error", {
      "argsIgnorePattern": "^_"
    }],
    "complexity": ["error", 10],
    "max-lines": ["error", 500],
    "max-lines-per-function": ["error", 50],
    "no-console": ["warn", {
      "allow": ["warn", "error"]
    }]
  },
  "ignorePatterns": ["dist/", "build/", "node_modules/", "*.config.js"]
}

Deliverable: Linting report

5. Security Analysis

npm Audit:

bash

# Check for vulnerabilities
npm audit

# Detailed audit
npm audit --json

# Production dependencies only
npm audit --production

# Fix vulnerabilities
npm audit fix

# Fix including breaking changes
npm audit fix --force

Check for Outdated Packages:

bash

# List outdated packages
npm outdated

# Check specific package
npm outdated typescript

# Update packages
npm update

Dependency License Check:

bash

# Install license checker
npm install --save-dev license-checker

# Check licenses
npx license-checker --summary

# Exclude specific licenses
npx license-checker --exclude "MIT,Apache-2.0"

Deliverable: Security analysis report

6. Code Complexity Analysis

ESLint Complexity Rules:

bash

# Check cyclomatic complexity
npx eslint "src/**/*.ts" --rule 'complexity: ["error", 10]'

# Check max depth
npx eslint "src/**/*.ts" --rule 'max-depth: ["error", 4]'

# Check max nested callbacks
npx eslint "src/**/*.ts" --rule 'max-nested-callbacks: ["error", 3]'

TypeScript-Specific Complexity:

bash

# Install complexity tool
npm install --save-dev ts-complex

# Analyze complexity
npx ts-complexity src/

Deliverable: Complexity analysis report

7. Import/Export Validation

Check Unused Exports:

bash

# Install ts-prune
npm install --save-dev ts-prune

# Find unused exports
npx ts-prune

# Exclude specific files
npx ts-prune --ignore "index.ts"

Check Import Order:

bash

# Install eslint-plugin-import
npm install --save-dev eslint-plugin-import

# Add to .eslintrc.json
{
  "plugins": ["import"],
  "rules": {
    "import/order": ["error", {
      "groups": [
        "builtin",
        "external",
        "internal",
        "parent",
        "sibling",
        "index"
      ],
      "newlines-between": "always"
    }]
  }
}

Deliverable: Import validation report

8. Comprehensive Quality Check

Run All Checks:

bash

#!/bin/bash
# scripts/quality-check.sh

set -e  # Exit on first error

echo "=== TypeScript Quality Checks ==="

echo "1. Code Formatting (Prettier)..."
npx prettier --check "src/**/*.{ts,tsx,js,jsx}"

echo "2. Type Checking (tsc)..."
npx tsc --noEmit

echo "3. Linting (ESLint)..."
npx eslint "src/**/*.{ts,tsx}" --max-warnings=0

echo "4. Security Audit..."
npm audit --production

echo "5. Unused Exports..."
npx ts-prune || true  # Don't fail on unused exports

echo "=== All Quality Checks Passed ✅ ==="

package.json Scripts:

json

{
  "scripts": {
    "lint": "eslint 'src/**/*.{ts,tsx}' --max-warnings=0",
    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
    "format": "prettier --write 'src/**/*.{ts,tsx,json,css,md}'",
    "format:check": "prettier --check 'src/**/*.{ts,tsx,json,css,md}'",
    "type-check": "tsc --noEmit",
    "quality": "npm run format:check && npm run type-check && npm run lint",
    "test": "jest",
    "test:coverage": "jest --coverage"
  }
}

Deliverable: Comprehensive quality report

Quality Standards

Code Formatting

All code formatted with Prettier
Consistent use of semicolons
Consistent quote style (single/double)
Trailing commas in multiline
Line length ≤ 100 characters

Type Checking

All functions have return types
No implicit
```
any
```
types
Strict null checks enabled
No unused parameters
No unused variables

Linting

No ESLint errors
Max warnings: 0
Complexity ≤ 10 per function
Max lines ≤ 500 per file
Imports properly ordered

Security

No critical vulnerabilities
No high-severity vulnerabilities
Dependencies up to date
Licenses compliant
No hardcoded secrets

Code Quality

Functions < 50 lines
Files < 500 lines
Max nesting depth: 4
Cyclomatic complexity < 10
No unused exports

Quality Check Matrix

Check	Tool	Threshold	Auto-Fix
Formatting	Prettier	Must pass	Yes
Type checking	tsc	0 errors	No
Linting	ESLint	0 errors	Partial
Security	npm audit	0 critical	Partial
Complexity	ESLint	≤ 10	No
Unused exports	ts-prune	Warning only	No

Pre-commit Integration

Setup Husky and lint-staged:

bash

# Install tools
npm install --save-dev husky lint-staged

# Initialize husky
npx husky-init && npm install

# Add pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

Configuration (package.json):

json

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "tsc-files --noEmit"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

Deliverable: Pre-commit hooks configured

CI/CD Integration

GitHub Actions Example:

yaml

# .github/workflows/quality.yml
name: TypeScript Quality Checks

on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Check formatting
        run: npm run format:check

      - name: Type checking
        run: npm run type-check

      - name: Linting
        run: npm run lint

      - name: Security audit
        run: npm audit --production --audit-level=high

      - name: Run tests
        run: npm test

      - name: Check coverage
        run: npm run test:coverage

Deliverable: CI/CD quality pipeline

Quality Check Troubleshooting

Prettier Formatting Failures

bash

# Check what would change
npx prettier --check --list-different "src/**/*.ts"

# Apply fixes
npx prettier --write "src/**/*.ts"

# Check specific file
npx prettier --check src/index.ts

TypeScript Type Errors

bash

# Show detailed errors
npx tsc --noEmit --pretty

# Check specific file
npx tsc --noEmit src/component.tsx

# Skip lib check (faster)
npx tsc --noEmit --skipLibCheck

ESLint Violations

bash

# Show detailed violations
npx eslint "src/**/*.ts" --format=stylish

# Auto-fix safe violations
npx eslint "src/**/*.ts" --fix

# Ignore specific line (last resort)
// eslint-disable-next-line rule-name

npm Audit Issues

bash

# Show detailed audit
npm audit --json

# Fix non-breaking changes
npm audit fix

# Override (use with caution)
npm audit fix --force

Quality Report Template

markdown

# TypeScript Quality Check Report

## Summary
- **Status**: ✅ All checks passed
- **Date**: 2024-01-15
- **Code Base**: src/

## Checks Performed

### Formatting (Prettier)
- **Status**: ✅ PASS
- **Files Checked**: 87
- **Issues**: 0

### Type Checking (tsc)
- **Status**: ✅ PASS
- **Files Checked**: 87
- **Errors**: 0
- **Warnings**: 0

### Linting (ESLint)
- **Status**: ✅ PASS
- **Files Checked**: 87
- **Errors**: 0
- **Warnings**: 0

### Security (npm audit)
- **Status**: ✅ PASS
- **Dependencies**: 342
- **Vulnerabilities**: 0 critical, 0 high, 2 moderate

### Complexity
- **Status**: ✅ PASS
- **Average Complexity**: 3.8
- **Max Complexity**: 9
- **Files > 10**: 0

## Details

All TypeScript quality checks passed successfully. Code is well-formatted, type-safe, lint-free, secure, and maintainable.

## Recommendations

- Continue using strict TypeScript settings
- Keep complexity below 10
- Run pre-commit hooks before commits
- Update moderate-severity vulnerabilities when possible

Integration with Code Quality Specialist

Input: TypeScript/JavaScript codebase quality check request Process: Run all TypeScript quality tools and analyze results Output: Comprehensive quality report with pass/fail status Next Step: Report to code-quality-specialist for consolidation

Best Practices

Development

Enable Prettier on save (IDE integration)
Enable ESLint in IDE for real-time feedback
Use strict TypeScript settings
Fix type errors immediately
Use pre-commit hooks

Pre-Commit

Run full quality check script
Ensure all checks pass
Fix issues before pushing
Review security warnings

CI/CD

Run quality checks on every PR
Fail build on quality violations
Generate quality reports
Track quality metrics over time

Code Review

Verify quality checks passed
Review type definitions
Check security scan results
Validate complexity metrics

Supporting Resources

TypeScript: https://www.typescriptlang.org/docs
ESLint: https://eslint.org/docs
Prettier: https://prettier.io/docs
typescript-eslint: https://typescript-eslint.io
npm audit: https://docs.npmjs.com/cli/v8/commands/npm-audit

Success Metrics

All code formatted with Prettier
All type checks passing
Zero linting violations
No critical security issues
Complexity under threshold
All quality checks automated

typescript-quality-checker

NPX Install

Tags

SKILL.md Content

TypeScript Quality Checker Skill

Purpose

When to Use

Quality Check Workflow

1. Environment Setup

2. Code Formatting Check (Prettier)

3. Type Checking (TypeScript Compiler)

4. Linting (ESLint)

5. Security Analysis

6. Code Complexity Analysis

7. Import/Export Validation

8. Comprehensive Quality Check

Quality Standards

Code Formatting

Type Checking

Linting

Security

Code Quality

Quality Check Matrix

Pre-commit Integration

CI/CD Integration

Quality Check Troubleshooting

Prettier Formatting Failures

TypeScript Type Errors

ESLint Violations

npm Audit Issues

Quality Report Template

Integration with Code Quality Specialist

Best Practices

Development

Pre-Commit

CI/CD

Code Review

Supporting Resources

Success Metrics