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:

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:

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:

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:

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):

{ "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:

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:

Watch and type check continuously

npx tsc --noEmit --watch

With specific project

npx tsc --noEmit --watch --project tsconfig.json

Configuration (tsconfig.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:

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:

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):

{ "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:

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:

List outdated packages

npm outdated

Check specific package

npm outdated typescript

Update packages

npm update

Dependency License Check:

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:

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:

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:

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:

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:

#!/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:

{ "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:

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):

{ "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:

.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

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

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

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

Show detailed audit

npm audit --json

Fix non-breaking changes

npm audit fix

Override (use with caution)

npm audit fix --force

Quality Report Template

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