Published on

DevOps Editor

  • Name
    Jackson Chen


vscode Basic Editing

Being able to keep your hands on the keyboard when writing code is crucial for high productivity. VS Code has a rich set of default keyboard shortcuts as well as allowing you to customize them.

Keyboard Shortcuts Reference

Install Keymap Extensions

Customize Keyboard Shortcuts

Key Bindings for vscode

Visual Studio Code lets you perform most tasks directly from the keyboard. This page lists out the default bindings (keyboard shortcuts) and describes how you can update them.

Keyboard Shortcuts editor

Visual Studio Code provides a rich and easy keyboard shortcuts editing experience using Keyboard Shortcuts editor. It lists all available commands with and without keybindings and you can easily change / remove / reset their keybindings using the available actions. It also has a search box on the top that helps you in finding commands or keybindings. You can open this editor by going to the menu

under File > Preferences > Keyboard Shortcuts

Keyboard Shortcut for Linux


Key                     Function
Ctrl+Shift+P            F1 Show Command Palette
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

Key                     Function
Ctrl+X                  Cut line (empty selection)
Ctrl+C                  Copy line (empty selection)
Alt+ ↓ / ↑              Move line down/up
Ctrl+Shift+K            Delete line
Ctrl+Enter /            Insert line below/ above

Ctrl+Shift+\            Jump to matching bracket
Ctrl+] / Ctrl+[         Indent/Outdent line
Home / End              Go to beginning/end of 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 /         Fold/Unfold all regions
Ctrl+K Ctrl+J

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

# Move select text to left o right
1. Select the texts
2. TAB move the selected text right           # TAB           --> move right
3. SHIFT + TAB move the selected text left    # SHIFT + TAB   <-- move left

Rich Language Editing

Key                     Function
Ctrl+Space, Ctrl+I      Trigger suggestion
Ctrl+Shift+Space        Trigger parameter hints
Ctrl+Shift+I            Format document
Ctrl+K Ctrl+F           Format selection
F12                     Go to Definition
Ctrl+Shift+F10          Peek Definition
Ctrl+K F12              Open Definition to the side
Ctrl+.                  Quick Fix
Shift+F12               Show References
F2                      Rename Symbol
Ctrl+K Ctrl+X           Trim trailing whitespace
Ctrl+K M                Change file language

Multi-cursor and Selectino

Key                     Function
Alt+Click               Insert cursor*
Shift+Alt+ ↑ / ↓        Insert cursor above/below
Ctrl+U                  Undo last cursor operation
Shift+Alt+I             Insert cursor at end of each line selected
Ctrl+L                  Select current line
Ctrl+Shift+L            Select all occurrences of current selection
Ctrl+F2                 Select all occurrences of current word
Shift+Alt + →           Expand selection
Shift+Alt + ←           Shrink selection
Shift+Alt + drag mouse  Column (box) selection


Key                     Function
F11                     Toggle full screen
Shift+Alt+0             Toggle editor layout (horizontal/vertical)
Ctrl+ = / -             Zoom in/out
Ctrl+B                  Toggle Sidebar visibility
Ctrl+Shift+E            Show Explorer / Toggle focus
Ctrl+Shift+F            Show Search
Ctrl+Shift+G            Show Source Control
Ctrl+Shift+D            Show Debug
Ctrl+Shift+X            Show Extensions
Ctrl+Shift+H            Replace in files
Ctrl+Shift+J            Toggle Search details
Ctrl+Shift+C            Open new command prompt/terminal
Ctrl+K Ctrl+H           Show Output panel
Ctrl+Shift+V            Open Markdown preview
Ctrl+K V                Open Markdown preview to the side
Ctrl+K Z                Zen Mode (Esc Esc to exit)

Search and Replace

Key                     Function
Ctrl+F                  Find
Ctrl+H                  Replace
F3 / Shift+F3           Find next/previous
Alt+Enter               Select all occurrences of Find match
Ctrl+D                  Add selection to next Find match
Ctrl+K Ctrl+D           Move last selection to next Find match
Key                     Function
Ctrl+T                  Show all Symbols
Ctrl+G                  Go to Line...
Ctrl+P                  Go to File...
Ctrl+Shift+O            Go to Symbol...
Ctrl+Shift+M            Show Problems panel
F8                      Go to next error or warning
Shift+F8                Go to previous error or warning
Ctrl+Shift+Tab          Navigate editor group history
Ctrl+Alt+-              Go back
Ctrl+Shift+-            Go forward
Ctrl+M                  Toggle Tab moves focus

Editor Management

Key                     Function
Ctrl+W                  Close editor
Ctrl+K F                Close folder
Ctrl+\                  Split editor
Ctrl+ 1 / 2 / 3         Focus into 1st, 2nd, 3rd editor group
Ctrl+K Ctrl + ←         Focus into previous editor group
Ctrl+K Ctrl + →         Focus into next editor group
Ctrl+Shift+PgUp         Move editor left
Ctrl+Shift+PgDn         Move editor right
Ctrl+K ←                Move active editor group left/up
Ctrl+K →                Move active editor group right/down

File Management

Key                     Function
Ctrl+N                  New File
Ctrl+O                  Open File...
Ctrl+S                  Save
Ctrl+Shift+S            Save As...
Ctrl+W                  Close
Ctrl+K Ctrl+W           Close All
Ctrl+Shift+T            Reopen closed editor
Ctrl+K Enter            Keep preview mode editor open
Ctrl+Tab                Open next
Ctrl+Shift+Tab          Open previous
Ctrl+K P                Copy path of active file
Ctrl+K R                Reveal active file in Explorer
Ctrl+K O                Show active file in new window/instance


Key                     Function
F9                      Toggle breakpoint
F5                      Start / Continue
F11 / Shift+F11         Step into/out
F10                     Step over
Shift+F5                Stop
Ctrl+K Ctrl+I           Show hove

Integrated terminal

Key                     Function
Ctrl+`                  Show integrated terminal
Ctrl+Shift+`            Create new terminal
Ctrl+Shift+C            Copy selection
Ctrl+Shift+V            Paste into active terminal
Ctrl+Shift+ ↑ / ↓       Scroll up/down
Shift+ PgUp / PgDn      Scroll page up/down
Shift+ Home / End       Scroll to top/bottom

Column box Selection

Place the cursor in one corner and then hold Shift+Alt while dragging to the opposite corner. You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line.

To set cursors above or below the current position use:

Keyboard Shortcut: Ctrl+Alt+Up or Ctrl+Alt+Down

Add additional cursors to all occurences of the current selection

This will allow you to add addtional characters to all occurences, of the current selection.


If you do not want to add all occurrences of the current selection, you can use Ctrl+D instead. This only selects the next occurrence after the one you selected so you can add selections one by one


Fast scrolling

Pressing the Alt key enables fast scrolling in the editor and Explorers. By default, fast scrolling uses a 5X speed multiplier but you can control the multiplier with the Editor: Fast Scroll Sensitivity (editor.fastScrollSensitivity) setting.

Copy line up / down

Keyboard Shortcut: Shift+Alt+Up or Shift+Alt+Down

Move line up and down

Keyboard Shortcut: Alt+Up or Alt+Down

Shrink / expand selection

Keyboard Shortcut: Shift+Alt+Left or Shift+Alt+Right
Keyboard Shortcut: Ctrl+G

Undo cursor position

Keyboard Shortcut: Ctrl+U

Trim trailing whitespace

Keyboard Shortcut: Ctrl+K Ctrl+X

Code formatting

Currently selected source code

Ctrl+K Ctrl+F

Whole document format


Code folding

Keyboard Shortcut

Ctrl+Shift+[ and Ctrl+Shift+]

You can also fold/unfold all regions in the editor with Fold All (Ctrl+K Ctrl+0) and Unfold All (Ctrl+K Ctrl+J).

You can fold all block comments with Fold All Block Comments (Ctrl+K Ctrl+/)

Select current line

Keyboard Shortcut: Ctrl+L
Keyboard Shortcut: Ctrl+Home and Ctrl+End


To trigger the Suggestions widget



Select a symbol then type Alt+F12. Alternatively, you can use the context menu.


Go to Definition

Select a symbol then type F12. Alternatively, you can use the context menu or Ctrl+click (Cmd+click on macOS).

1. Select a symbol, then
2. type F12

Go to References

Select a symbol then type Shift+F12. Alternatively, you can use the context menu.

1. Select a symbol, then
2. type Shift+F12

Search and modify

Besides searching and replacing expressions, you can also search and reuse parts of what was matched, using regular expressions with capturing groups. Enable regular expressions in the search box by clicking the Use Regular Expression .* button (Alt+R) and then write a regular expression and use parentheses to define groups. You can then reuse the content matched in each group by using $1, $2, etc. in the Replace field.

Git integration

Keyboard Shortcut: Ctrl+Shift+G


From the Source Control view, select a file to open the diff.

Undo last commit

Click the (...) button and then select Undo Last Commit to undo the previous commit. The changes are added to the Staged Changes section.

See Git output

VS Code makes it easy to see what Git commands are actually running. This is helpful when learning Git or debugging a difficult source control issue.

Use the Toggle Output command (Ctrl+Shift+U) and select Git in the dropdow.

vscode extensions

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X)

