Visual Studio Code Extensions — Part 3

40+ AI Assistant Extensions plus 90+ Extensions for JavaScript / TypeScript / Angular, Python, C#, PHP and more

Visual Studio Code

Visual Studio Code is the Swiss army knife of IDEs. As a user of Visual Studio, I was unaware of how pervasive VS Code had become in the open-source community. Like other tools I’ve highlighted, VS Code has an extensive market of extensions available here.

The compiled lists below are focused on AI, and the JavaScript, TypeScript and Angular tool chains.

Contents

AI Coding
Angular Extensions
Accessibility
Code Completion & Snippets
Code Formatters & Linters
Code Generation
Code Quality
Code Refactoring
CSS & HTML
Data
Editor Extensions
File and Folder Management
Git and Version Control
IDE Configuration
Import/Export
JavaScript/TypeScript
Language Support
Live Servers and Previewers
Markdown and Documentation
NPM
Testing & Debugging
TypeScript
Vulnerability Management

PHP

Appearance & Themes
Code Completion, Snippets & Language Support
Debugging & Testing
Documentation & Code Generation
Formatting & Linting
Git Integration & Version Control
Project Management & Framework Support
Server & Development Environments
Tools & Utilities

AI Coding

Most of these extensions handle a variety of languages including JavaScript, PHP, Python, and C#.

