Visual Studio Code Cheatsheet for Developers

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.

VS Code Shortcuts

Boost your productivity with these common VS Code shortcuts.

Linux Shortcuts

General Commands

Ctrl+Shift+P, F1: Show Command Palette
Ctrl+Shift+T: Open last closed tab
Ctrl+P: Quick Open, Go to File
Ctrl+Shift+N: New window/instance
Ctrl+W: Close window/instance
Ctrl+,: User Settings
Ctrl+K, Ctrl+S: Keyboard Shortcuts

Basic Editing Shortcuts

Ctrl+X: Cut line (empty selection)
Ctrl+C: Copy line (empty selection)
Ctrl+↓/↑: Move line down / up
Ctrl+Shift+K: Delete line
Ctrl+Enter / Ctrl+Shift+Enter: Insert line below / above
Ctrl+Shift+\: Jump to matching bracket
Ctrl+] / Ctrl+[: Indent / Outdent line
Ctrl+Home / End: Go to beginning / end of file
Ctrl+↑ / ↓: Scroll line up / down
Alt+PgUp / PgDn: Scroll page up / down
Ctrl+Shift+[ / ]: Fold / unfold region
Ctrl+K, Ctrl+[ / ]: Fold / unfold all subregions
Ctrl+K, Ctrl+0 / Ctrl+K, Ctrl+J: Fold /Unfold all regions
Ctrl+K, Ctrl+C: Add line comment
Ctrl+K, Ctrl+U: Remove line comment
Ctrl+/: Toggle line comment
Ctrl+Shift+A: Toggle block comment
Alt+Z: Toggle word wrap

Useful VS Code Extensions

Enhance your coding experience with these recommended extensions categorized by language and function.

HTML & CSS Development Extensions

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.

JavaScript, Node.js & NPM Extensions

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.

PHP Development Extensions

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 Development Extensions

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 Integration Extensions

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.

Themes and UI Extensions

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.

Handy Utility Extensions

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.

My VS Code Settings

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.

VS Code Cheatsheet - Shortcuts & Extensions for Developers

Visual Studio Code Cheatsheet