This article is a compilation of setup that I made in VSCode to look better and have the functionalities that I consider the minimum necessary to development.
The final result:
Table of Contents
Improving visual hiding lateral bar, title bar and minimap
1.1. Adding keyboard shortcuts
1.2. Hiding the bars in settingsAdding JetBrains Mono with ligatures
2.1. Installing the font on your computer
2.2. Using it on VSCode
4.1 General
4.2 React Development
4.3 Themes
4.4 Flutter
PS: If you are using macbook, replace ctrl with cmd.
1. Improving visual hiding lateral bar, title bar and minimap
1.1. Adding keyboard shortcuts
Open the command search using the shortcut ctrl + shift + p
and type 'keyboard shortcuts', then select 'Preferences: Open Keyboard Shortcuts (JSON)' as showed in the image bellow.
Then add the following code in the opened file:
// Place your key bindings in this file to override the defaults
[
/**
* Activity Bar
**/
{
"key": "ctrl+k ctrl+e",
"command": "workbench.view.explorer"
},
{
"key": "ctrl+k ctrl+g",
"command": "workbench.view.scm"
},
{
"key": "ctrl+k ctrl+d",
"command": "workbench.view.debug"
},
{
"key": "ctrl+k ctrl+x",
"command": "workbench.extensions.action.showInstalledExtensions"
}
]
1.2 Hiding the bars in settings
Open the settings similar to how we did previously, using the shortcut ctrl + shift + p
and searching for 'Preferences: Open Settings (JSON).
In the JSON file, add the following options:
"window.titleBarStyle": "custom",
"workbench.activityBar.visible": false,
"editor.minimap.enabled": false,
2. Adding JetBrains Mono with ligatures
2.1 Installing the font on your computer
Head to https://www.jetbrains.com/lp/mono/, download the font and install it according to your operating system.
2.2. Using it on VSCode
Open the settings.json (explained in step 1.2) and add the following content inside the file:
"editor.fontLigatures": true,
"editor.fontFamily": "'JetBrains Mono','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
3. Additional settings
The following settings are for improving git usage, editor update import, enable bracket pair (Check VSCode update for more info), format on save, define default formatter. "Compact folders" is for when the folder only have one nested folder, when disabled, won't show inline.
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.autofetch": true,
"explorer.compactFolders": false,
"editor.wordWrap": "on",
"extensions.ignoreRecommendations": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
"diffEditor.ignoreTrimWhitespace": false,
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
],
"eslint.format.enable": true,
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
4. Adding extensions
These are the main extensions that I'm currently using:
Top comments (0)