1. AI Smart Coder: AI-Generated Unit Tests, Code Review, Documentation, and Error Fix with ChatGPT.
2. Amazon Q: A conversational AI assistant that helps with coding tasks, provides code suggestions, and answers questions about AWS.
3. AppMap: AI-driven chat with a deep understanding of your code.
4. AskCodi: Is an AI code assistant developed by Assistiv.ai, that facilitates coders to code faster.
5. Bito AI: Code Assistant is powered by GPT-4o, Claude Sonnet 3.5, best in class AI models, and Bito’s proprietary prompt framework. Supports 50+ programming languages!
6. Blackbox: provides real-time code completion, documentation, and debugging suggestions.
7. ChatGPT: AI pair programmer. Supports, GPT-4o GPT-4 Turbo, GPT3.5 Turbo, GPT3 and Codex models.
8. Claude Coder: AI Powered Coding Assistant using Anthropic Claude.
9. Cline: Autonomous coding agent right in your IDE, capable of creating/editing files, running commands, using the browser, and more.
10. CodeGeeX: AI Coding Assistant generates and completes code, adds comments, translates code between programming languages, provides answers to technical and code-related questions, code explanation, unit test generation, code review, bug fixing and so on.
11. CodeGPT: AI chat assistance, auto-completion, code explanation, error-checking. Also enables the use of various AI models from different providers, enhancing your coding experience.
12. Codeium: Provides autocomplete, chat, and search capabilities in 70+ languages, with lightning fast speeds and state-of-the-art suggestion quality.
13. Coder by Kodu: Powered by Anthropic’s Claude, it assists both beginners and pros in coding, debugging, and more.
14. CodeWhisperer: Helps you understand your code by generating AI-powered commentary in a friendly, concise manner using GPT-4.
15. Cody: Brings you autocomplete, chat, and commands, so you can generate code, write unit tests, create docs, and explain complex code using AI.
16. Continue: Connect any models and any context to build custom autocomplete and chat experiences
17. Deepseek: Access DeepSeek.Chat directly in VS Code.
18. Dependency Analytics: Red Hat Dependency Analytics only accesses your manifest files to analyze your application dependencies before displaying the vulnerability report. Supports projects that use Maven (mvn), Node (npm), Golang (go mod), Python (pip), and Gradle (gradle) ecosystems.
19. DevPilot: Unleash the power of AI in your coding with DevPilot, your new coding buddy, to supercharge your development process.
20. Devv.AI: State-of-the-art AI models including GPT-4, Claude 3.5, and Gemini, Devv.AI is designed to enhance your productivity.
21. EarlyAI: Generates and maintains validated unit tests, enhancing code quality and coverage. Supports JavaScript, TypeScript, Node.js, React, Angular, Jest, and Mocha.
22. Fitten Code: Can automatically complete code, generate code, generate comments, edit code, explain code, generate tests, find errors, and more.
23. Flexpilot: use your preferred AI providers and models directly in VS Code.
24. Fynix Code Assistant: real-time assistance for coding, testing, and reviewing, it streamlines workflows, automates tasks, and boosts productivity for developers.
25. Gemini Code Assist: Provides contextualized responses to your prompts to help guide you on what you’re trying to do with your code. It also shares source citations.
26. GitHub Copilot: Is an AI pair programmer tool that helps you write code faster and smarter. It’s free now, so give it a try.
27. GitHub Copilot for Azure: Integrates support for GitHub Copilot agent and ask modes. Use Azure tools in agent mode to automatically complete Azure tasks, or chat.
28. GoCodeo: Generate production-ready code, tests, and deploy with one click on Vercel and Supabase, leveraging the power of the latest AI models.
29. Intellicode: AI-assisted development features for Python, TypeScript/JavaScript and Java developers.
30. Keploy: unit, integration, and API testing in Python, JavaScript, TypeScript, Java, PHP, Go, and more.
31. Local AI Pilot: Leverage the power of AI for code completion, bug fixing, and enhanced development — all while keeping your code private and offline using local LLMs (Ollama).
32. Mintlify Doc Writer: AI powered documentation writer for JavaScript, Python, Java, Typescript & all other languages
33. Mode: code, refactor, fix issues, and build apps — all with a single prompt, with OpenAI, Anthropic, and Deepseek models.
34. OpenAI Codex: integration of the codex model by OpenAI for Python, PHP, Perl and Swift.
35. PureCode AI: Generate, iterate, and export production-ready UI components, code and designs. Generate high-quality code for React components supporting React + TailwindCSS, React + Material UI, HTML + TailwindCSS, HTML + Bootstrap, Angular + CSS and Angular + TailwindCSS.
36. Qodo Gen: A comprehensive AI code assistant for generating code, writing unit tests, and creating documentation.
37. Refact: AI Assistant for Code Writing and Refactoring. Supporting 25+ languages including Python, Javascript, Java, Rust, Typescript, PHP, Java, C++, C#, Go and more.
38. Roo Code: Enhances coding with AI-powered automation, multi-model support, and experimental features.
39. Rubberduck: Generate code, edit code, explain code, generate tests, find bugs, diagnose errors, and even create your own conversation templates.
40. Sourcery: Sourcery is your pair programmer with intelligent code reviews and enhances your code in real-time.
41. Supermaven: Chat connects you to the best AI models from OpenAI and Anthropic and lets you use these models to edit code directly from your editor.
42. Swark: wark is a VS Code extension that allows creating architecture diagrams from code automatically using large language models (LLMs).
    Swark is directly integrated with GitHub Copilot, and requires no authentication or API key.
43. Tabnine: AI Chat & Autocomplete for JavaScript, Typescript, Python & more.
44. TabbyML: A self-hosted AI coding assistant that can suggest multi-line code or full functions in real-time.
45. Watsonx Code Assistant: IBM® watsonx™ Code Assistant offers robust, contextually aware assistance for popular programming languages including Go, C, C++, Java, JavaScript, Python, TypeScript, and more.
46. WiseGPT: analyzes your entire codebase to produce personalized, production-ready code without writing prompts.

Angular Extensions

1. Angular CLI: eases the use of the Angular CLI in Visual Studio Code.
2. Angular File Generator: Allows you to generate Angular files with a few clicks.
3. Angular Language Service: Editor services for Angular templates.
4. Angular Material 2: containing snippets for Angular Material 2, Angular Flex layout 1, Teradata Covalent 1 & Material icons.
5. Angular Schematics: Ultimate Angular code generation in Visual Studio Code.
6. Angular Snippets (Version 18): adds snippets for Angular for TypeScript and HTML.
7. Angular Support: Go to / peek angular specific definitions.
8. AngularTools: A collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.
9. Angular2-inline: Extends the JavaScript and TypeScript languages to add Angular2 specific features for inline templates and stylesheets.
10. Angular2-switcher: Easily navigate to typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in your Angular project.
11. Rename Angular Component: Rename Angular components, directives, and services — including their filenames, class names and selectors.

