How to configure VSCode to code better TypeScript
The initial settings to make your work easier and why they matter to write a better code
The IDE is the primary tool for any developer. Good workers must know and customize their devices for the job. With minor tweaks, VSCode is the perfect tool to write TypeScript.
Give me six hours to chop a tree, and I will spend the first four sharpening the axe. Abraham Lincoln
I am an enthusiast of writing clean code, so I promote and facilitate this goal, which can help you write better code.
There are plenty of guides to configure VSCode. Most of them include a lot of extensions. But only some start from the beginning, with no extension.
This post will teach you 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 the following:
- A local copy of Visual Studio Code
- Know how to open the Settings panel in VSCode
- No need for any extensions at the moment.
- Having a GitHub account is always helpful.
- Patience; at the bottom, you will find my settings ready to use.
1️⃣ Size matters
Hide minimap
First of all, get rid of what is not essential. 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 (from 80 to 120) chars are ok; be sure to use it for HTML.
{
"editor.minimap.enabled": false,
"editor.fontSize": 16,
"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 120,
"html.format.wrapLineLength": 120,
}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 when saving the file.
Select full auto-indent.
Indentation helps to read and interpret your code. Some languages enforce it (say Python, YAML…), but 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.
{
"editor.autoIndent": "full",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "none",
"editor.tabSize": 2,
"html.format.indentInnerHtml": true,
"html.format.wrapAttributes": "auto",
}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 regular job. Exclude them from the search, and the view panes. Also, don't make the IDE watch for changes in folders that are not needed.
Show the tree
Don´t compact folders; show the entire 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.
{
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll": true,
"source.organizeImports": true
},
"explorer.compactFolders": false,
"files.exclude": {
"**/.DS_Store": true,
"**/.git": true,
"node_modules/": true
},
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.importModuleSpecifier": "non-relative",
"typescript.updateImportsOnFileMove.enabled": "always",
}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 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, nesting function calls and definitions have even more chances — Nesting, nesting, nesting.
Nesting is evil; no color can avoid it. I used 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 big screens, it is not easy to know where you are. And some color themes make things worst. So it’s better to control certain things 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).
Even I like adding some bright colors on tabs to make it obvious which files are the active ones on each pane.
{
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": true,
"workbench.colorCustomizations": {
"editorCursor.foreground": "#3fb950",
"editor.lineHighlightBorder": "#000000",
"editorBracketHighlight.foreground1": "#a371f7",
"editorBracketHighlight.foreground2": "#58a6ff",
"editorBracketHighlight.foreground3": "#3fb950",
"editorBracketHighlight.foreground4": "#d29922",
"editorBracketHighlight.foreground5": "#db6d28",
"editorBracketHighlight.foreground6": "#f85149",
"editorError.foreground": "#f85149",
"editorWarning.foreground": "#d29922",
"tab.activeBorder": "#3fb950",
"tab.activeBorderTop": "#3fb950",
"terminalCursor.foreground": "#3fb950"
},
"workbench.colorTheme": "Winter is Coming (Dark Blue - No Italics)",
"workbench.iconTheme": "material-icon-theme",
}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 paint. Word styling, including italics, bold, underline, etc., is an extra 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 look closely 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 essential 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 business jargon. Make the model scream, and 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.
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "Control flow",
"scope": "keyword.control, keyword.control.flow",
"settings": {
"fontStyle": "italic bold"
}
},
{
"name": "Definitions",
"scope": [
"entity.name.type.class",
"meta.definition.method",
"meta.definition.property",
"meta.definition.function",
"entity.name.section.markdown"
],
"settings": {
"fontStyle": "bold"
}
},
{
"name": "Function/Method Calls and HTML attributes",
"scope": [
"meta.function-call",
"keyword.operator.new.ts",
"entity.other.attribute-name.html"
],
"settings": {
"fontStyle": "italic"
}
},
{
"name": "Other",
"scope": [
"keyword.control.import",
"keyword.control.export",
"keyword.control.from",
"keyword.operator",
"meta.type.annotation",
"storage"
],
"settings": {
"fontStyle": ""
}
}
]
},
}🧰 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 learn how to find your settings file.
Following is a gist with the JSON settings you need to adapt VSCode to write better TypeScript.
Feel free to leave comments or 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 learn how to do it
💡 One more tip: Maintain your JSON files sorted to find what you need quickly. 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 to write better code effortlessly. Read more in my post, 5 VSCode extensions to write better TypeScript:
learn, code, enjoy, repeat
Alberto Basalo
