Angular Code Quality Toolkit

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.