Accessibility

1. axe Accessibility Linter: Accessibility linting for HTML, Angular, React, Markdown, Vue, and React Native.

Code Completion & Snippets

1. Auto Close Tag: Automatically add HTML/XML close tag.
2. Auto Import: Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
3. Auto Rename Tag: Auto rename paired HTML/XML tag.
4. JavaScript (ES6) code snippets: code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Code Formatters & Linters

1. Biome: Biome is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features 293 rules from ESLint, TypeScript ESLint, and other sources.
2. ESLint: Integrates ESLint JavaScript into VS Code.
3. Prettier — Code formatter: Prettier is an opinionated code formatter.
4. Prettier ESLint: A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package.
5. Stylelint: A mighty CSS linter that helps you avoid errors and enforce conventions. Over 100 rules.

Code Generation

1. Code Runner: Run code snippet or code file for multiple languages.
2. Prisma NextJS: Automagicly add types to **nextjs** page functions.

Code Quality

1. Code Spell Checker: A basic spell checker that works well with code and documents.
2. Code Metrics: Computes complexity in TypeScript / JavaScript / Lua files.
3. CodeStream: Shift left by making code performance part of the earliest stages of the development process.
4. Fortify: Perform static code analysis and identify application vulnerabilities.
5. REST Client: Send HTTP request and view the response in Visual Studio Code directly.
6. Semgrep: Security scans in a snap. Speedy SAST with a powerful rule registry for seamless detection and remediation of code vulnerabilities supporting 30+ languages.
7. SonarQube for IDE: Linter to detect & fix coding issues locally in JS/TS, Python, PHP, Java, C, C++, C#, Go, IaC. Use with SonarQube (Server, Cloud) for optimal team performance.
8. Trunk Code Quality: Run 100+ tools to format, lint, static-analyze, and security-check dozens of languages and config formats. It will autodetect the best tools to run for your repo, then run them and provide results inline in VSCode.
9. VS CodeShield: Scans your code for potential vulnerabilities. It highlights common security issues, based on the OWASP Top 10 vulnerabilities and includes fallback checks for common coding pitfalls.

Code Refactoring

1. Abracadabra, refactor this! Automated refactorings for VS Code, in JavaScript and TypeScript.
2. Glean: refactoring tools for your React codebase.
3. JavaScript Booster: Boost your productivity with advanced JavaScript/TypeScript refactorings and commands.
4. JS CodeFormater: Automated JavaScript/TypeScript refactoring tools to smooth your development workflow.
5. JS Refactoring Assistant: Edit, modernize, and refactor JavaScript, TypeScript, React, and Vue.js code effectively with over 120 actions.
6. Move TS — Move TypeScript files and update relative imports: Extension for moving typescript files and folders and updating relative imports in your workspace.
7. TypeLens: Adds reference counter code lenses to typescript, javascript, scss and less files.

CSS & HTML

1. CSS Navigation: Provides CSS Completion, Finding Definition, Finding References, Hover, Workspace Symbols services for HTML, JS, TS, JSX, Vue and more.
2. CSS Peek: Allow peeking to CSS ID and class strings as definitions from html files to respective CSS.
3. Color Highlight: This extension styles CSS/web colors found in your document.
4. Color Info: Provides quick information about CSS colors.
5. CSP Refactoring: Refactor HTML file for Content Security Policy.
6. HTML CSS Support: HTML ID and class attribute completion for Visual Studio Code.
7. HTMLHint: A Static Code Analysis Tool for HTML.
8. IntelliSense for CSS: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
9. Refactor CSS: Helps you identify reoccurring CSS class name combinations in your markup.
10. SCSS IntelliSense: Advanced autocompletion and refactoring support for SCSS.
11. SCSS Refactoring: SCSS refactoring tools.
12. Unused CSS Classes for JavaScript/Angular/React: Highlights the unused css classes looking for html files in the same folder as the css/scss/sass files.

