Here I’am again with a new publication of my experiences towards Fullstack Developer!!! 🚀🚀

In this post, I talk about tools for developers, specifically about Visual Studio Code!

The Visual Studio Code or just VS Code its a code editor developed by giant Microsoft, focused in multiplatform. This tool work with sintax highlights, inteligent completion code, snippets and, code refactoration. And the best: free and open source software, even if it is under a proprietary license.

💡 Curiosity: VS Code is based in Electron, a framework in NodeJS for build desktop applications. That is, all is Javascript 🎉!

All configs be in a gist on Github. Access here.

Fonts

• Firacode: https://github.com/tonsky/FiraCode

The propouse of this font is be a better for developers, with a Github repository, its free with SIL OPEN FONT license. Your concept is logical tokens in translate symbols, also its a friendly and beautiful font.

Example of Firacode in action, note the ≤ symbol here and, === too, cool right?

VS Code settings

Next, I describe the VS Code settings I use daily, to access the VS Code settings we use Ctrl + Shift + P for open the search box, find by Preferences: Open Settings (JSON). Follow the configs:

“terminal.integrated.fontSize”: 14

This configuration set the size of font in terminal of VS Code, in this case, I use 14 of size, its great to visualize problems ou debug code.

“workbench.startupEditor”: “newUntitledFile”

This configuration disable Welcome screen of VS Code, I prefer use the new tab with empty content. No frills here, let’s code 😅!

editor.tabSize: 2 editor.fontSize: 18 editor.lineHeight: 24 editor.fontFamily: firacode editor.fontLigatures: true (firacode necessário)

This is about our editor, simple configurations, let’s see:

• TabSize: reffers about indent size, here I set my favorite, 2 spaces, but 4 it’s normal here.
• FontSize: nothing to talk here, just size of font in our editor.
• LineHeight: here we config spacement between lines, nothing big, nothing small, here I use 24.
• FontFamily: FIRACODE ROCKS! 🧨🧨
• FontLigatures: here we allows the best of Firacode, when true, it’s change Firacode symbols when use logical tokens. ATTENTION: Firacode it’s required here.

“explorer.compactFolder”: false

Here we have a default config in VS Code I not like, when created a folder inside another, it is compacted in inline structure, not show a tree correct structure, folder inside another folder, weird right? Let me show:

Bléh

When set by false, we have:

Tree structure

“editor.renderLineHighligth”: “gutter”

This config set the line with the coursor. When not set, all line it’s highlight in a box:

Without config line highlight

It’s be confused when have much elements in our workspace, when set by “gutter” we have:

With config line highlight with gutter

“workbench.editor.labelFormat”: “short” “breadcrumbs.enable”: true

This configurations it’s about visualization and location.

When we have multiples files with same name, like a “index.js” we need a help with this. How to differ it? With folders name, but with the “short” flag active only the folder is show, not all path.

Same file names with folder tip

The breadcrumbs feature allows us to find ourselves inside the workspace in a discreet and elegant way, just below the tab that describes the file we are working on.

Breadcrumbs in VS Code

“extensions.ignoreRecommendations”: true

This config will not be show VS Code default recommendations, in our code, always have multiple files with a multiple another options of that, when recommendations be active it’s can cause confusion with another term in a same file in our code. Like a same variable name digited before and not accessible for this function. I prefer disable that.

“javascript.updateImportsOnFileMove.enable”: “never” “typescript.updateImportsOnFileMove.enable”: “never”

This setting is important. When move a file of folders, VS Code will be update all imports inside that, this can be a problem, we don’t always want this to happen, I always prefer to review all imports when it happens, because, generally, we’ll take advantage of this file and not just move it.

“explorer.confirmDragAndDrop”: false “explorer.confirmDelete”: false

Here a boring config, by default, VS Code always move file with drag and drop or when we remove a file from our project, a message is showed asking for a confirmation. I don’t like this. REMOVE.

“editor.rulers”: [80,120]

Last config, rules for our editor. Here we can config the max of characteres one line have be and, a limit for that. When coding, great lines will appear, this config allow only 120 characters in one line, launching warning when pass of 80. Cool, right? This makes our code more readable and organized.

Next, will be talk about VS Code extensions. Wait you here.