Extensions
The exact 8 extensions to install for the Sahinov training stack — why each one exists, how to install it, and what changes after installation.
VS Code ships as a powerful baseline. Extensions make it a precise tool for your specific stack.
Think of VS Code extensions the way you think of Excel add-ins. Excel by default can do calculations and charts. Install Power Query and it can connect to databases and transform data. Install Solver and it can optimise across constraints. The base tool gains capabilities it did not have before.
Our training stack uses a specific set of 8 extensions. Every trainee installs all 8. Every project in this workshop assumes they are installed. This page tells you exactly what each one does and how to install it.
How to Install Any Extension
The process is identical for all 8. Learn it once, apply it 8 times:
Click the Extensions icon in the Activity Bar
The icon looks like a square made of four squares (two by two), with the top-right square slightly separated. Alternatively, press Ctrl+Shift+X.
In the search box at the top of the Extensions Sidebar, type the extension name or its ID
Extension IDs are listed in the table for each extension below. They are unique identifiers in the format publisher.extension-name. Searching by ID finds the exact extension with zero ambiguity.
Find the correct extension in the search results
Look at the publisher name below the extension title to confirm it matches. For popular extensions there may be several with similar names — the publisher distinguishes the real one from imitations.
Click the blue Install button
VS Code downloads and installs the extension. The Install button changes to a gear icon when done. No restart needed for most extensions.
Always verify the publisher. Some extension names are common words. A bad actor could publish "Prettier" under a fake publisher. The extension ID listed for each extension below is the definitive reference — it includes both the publisher and the extension name.
Extension 1 — Claude Code
Publisher: Anthropic
Extension ID: anthropic.claude-code
Search for: Claude Code
Why you need it
Claude Code is your AI coding assistant. It reads your code, understands your project, writes new code when you ask, explains what existing code does, fixes errors, suggests improvements, and runs terminal commands. You will use it constantly.
The VS Code extension is the primary interface for Claude Code on this machine. It adds:
- A Claude Code panel in the Activity Bar (Anthropic logo icon)
- The ability to select code in the editor and ask Claude about it
- The
/command system inside the chat panel - Inline code suggestions as you type
After installation
After installing:
- Click the Claude Code icon in the Activity Bar (Anthropic logo — a stylised "A")
- The Claude Code panel opens in the Sidebar
- Click Sign in and log in with your Anthropic account (the same account your Claude Code Pro subscription is on)
- Once signed in, you will see the chat interface
Hello and press Enter. If Claude responds, the extension is connected and working correctly.Extension 2 — GitLens
Publisher: GitKraken
Extension ID: eamodio.gitlens
Search for: GitLens
Why you need it
Git tracks every change to your code. GitLens makes that history visible — right inside the editor, without leaving VS Code or running any commands.
The most powerful feature is inline blame annotations: as you move your cursor to any line, GitLens shows a faint grey message at the end of the line saying who last changed it, when, and with what commit message. When you come back to code you wrote 2 weeks ago and cannot remember why you wrote it that way, GitLens shows you the commit message that explains it.
Other features:
- File history: See every version of the current file over time
- Branch comparison: See exactly what changed between two branches
- Commit graph: Visual timeline of all commits in the project
After installation
GitLens activates automatically. You do not need to configure anything. Move your cursor to any line in a file that has been committed to Git — you will see a faint annotation appear to the right of the line showing the commit information.
You, 2 days ago. If nothing appears, hover over the end of the line — annotations may be hover-only depending on the GitLens configuration.Extension 3 — Tailwind CSS IntelliSense
Publisher: Tailwind Labs
Extension ID: bradlc.vscode-tailwindcss
Search for: Tailwind CSS IntelliSense
Why you need it
Tailwind CSS is a utility-first styling system. Instead of writing CSS rules, you apply pre-built class names directly in your HTML and JSX. There are thousands of these class names. No one memorises them all.
Tailwind CSS IntelliSense gives you autocomplete for every Tailwind class name. When you type text- in a class attribute, it shows every available text-colour and text-size class. When you type p-, it shows every padding option. When you hover over any Tailwind class, it shows you the exact CSS it generates.
This extension is what makes Tailwind usable without having the documentation open in another tab all day.
After installation
Open any .tsx or .html file. Inside a className attribute, start typing a Tailwind class name. The autocomplete dropdown appears automatically. Press Tab to accept a suggestion.
.tsx file that uses Tailwind classes. Inside a className attribute, type text-. A dropdown should appear listing all available text-colour and text-size classes. If no dropdown appears, confirm the extension is installed and the file has a tailwind.config in the project root.Hover to see the CSS: Hover over any Tailwind class already applied to an element — a tooltip appears showing the exact CSS that class generates. This is the fastest way to understand what a class does.
Extension 4 — Prettier
Publisher: Prettier
Extension ID: esbenp.prettier-vscode
Search for: Prettier - Code formatter
Why you need it
Code formatting is the spacing, indentation, and line length of your code. Inconsistent formatting makes code harder to read — especially when multiple people work on the same project.
Prettier is a code formatter. When you save a file, Prettier automatically reformats it according to a consistent set of rules:
- Two-space indentation
- Consistent use of single vs double quotes
- Trailing commas where valid
- Lines wrapped at 80 characters
- Consistent semicolon usage
You never need to think about formatting again. You write code. Prettier cleans it up on save.
After installation
Installing is not enough — you must set Prettier as the default formatter. Here is the exact process:
Open any JavaScript or TypeScript file in the editor (.js, .ts, .tsx, .jsx)
Press Ctrl+Shift+P to open the Command Palette
Type "Format Document With" and press Enter when it appears in the list
A dropdown appears asking which formatter to use. Select Prettier - Code formatter
VS Code asks if you want to configure the default formatter. Click "Configure Default Formatter..." if prompted
Now open Settings (Ctrl+,) and search for "Format On Save". Tick the checkbox for Editor: Format On Save.
After this, every time you save a file (Ctrl+S), Prettier formats it automatically.
.tsx file. Add extra spaces between some words or add unnecessary blank lines. Press Ctrl+S. The file should immediately reformat itself: spaces normalised, blank lines removed, indentation corrected. If nothing changes, Prettier is not configured as the default formatter yet.If Prettier seems to do nothing: It may be conflicting with another formatter. Open a .tsx file, press Ctrl+Shift+P, type "Format Document With", and confirm Prettier is selected. If you see "multiple formatters" listed, you have two formatters installed — make sure Prettier is the default.
Extension 5 — ESLint
Publisher: Microsoft
Extension ID: dbaeumer.vscode-eslint
Search for: ESLint
Why you need it
ESLint is a code quality checker. While Prettier handles formatting (how code looks), ESLint handles logic quality (whether code is correct and follows best practices).
ESLint reads your code as you type and underlines problems in real time:
- Red underlines: Errors that will break your code or cause bugs
- Yellow underlines: Warnings about code that might cause problems
Examples of what ESLint catches:
- Using a variable before declaring it
- Importing something but never using it
- Using
==instead of===(a common JavaScript mistake) - Missing dependencies in a React
useEffect - Calling a function with the wrong number of arguments
Without ESLint, these problems only appear when the code runs — often after several steps of setup. With ESLint, they appear on the line where the problem is, as you type it.
The Excel analogy: ESLint is like Excel's formula error detection — the red cell border and error triangle that appears when your formula has a problem. But instead of just marking that a formula failed, it tells you exactly what is wrong and where.
After installation
ESLint activates automatically for any project that has ESLint configured (our training projects all do). Look at the bottom Status Bar — you will see an ESLint icon. If it shows a green circle, ESLint is running. If it shows a red circle with an ×, there is a configuration issue.
When you see a red underline you don't understand: Hover over it. A tooltip appears with the ESLint rule name and a description of the problem. Click "Quick Fix..." if it appears — ESLint can fix many problems automatically.
Extension 6 — ES7+ React/Redux/React-Native Snippets
Publisher: dsznajder
Extension ID: dsznajder.es7-react-js-snippets
Search for: ES7+ React/Redux/React-Native snippets
Why you need it
Writing a React component from scratch involves a lot of repetitive boilerplate — the import line, the function declaration, the props interface, the return statement. Every new component starts the same way.
Snippets are keyboard shortcuts that expand into boilerplate code. Type a short code, press Tab, and the full skeleton appears. Your cursor is placed inside the part you need to fill in.
| Type this | Press Tab | What appears |
|---|---|---|
rafce | Tab | Full React Arrow Function Component with export |
useState | Tab | const [state, setState] = useState() |
useEffect | Tab | useEffect(() => { }, []) |
imp | Tab | import from '' with cursor placed to fill in |
clg | Tab | console.log() |
The most important one is rafce — you will type this dozens of times per day when creating new components.
After installation
Open a new .tsx file (or any existing React file). On a blank line, type rafce and press Tab. The following appears:
Your cursor is placed on ComponentName — type your actual component name and press Tab again to move to the next placeholder.
Extension 7 — Auto Rename Tag
Publisher: formulahendry
Extension ID: formulahendry.auto-rename-tag
Search for: Auto Rename Tag
Why you need it
HTML and JSX use paired tags. Every <div> needs a closing </div>. Every <button> needs </button>. When you rename an opening tag, you also need to rename the closing tag — and if you forget, the code breaks.
Auto Rename Tag makes this automatic. When you change an opening tag, the closing tag updates simultaneously. No more forgetting to update both ends.
After installation
Open any .tsx or .html file. Find an element like <div>. Click on the div in the opening tag and rename it to section. Watch the closing </div> change to </section> at the same time.
This extension requires no configuration. It simply works.
.tsx file, find a <div> element and rename it to section by editing the opening tag. The closing </div> should update to </section> simultaneously. If both tags do not update together, the extension may not have loaded — try restarting VS Code.Extension 8 — Path Intellisense
Publisher: Christian Kohler
Extension ID: christian-kohler.path-intellisense
Search for: Path Intellisense
Why you need it
When you import a file in JavaScript or TypeScript, you write the path from the current file to the target file. On a project with hundreds of files across dozens of folders, getting the path right requires knowing the exact folder structure.
Path Intellisense provides autocomplete for file paths. As you type an import path, it suggests files and folders from your project. Press Tab to accept.
Navigate into folders by continuing to type. The autocomplete follows you.
After installation
Open any TypeScript file. Write import { something } from ' and start typing a path with ./ or ../. The autocomplete dropdown appears showing available files and folders.
All 8 Extensions — Summary
| Extension | ID | Purpose |
|---|---|---|
| Claude Code | anthropic.claude-code | AI coding assistant — the most important one |
| GitLens | eamodio.gitlens | Inline Git history and blame annotations |
| Tailwind CSS IntelliSense | bradlc.vscode-tailwindcss | Autocomplete for Tailwind class names |
| Prettier | esbenp.prettier-vscode | Auto-format code on save |
| ESLint | dbaeumer.vscode-eslint | Catch code errors in real time |
| ES7+ React Snippets | dsznajder.es7-react-js-snippets | Type rafce → full component skeleton |
| Auto Rename Tag | formulahendry.auto-rename-tag | Rename opening tag → closing tag updates too |
| Path Intellisense | christian-kohler.path-intellisense | Autocomplete for import file paths |
Checking installed extensions: Press Ctrl+Shift+X to open the Extensions Sidebar. Click "Installed" at the top of the search results (or search @installed). You should see all 8 listed. If any are missing, install them now.
After Installing All 8
Ctrl+Shift+X to open the Extensions Sidebar. In the search box, type @installed. Confirm all 8 extensions appear in the list. If any are missing, install them now before moving on to settings.Once all extensions are installed, do not proceed to the next step until you have verified:
- Claude Code panel is visible in the Activity Bar and you are signed in
- Tailwind IntelliSense shows suggestions when you type a class name in a TSX file
- Prettier formats on save — open a messy-looking file, save it, confirm it cleans up
- The ESLint icon in the Status Bar shows green
The verification checklist at the end of this section covers all of these systematically. For now, move on to configuring the VS Code settings.