10 Best VS Code extensions for TypeScript


A vanilla code editor like Visual Studio Code (VS Code) gets you far in development. But if you want to write code faster and make fewer mistakes, then you need to make use of its vast library of extensions that are available in the marketplace.

There are thousands of different VS Code extensions available for your language of choice e.g. JavaScript, TypeScript, or Python. So it becomes really tough to find the right extension without trying them all.

I’ve tested more than hundreds of extensions for TypeScript for this blog post and curated my findings to a list that contains the 10 best VS Code extensions for TypeScript to save your time.

Here are the 10 best VS Code extensions for TypeScript:

What are the best VS Code extensions for TypeScript?

Here are my top picks for the best vs code extensions for TypeScript that you should try out in your code editor.

1. ESLint

ESLint is a linter that statically analyzes your code to find problems based on a set of pre-configured rules. Normally you run ESLint through your terminal to check your code, but now you get immediate feedback by running ESLint as a VS Code extension.

VS Code ESLint extension showing a demo on an error message
VS Code ESLint extension showing a demo on an error message

You can configure the extension to automatically fix the issues when you hit save in the VS Code editor. Here are the settings that I’m using for this extension, so it will automatically fix the ESLint findings:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.run": "onSave",
  "eslint.validate": [
    "typescript"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],

2. DotEnv

The DotEnv VS Code extension adds syntax highlight to .env variables. In my projects, I make a lot of use of .env variables. So having syntax highlight on these files makes me less prone to mistakes and allows me to read the environment variables a lot quicker compared to a file with only grey text.

dotenv vscode extension showing syntax highlight on an .env.example file
dotenv vscode extension showing syntax highlight on an .env.example file

3. Prettier

Prettier is a code formatter and enforces a consistent style that you’ve preconfigured in your project. Having a consistent style can greatly benefit team productivity since PR’s can focus on the code itself instead of discussion surrounding the code style.

To use Prettier in order to format your code, you can run the following commands

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

You can also decide to use Prettier as the default formatter for a specific language. That means when you run the format command in VS Code, it will automatically use Prettier. To enable it, add the following to your VS Code settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Note: Did you know you can combine Prettier with ESLint? You can combine both tools to improve your code quality tremendously!

4. Visual Studio IntelliCode

Visual Studio IntelliCode is an extension that provides AI-assisted code completion. In my opinion, this should become part of VS Code since every developer benefits from having code completion.

Example of the Visual Studio IntelliCode extension auto-completion

As you can see in the example demo, if a method or class contains interfaces then IntelliCode should be able to pick the references and will try to auto-complete it for the user as it’s typing the code.

5. Tailwind CSS IntelliSense

Another great extension that adds auto-complete, but this time for Tailwind CSS. If you’re doing front-end development, there is a big chance you’re using CSS. Tailwind is a popular framework amongst CSS developers and having this extension enabled improves your experiences by adding great features such as autocomplete, syntax highlighting, and linting.

Example of the Tailwind CSS IntelliSense VS Code extension

As you can see in the demo, the extension will automatically try to autocomplete Tailwind utility classes for you.

6. Sort Lines

The VS Code extension: sort lines does what the name suggests which is sorting lines in your files. When creating lists in TypeScript for example it can be a real-time-saver if you can automatically sort items alphabetically for instance. You can sort your code in the following ways:

CommandSort lines functionality
sortLinesAscending, case-sensitive (default)
sortLinesCaseInsensitiveAscending, case-sensitive
sortLinesCaseInsensitiveUniqueUnique ascending, case-sensitive
sortLinesReverseDescending, case-sensitive
sortLinesLineLengthLine length ascending
sortLinesLineLengthReverseLine length descending
sortLinesVariableLengthVariable-length ascending
sortLinesVariableLengthReverseVariable-length descending
sortLinesNaturalSorts alphabetically except groups with multi-digit numbers
sortLinesUniqueRegular character code keeping only unique items
sortLinesShuffleShuffles output
removeDuplicateLinesRemoves duplicate lines
Table displaying all sort lines vs code extension functionalities

To invoke the Sort lines functionality type the following command

CMD + Shift + P -> Sort Lines

This will automatically list the options to sort your lines. My most used sort function when I code in TypeScript is Natural which Sorts alphabetically but groups multi-digit numbers.

7. Better comments

The Better comments VS Code extension creates human-friendly comments in your TypeScript code. By adding different colors for different annotations, it becomes easier to distinguish warnings from important messages as you can see in the example below.

Better comments VS Code extension example of comment highlighting
Better comments VS Code extension example of comment highlighting

8. GitLens

If you’re developing TypeScript projects, then there’s a big chance you’re using git. The extension: GitLens improves the git functionality in VS Code. A couple of notable features that are worth mentioning are:

  • git blame – shows who modified each line within a file
  • git changes – highlights any local (unpublished) changes or lines changed by the most recent commit
  • git revision navigation – shows the git history of a file and allows you to effortlessly navigate it
Gitlens VS Code extension example of git blame

9. Git Graph

The Git Graph VS Code extension is unmissable if you’re a heavy git user. The extension allows you to view your git commit history as a graph. You’ll get an instant overview of all previous commits, branches, tags, and users who committed the changes.

Git Graph VS Code extension example of the graph view

Additionally, it grants the user the ability to perform git actions such as commit, merge, revert, checkout, rebase, rename and reset branches. Having the ability to do this from a single overview within VS Code improves productivity tremendously and doesn’t get you out of your flow.

10. GitHub Copilot

The GitHub Copilot VS Code extension couldn’t be left out on this list. This is essentially an AI pair programmer that gives suggestions on what it thinks you’re going to write in your code. It can even write complete methods and classes for you.

But how is the AI able to do that? GitHub Copilot has been trained on billions of lines of public code on GitHub using Open AI (machine learning). So it has been trained to recognize patterns and with that knowledge, it’s able to determine what the developer is going to create in code.

In my experience, I notice that when the TypeScript projects grow bigger over time, the better GitHub copilot becomes in predicting what kind of code I want to write. See the following example to get an understanding of how powerful AI pair programming can be.

GitHub Copilot VS Code extension example of predicting a function

Conclusion

To summarize, as a TypeScript developer it can be a daunting task to find the right VS Code extensions to improve your workflow and productivity.

Therefore I created this list containing the 10 best VS Code extensions for TypeScript including EsLint, DotEnv, Prettier, Visual Studio IntelliCode, Tailwind CSS IntelliSense, Sort lines, Better comments, Git Lens, Git Graph, and GitHub Copilot.

You’re daily productivity and focus will improve and next to that your code is less prone to bugs because of the guardrails and highlights that are present in these VS Code extensions.


Danny Steenman

Is a Principal Cloud Consultant with a background in DevOps Engineering and thorough hands-on experience in architecting and building highly scalable distributed systems on AWS Cloud using Infrastructure as Code.

A prominent leader who is passionate about sharing AWS technical expertise by writing technical articles.