My Visual Studio Code Setup

This repository contains my Visual Studio Code Setup, which includes various extensions and settings to enhance my coding experience.

Dedicated to my fellow Proforma IntroProg 2026 students.

• My Visual Studio Code Setup
  • Extensions
    • Extensions for every Developer
    • Extensions for Web Development
    • Extensions for Java Development

Extensions

Extensions for every Developer

Extension	Language	Tags	Why use it	Example
Better Comments	Universal	Readability, Documentation	Allows you to categorise comments, granting them different colors and styles.	When you comment a line with TODO, it will be colored differently than other comments.
Biome	Universal	Formatter	Automatically formats your code like Prettier but with less issues.	When you format your code, Biome will automatically fix issues like missing semicolons or incorrect indentation.
Bookmarks	Universal	Developer Experience	Allows you to create bookmarks linked to a piece of code.	When you add a bookmark, you can access that bookmark later using the activity bar tab.
Commit Message Editor	git	Version Control, Workflow	Allows you to edit your commit messages directly from the editor, following the Conventional Commits standard.	When you're ready to commit, you can open the commit message editor and start preparing a message as plain text or as a form.
Continue	Universal	AI	Allows you to work with AIs, using it to work on development tasks, to ask questions, edit code, and autocomplete.	I use it to link VS Code with the AI hosted on my machine.
Discord Presence	Universal	other	Allows your friends and collegues to see what you're doing in real-time. Not necessary.	I like to use it, it's a matter of personal preference.
Error Lens	Universal	Debugging, Developer Experience	Shows the warnings and errors directly where they are in the code.	When you forget to place a semicolon (;) at the end of the line, you can see the error right away.
filesize	Universal	Developer Experience	Shows the size of the current file in the status bar.	When you open a file, its size will be shown in the status bar.
indent-rainbow	Universal	Readability , Developer Experience	Makes indentation easier to read by visually separating different levels of indentation.	When you go down one level of indentation, the spaces between the previous level are colored differently. When there is an identation issue, it goes red.
Live Share	Universal	Utility, Collaboration	Adds live collaboration which allows you to work together on the same project while keeping personal preferences such as extensions, themes and settings separate.	When you install the extension, a new tab named Live Share is added, in which you can start or join a session with your team. Handy if a collegue encounter an issue.
Markdown All in One	markdown	Workflow , Developer Experience	Adds keyboard shortcuts, table formatting, table of contents and more for .md files.	Adds multiple features, two of which I used to make this file: When you paste a link on selected text, the text becomes a clickable link. Upon save, the table gets formatted nicely.
Path Intellisense	Universal	Workflow, Developer Experience	Provides autocompletion for file paths.	When you are in a HTML File and want to add your stylesheet located in css/style.css, when you'll write ./ in the href attribute, you'll see the list of folders, including the css folder.
Project Manager	Universal	Developer Experience	Allows you to mark folders, workspaces and git repositories as favorite, allowing you to switch between them easily.	When you install the extension, a new tab named Project Manager is added. Which when a folder or a workspace is opened, you can save it as a project, adding it in the list of favorites for quick access.
Rainbow CSV	CSV	Debugging, Readability, Developer Experience	Highlights CSV columns with different colors, making it easier to read. It can also insert fake spaces to align columns and check for errors by implementing CSVLint.	When you edit a CSV file, each column separated by a semicolon (;) is colored differently. You can also do commands to align the columns or check for errors in the file, such as mismatched column counts.
Selected lines count	Universal	Developer Experience	Shows the count of currently selected lines in the editor.	When you select more than one line, this extension will show you how many you selected.
Todo Tree	Universal	Developer Experience, Documentation	Regroups tasks defined by TODO comments in a single place allowing you to quickly access them.	When you comment a line with TODO, the content of the task will be shown in the extension tab, allowing you to click on the task for later fixes.
vscode-icons	Universal	Developer Experience, Readability	Adds icons to files and folders based on their names and extensions.	When you name a folder css the icon of the folder changes to reflect that.
vscode-pdf	PDF	Utility	Allows you to view PDF files in VS Code.	Without the extension, you only see the text structure of the PDF file which is not very useful. With the extension, you'll actually be able to see the file.
WakaTime	Universal	other	Allows you to track the time spent working on a project.	I like to use it to track the time I spend on doing productive stuff.

Extensions for Web Development