Data

1. Excel Viewer: Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web.
2. JSON Flow: Transform JSON into interactive graphs.
3. JSON to TS: Convert JSON object to typescript interfaces.

Editor Extensions

1. Better Comments: code commenting by annotating with alert, informational, TODOs, and more.
2. Bookmarks: Helps you to navigate in your code, moving between important positions easily and quickly.
3. CodeSnap: Take beautiful screenshots of your code.
4. EditorConfig for VS Code: Overrides user/workspace settings with settings found in .editorconfig files.
5. Error Lens: Improve highlighting of errors, warnings and other language diagnostics.
6. Highlight Matching Tag: Highlights matching closing and opening tags.
7. Indent Rainbow: A simple extension to make indentation more readable.
8. Polacode: Polaroid for your code.
9. Pretty TypeScript Errors: Make TypeScript errors prettier and human-readable in VSCode.
10. Quokka.js: Runtime values of your JavaScript/TypeScript are updated and displayed in your IDE next to your code, as you type.
11. Trailing Spaces: Highlight trailing spaces and delete them in a flash.

File and Folder Management

1. Auto Barrel: helps you to create and maintain barrel files in your project. Auto Barrel. A barrel file is a file that re-exports all the modules in a directory.
2. Dev Containers: use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment.
3. Docker: Build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.
4. Draw Folder Structure: Generate markdown representations of your folder and file structure.
5. Filesize: Show the current file size in the status bar.
6. Path IntelliSense: A plugin that autocompletes filenames.
7. Search node_modules: Quickly search the node_modules folder.

Git and Version Control

1. Conventional Commits: Conventional Commits for VSCode.
2. Git Graph: View a Git Graph of your repository, and perform Git actions from the graph.
3. gitignore: extension for Visual Studio Code that assists you in working with .gitignore files.
4. GitLens — Git supercharged: Visualize code authorship at a glance via Git blame annotations and CodeLens.
5. GitLink: Goto/Copy current file’s online link, supports multiple remote sources in GitHub/GitLab/BitBucket/VSTS/DevOps.
6. GitLive: Accelerate your development team with preemptive merge conflict detection.
7. Version Lens: Shows the latest version for each package using code lens.

IDE Configuration

1. Colorize: A vscode extension to help visualize CSS colors in files.
2. CodeTogether: Real-time live collaboration alongside actionable, data-driven insights to improve team productivity, streamline workflows, and deliver high-quality software efficiently.
3. Hacker News for VSCode: custom webview inside VSCode to browse Hacker News.
4. Image preview: Shows image preview in the gutter and on hover.
5. Live Share: Visual Studio Live Share enables you to collaboratively edit and debug (securely) with others in real time, regardless what programming languages you’re using or app types you’re building.
6. Material Design Icons IntelliSense: provides intellisense, search and hover preview of Material Design Icons.
7. Material Icon Theme: Material Design Icons for Visual Studio Code
8. One Dark Pro: Atom’s iconic One Dark theme for Visual Studio Code
9. Peacock: Subtly change the color of your Visual Studio Code workspace.
10. TODO Highlight: Highlight TODO, FIXME and other annotations within your code.
11. Todo Tree: Show TODO, FIXME, etc. comment tags in a tree view.
12. VSCode-Icons: Icons for Visual Studio Code.
13. Winter is Coming: Adds themes titled “Winter is Coming”. There are dark, dark with no italics, and light themes.

Import/Export

1. Import Cost: Display import/require package size in the editor.
2. TypeScript Importer: Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion item to allow code completion.

JavaScript

1. JavaScript Booster: Boost your productivity with advanced JavaScript/TypeScript refactorings and commands.
2. Turbo Console Log: Automating the process of writing meaningful log messages.
3. Refactor by JS: Write javascript functions to bulk refactor your source code, with live preview.

Language Support

1. C/C++: Adds language support for C/C++ to Visual Studio Code, including editing (IntelliSense) and debugging features.
2. Java: Full featured development support (edit-compile-debug & test cycle) to VS Code; with support for Maven and Gradle projects.
3. MS SQL Server: Design and optimize schemas for SQL Server, Azure SQL, and SQL Database in Fabric.
4. Python: Support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.

Live Servers and Previewers

1. Five Server (Live Server): A better Live Server with instant updates, highlights and some PHP support.
2. Live Server: Launch a development local Server with live reload feature for static & dynamic pages

Markdown and Documentation

1. Markdown All in One: All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).
2. MarkdownLint: Markdown/CommonMark linting and style checking.
3. Mermaid: Enables developers to seamlessly create, edit, preview and integrate mermaid diagrams from within the VS Code.

NPM

1. Npm Dependency: Update dependencies/devDependencies to latest version for specified package.json
2. Npm Dependency Links: Links the depedencies in your package.json to their npmjs.com profile.
3. NPM Intellisense: Autocompletes npm modules in import statements.

Observability & Logging

1. Lightrun: Real-time and on-demand observability platform. Developers can securely add logs, metrics, and traces to running applications, without stopping the application or pushing new code.

Testing & Debugging

1. Debugger for Firefox: extension to debug web applications and extensions running in the Mozilla Firefox browser.
2. Error Gutters: Show error gutters to the right from line numbers.
3. Error Lens: Improve highlighting of errors, warnings and other language diagnostics.
4. Jest: supports full jest features in VS Code environment to make testing more intuitive and fun.
5. Jest Runner: Simple way to run or debug a single (or multiple) tests from context-menu.
6. Karma Test Explorer (for Angular, Jasmine, and Mocha): View and run your Karma or Angular tests in the VS Code Testing side bar.
7. Playwright: Run Playwright Test tests in Visual Studio Code.
8. SimonTest: Analyzes your Angular code and generates tests.
9. Test Explorer UI: Run your tests in the Sidebar.

TypeScript

1. TypeScript built-in refactoring: Visual Studio Code has built-in support for TypeScript refactoring, including operations like Extract Method and Extract Variable
2. refactorix: TypeScript refactoring tools.
3. TypeScript constructor generator: Auto generate constructor for TypeScript object in VS code.
4. TypeScript GetSet: TypeScript getter / setter generator based on AST.
5. TypeScript Hero: Additional tooling for typescript.
6. TypeScript Importer: Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion item to allow code completion.

Vulnerability Management

1. Mend Advise: Provides full visibility over your open source components, real-time security alerts, and actionable remediation insights.
2. Redhat Dependency Analytics: Red Hat Dependency Analytics only accesses your manifest files to analyze your application dependencies before displaying the vulnerability report. Supports projects that use Maven (mvn), Node (npm), Golang (go mod), Python (pip), and Gradle (gradle) ecosystems.
3. Snyk: Analyze your code, open-source dependencies, and Infrastructure as Code (IaC) configurations.
4. Trivy Vulnerability Scanner: Find vulnerabilities in your software projects without leaving the comfort of your VS Code window.

PHP

Visual Studio Code (VS Code) has become a popular choice among PHP developers due to its flexibility, extensibility, and vast library of extensions. PHP extensions for VS Code enhance the development experience by providing features such as:

Get Bill Musgrave’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Key Features

• Advanced code completion and debugging
• Code formatting and linting
• Project management and navigation
• Testing and quality assurance
• Framework-specific support (e.g., Laravel, Symfony)
• Database management and API testing

With the right extensions, PHP developers can streamline their workflow, improve code quality, and boost productivity. Explore this curated list of top PHP extensions for VS Code to discover the tools that can take your PHP development to the next level.

Also, take a look at the AI powered extensions above, as most work with PHP.

Appearance & Themes

1. Material Icon Theme: Material Design icons for files and folders.
2. Material Theme: Clean, professional theme.
3. One Dark Pro: Popular dark theme.

Code Completion, Snippets & Language Support

