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.
It becomes really tough to find the right extension without trying them all.
Therefore 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:
Table of Contents
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.
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.
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.
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 SelectionYou 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.
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.
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:
| Command | Sort lines functionality |
|---|---|
| sortLines | Ascending, case-sensitive (default) |
| sortLinesCaseInsensitive | Ascending, case-sensitive |
| sortLinesCaseInsensitiveUnique | Unique ascending, case-sensitive |
| sortLinesReverse | Descending, case-sensitive |
| sortLinesLineLength | Line length ascending |
| sortLinesLineLengthReverse | Line length descending |
| sortLinesVariableLength | Variable-length ascending |
| sortLinesVariableLengthReverse | Variable-length descending |
| sortLinesNatural | Sorts alphabetically except groups with multi-digit numbers |
| sortLinesUnique | Regular character code keeping only unique items |
| sortLinesShuffle | Shuffles output |
| removeDuplicateLines | Removes duplicate lines |
To invoke the Sort lines functionality type the following command
CMD + Shift + P -> Sort LinesThis 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.
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
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.
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).
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.
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.