# Useful vscode extensions
. postman   # The Postman VS Code extension enables you to develop and test your APIs in Postman directly from Visual Studio Code. 
. gitlens   # collaboration with a powerful set of tools to help you and your team better understand, write, and review code.
. sqlite
. ruff      # an extremely fast Python linter and code formatter, written in Rust
. docker    # makes it easy to build, manage, and deploy containerized applications
. github actions    # lets you manage your workflows, view the workflow run history, and helps with authoring workflows
. github copilot    # adopted AI developer tool
. Pylint    # Linting highlights semantic and stylistic problems in your Python source code, 
                which often helps you identify and correct subtle programming errors or coding practices
. markdown extended     # extends syntaxes and abilities to VSCode built-in markdown function
. markdown pdf          # export to PDF
. markdown preview      # To switch between views, press Ctrl+Shift+V in the editor
. rust-analyzer         # an implementation of Language Server Protocol for the Rust programming language
. Bicep                 # language for declaratively deploying Azure resources
. Kubernetes            # building applications to run in K8s clusters
. PowerShell
. Python
. DotEnv                # adds syntax highlight to .env variables
. HashiCorp Terraform   # Infrastructure as Code (IaC) tool to build and deploy resources to the Cloud
. Visual Studio IntelliCode     # extension that provides AI-assisted code completio
. AWS Toolkit           # makes interacting and building on AWS more productive and efficient
. Sort Lines            # sorting lines in your file, sorting contains lists with AWS resources
. git graph             # view your git commit history as a graph
. Shell-format          # cleans up and formats your shell scripts nicely, supports
                        shellscripts        .sh  .bash
                        Dockerfile          Dockerfile
                        Properties          .properties