Extension	Language	Tags	Why use it	Example
Auto Rename Tag	HTML	Workflow	Renames automatically the corresponding tag when you rename a tag in HTML.	When you rename the tag <div> to <section>, the extension will rename the tag </div> to </section>.
CSS Peek	HTML, CSS	Developer Experience	Allows you to quickly view or access the CSS applied to HTML elements.	When holding CTRL and hovering an HTML tag, id or class name a preview opens. And clicking it will open the related CSS file.
CSS Sorter	CSS	Workflow	Organizes the CSS properties of a CSS file following the Concentric Ordering method.	When using the command, the CSS file will be sorted according to the Concentric Ordering method.
Debugger for Firefox	JS	Debugging	Allows you to go through the program step by step, insert breakpoints and see the actual values of variables.	When you add code that might not work properly, you may insert a breakpoint, and then step through the code to see what goes wrong.
ESLint	JS	Debugging, Developer Experience	Integrates ESLint into VS Code, linting issues in the code and provides suggestions for fixing them.	When you make a mistake, it gets underlined, and you can click on it to see more details and fix the issue.
Headwind	CSS, Tailwind	Workflow	Sorts and removes duplicates of Tailwind CSS classes you use.	Upon save, the Tailwind CSS classes are sorted and duplicates are removed, which cleans your code.
HTML accented character converter	HTML	Workflow	Allows you to run a command which replaces special characters into their corresponding HTML entities.	When you run the command, special characters such as é or © are replaced by &eacute; and &copy;, respectively.
HTMLHint	HTML	Debugging, Developer Experience	Integrates HTMLHint into VS Code, linting issues in the code and provides suggestions for fixing them.	When you make a mistake, it gets underlined, and you can click on it to see more details and fix the issue.
Inline SQL	SQL, Universal	Debugging, Readability, Developer Experience	Highlights SQL keywords and syntax in strings values of many languages. Also lints errors upon linking the extension with the configuration.	When you write a SQL Quesry in a PHP file, keywords like SELECT or FROM are highlighted. Which makes it easier to spot syntax errors.
IntelliSense for CSS class names in HTML	CSS, HTML	Workflow, Developer Experience	Provides autocompletion for CSS class names in HTML files. The extension will search for classes present in the workspace or through link tags.	After making a class in a CSS file and refreshing the extension cache, when adding a class to a HTML element, the class name will appear in the autocompletion list.
Live Server	HTML, CSS, JS, PHP	Debugging, Workflow, Developer Experience	A must add. Adds live reload whichs allows you to see your changes instantly. It also supports live reload for CSS, JavaScript and PHP files, PHP requiring another extension installed on the browser.	When you edit a HTML file, instead of having to switch to and refresh the browser to see the changes, you can simply start the server, save your file and the server will automatically reload the page.
MySQL	SQL	Database, Developer Experience	Allows you to link VS Code with MySQL databases, execute queries, view tables and more.	When you have a MySQL database, you'll have to connect to it via the extension, then you can execute a SELECT query, view the data nicely, and mess up all you want directly via VS Code.
npm Intellisense	JS, NodeJS	Workflow, Developer Experience	Provides autocompletion for npm modules in import and require statements.	After creating a nodeJS file, when you use require statements, you will have package names suggestions shown to you.
PHP Extension Pack	PHP	Debugging, Workflow, Developer Experience	Contains PHP Debug offering Debugging and PHP IntelliSense offering autocompletion.	When writing $ a list of variables suggestions appears. When writing printf(, a documentation tooltip showing what the function does and which parameters it needs appears.
PHP Intelephense	PHP	Workflow, Developer Experience	Provides autocompletion for PHP, adding superglobals variables.	When writing $_ a list of superglobals variables suggestions appears,
SQL Formatter VSCode	SQL	Formatter	Formats SQL using the SQLFormatter Library, it's the official extension and is actively updated.	When you format your code, the formatter will automatically fix issues like incorrect indentation or distribute the queries on multiple lines making it easier to read.
Stylelint	CSS	Debugging, Developer Experience	Integrates Stylelint into VS Code, linting issues in the code and provides suggestions for fixing them.	When you make a mistake, it gets underlined, and you can click on it to see more details and fix the issue.
Tailwind CSS IntelliSense	CSS,Tailwind	Debugging, Workflow, Developer Experience	Provides autocompletion, lints errors and hover preview for tailwind classes.	When using Tailwind and after writing @import "tailwindcss in a css file, you'll get autocompletion suggestions in a list when you add classes to a HTML element.

Extensions for Java Development

Extension	Language	Tags	Why use it	Example
Language Support for Java(TM) by Red Hat	Java	Utility, Developer Experience, Workflow	Supports Java development in VS Code. Providing Autocompletion, code refactoring, formatting, linting and more.	Without the extension, writing java code is less enjoyable.
Debugger for Java	Java	Debugging, Developer Experience	Allows you to start your java project and debug it.	When you press F5, the debugger starts your project and stops at breakpoints, showing the value of variables at the current line.
Project Manager for Java	Java	Developer Experience, Readability	Allows you to view the Java projects and their dependencies of the current workspace.	When you install the extension, you'll be able to create new Java Projects, view their dependencies, and manage them. If you need to view multiple projects at once, you'll have to add folders to the workspace.