Skip to main content

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.

Pencils by Alexander Grey on Unsplash

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:

1️⃣ Size matters

Hide minimap

First of all, get rid of what is not important. Minimap is good for knowing where you are on long files. But long files are evil, usually meaning a poor separation of concerns in the code.

Don´t feed the devil. Make it hurt you. Enforce work on several small files (one class or module of functions each) that are easy to understand and maintain.

Choose a big font size

The older you are, the bigger you need the font. But even young eyes will appreciate reducing the effort. Further, increase the font size for screencast mode if you have to share your screen or make a video.

Set the line length to wrap after a limit

Big long lines are difficult to read. And also makes me question what this instruction is doing No matter the exact limit, as long as you enforce it. Around 100 chars are ok; be sure to use it for HTML also.

2️⃣ Format early and always

Choose a formatter

The editor will ask you for a formatter for every kind of file. It is better to assign formatters on settings and forget about them. Start with the VSCode defaults, then you can install more formatters.

Enforce formatting

By default is up to you to format a file. Having to ask every time for the formatter is annoying. Fortunately, you can automate the process to run while writing or pasting code and/or when saving the file.

Select full auto-indent.

Indentation helps to read and interpret your code. Some languages enforce it (say Python, YAML...) But for TypeScript is not mandatory, so you should take control of it. And yes, also for HTML.

Indentation size does not matter; as long as you enforce to use always the same. I stick with 2 chars, but 4 chars are also a good choice.

3️⃣ Take control of files, folders, and import paths

Hide what you don`t need

Folders like node_modules and others used only by tools like .git are not part of your everyday job. Exclude them from the search and the view panes. Also, don't make the IDE watch for changes on folders that are not needed.

Show the tree

Don´t compact folders, show the full hierarchy, even if the folder has only one subfolder.

Import paths

Make VSCode update imports paths on file movements. Even you can ask him to clean the import section on file save.

4️⃣ Add color to add meaning

Color theme

Choosing a theme color is pleasant activity but can be time-consuming, enjoy it responsibly. I tend to use Dark themes, but you know, there's no accounting for taste. My only advice is to avoid themes with italics. (More on this later)

Icon theme

Having a visual hint of the file content is a must for me. Starting with bare bone themes I like to use the Seti theme.

Errors and warnings

When programming, the code contains many incomplete or syntactically incorrect declarations. Early feedback is good, but too much color is annoying. I prefer pale tones for those little doodles.

Brackets, parentheses, braces

It's good to have a visual hint of the structure of your code. Blocks for class and function definitions. Brackets for array and object literals. Parentheses for function calls. More braces for if, for, while, etc.

So I enable bracket pairs colorization and its guides. But.

As the code evolves there are chances of nesting control structures. Or with functional programming, there are even more chances of nesting function calls and definitions. Nesting, nesting, nesting.

Nesting is evil; no color can avoid it. I use a set of colors to make it clear when it went too deep. Whenever I see a red brace, I know it is time to refactor.

Where are you?

With the ability to open more than one file, and also big screens, is not easy to know where you are. And some color themes make things worst. So it's better to control certain things by ourselves, no matter which color theme is chosen.

So I use a bright color to mark and find the cursor, and a dark border for the current line (I need to change this on bright themes). Furthermore, I like adding some extra bright colors on editor tabs to make it obvious which files are the active ones on each pane.

5️⃣ Use word styling to make sense of the code

Color themes add color to code, and it's a good job they have to do. Just color. Word styling including italics, bold, underline, etc. is an extra that we can use on our own.

I prefer to take care of those styles myself. No matter the theme color, I use the same stylistic attributes for the same semantics. This makes me feel at home with the code. Let's take a closer look at what you can do with word styling.

The control flow is the most important

Conditionals, returns, exceptions, etc. are the logic elements at the core of the language. They are important and decisive, make them Bold and Italic;

The business language

Definitions of classes, properties, and methods (or functions) are where you enrich the programming language with the business jargon. Make the model scream, write it in bold.

Calling functions are running executions

Method or function calls mean instructions that do something. They are the verbs of your prose. I like them running in italic.

Everything else

The rest of the text is less important, so your eyes don`t need to be attracted by it. Storage and visibility modifiers; comments; strings; numbers; etc. are all fine in normal text.

🧰 To take away

So you were waiting for the settings? Wait no more.

Settings file

Copy and change where you need to. Here you will know how to find your settings file

Following is a gist with the JSON settings you need to adapt VSCode to write better TypeScript.

🧑🏼‍💻 Gist with my updated settings

Feel free to leave comments and share your settings.

Settings sync

After having customized a local copy of VSCode, you will want to sync your settings on every machine or even the web editor of GitHub. Here you will know how to do it

💡 One more tip: Maintain your JSON files sorted to easily find what you need. Can be done without any extensions by using online JSON sorters


🌅 Conclusion

In this article, you configured a bare-bone Visual Studio Code to help you while coding.

The next step is to improve it by installing and configuring extensions so you can effortlessly write better TypeScript. Read more in my post, 5 VSCode extensions 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