. Regex Previewer       # Preview regular expressions as you type them

Ansible vscode extension

How to Lint your Ansible, Shell and Python Code

Linting plays a central part in code quality assurance. But often, it is not done for infrastructure code.

Linting is a type of static code analysis that checks if code fulfils predefined rules and standards. Integrated into an automated process, e.g. a continuous integration run after every commit in a repository, helps developers keep the code quality high.

Linters work by parsing the source code without executing it, making it fast and efficient. They support developers by detecting design issues or code style violations.

Linting is very common in application development but still not state of the art in infrastructure engineering. The need, though, rises with the increasing infrastructure automation code and the trend towards infrastructure-as-code (IaC).

. ansible Lint - ansible-lint
. Python Linting - pylint
. Shell Linting - ShellCheck

Ansible Lint

Ansible Lint is a command-line tool for linting playbooks, roles and collections aimed toward any Ansible users. Its main goal is to promote proven practices, patterns and behaviors while avoiding common pitfalls that can easily lead to bugs or make code harder to maintain.

To install Ansible-Lint on your local machine, open a command-line as administrator and install it using

# How to install ansible-lint
    pip with pip install ansible-lint

Add a configuration file called .ansible-lint to the root of your project repository. The configuration options are listed in the Ansible-Lint documentation. The following .ansible-lint example file contains excluded paths from linting and a skip list of rules that should not be applied when analysing the code. It makes sense to include temporary directories to the exclude path list and other configuration and non-Ansible files when run locally.

# .ansible-lint
  - .vscode/  
  - .github/

  - 306
  - 208
VSCode Integration

When a local Ansible and Ansible-Lint installation are present, the RedHat Ansible language support extension can be installed. It allows the linting of Ansible code when a file is opened or saved. However, the Ansible and Ansible-Lint installation need to be installed previously ( e.g. with pip install ansible and pip install ansible-lint)

Python Linting

Ansible-Lint covers checking playbooks, roles and collections but doesn’t support checking Ansible modules written in Python. That’s why a Python Linter like pylint is required to lint Python files.

pylint can be installed using pip. With pip install pylint, all required dependencies are installed on the local machine.

The configuration file of pylint is called .pylintrc and can be generated with pylint --generate-rcfile > .pylintrc on the root level of your project repository. After generating the .pylintrc file, you can delete all the unused and irrelevant configurations from the file.

The disable option needs to be set with reportMissingImports to ignore the error of missing Ansible Imports. Other settings can be customised, as shown below, as the maximal line length.

VSCode Integration

To enable pylint in VSCode, go to the command palette with CTRL+Shift+P and search for >python lint, as shown in the image below.

By choosing the Select Linter option, pylint or any other available linter can be set. Don’t forget to Enable Linting to activate Python linting in the IDE.

If you have created a .pylintrc file, it needs to be specified in the IDE configuration, so the linter applies the configuration. Open the settings window with CTRL+,, search for Python Linting pylint and set at Pylint Args the argument --rcfile=.pylint to reference the configuration file in the projects root directory.

