This cheatsheet provides essential Visual Studio Code shortcuts and a curated list of useful extensions to enhance your development workflow. Master your coding environment with these tips and tools.
Boost your productivity with these common VS Code shortcuts.
Ctrl+Shift+P,F1: Show Command PaletteCtrl+Shift+T: Open last closed tabCtrl+P: Quick Open, Go to FileCtrl+Shift+N: New window/instanceCtrl+W: Close window/instanceCtrl+,: User SettingsCtrl+K,Ctrl+S: Keyboard Shortcuts
Ctrl+X: Cut line (empty selection)Ctrl+C: Copy line (empty selection)Ctrl+↓/↑: Move line down / upCtrl+Shift+K: Delete lineCtrl+Enter/Ctrl+Shift+Enter: Insert line below / aboveCtrl+Shift+\: Jump to matching bracketCtrl+]/Ctrl+[: Indent / Outdent lineCtrl+Home/End: Go to beginning / end of fileCtrl+↑ / ↓: Scroll line up / downAlt+PgUp/PgDn: Scroll page up / downCtrl+Shift+[ / ]: Fold / unfold regionCtrl+K,Ctrl+[ / ]: Fold / unfold all subregionsCtrl+K,Ctrl+0/Ctrl+K,Ctrl+J: Fold /Unfold all regionsCtrl+K,Ctrl+C: Add line commentCtrl+K,Ctrl+U: Remove line commentCtrl+/: Toggle line commentCtrl+Shift+A: Toggle block commentAlt+Z: Toggle word wrap
Enhance your coding experience with these recommended extensions categorized by language and function.
-
CSScomb: A coding style formatter for CSS, Less, SCSS, and Sass, ensuring consistent code structure. -
Puglint: Provides linting and style checking for Pug templates, helping maintain code quality. -
Sass: Offers indented Sass syntax highlighting, autocompletion, and snippets for efficient Sass development. -
SCSS IntelliSense: Delivers advanced autocompletion and refactoring support for SCSS, streamlining development. -
XML Format: A utility for formatting XML documents, making them more readable and maintainable.
-
Import Cost: Displays the size of imported packages inline, helping manage bundle size. -
ESLint: Integrates ESLint into VS Code for code linting and enforcing coding standards. -
NPM: Provides comprehensive NPM script support within VS Code. -
NPM Intellisense: Autocompletes NPM modules in import statements, speeding up module inclusion. -
Version Lens: Shows the latest available versions for packages using code lens, simplifying updates. -
Vetur: A powerful set of Vue.js tooling for VS Code, including syntax highlighting and IntelliSense.
-
Better PHPUnit: Offers an improved PHPUnit test runner experience within VS Code. -
Laravel Artisan: Provides easy access to Laravel Artisan commands directly from VS Code. -
PHP CS Fixer: A PHP code formatter and beautifier extension for VS Code. -
PHP Doc Comment VSCode Plugin: Assists in adding phpDoc @param and @return tags for function signatures. -
PHP IntelliSense: Delivers advanced autocompletion and refactoring capabilities for PHP.
-
Perl: Provides code intelligence features for the Perl language. -
Perl Toolbox: Offers linting and syntax checking for Perl code. -
Perl Moose: Adds syntax highlighting support for Perl Moose within VS Code.
-
Git History: Allows viewing Git log, file history, and comparing branches or commits. -
Gitignore: Assists in managing .gitignore files effectively. -
GitLens: Enhances Git capabilities with blame annotations, code authorship visualization, and more. -
Gitmoji: Integrates Gitmoji for adding emojis to Git commit messages.
-
Material Icon Theme: Applies Material Design icons to files and folders for better visual organization. -
Palenight Theme: An elegant and visually appealing theme for VS Code. -
Office Theme: Provides a Microsoft Office-inspired theme for VS Code.
-
Better comments: Enhances code comments with alerts, information, TODOs, and more. -
Debugger for Chrome: Enables debugging of JavaScript code directly in the Chrome browser. -
EditorConfig for VS Code: Provides EditorConfig support for consistent coding styles across different editors. -
File Utils: Offers convenient file and directory operations like creating, duplicating, and moving. -
Final-Newline: Ensures a final newline is inserted at the end of files upon saving. -
Formatting Toggle: Allows toggling code formatters (like Prettier) on and off easily from the status bar. -
Open in Github/Bitbucket...: Quickly navigate to source code lines in GitHub, Bitbucket, GitLab, or VisualStudio.com. -
OpenChrome: Opens the current file directly with Google Chrome. -
Output Colorizer: Adds syntax highlighting to log files displayed in the output panel. -
Prettier - Code formatter: Integrates the Prettier code formatter for consistent code styling. -
Project Manager: Facilitates easy switching between different development projects. -
REST Client: A powerful REST client for sending HTTP requests directly from VS Code. -
SVG Viewer: Allows viewing SVG files directly within VS Code. -
Terminal: Integrates an integrated terminal within VS Code for command-line operations. -
Vue Peek: Enables "peek" and "go to definition" functionality for Vue single-file components. -
VS Live Share: Enables real-time collaborative development sessions. -
Wrap Console Log: Provides functionality to wrap console logs by word or selection. -
Bracket Pair Colorizer: Improves code readability by colorizing matching bracket pairs.
Customize your VS Code environment with these personal settings for an optimized development experience.
{
// Controls the font size in pixels
"editor.fontSize": 14,
// Render vertical rulers after a certain number of
// monospace characters. Use multiple values for multiple
// rulers. No rulers are drawn if array is empty
"editor.rulers": [100],
// The number of spaces a tab is equal to
"editor.tabSize": 2,
"[python]": {
"editor.tabSize": 4
},
// Controls the line height
"editor.lineHeight": 22,
// Controls the font family
"editor.fontFamily": "Fira Code",
// Enables font ligatures
"editor.fontLigatures": true,
// Controls whether snippets are shown with other suggestions and how they are sorted.
"editor.snippetSuggestions": "top",
// Ignore extension recommendations
"extensions.ignoreRecommendations": false,
// Controls auto save of dirty files
"files.autoSave": "afterDelay",
// Controls the delay in ms after which a dirty file is saved automatically
"files.autoSaveDelay": 1000,
// Configure glob patterns for excluding files and folders
"files.exclude": {
".yarn": true,
"**/*.pyc": true
},
// Insert a final new line at the end of the file when saving it
"files.insertFinalNewline": true,
// Confirm before synchronizing git repositories
"git.confirmSync": false,
// Commit all changes when there are no staged changes
"git.enableSmartCommit": true,
// Whether to lint Python files using pylint
"python.linting.pylintEnabled": false,
// Whether to lint Python files using flake8
"python.linting.flake8Enabled": true,
// Configure glob patterns for excluding files and folders in
// searches. Inherits all glob patterns from the files.exclude setting.
"search.exclude": {
"**/.git": true,
"**/.nuxt": true,
"**/build": true,
"**/data": true,
"**/dist": true,
"**/env": true
},
// Adjust the zoom level of the window. The original size is 0
// and each increment above (e.g. 1) or below (e.g. -1) represents
// zooming 20% larger or smaller. You can also enter decimals to
// adjust the zoom level with a finer granularity.
"window.zoomLevel": 0,
// Overrides colors from the currently selected color theme.
"workbench.colorCustomizations": {
"statusBar.background": "#825bebe",
"statusBar.foreground": "#eeffff",
"titleBar.activeBackground": "#282b3c",
"titleBar.activeForeground": "#eeffff"
},
// Specifies the color theme used in the workbench
"workbench.colorTheme": "Material Palenight",
// Specifies the icon theme used in the workbench
"workbench.iconTheme": "material-icon-theme",
// Controls font aliasing method in the workbench
"workbench.fontAliasing": "antialiased",
"explorer.confirmDragAndDrop": false
}
Explore these shortcuts and extensions to significantly improve your productivity and coding experience within Visual Studio Code. For more detailed information, refer to the official VS Code documentation.