Tips and Tricks
📝 Contribute on 
GitHub
🔗 View Online neave.dev/vscode
⬇️ Download PowerPoint and PDF
Visual Studio Code is a free code editor that is optimized for building and debugging modern web and cloud applications.
You can run it on Windows, Linux, Mac or Online https://vscode.dev
Key Features:
- It supports a range of languages,
- Productivity shortcut circuits
- Keyboard shortcuts
- Tasks
- Snippets
- Customizable with
- Themes
- Extensions
- Integrated terminal.
- Keyboard shortcut reference
- Walkthroughs
- Interactive Editor Playground
VS Code has a Default Profile. Customize Settings, Keyboard Shortcuts, User Snippets, User Tasks or Extensions.
You can have additional profiles.
- Have a profile for Frontend, Backend, AWS and Azure or a Project.
- Customize the profile for a stack ie (Jira, AWS and Python).
- You could install the tools and extensions as part of that project.
- Edit the setings via the UI or the underlying JSON.
- Default settings or open
Preferences: Open Default Settings (JSON) - Customize the User settings
Ctrl+,(UI) -Ctrl+Pand go toOpen User Settings (JSON)
{
"editor.fontFamily": "'Cascadia Code'",
"editor.formatOnSave": true,
"editor.rulers": [ 120 ],
"editor.stickyScroll.enabled": true,
"editor.trimAutoWhitespace": true,
"explorer.fileNesting.enabled": true,
"files.trimTrailingWhitespace": true,
"git.branchPrefix": "yourusername/",
"terminal.integrated.fontFamily": "'CaskaydiaCove Nerd Font Mono','Cascadia Code',Consolas,'Courier New',monospace",
"workbench.sideBar.location": "right"
}
Settings sync across multiple instances of VS Code
- You could move the sidebar to the right then when you
Toggle Sidebar/Ctrl+Bit doesn't make the code jump around. - Add a secondary sidebar with Outline view for better navigation.
Ctrl+\
Switch to next group with Ctrl+[1,2,3...]
Alternatively: Ctrl+P and View: Move Editor to Next Group
Ctrl+R Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files.
Normally your workspace has a single root/project folder but you can have a workspace with multiple project folders in Visual Studio Code with multi-root workspaces. Uses a .code-workspace file
{
"folders": [
{
// Source code
"name": "Product",
"path": "vscode"
},
{
// Docs and release notes
"name": "Documentation",
"path": "vscode-docs"
},
{
// Yeoman extension generator
"name": "Extension generator",
"path": "vscode-generator-code"
}
]
}
Ctrl+Shift+P
Ctrl+P
Ctrl+P and type ?term to open a new terminal
Ctrl+T - Go To Symbol
Ctrl+G - Go to Line
Alt+ ← / → - Jump forward and back
- Sort Lines Ascending/Descending
- Join Lines
- Transform Text
| Tranform | Example |
|---|---|
| Title | Hello World |
| Upper | HELLO WORLD |
| Lower | hello world |
| Camel | helloWorld |
| Snake | helloWorld → hello_world |
| Kebab | helloWorld → hello-world |
Edit Text Vertically with multi-cursor
Keep selecting text with Ctrl+D and update over multiple locations in a file.
Shift+Alt+Left and Shift+Alt+Right
Find the start and end of a long <div> in HTML
Hide Text for easier reading
Fold Level [1|2|3|4], Fold All, Unfold All
See the code context with Sticky Scroll - useful for long methods
Generate HTML and CSS from shorthand. Works with multi-cursors
Focus on the code with Zen Mode
Jump to the next error with F8.
Really useful for going through compiler errors.
Nest related files under a parent file in the explorer.
"explorer.fileNesting.patterns": {
"*.component.ts": "$(capture).component.html, $(capture).component.spec.ts, $(capture).component.scss",
"README*": "AUTHORS,CHANGELOG*,CODE_OF_CONDUCT*,CONTRIBUTING*,LICENSE*"
}Pinned Tabs allow you to keep a file open
Make sure your code isn't getting too long and hard to read.
Non-breaking log points to show logging
Run tasks like build, test and other custom tasks in Task Runners.
| Remote | Description |
|---|---|
| Remote via SSH | Connect to remote machines with Visual Studio Code via SSH. |
| Work in WSL | Work in Windows Subsystem for Linux. |
| Develop in Containers | Work in a Docker Container. |
| GitHub Codespaces | Work in codespace with Visual Studio Code. |
Dev Containers uses a devcontainer.json file in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack.
You can use prebuild images to dev container setup. Also supports switching between multiple containers
Install extensions with Ctrl+Shift+X. You can add to the workspace @recommended extensions for a project.
Most Popular extensions can be found with @popular
This slide deck was written in Markdown within VSCode. I used the Marp for VS Code extension to preview it.
Marp has a CLI - so this slide has a CICD pipeline 😁
Peacock allows you to colour code VS Code.
AI-assisted development features for Python, TypeScript/JavaScript and Java developers
Launch a development local Server with live reload feature for static & dynamic pages
Indent Rainbow makes indentation more readable. Highlights when you get indenting wrong.
Path Intellisense autocompletes filenames
Code Spell Checker for source code
Improve highlighting of errors, warnings and other language diagnostics.
Inline fold A custom decorator that "fold" matching content in single line. Helps with Tailwind CSS.
📸 Polaroid for your code. Take screenshots of your code
Real-time collaborative development from the comfort of your favourite tools.
Bringing the power of Jira and Bitbucket to VS Code
- You can create and view issues
- Start work on issues
- Create pull requests
- Do code reviews
- Start builds
- Get build statuses and more!
GitHub Copilot Your AI pair programmer
Official C# extension from Microsoft
- Project System / Solution Explorer
- Code Editing (Uses the C# extension)
- Package Management
- Debugging
- Testing
Polygot Notebooks allows
C#, F#, PowerShell, JavaScript, SQL, KQL, Python, R, HTML, HTTP, Mermaid.
GET https://example.com/topics/1 HTTP/1.1
POST https://example.com/comments HTTP/1.1
content-type: application/json
{
"name": "sample",
"time": "Wed, 21 Oct 2015 18:27:50 GMT"
}curl https://www.example.com
Lightweight Rest API Client for VS Code
Better Comments colour codes your commit messages
TODO Tree quickly find all your todo items.
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
Follows conventionalcommits.org and uses gitmoji which then dovetails to semver.org
feat(api): ✨ Add Get User Endpoint
Allow users to access their profile
ABC-123
Keep unique lines of text and remove duplicates from current selection. Also includes a command to shuffle currently selected lines.
A A
B => B
B C
C
C
Encode Decode converts text.
- Convert String to/from Base64, HTML Entities, JSON Byte Array, JSON String, Unicode, XML Entities
- Convert String to MD5/SHA1/SHA256/SHA512 (as Base64 or Hex)
Bookmark your code and quickly jump to bookmarks.
Markdown Preview Mermaid Support allows you to create Mermaid JS documents that can be included in Markdown documents.
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Aside: Mermaid JS can generate
- Generate Flowchart
- Sequence Diagram
- Class Diagram
- State Diagram
- Entity Relationship Diagram
- User Journey
- Gantt
- Pie Chart
- Quadrant Chart
- Requirement Diagram
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
JSON Crack seamlessly visualize your JSON data instantly into graphs.
SemanticDiff is a programming language aware diffs.
Can show differences when you move code.
FootSteps Highlight and navigate between your most recently edited chunks of code
Pets gives you a virtual pet to play with while you are coding.
Makes it easy to create, manage, and debug containerized applications.
Get web site hosting, SQL and MongoDB data, Docker Containers, Serverless Functions and more, all on Azure.
Including CodeWhisperer, CodeCatalyst, and support for Lambda, S3, CloudWatch Logs, and many other services