Thread by @DKundel

Learning about tips and tricks about @code with nobody other than @burkeholland & @John_Papa

👇 Thread 👇

// #MSBuild

On the spectrum between code editor and IDEs, @code falls on the editor side "with a little bit more"

// @burkeholland @John_Papa #MSBuild

"@code combines the simplicity of a code editor with what developers need for their code-edit-debug cycle" - @ErichGamma

// @burkeholland @John_Papa #MSBuild

is a combination of
💙 Monaco editor (npm.im/monaco-editor)
💙 @electronjs
💙 @typescriptlang

// @burkeholland @John_Papa #MSBuild

Here are the speaker pictures of @burkeholland and @John_Papa 😂😂

// #MSBuild

Shout out to @wesbos' Cobalt 2 @code theme!

// #MSBuild

Use "Material Icons" if you want different icons for different file types in @code

// @burkeholland @John_Papa #MSBuild

Check out Fira Code (github.com/tonsky/FiraCode) with enabled Font Ligatures in @code for neat looking things like actual arrows or actual ===

// @burkeholland @John_Papa #MSBuild

Check out the Insiders build for almost daily new features. You can run it side by side with the stable @code. I'm using this as well and it never really failed on me 🙂

// @John_Papa @burkeholland #MSBuild

If you ever forget anything in @code just remember to press Cmd+Shift+P (or Ctrl+Shift+P)

// @burkeholland @John_Papa #MSBuild

Check out the interactive playground of @code to learn about a variety of features 🙂

// @burkeholland @John_Papa #MSBuild

If you want to go back to the previous file in @code press Cmd+P followed by P and it will open the next file

// @burkeholland @John_Papa #MSBuild

If you like the code minimaps from Sublime you can enable them in @code as well

// @burkeholland @John_Papa #MSBuild

Zen Mode in @code allows you to remove everything but your code 🙂

// @burkeholland @John_Papa #MSBuild

Press in Cmd+P in @code followed by:
👉 @ for navigating to different symbols
👉 : for navigating to lines
👉? for all available options

// @burkeholland @John_Papa #MSBuild

Use Cmd+B to hide/show the side bar in @code

// @burkeholland @John_Papa #MSBuild

Show and hide the bottom drawer with the Problems & Terminal section using Cmd+J

// @burkeholland @John_Papa #MSBuild

You can fold your code in @code:
👉 on the left side on the icons per level
👉 using the command palette

// @burkeholland @John_Papa #MSBuild

You can modify appearance settings like the line height in @code. Not sure you want to set it to 1 though 😄

// @burkeholland @John_Papa #MSBuild

If you use the integrated terminal in @code you can use "maximize panel" in the command line palette and even split terminals

// @burkeholland @John_Papa #MSBuild

Open the Keybindings file from the command line palette and you can see your own and the default keybindings in @code

// @burkeholland @John_Papa #MSBuild

is everywhere 😄

// @burkeholland @John_Papa #MSBuild

If you have to create HTML you can use Emmet to convert something like
div#main.main into
<div id="main" class="main" />

You can add support for other languages in the settings!

// @burkeholland @John_Papa #MSBuild

For images in HTML you can use Emmet to update the image size in the img tag by using the command-line palette. It even works for images hosted on the web.

It can also evaluate math expressions

// @burkeholland @John_Papa #MSBuild

Cmd+P in @code allows pattern matching with fuzzy search for easy file discovery

// @burkeholland @John_Papa #MSBuild

In the latest @code version you can organize imports automatically on save. It will sort them and clean them up.

// @burkeholland @John_Papa #MSBuild

Using @PrettierCode is the best thing for clean code in @code 🙂 you never have to worry about the formatting of your code. The extension will do it for you :)

// @burkeholland @John_Papa #MSBuild

You can enable auto save and specify a delay in @code

// @burkeholland @John_Papa #MSBuild

The IntelliSense of @code works in JSON files like package.json and it can even query @npmjs for available packages and available versions

// @burkeholland @John_Papa #MSBuils

The npm extension for @code will do different things for you such as detecting wrong versions in your package.json

// @burkeholland @John_Papa #MSBuild

The Command-line flag "-r" will allow you to open a file in an existing @code instance

// @burkeholland @John_Papa #MSBuild

The npm scripts extension allows you to run all available @npmjs scripts straight from the @code sidebar or command palette

// @burkeholland @John_Papa #MSBuild

You can use the @Azure CosmosDB extension to connect to any @MongoDB instance (like localhost) and query them straight from @code using Mongo Scrapbooks

// @burkeholland @John_Papa #MSBuild

🔥 hot off the press!!
You can attach your @code debugger to deployed @Azure services 🔥⚡️

You might not want to do this in actual production though 😂

// @burkeholland @John_Papa #MSBuild

All the resources from this talk 🙂

// @burkeholland @John_Papa #MSBuild