Integration in a CI pipeline

pylint is built to be run from the command-line. Extensive command line options are available to run it in a CI pipeline.

Shell Linting

The most widely used linter for shellcode is ShellCheck. ShellCheck can be used as a browser-based tool or as a VSCode Extension.

The ShellCheck configuration file is called .shellcheckrc and is also stored at the root layer of the project repository. As shown in the following code snippet, it allows disabling single rules or a range of rules.

# ~/.shellcheckrc
disable=SC2059,SC2034 # Disable individual error codes
disable=SC1090-SC1100 # Disable a range of error codes
VSCode Integration

After installing the ShellCheck extension, the functionality is available in VSCode. To install ShellCheck in VSCode, go to the command palette with CTRL+Shift+P and type Install Extensions. Choose to install extensions and then search for ShellCheck.

Cloud engineer vscode extensions

Cloud Engineers including Docker, AWS Toolkit, Hashicorp Terraform, DotEnv, Visual Studio IntelliCode, Sort lines, CloudFormation Snippet, Git Lens, Git Graph, and Shell-format.

vscode extension for Python development

. Python    # by Microsoft
. Pylance   # fast static type checker and adds comprehensive feature-rich language support for Python
. Visual Studio IntelliCode     # Microsoft
. Sort lines   # handy if you import a lot of libraries in your scripts and don’t want to reorganize them manually
. black formatter   # format your code using one of the most used Python formatters “Black”
. Indent rainbow    # adds colors to your indents which makes readability even better, 
                    especially in a dark background like in VS Code
. Bracket Pair Colorizer 2  # allows you to colorize the brackets in your code so you can easily identify which brackets belong to each other
. Sourcery      # an AI-powered coding assistant that helps you to write better Python code faster
. Dash          # absolutely a necessary extension when you need to refer to the official Python documentation while you’re coding
                highlight the code and press CTRL + h

vscode extension for JavaScript developers

. JavaScript (ES6) code snippets    # adds a whole bunch of JavaScript code snippets that are easily accessible using shortcuts
. ESLint    # a linter that statically analyzes your code to find problems based on a set of pre-configured rules
. DotEnv
. JavaScript Booster    # adds various quick fixes when you’re editing code in JavaScript
. Prettier  # best code formatter for vscode that is currently available and that is not a surprise as it has over 36 million installs
            # To use Prettier in order to format your code
            1. CMD + Shift + P -> Format Document, or
            1. Select the text you want to Prettify, then CMD + Shift + P -> Format Selection
. Tailwind CSS IntelliSense     # front-end developmen auto-complete
. Sort lines
. GitLens
. Git Graph
. GitHub Copilot

Other vscode extension

. better comments
. code spell checker
. color highlights
. Dev Containers
. Excel viewer
. Github actions
. gitpod        # container in cloud
. Hashicorp HCL
. ident-rainbow
. markdownlint
. Live server       # Launch a local server to see changes in real-time, If you're involved in any form of web development
. Remote - SSH      # If you need to work with a remote machine, you probably use SSH
. Regex Previewer   # Preview regular expressions as you type them
. TODO Highlights   # Highlight TODO comments within your code
. Polacode          # Create beautiful screenshots of your code
. Better Comments   # Enhance code comments with colors and formatting
. Code Spell Checker    # Detect and fix spelling errors in your code
. Ident-rainbow     # Color-code levels of indentations in your code
                    code in a language like Python that depends on indentation
. Auto Rename Tag   # Rename HTML/XML tag pairs
. JavaScript code snippets  # Collection of commonly used JavaScript snippets
. colorize          # Colorize text and hex color codes in your code
                    front-end developer, you probably spend a lot of time thinking about and making color choices for your web page elements
. Debugger for Chrome   # Debug JS code in Chrome directly from VS Code

Why Are VSCode Extensions Important

As you make the transition from beginner to improver or pro, you need to be doing everything you can to save time and boost your efficiency, getting more work done at a higher level and in less time.

Let's take a look at the major benefits of using VSCode extensions: . Increased efficiency: VS Code plugins can save time and effort by automating repetitive tasks like formatting, generating boilerplate code, and debugging. . Improved accessibility: Visual Code plugins can make the editor more accessible, providing text-to-speech, screen readers, and high-contrast themes. . Personalized editor: Customize your editor to fit your preferences and workflow. For example, some extensions can change the color scheme, fonts, and editor layout. . Integrate with external tools: Integrate VS Code with valuable tools, like Git, Docker, and ChatGPT, to provide a seamless development experience. . Collaboration: VSCode extensions can facilitate collaboration between developers by enabling real-time editing and debugging, code sharing, and version control.