Angular Code Quality Toolkit

Angular Code Quality Toolkit is a VS Code extension that runs popular Angular ecosystem code-quality tools directly from the editor and surfaces the results in a dedicated output channel.

It is designed to help you quickly spot unused dependencies, dead TypeScript code, and lint issues without leaving VS Code.

---

Features

• Run depcheck

  • Command: Angular Code Quality: Run depcheck
  • Uses npx depcheck in the current workspace folder.
  • Shows output in the Angular Code Quality output channel.
  • Helps identify unused dependencies and missing dependencies in your Angular workspace.

• Run ts-prune

  • Command: Angular Code Quality: Run ts-prune
  • Tries to use tsconfig.app.json from the workspace root:
    • If tsconfig.app.json exists, runs: npx ts-prune -p tsconfig.app.json
    • If it does not exist, falls back to: npx ts-prune
  • Warns you in VS Code if tsconfig.app.json is missing, so you know the analysis may be less precise.
  • Helps find unused TypeScript exports and dead code in your Angular project.

• Run ESLint (workspace lint script)

  • Command: Angular Code Quality: Run ESLint
  • Runs npm run lint in the current workspace folder.
  • Before running, it:
    • Reads package.json from the workspace root.
    • Verifies that a "lint" script exists.
    • Shows friendly warnings if package.json is missing or invalid, or if no "lint" script is defined.
  • Use ESLint rules like @typescript-eslint/no-unused-vars to find unused methods, variables, and parameters in your code.

• Add ESLint to Angular project

  • Command: Angular Code Quality: Add ESLint to Angular project
  • Runs ng add @angular-eslint/schematics in the workspace to migrate from TSLint to ESLint (or add ESLint if you don’t have it).
  • Use this when ng lint fails with “Cannot find builder: tslint”. After it finishes, use Run ESLint to lint your code.

• Run stylelint (styles)

  • Command: Angular Code Quality: Run stylelint
  • Runs stylelint on your CSS/SCSS (uses npm run lint:styles or npm run stylelint if defined in package.json, otherwise npx stylelint "src/**/*.scss" "src/**/*.css").
  • Helps find style issues and unused/deprecated CSS in Angular component styles. Results appear in the Problems view and in the editor.

• Unified output channel

  • All tools write into the same Angular Code Quality output channel.
  • Clear process start / end messages and non-zero exit code warnings.
  • If a CLI process cannot be started (e.g. tool not installed or not on PATH), you get both an output message and a VS Code error notification.

• In-editor results (Problems view and squiggles)

  • After each command runs, the extension parses the tool output and shows diagnostics in VS Code:
    • Problems panel (View → Problems) lists every issue with file, line, and message. Click an entry to jump to that line.
    • Editor squiggles: open a file and you’ll see the reported line (and column for ESLint) highlighted with the message.
  • depcheck: unused dependencies are marked in package.json; missing dependencies are marked in the file that uses them.
  • ts-prune: each unused export is shown at the correct file and line (when ts-prune outputs line numbers).
  • ESLint: each lint error/warning appears at the exact file:line:column (supports standard and stylish-style output).
  • stylelint: each style issue appears at file:line:column in the Problems view.

---

Unused methods, variables, and styles

• Unused methods and variables
  The extension does not run a separate “unused code” tool. Use ESLint with the right rules:

  • Add @typescript-eslint/no-unused-vars (and optionally @typescript-eslint/no-unused-expressions) in your ESLint config so Run ESLint reports unused variables, parameters, and dead code.
  • After adding ESLint to your Angular project (see Add ESLint to Angular project), extend your config with these rules; then Angular Code Quality: Run ESLint will show them in the Problems view and in the editor.

• Styles (CSS/SCSS)
  Use Angular Code Quality: Run stylelint to lint your styles. Install stylelint in the project if needed:

  • npm install --save-dev stylelint stylelint-scss
  • Add a stylelint config (e.g. .stylelintrc.json) or a "lint:styles" / "stylelint" script in package.json if you want a custom glob. The extension will run that script when present; otherwise it runs npx stylelint "src/**/*.scss" "src/**/*.css".

---

Prerequisites in Your Angular Workspace

This extension assumes you have an existing Angular workspace with Node tooling (e.g. generated by the Angular CLI).

In your Angular project:

• Node & npm

  • Node.js and npm installed on your system.

• depcheck

  • Either installed globally, or available via npx depcheck.
  • The extension runs npx depcheck --json to show results in the editor.
  • Typical setup (project-local):
    • npm install --save-dev depcheck

• ts-prune

  • Either installed globally, or available via npx ts-prune.
  • When ts-prune outputs file:line - exportName, the extension shows each unused export at the correct file and line in the Problems view.
  • Typical setup (project-local):
    • npm install --save-dev ts-prune
  • Recommended: ensure your Angular app has a suitable tsconfig (for example tsconfig.app.json) in the workspace root. The extension will:
    • Prefer tsconfig.app.json if present.
    • Warn you if it is missing and then run npx ts-prune without a -p path.

