Skip to main content

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?

Pencils by noslifactory on Unsplash

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

It was created by the team 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 I can. 

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": true,
  "printWidth": 80,
  "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:

Install Prettier extension

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 to prevent typos and spelling errors in your code.

Install Code Spell Checker extension

It understands TypeScript, and even more, it knows about programming case types _(camelCase, snake_case, PascalCase, UPPER_CASE_SNAKECASE, kebab-case...) It also works with comments and string values.

So, it can differentiate technical jargon from the 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 tons of icons to customize your files and folders. It's a great way to quickly identify the type of file you are working on.

Install Material Icon Theme extension

It has pre-configured icons for many popular file types and frameworks (Angular, React, Nest...), but you can also 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.activeIconPack": "angular",
  "material-icon-theme.files.associations": {
    "CLI.md": "console",
    "TASKS.md": "todo",
    "*.api.ts": "database",
    "*.constant.ts": "tune",
    "*.controller.ts": "puppet",
    "*.dto.ts": "raml",
    "*.entity.ts": "raml",
    "*.factory.ts": "hardhat",
    "*.enum.ts": "document",
    "*.interceptor.ts": "purescript",
    "*.interface.ts": "template",
    "*.model.ts": "raml",
    "*.provider.ts": "angular-resolver",
    "*.repository.ts": "database",
    "*.store.ts": "redux-store",
    "*.type.ts": "template",
    "*.vo.ts": "raml"
  },
  "material-icon-theme.folders.associations": {
    "business": "functions",
    "domain": "functions",
    "dto": "rules",
    "entities": "class",
    "filters": "other",
    "login": "secure",
    "queries": "graphql",
    "repository": "database",
    "repositories": "database",
    "state": "redux-store",
    "transactions": "pipe",
    "ui": "components",
    "users": "secure"
  }
}

4️⃣ Abracadabra, refactor this!

No matter your expertise or skills, sooner or later you will write crapy code. But now, yes now, is the better moment to correct it. The process called refactor is just for that. It's a way to improve your code base, to make it more readable, more maintainable, more scalable... without changing its features.

But ok, I know, you ended your task at hand and you 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 a great extension for that like a magician: Abracadabra, refactor this!

Install Abracadabra extension

This extension offers you a collection of refactorings that 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 inline complex 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 with 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. There are two ways you can use ESLint: from the command line, and yes, from within the VSCode editor with this extension.

Install ESLint 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 to have 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

  1. Use Prettier to ensure a consistent code style.
  2. Use Code Spell Checker to avoid typos and spread a common business model dictionary.
  3. Use Material Icon Theme to encourage the use of naming standards with your files and folders.
  4. Use Abracadabra, refactor this! to improve your code effortlessly.
  5. And use ESLint to enforce best practices in your project’s codebase.

Honorable mentions ❓

Give yours in the comments.

🌅 Conclusion

In my previous post, How to configure VSCode to code better TypeScript, I told you how to configure VSCode itself to help you write better TypeScript code.

In this post, I showed you how to configure 5 VSCode extensions that will help you write cleaner, better TypeScript. There are many more extensions that can help you with your daily work, but I hope this list will boost you get started.

The next step is to customize ESLint so you can effortlessly write even better code. This is the subject of another post: Fine-tune ESLint rules to write better TypeScript

learn, code, enjoy, repeat

Alberto Basalo

Labels:

Popular posts from this blog

Fine-tune ESLint rules to write better TypeScript

Writing clean code is a lot easier with the right tools well configured. ESLint is a static analyzer for JavaScript programs. So what does that mean and what can it do for my TypeScript code? First things first, by static it means that you don't need to run or even compile a program to parse it. Analyzing means that it checks your code searching for flaws or bad metrics that can cause problems in the long run. The ESLint is a linter that runs before the compiler. Witch runs before your automated tests and the end-user. Is your first line of defense and should be as integrated with your editor as possible. For the details about integrating ESLint and VSCode, you can read my article to configure basic extensions But ESLint would not be so popular if it was not extensible and configurable . And there is the real power and complexity. In this article, I'll walk you through
Read more

10 commandments to naming and writing clean code with TypeScript

A code writer is like any other writer; writes to be read and understood . To do so it must obey certain laws. They are so important that must be followed religiously. Being a good writer is an art. But you can be a better programmer by knowing and applying a set of standards. In this guide, I will show you TypeScript samples for the  10 rules of clean naming . When you're finished, you'll be able to write heavenly code.Let there be code naming conventions 1️⃣ Be Descriptive Add value without being repetitive. Context is key. Prefer clarity over saving space. We are not in the ‘90s’ anymore. // ❌ const width = 5 ; class Image { imageWidth = width ; } // ✅ const imageWidth = 5 ; class Image { width = imageWidth; } 2️⃣ Be Meaningful Use the same word for the same concept. Create a dictionary for business and infrastructure common words. // ❌ getClient () {} readProvider () {} postCustomer () {} // ✅ getClient ()
Read more

How to configure VSCode to code better TypeScript

Writing a more readable code is your first goal as a programmer. This initial Visual Studio Code setup makes your job easier. Any good worker must know and customize his tools for the job at hand. With minor tweaks, VSCode is the perfect tool to write TypeScript . There are plenty of guides to configure VSCode . Most of them include a lot of extensions. But almost none starts from the very beginning, with no extension at all. I am an enthusiast of writing clean code , so I do my best to promote and facilitate this goal, and I am sure that this can help you to write better code. In this post, you will learn how to adapt VS Code to write better TypeScript code, even without any extension. And above all, you will get tips to adopt good habits and detect programming vices. 🎒 Prerequisites To complete this tutorial, you will need: A local copy of Visual Studi
Read more