Sebastian Herrmann
A software-developing peep.
Visual Studio Code
Features, Customizations and Extensions to Make You More Productive
Hi, I'm
Sebastian Herrmann.
💻 web developer for ~4 years
💼 currently working for Small Improvements
🔨 VS Code user for ~3 years (after Brackets and Atom)
Know your editor to…
- read code faster
- write code faster
- focus on solving problems
…so let's see what VS Code has to offer!
Code Analysis
Linting
Autocompletion
…aka IntelliSense:
Integrate with git
- extension: GitLens (there are more if you need less features)
Terminal Integration
- ⌃+⇧+´ — Toggle integrated Terminal
- ⌘+⇧+C — Open new (native) Terminal
- Configuration:
// settings.json
"terminal.integrated.shell.osx": "/bin/zsh",
"terminal.external.osxExec": "iTerm.app"Code Manipulation
Formatting / Beautification
- ⌥+⇧+F — Format Document
- [no shortcut] — Organize Imports
- auto-format via
- extensions:
- Beautify css/sass/scss/less
- Prettier (.prettierrc)
- Beautify (.jsbeautifyrc)
- EditorConfig (.editorconfig)
// settings.json
"editor.formatOnSave:": trueSnippets
- use snippets from extensions (e.g. Simple React Snippets)
-
add your own snippets
- …with placeholders like ${1:myFunctionName}
Snippets
- … or go fully native with e.g. clipboard managers!
- expand CSS-like syntax to HTML (or JSX!)
- wrap with abbreviation
- Emmet for React:
// settings.json
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}Toggle Comments
- ⌘+/ — toggle line comment
- ⌥+⇧+A — toggle block comment
function doSomethingAwesome() {
// A comment.
return null;
}function doSomethingAwesome(/* i */) {
return null;
}Increment (and decrement)
So many different cases…
- camelCase
- PascalCase
- kebab-case (aka param-case)
- snake_case
- CONSTANT_CASE
- sentence case
- Title Case
- path/case
- dot.case
- Hence the best extension ever: change-case
- Another awesome extension: Select part of word
Code Navigation
Workspaces
Going Around…
- ⌘+⇧+O — Go to Symbol in File…
- ⌘+T — Go to Symbol in Workspace…
- ⌃+Minus — Go Back
- ⌃+⇧+Minus — Go Forward
- extension: Bookmarks
Selection Magic
- ⌘+D — Add Selection to next find Match
- ⌘+⇧+L — Select all instances
- ⌘+U — Cursor Undo
- there's certainly more to discover:
Bracket Matching
- extension: Bracket Pair Colorizer
❤️
❤️
Bracket Matching
- ⌘+⌥+⌃ — Go to Bracket
- [no shortcut] — Select to Bracket
- [no shortcut] — Go to matching Pair (thanks, Emmet)
- …but what are these shortcuts?!
{
"key": "cmd+shift+[Backslash]",
"command": "editor.action.jumpToBracket",
"when": "editorTextFocus"
},
{
"key": "shift+alt+cmd+[Backslash]",
"command": "editor.action.selectToBracket"
},
{
"key": "cmd+shift+[BracketRight]",
"command": "editor.emmet.action.matchTag",
"when": "editorTextFocus"
}❤️
❤️
Expand/Shrink Selection
- ⌘+⌃+⇧+→ — Grow Selection
- ⌘+⌃+⇧+← — Shrink Selection
- I remapped that stuff again:
Even More Stuff?!
Yes.
Go out and explore:
- Extension Marketplace
- bit.ly/vs-code-tips (the full blog post)
- awesome-vscode (GitHub)
…and don't forget to make your own contributions!
But not from me (for now).
Thank you. 👼🏻
Questions? Comments? Tips?
🖌 Slides: slides.com/herrherrmann/vs-code
📰 Blog Post: bit.ly/vs-code-tips
🦉 Twitter: @herrherrmann
📸 Photos: unsplash.com
VS Code: Features, Customizations and Extensions to Make You More Productive
By Sebastian Herrmann
VS Code: Features, Customizations and Extensions to Make You More Productive
VS Code has come a long way and offers a great set of features to everyone who wants to learn them and dive into the world of shortcuts, extensions and little tweaks. With this I'm showing my favorite ones that make me (and potentially you!) more productive every day.
