- Published on
DevOps Editor
- Authors
- Name
- Jackson Chen
vscode
vscode Basic Editing
https://code.visualstudio.com/docs/editor/codebasics
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
https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference
Install Keymap Extensions
https://code.visualstudio.com/docs/getstarted/keybindings#_keymap-extensions
Customize Keyboard Shortcuts
https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-editor
Key Bindings for vscode
https://code.visualstudio.com/docs/getstarted/keybindings
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
General
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+Enter
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
Display
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
Navigation
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
Debug
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.
Ctrl+Shift+L
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
ctrl+D
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
Navigate to a specific line
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
Shift+Alt+F
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
Navigate to beginning and end of file
Keyboard Shortcut: Ctrl+Home and Ctrl+End
IntelliSense
To trigger the Suggestions widget
Ctrl+Space
Peek
Select a symbol then type Alt+F12. Alternatively, you can use the context menu.
Alt+F12
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
Diffs
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
https://www.ansible.com/blog/deep-dive-on-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
https://ansible.readthedocs.io/projects/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
exclude_paths:
- .vscode/
- .github/
skip_list:
- 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.
[MESSAGES CONTROL]
disable=reportMissingImports
max-line-length=150
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
https://towardsthecloud.com/best-vscode-extensions-python
. 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
https://towardsthecloud.com/best-vscode-extensions-javascript
. 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.