📘 Day 26 — Quality Assurance: Strict Mode, ESLint, Prettier & Husky

Zero to Hero — Hands-on Angular Tutorial

Today you will learn:

• ✔️ Angular Strict Mode: Creating bulletproof TypeScript.
• ✔️ ESLint: Catching bugs before they happen.
• ✔️ Prettier: Automatic code formatting.
• ✔️ Husky & Lint-Staged: Preventing bad code from being committed.
• ✔️ GitHub Actions: Basic CI Pipeline.

Before we start our final project (Days 27-30), we must ensure our environment enforces Quality. A pro developer doesn’t rely on willpower; they rely on tools. 🛠️

🟦 1. Angular Strict Mode

If you created your app with ng new, you likely enabled strict mode. If not, enable it now in tsconfig.json.

tsconfig.json:

{
  "compilerOptions": {
    "strict": true, // The master switch
    "noImplicitAny": true, // ❌ No 'any' allowed
    "strictNullChecks": true, // ❌ Must handle 'null' and 'undefined'
    "strictPropertyInitialization": true // ❌ Properties must be initialized
  }
}

Why? It prevents “Unsafe” coding.

• Bad: user: User; (Might be undefined at runtime!)
• Good: user: User | null = null; or user!: User; (I promise to fix it).

🟩 2. ESLint (The Linter)

TSLint is dead. Long live ESLint. Add it to your Angular project:

ng add @angular-eslint/schematics

This acts as a “spell checker” for code logic.

Common Rules (.eslintrc.json or eslint.config.js):

• no-console: Warns if you leave console.log in code.
• component-selector: Enforces app- prefix.
• directive-selector: Enforces camelCase.

Run it:

ng lint

🟧 3. Prettier (The Formatter)

ESLint checks logic. Prettier checks style (Spaces vs Tabs, Semicolons). They work best together.

Step 1: Install

npm install --save-dev prettier

Step 2: Config (.prettierrc)

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "printWidth": 100
}

Step 3: Run

npx prettier --write .

Your entire codebase is now formatted perfectly. ✨

🟥 4. Husky & Lint-Staged (The Gatekeeper)

We want to prevent lazy developers (or our future selves) from pushing bad code. Husky runs scripts before git commit.

Step 1: Install

npx husky-init && npm install
npm install --save-dev lint-staged

Step 2: Configure package.json

"lint-staged": {
  "*.{ts,html,scss}": [
    "prettier --write",
    "eslint --fix"
  ]
}

Step 3: Update hook (.husky/pre-commit)

npx lint-staged

Result: Whenever you run git commit -m "update", Husky will:

1. Run Prettier on changed files.
2. Run ESLint on changed files.
3. If they fail, the commit is blocked 🛑.

🟫 5. GitHub Actions (Basic CI)

If you use GitHub, create .github/workflows/ci.yml.

name: Angular CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Deps
        run: npm ci
      - name: Lint
        run: npm run lint
      - name: Test
        run: npm run test -- --no-watch --no-progress --browsers=ChromeHeadless
      - name: Build
        run: npm run build

Now, every Pull Request gets a green checkmark ✅ or red X ❌.

🎉 End of Day 26 — What You Learned

Today you automated Quality Assurance:

• ✔️ Strict Mode: Compiler forces safety.
• ✔️ ESLint: Finds bugs automatically.
• ✔️ Prettier: Fixes formatting instantly.
• ✔️ Husky: Blocks bad commits.
• ✔️ CI: Validates code in the cloud.

Your project is now indestructible.

🧪 Day 26 Challenge

“Break and Fix”

1. Create a variable x; (implicitly any) in a component.
2. Run ng build -> Should fail due to strict: true.
3. Add a console.log('test').
4. Run ng lint -> Should warn about console usage.
5. Mess up the indentation in app.component.ts.
6. Run npx prettier --write . -> Should fix it.
7. Try to commit the bad code. Husky should stop you!