• ESLint lint script

  • Your Angular workspace should have a "lint" script in package.json, usually something like:
    • "lint": "ng lint" (Angular CLI)
    • or "lint": "eslint \"src/**/*.{ts,tsx}\"" (ESLint directly)
  • If your project still uses TSLint, run Angular Code Quality: Add ESLint to Angular project to migrate.
  • The extension verifies there is a "lint" script before running ESLint.

• stylelint (optional, for Run stylelint)

  • Install in the project: npm install --save-dev stylelint stylelint-scss
  • Optionally add a "lint:styles" or "stylelint" script in package.json; otherwise the extension runs npx stylelint "src/**/*.scss" "src/**/*.css".

Note: The extension does not bundle depcheck, ts-prune, ESLint, or stylelint. It runs tools you install in your Angular project and shows their results in the editor.

---

How to Use the Commands

1. Open your Angular workspace in VS Code (the folder containing package.json).
2. Ensure the relevant tools are installed and configured in the workspace:
   • depcheck, ts-prune, and a "lint" npm script using ESLint.
3. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
4. Run one of the provided commands:
   • Angular Code Quality: Run depcheck
   • Angular Code Quality: Run ts-prune
   • Angular Code Quality: Run ESLint
   • Angular Code Quality: Add ESLint to Angular project (to migrate from TSLint or add ESLint)
   • Angular Code Quality: Run stylelint (for CSS/SCSS)
5. Check results in two places:
   • Output channel: select Angular Code Quality to see the raw CLI output.
   • Problems panel and editor: issues appear as diagnostics—click a problem to open the file at that line and fix unused code or dependencies.

If something goes wrong (e.g. tools not installed, tsconfig.app.json missing, or package.json malformed), the extension:

• Logs detailed messages in the output channel, and
• Shows a VS Code warning or error notification so you can fix your configuration.

---

How This Helps Clean Up Angular Codebases

Modern Angular applications tend to accumulate:

• Unused npm dependencies and devDependencies.
• Dead TypeScript exports that are no longer referenced anywhere.
• Lint violations and style drift as teams evolve.

By integrating depcheck, ts-prune, and ESLint into a single VS Code extension:

• Developers stay in their editor and do not need to remember exact CLI commands.
• Teams can standardize a repeatable code-quality workflow on top of existing Angular tooling.
• It becomes much easier to:
  • Detect and remove unused packages.
  • Identify and safely delete dead TypeScript code.
  • Keep the codebase aligned with team-defined lint rules.

This leads to leaner bundles, more maintainable code, and cleaner dependency graphs in Angular projects.

---

Motivation / Background

The Angular Code Quality Toolkit extension was created to make it easier for Angular teams to apply industry-standard code-quality tooling directly from VS Code.

Instead of building yet another custom linter or proprietary tool, this project:

• Integrates existing open‑source tools (depcheck, ts-prune, ESLint) into a cohesive workflow.
• Adds developer‑friendly ergonomics such as:
  • Single-click commands in the Command Palette.
  • Automatic detection of common Angular conventions (like tsconfig.app.json).
  • Explicit, helpful error messages when the workspace is misconfigured.
• Encourages teams to treat code quality as a first‑class part of their daily development workflow, rather than an afterthought.

As open‑source tooling, this extension is intended to be:

• A practical, real‑world contribution to the Angular ecosystem.
• A reusable building block that other teams can adopt and extend.

---

Local Development

In the extension project itself (this repository):

1. Install dependencies:
   • npm install
2. Compile the extension:
   • npm run compile
3. Start debugging in VS Code:
   • Open this folder in VS Code.
   • Press F5 to run the Run Extension debug configuration.
   • A new Extension Development Host window will open where you can:
     • Open an Angular workspace.
     • Run the three commands from the Command Palette.

---

Packaging and Publishing (Visual Studio Marketplace)

To package and publish this extension on the Visual Studio Marketplace so others can install it from VS Code:

1. Install vsce (if you have not already):
   • npm install -g vsce
2. Make sure you are signed in with a Visual Studio Marketplace publisher that matches the "publisher" field in package.json (arul1998 in this project).
3. From the extension project root, run:
   • npm run compile
   • vsce package
   • This produces a .vsix file (for example angular-code-quality-toolkit-0.0.1.vsix).
4. To publish a new version to the Marketplace:
   • Update the "version" in package.json.
   • Commit and push your changes.
   • Run:
     • npm run compile
     • vsce publish

You can also install the .vsix locally by running:

• code --install-extension angular-code-quality-toolkit-0.0.1.vsix

or using Extensions → … → Install from VSIX inside VS Code.