Skip to main content

Module 25: Linting and Code Quality

Maintain high code quality with ESLint, Prettier, and automated code analysis tools for TypeScript projects.

1. ESLint Setup​

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npx eslint --init
// .eslintrc.js
module.exports = {
    parser: "@typescript-eslint/parser",
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module",
        project: "./tsconfig.json"
    },
    rules: {
        "@typescript-eslint/explicit-function-return-type": "warn",
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-explicit-any": "warn"
    }
};

2. Prettier Setup​

npm install --save-dev prettier eslint-config-prettier
// .prettierrc
{
    "semi": true,
    "singleQuote": false,
    "tabWidth": 4,
    "trailingComma": "none",
    "printWidth": 100
}
// .eslintrc.js (with Prettier)
module.exports = {
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"  // Must be last
    ]
};

3. Custom ESLint Rules​

// Enforce naming conventions
"@typescript-eslint/naming-convention": [
    "error",
    {
        "selector": "interface",
        "format": ["PascalCase"]
    },
    {
        "selector": "typeAlias",
        "format": ["PascalCase"]
    },
    {
        "selector": "function",
        "format": ["camelCase", "PascalCase"]
    }
]

4. Husky for Git Hooks​

npm install --save-dev husky lint-staged
npx husky install
// package.json
{
    "scripts": {
        "prepare": "husky install"
    },
    "lint-staged": {
        "*.ts": [
            "eslint --fix",
            "prettier --write"
        ]
    }
}
# Create pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

5. TypeScript Strict Mode​

// tsconfig.json
{
    "compilerOptions": {
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true
    }
}

6. SonarQube Integration​

# sonar-project.properties
sonar.projectKey=my-typescript-project
sonar.sources=src
sonar.tests=tests
sonar.typescript.lcov.reportPaths=coverage/lcov.info

7. Code Coverage with Jest​

// jest.config.js
module.exports = {
    preset: "ts-jest",
    collectCoverage: true,
    coverageDirectory: "coverage",
    coverageThreshold: {
        global: {
            branches: 80,
            functions: 80,
            lines: 80,
            statements: 80
        }
    }
};

8. Documentation with TSDoc​

/**
 * Calculates the sum of two numbers
 * @param a - First number
 * @param b - Second number
 * @returns The sum of a and b
 * @example
 * ```typescript
 * add(2, 3); // Returns 5
 * ```
 */
export function add(a: number, b: number): number {
    return a + b;
}

9. Type Coverage​

npm install --save-dev type-coverage
// package.json
{
    "scripts": {
        "type-check": "tsc --noEmit",
        "type-coverage": "type-coverage --atLeast 95"
    }
}

10. VS Code Settings​

// .vscode/settings.json
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

Key Takeaways​

✅ ESLint catches code issues
✅ Prettier enforces formatting
✅ Husky automates git hooks
✅ Strict mode prevents common errors
✅ Code coverage ensures test quality

Practice Exercises​

Exercise 1: Configure ESLint Rules​

Set up custom rules for your project's coding standards.

Exercise 2: Set Up CI/CD Linting​

Configure GitHub Actions or GitLab CI for automated linting.

Next Steps​

In Module 26, we'll explore TypeScript Design Patterns for building maintainable applications.