New to programming? Let's setup VSCode

This is a preview from my CSSBootcamp.com course.

We'll cover the general setup with also Snippets, Emmet, and Shortcuts.

General Setup

There's lots of professional code editor options out there. In my time doing development, it seems like there's a new "best code editor" that's even better than all the previous ones every 3-6 years. Don't be surprised if you start your career using one editor and then switch to a newer better one later.

Today, VSCode is the most popular editor to use. I'm not a fan of using something simply because it's popular, but VSCode happens to be popular because it's very good.

If you want, you can use Sublime Text or Atom which were the very popular ones before VSCode. Some of you might be coming to this course with previous experience coding and you already have your preferred code editor. That's totally fine too, but since I use VSCode and it does have the market share right now, all the setup and editor advice that I give for these courses will be for VSCode.

Download VSCode

If you're using Linux or Windows, you might need to check your system settings to see which download option is most appropriate for you.

Once it's installed, you'll be greeted by a "Getting Started" screen. You don't really need to do their whole introduction thing unless you want to. Notice they have this "Getting Started" content as a tab. You can just close that tab to exit.

Once you have it setup, you're ready to start using it like a professional. The next step is to learn how to customize settings and use all the cool keyboard shortcuts:

Snippets, Emmet, and Shortcuts

Snippets are a way for you to write a little piece of code and then you hit the Tab key and it will trigger a bigger chuck of code. The whole idea is to make writing some repetitive code faster so you don't have to type as much. Emmet is a big library of snippets that's already built into VSCode. If you're using other code editors, you might need to install Emmet separately.

Snippets are great, but sometimes you just need to be a good keyboard user with the wide array of available shortcuts you have on your computer. Shortcuts generally come in two types:

• Operating System Based
• Application Based

In the video above, we show you some common OS based shortcuts that we think you should learn. We also showed some VSCode based (Application Based) shortcuts. Here are the official "cheat sheets" for VSCode's shortcuts. Don't try to learn all of these, it's too much. But if you focus on just a few at a time it can make a big difference.

Mac

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Windows

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Linux

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

VSCode Settings

Here are the settings we showed you in the video above.

{
  "explorer.confirmDelete": false,
  "editor.tabSize": 2,
  // Use "Subtle Match Brackets" instead of the boxy
  // ones built-in
  "editor.matchBrackets": "none",
  "editor.renderIndentGuides": false,
  "editor.renderLineHighlight": "gutter",
  "editor.minimap.enabled": false,
  "editor.formatOnPaste": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "One Monokai",
  "workbench.iconTheme": null,
  "files.restoreUndoStack": false,
  // This prevents the "quick suggestions" menu from
  // popping up all the time which is something I don't
  // like to see, but that menu also makes Emmet behave
  // oddly. 
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  // With turning off quickSuggestions, now we need to 
  // tell Emmet how we want to start our snippet triggers
  "emmet.triggerExpansionOnTab": true,
}

It's worth noting that comments aren't technically allowed in JSON files but for VSCode and their settings, they let you do it without errors so I do it 😎

Extensions

The extension we installed for our setting to use "Subtle Match Brackets" was https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets

This is a preview from my CSSBootcamp.com course.