1. PHP DocBlockr: Automatically generates PHPDoc comments.
2. PHP Intelephense: Advanced code completion, error detection, and language features.
3. PHP IntelliSense: Advanced Autocompletion and Refactoring support.
4. PHP Snippets: Collection of PHP code snippets.
5. Laravel Blade Snippets: Snippets for Laravel’s Blade templating engine.
6. Laravel Extra IntelliSense: Enhances autocompletion for Laravel projects.
7. Laravel Intelephense: Is all in one (laravel blade snippets, laravel goto view, laravel goto components, laravel goto controller, laravel blade spacer).
8. Laravel Snippets: Broader set of Laravel code snippets.

Debugging & Testing

1. CodeCoverage: Analyzes code coverage with PHPUnit integration.
2. PHP Debug: Integrates Xdebug for step-through debugging and variable inspection.
3. PHP Tools for Visual Studio Code: ($) IntelliSense, Debug, Formatter, Code Lenses, Code Fixes, Linting, Refactoring, PHPUnit Tests, Web Server, and more.
4. PHP Profiler: PHP code profiling allows you to inspect how much time and how many calls were made to every single function in the code.
5. PHPStan: Static analysis tool for error detection and potential bug catching.
6. PHPUnit: Runs PHPUnit tests with test results and coverage reports.
7. Xdebug: PHP debugging extension for robust debugging.

Documentation & Code Generation

1. PHP Documenter: Generates and maintains PHPDoc comments.
2. PHP Getters and Setters: Generates getter and setter methods.

Formatting & Linting

1. EditorConfig: Ensures consistent coding styles across editors.
2. PHP CS Fixer: Formats PHP code to PSR standards.
3. PHP Mess Detector: Flags potential issues and bugs.
4. PHP Code Sniffer: Enforces coding standards and detects issues.
5. Prettier — Code Formatter: Ensures consistent formatting.
6. Twig: Snippets, Syntax Highlighting, Hover, and Formatting for Twig.

Git Integration & Version Control

1. GitHub Pull Requests: Manages GitHub pull requests and issues.
2. GitLens: Enhances Git capabilities with blame annotations and commit history.

Project Management & Framework Support

1. Laravel Goto: Quick navigation to Laravel files and classes.
2. Laravel Artisan: Integrates Laravel’s Artisan commands.
3. Symfony Extension Pack: Set of extensions for Symfony framework development.
4. WordPress Extension Pack: Collection of extensions for WordPress development.

Server & Development Environments

1. Dev Containers: Develops inside Docker containers.
2. Docker: Manages Docker containers for isolated development.
3. Live Server: Launches local development server with automatic browser reload.
4. PHP Server: Launches local PHP development server.

Tools & Utilities

1. Better Comments: Improves code documentation and clarity.
2. Code Spell Checker: Catches spelling errors in code and comments.
3. Composer: Integrates Composer dependency manager.
4. MySQL: Provides MySQL database management tools.
5. Path IntelliSense: Autocompletes file and folder paths.
6. Thunder: Lightweight REST API client.

VS Code extensions represent a powerful mechanism for customizing and optimizing the development environment, offering a wealth of possibilities for enhancing developer productivity and satisfaction.

I hope these options are helpful!

Other Plugin Articles
1 — ESLint: 100 ESLint Plugins (over 1,900 rules) for JavaScript and TypeScript Code Quality, Security, Testing, Performance & More.
2 — Prettier, Jest & Playwright: 110 Plugins for JavaScript/TypeScript Testing (end-to-end and unit), Code Formatting.
4 — Stylelint: Lints CSS and CSS-like languages like SCSS, Sass, Less Sass, and more.
5 — Chrome Extensions: Web Development, Debugging, Layout, Testing, and Accessibility Tools.
6 — Azure DevOps Extensions: 40+ Extensions for your Boards, Repos, and Pipelines.

I share lessons from decades in software delivery — from CI/CD to architecture governance. If you’re tackling similar challenges and want a seasoned perspective, I’m available for consulting at https://www.musgrave.com .