better-vscode
Make VS Code better
Index
- 🔧 Settings
- 🚄 Improve productivity
- Always update imports when a file is moved
- Add a vertical line at max line width
- Improve bracket pair visualization
- Display function references
- Opened files remain open
- Don't require confirmation when files are moved
- Auto-close JSX tags
- Auto rename HTML closing tag
- Use native tabs (MacOS only)
- Sticky scroll
- Don't use aliases when renaming
- Always use braces for JSX attribute completion
- Auto-complete parameters when picking suggestion
- Enable inline suggestions
- Use the typescript version of your project
- Do not ask for confirmation when deleting files
- ✨ Minimize visual clutter
- 🎊 Flair
- 🚄 Improve productivity
- ⌨️ Keybindings
- 🧩 Extensions
- 💅 Themes
🔧 Settings
🚄 Improve productivity
Always update imports when a file is moved
"typescript.updateImportsOnFileMove.enabled": "always",Add a vertical line at max line width
"editor.rulers": [80],Improve bracket pair visualization
"editor.guides.bracketPairs": true,Display function references
Easily spot if a function is unused
"typescript.referencesCodeLens.enabled": true,
"typescript.referencesCodeLens.showOnAllFunctions": true,Opened files remain open
"workbench.editor.enablePreview": false,Don't require confirmation when files are moved
"explorer.confirmDragAndDrop": false,Auto-close JSX tags
"typescript.autoClosingTags": true,Auto rename HTML closing tag
"editor.linkedEditing": true,Use native tabs (MacOS only)
"window.nativeTabs": true,You need to open projects separately and then merge windows with: Merge all windows
Sticky scroll
"editor.stickyScroll.enabled": true,Don't use aliases when renaming
"typescript.preferences.useAliasesForRenames": false,Always use braces for JSX attribute completion
Makes attributes always consistent
"typescript.preferences.jsxAttributeCompletionStyle": "braces",Auto-complete parameters when picking suggestion
"typescript.suggest.completeFunctionCalls": true,Enable inline suggestions
"editor.inlineSuggest.enabled": true,Use the typescript version of your project
"typescript.tsdk": "node_modules/typescript/lib",Do not ask for confirmation when deleting files
Use git to undo instead
"explorer.confirmDelete": false,✨ Minimize visual clutter
Turn off breadcrumbs
"breadcrumbs.enabled": false,Hide tab close button
You can close tabs with the keyboard shortcut anyway
"workbench.editor.tabCloseButton": "off",Turn off minimap
You have scrollbar annotations anyway
"editor.minimap.enabled": false,Enable file nesting
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,Hide unnecessary Gitlens features
"gitlens.codeLens.authors.command": false,
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.statusBar.enabled": false,
"gitlens.statusBar.pullRequests.enabled": false,
"gitlens.plusFeatures.enabled": false,
"gitlens.virtualRepositories.enabled": false,
"gitlens.codeLens.enabled": false,
"gitlens.menus": false,Increase line height
"editor.lineHeight": 24,Add a delay before hover information is shown
"editor.hover.delay": 500,Less information in tabs
"workbench.editor.labelFormat": "short",No git decorations
"git.decorations.enabled": false,Better window title
"window.title": "${rootName}${separator}${activeEditorMedium}",Limit open tabs
Closes the oldest one when limit is exceeded
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.value": 8,🎊 Flair
Smooth scrolling
"editor.smoothScrolling": true,
"workbench.list.smoothScrolling": true,Smooth cursor animation
"editor.cursorSmoothCaretAnimation": true,
"editor.cursorBlinking": "phase",⌨️ Keybindings
Find references
View the places where a function or variable is used
{
"key": "shift+cmd+r",
"command": "references-view.findReferences",
"when": "editorHasReferenceProvider"
}Rename symbol
Rename a variable, property or function globally
{
"key": "cmd+r",
"command": "editor.action.rename",
"when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
},Go to the previous / next cursor position
{
"key": "ctrl+left",
"command": "workbench.action.navigateBack"
},
{
"key": "ctrl+right",
"command": "workbench.action.navigateForward"
}Go to the next / previous tab
{
"key": "alt+cmd+right",
"command": "workbench.action.nextEditor"
},
{
"key": "alt+cmd+left",
"command": "workbench.action.previousEditor"
},Increase / decrease view size
{
"key": "shift+cmd+[Minus]",
"command": "workbench.action.increaseViewSize"
},
{
"key": "shift+cmd+-",
"command": "workbench.action.decreaseViewSize"
},Add a cursor to each highlighted line
Default keybinding
{
"key": "shift+alt+i",
"command": "editor.action.insertCursorAtEndOfEachLineSelected",
"when": "editorTextFocus"
}Split editor
{
"key": "ctrl+alt+cmd+[Period]",
"command": "workbench.action.moveEditorToNextGroup"
},🧩 Extensions
Error lens
Improve highlighting of errors, warnings and other language diagnostics
Recommended settings:
"errorLens.delay": 1000,
"errorLens.excludeBySource": ["cSpell"]Auto close tag
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does
Turbo Console Log
Automating the process of writing meaningful log messages
Template String Converter
Converts a string to a template string when ${ is typed
Markdown All in One
All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
file-icons
File-specific icons in VSCode for improved visual grepping
Code Spell checker
Spelling checker for source code
Color highlight
Highlight web colors in your editor
indent-rainbow
Makes indentation easier to read
Peacock
Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which
Gitlens
Supercharge the Git capabilities built into Visual Studio Code
Bracketeer
Easy manipulation with brackets and quotes
Keybindings to automatically remove corresponing bracket:
{
"key": "shift+cmd+backspace",
"command": "bracketeer.removeBrackets"
},Multiple cursor case preserve
Preserves case when editing with multiple cursors
TypeScript Error Translator
TypeScript errors, translated for humans
Auto Rename Tag
Auto rename paired HTML/XML tag
Highlight
Advanced text highlighter based on regexes. Useful for todos, annotations, colors etc.
Highlight only tests example:
"highlight.regexes": {
"(it|describe|test)(\\.only.*)": {
"filterFileRegex": "(.*)spec|test(.*)",
"decorations": [
{
"overviewRulerColor": "#ffcc00",
"backgroundColor": "#ffcc00",
"color": "#1f1f1f",
"fontWeight": "bold"
},
{
"backgroundColor": "#ffcc00",
"color": "#1f1f1f"
}
]
}
}Snippets
eslint-disable-snippets
Simple snippets for disable eslint rules
💅 Themes
Tokyo Night
A clean Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night
Github
GitHub theme for VS Code
Cobalt2
🔥 Official theme by Wes Bos
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent