5 VSCode extensions to write better TypeScript
We’ve all written some pretty terrible code in our day, but what if there was a way to write better code from the start?
That’s where VSCode extensions come in. I have selected and configured only five extensions for you. With this minimal set, you’ll be able to write cleaner code. Keep reading to know how to avoid common mistakes that lead to poor readability or unmaintainable code bases.
Of course, there are a lot more tools that you should use in your everyday work. But these are the five most important extensions for our goal: to write better TypeScript code.
1️⃣ Prettier
Think about yourself as a writer. Yes, a writer of stories. Now, think about your readers, maybe your future self… The first thing you grant for sure on a book is a predefined consistent size, margin, and use of space across every page. Same for your code base.
Fortunately, this is so easy to achieve with our first and most appreciated helper: Prettier. A code formatter that works with any editor. Is a command line utility that should be installed locally on your projects npm i -D prettier
The team created it at Facebook to solve the problem of code styles and formatting inconsistencies between projects. So Prettier is opinionated, meaning it automatically formats your code in a certain way, even if you don’t fully agree with its choices. But, I find Prettier’s style to be an improvement because it’s consistent across all workspaces, so I stick with its defaults as much as possible.
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"jsxBracketSameLine": true,
"printWidth": 120,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"semi": true,
"singleAttributePerLine": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}And I will repeat the golden word: consistency is key. To ensure its usage, there is a go-to extension that VSCode can call to format your code at every change, paste or save action. Your choice.
Is, of course, one of the most installed and rated extensions:
After installing it, you only have to tweak some settings, and you are good to go.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true
}Prettier does its job and collaborates with others extensions to format your code. For example, it works with ESLint to format your code after fixing errors. (More on this later)
2️⃣ Code Spell Checker
I told you to think of yourself as a writer, didn’t I? Well, you are. And you should be aware of your spelling mistakes. Code Spell Checker is a VSCode extension that prevents typos and spelling errors in your code.
It understands TypeScript, and even more, it knows about programming case types (camelCase, snake_case, PascalCase, UPPER_CASE_SNAKE_CASE, kebab-case…) It also works with comments and string values.
So, it can differentiate technical jargon from business. It’s a must-have extension for defining and ensuring the use of your model dictionary, even in your local language.
3️⃣ Material Icon Theme
Icons? What do you mean? Well, icons are a great way to improve the readability of your code. Material Icon Theme is a VSCode extension that adds many icons to customize your files and folders. It’s a great way to identify the type of file you are working on quickly.
It has pre-configured icons for many popular file types and frameworks (Angular, React, Nest…), but you can customize them to your liking.
I choose a naming convention for my files (taken almost from Angular) that follows the rule: business-feature.technical-type.extension.
And for technical type, I mean a controller, a service, a factory, a repository… So I can easily identify the kind of artifact I am working on.
Those are my customizations for TypeScript projects (yes, I am reusing some associations of my own).
{
"material-icon-theme.files.associations": {
"*.adapter.ts": "capacitor",
"*.config.ts": "tune",
"*.class.ts": "raml",
"*.dto.ts": "raml",
"*.entity.ts": "raml",
"*.enum.ts": "tune",
"*.environment.ts": "tune",
"*.index.ts": "lib",
"*.interface.ts": "raml",
"*.port.ts": "capacitor",
"*.repository.ts": "database",
"*.router.ts": "routing",
"*.settings.ts": "tune",
"*.store.ts": "redux-store",
"*.type.ts": "raml",
"*.use-case.ts": "purescript",
"*.utils.ts": "purescript",
"*.validation.ts": "document",
"CLI.md": "console",
"TASKS.md": "todo"
},
"material-icon-theme.folders.associations": {
"domain": "core",
"shell": "stack",
"state": "redux-store",
"ui": "views"
},
}4️⃣ Abracadabra, refactor this!
No matter your expertise or skills, you will write crapy code sooner or later. But now, yes now, is the better moment to correct it. The process called refactoring is just for that. It’s a way to improve your code base and make it more readable, maintainable, and scalable… without changing its features.
But ok, I know you ended your task and are tired. You don’t want to spend more time on this. If at least you had some magic 🪄
Here is the good news: VSCode has an excellent extension for that like a magician: Abracadabra, refactor this!
This extension offers a collection of refactorings you can apply to your code without spending too much time on it. For example, you can refactor your code by:
- extracting some instructions to new functions,
- surround other instructions with try-catch,
- extract complex inline expressions to constants,
- or deal with conditionals, to name a few.
Remember, good code is not written on the first try. It’s refactored.
5️⃣ ESLint
Last but not least comes ESLint, the war horse of Typescript developers. ESLint is a linter that you must install on every TypeScript project. Use it accompanied by the specifics of the language @typescript-eslint, and you are done. npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser.
But what is a linter? Linters are tools that can be used to detect errors in the way you write code. Linters are not compiler nor substitute for tests. They are static analysis tools that provide developers with an easy way to enforce coding standards.
ESLint can detect potential bugs and enforce best practices in your TypeScript program. You can use ESLint in two ways: from the command line and, yes, from within the VSCode editor with this extension.
You can configure the extension to run ESLint automatically when you work with a file. It also provides you with a list of errors and warnings in the Problems panel.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.enable": true,
"eslint.run": "onType"
}⚠️ Heads up!
Some ESLint rules conflict with Prettier. For example, Prettier may format your code with a single quote, but ESLint complains about it. There are plugins to avoid this npm i -D eslint-config-prettier eslint-plugin-prettier allowing each tool to do its job.
The following is the minimal configuration for ESLint to work with TypeScript and Prettier.
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["@typescript-eslint", "prettier"]
}Configuring ESLint rules is a huge topic that deserves another post, but I hope this helps you to get started.
🧰 To take away
- Use Prettier to ensure a consistent code style.
- Use Code Spell Checker to avoid typos and spread a standard business model dictionary.
- Use Material Icon Theme to encourage the use of naming standards with your files and folders.
- Use Abracadabra, refactor this! to improve your code effortlessly.
- And use ESLint to enforce best practices in your project’s codebase.
Honorable mentions ❓
🤖 AI generative tools; well, there is a revolutionary process underway, Github Copilot is one of the best… but it is not free. So I can only tell you that I am a happy user, but in no way am I going to suggest how to spend your money.
Add yours in the comments.
By the way, I have a file with all of my installed extensions published here:
🌅 Conclusion
In my previous post, I told you how to configure VSCode to help you write better TypeScript code.
In this post, I showed you how to configure five Visual Studio Code extensions that will help you write cleaner, better TypeScript. Many more extensions can help you with your daily work, but I hope this list will help you get started.
The next step is to customize ESLint so you can effortlessly write even better code. But this will be the subject of another post:
learn, code, enjoy, repeat
Alberto Basalo
