Welcome 👋

Spanish version

This repository stores my custom Visual Studio Code configurations with Vim, including the settings.json, keybindings.json files, and my custom color scheme. It also includes a list of extensions I use to optimize the development environment.

Editor Interface and Appearance

VSCode Welcome Page

Editor with Open Files

🔌 Extensions

• ESLint
• Prettier - Code Formatter
• Vim

⚙️ Configuration Options

VSCode

• "editor.defaultFormatter": sets the default formatter
• "editor.fontFamily": sets the font type for the editor
• "editor.cursorSurroundingLines": sets the number of additional lines to display around the cursor
• "editor.inlineSuggest.enabled": enables inline code suggestions as you type
• "editor.suggest.insertMode": configures the behavior of code suggestions when inserting suggested text
• "editor.suggestFontSize": sets the font size for code suggestions
• "editor.guides.bracketPairs": displays vertical guides to highlight bracket pairs
• "editor.bracketPairColorization.enabled": enables bracket pair colorization
• "editor.lineNumbers": displays line numbers relative to the cursor position
• "editor.wordWrap": enables automatic line wrapping
• "editor.detectIndentation": disables automatic indentation detection
• "typescript.preferences.importModuleSpecifier": configures how modules are imported in TypeScript
• "typescript.updateImportsOnFileMove.enabled": enables updating of TypeScript imports when moving files
• "editor.tabSize": sets the tab size
• "emmet.includeLanguages": enables Emmet features for the JavaScript programming language when working in HTML files
• "files.autoSave": sets the auto-save option
• "editor.fontLigatures": enables typographic ligatures
• "editor.rulers": disables vertical guides
• "editor.renderWhitespace": hides whitespace
• "editor.smoothScrolling": enables smooth scrolling
• "editor.stickyScroll.enabled": disables sticky scrolling
• "explorer.confirmDelete": disables file deletion confirmation in the File Explorer
• "explorer.confirmDragAndDrop": disables drag and drop confirmation in the File Explorer
• "editor.guides.indentation": disables indentation guides
• "editor.linkedEditing": enables linked editing, which allows simultaneous editing of similar symbols
• "editor.cursorBlinking": sets the cursor blinking style
• "editor.minimap.enabled": disables the minimap
• "editor.selectionHighlight": disables text selection highlighting
• "editor.wordSeparators": defines the characters that are considered word separators when making word selections
• "window.menuBarVisibility": sets the menu bar visibility to only appear when the Alt key is pressed
• "workbench.editor.showTabs": displays tabs for open files at the top of the workspace
• "window.titleBarStyle": sets the window title bar style
• "workbench.editor.labelFormat": sets the label format for tabs in open files
• "[json]": specific configuration for JSON files, but does not contain additional configurations
• "[html]": specific configuration for HTML files, using the "vscode.html-language-features" formatter
• "window.title": sets the window title (For example: your name)
• "workbench.layoutControl.enabled": disables controlled layout in the workspace
• "window.restoreWindows": configures how open windows should be restored at startup
• "window.commandCenter": enables the Command Center in the window
• "symbols.hidesExplorerArrows": disables expansion arrows in the File Explorer

💡 I chose to configure "editor.formatOnSave": false because, at times, I prefer not to have automatic formatting on save. For this reason, I assigned <leader>fd to use it when I need to format the document.

Vim

• "vim.foldfix": true: fixes the folding error when using Ctrl+Shift+[ (Fold) and Ctrl+Shift+] (Unfold)
• "vim.easymotion": true: facilitates quick navigation in the text
• "vim.incsearch": true: highlights search results as you type
• "vim.useSystemClipboard": true: allows the use of the system clipboard
• "vim.useCtrlKeys": true: enables the use of control keys for specific commands
• "vim.hlsearch": true: enables search highlighting
• "vim.normalModeKeyBindingsNonRecursive": defines key bindings in normal mode

Vim Configuration in VSCode

With this configuration, my goal is for vim/neovim users to feel familiar, thus facilitating the migration process. I have tried to add comments on each mapping or key combination, corresponding to their different modes.

Vim Modes

• Normal mode (vim.normalModeKeyBindings)
• Non-recursive normal mode(vim.insertModeKeyBindings)
• Insert mode (vim.insertModeKeyBindings)
• Visual mode (vim.visualModeKeyBindings)

Handling Multicursor with Vim

It is important to mention that, when using the Vim extension in VSCode, a conflict can arise with VSCode's default multicursor functionality. This feature allows you to make edits in multiple places at the same time. However, the default keyboard shortcuts can interfere with Vim commands.

To avoid this conflict, I have opted for an alternative solution using the gb command in Vim. This command allows you to select all occurrences of the word under the cursor, similar to how VSCode's multicursor functionality would. Here are the steps to use it:

1. Position the cursor at the desired location.
2. Press space n to create a new cursor.
3. If you want to select all occurrences of the word under the cursor, you can use the gb command.
4. To exit multicursor mode, simply press ESC twice.

Using the Explorer

1. Expand and Collapse the Explorer: When the editor is open, you can expand or collapse the explorer by pressing space e. This command is equivalent to the workbench.action.toggleSidebarVisibility action in VSCode.

2. Focus on the Explorer: If you want to focus on the explorer to navigate between your files and folders, simply press <ctrl+h>.

3. Return Focus to the Editor: To return focus to the editor, press ctrl+1. If you want to hide the explorer after returning focus to the editor, you can press space e again.

Prettier

The following three settings are dedicated to JavaScript, TypeScript, and React:

• "semi": indicates that semicolons are not added at the end of sentences
• "singleQuote": uses single quotes instead of double quotes for text strings
• "trailingComma": does not add commas at the end of lists and objects
• "htmlWhitespaceSensitivity": ignores whitespace in HTML files when formatting them.

Final Notes

📝 This configuration is just a base and you can modify it to your liking with total freedom. Don't hesitate to experiment and customize it to suit your needs! 💻

👀 For those who may be interested, the color scheme I use is a custom one that I created to suit my preferences. Unfortunately, I cannot share this color scheme in the VSCode extensions store, as I do not have an Azure account. However, I hope you enjoy the other customizations and configurations that I have shared in this repository.