VS Code Installation and Set Up

Installing VS Code

Go to the Visual Studio Code on macOS page on the VS Code website, and follow the instructions there.

Suggested VS Code packages: Github

  • Github by KnisterPeter: This VS Code extension integrates with GitHub. I suggest this extension simply because it enables Github authentication in VS Code using personal access tokens for the purpose of being able to interact with Github from VS Code's Integrated Terminal. It also has an extensive description with screen shots of how to enable Github authentication using the Github personal access token within the extension description. You can access that information by clicking on the extension listing, which can be found by clicking on the VS Code extensions icon located on the outermost left edge of the active VS Code window instance.
    • Screen shot of VS Code extensions icon and the Github extension

    The VS Code extensions icon is the 6th one down from the top, starting with the files icon (followed by the magnifying glass icon). When you click on that icon, you will see what is shown in the screen shot. And where Github has been typed is where you would type the name of the extension you are looking for. It will then appear in the listing, and you can then add it to VS Code.

Suggested VS Code packages: code snippets

  • 30 Seconds of Code by 30 Seconds: JavaScript snippets you can understand in 30 seconds or less.
  • ESDoc MDN by Samundra Khatri: If you are coding and in middle you forget syntax or description about any javascript api then just write //mdn [object].[method].

Suggested VS Code packages: compilers

  • Babel JavaScript by Michael McDermott: for syntax highlighting. It supports ES201x, React JSX, Flow, and GraphQL syntax highlighting.
  • Babel ES6/ES7 by D. Zaonnotti: Adds JS Babel ES6/ES7 syntax coloring.

Suggested VS Code packages: environment related

  • Cloak by John Papa: Hides shows your secrets in environment files, to avoid accidentally sharing them with everyone.
  • DotENV by Mike Stead: support for dotenv file syntax.

Suggested VS Code packages: formatters

  • Beautify by HookyQR: Beautify code in place for VS Code.
  • Beautify css/sass/scss/less by Michele Melluso: Beautify css, sass, scss, and less in VS Code.
  • AB HTML Formatter by Anton Burov: formats and re-indents HTML code.
  • Prettier by Prettier: Formatter. It’s an opinionated code formatter turned into an extension for VS Code.

Suggested VS Code Packages: Git related

  • GitLens by Eric Amodio: Blame, code authorship, activity heatmaps, recent changes and history are only some of the features it provides. If you are working on any repository with more than one contributor, this is something you should probably have. Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Git History by Don Jayamanne: View git log, file history, compare branches or commits.

Suggested VS Code Packages: Integrated Terminal

To open an instance of Integrated Terminal in your VSCode editor, do the following when inside VSCode:


                    Control + backtick
The plus sign should be ignored. What this means is that you should press the Control key followed by the backtick key.

Another way (and easier) is when you open VS Code into the folder you want to work on, and you are first presented with the Welcome Page, you can switch to Integrated Terminal view by pressing the Command + J key. If you want to close Integrated Terminal but still stay within the same folder window, press the Command key + J key again, and Integrated Terminal will disappear.

On Windows, press the Ctrl key + J key.

Suggested VS Code Packages: JSON related

  • json by Zain Chen: JSON for Visual Studio Code.

Suggested VS Code packages: linters

  • ESLint by Dirk Baeumer: Linter. ESLint turns the most popular JavaScript linter into a VS Code extension.
  • HTMLHint by Mike Kaufman: VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML. Linting isn't just for scripting languages! It's for HTML too. And if you are fairly new to HTML(5), it will be a life saver and a great HTML instructor! And for those that are not HTML newbies, it is still a life saver. Especially if you work with large HTML files. Things can get sticky, and it is hard to find errors in large code/markup bases.
  • HTML Boilerplate by Sid The Sloth: HTML Boilerplate markup. Type html in an HTML file and select the snippet from the auto suggestion dropdown to choose html:5.

Suggested VS Code Packages: Live Server

  • Live Server by Ritwick Dey: an easy way to serve static and dynamic pages from VS Code, while it also supports live reloading.

Suggested VS Code packages: (VS Code) Live Share

  • This extension is a must and HUGE!
  • VS Code Live Share by Microsoft: Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
  • Includes Session Chat
  • Includes sharing the project in question via Live Server in the Browser
  • To view my post on getting started with Live Share, please visit Successfully Using Live Share Extension in VS Code on interglobalmedianetwork.com.

Suggested VS Code packages: Markdown related

  • Markdown Preview Enhanced by Yiyi Wang: Markdown Preview Enhanced ported to vscode. Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.
  • Markdown All in One by Yu Zhang: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).
  • markdownlint by David Anson: Markdown linting and style checking for Visual Studio Code
  • Markdown Shortcuts by M. Dickin: Shortcuts for Markdown editing.
  • Markdown Theme Kit by Microsoft: Theme kit for VS Code optimized for Markdown. Based on the Textmate themes.
  • Markdown Extended by Jebbs: Extended syntaxes to built-in markdown & what you see is what you get exporter.
  • Markdown Formatter by Mervin: a markdown plugin for code artist.
  • Markdown TOC byAlanWalk: Markdown TOC (Table of Contents) plugin for Visual Studio Code.

Suggested VS Code packages: REST related

  • REST Client by Huachao Mao: allows you to send HTTP requests and view the responses directly in VS Code.

Suggested VS Code packages: spell checkers

  • Code Spell Checker by Street Side Software: A basic spell checker for source code that works with camelCase code. The goal of the spell checker is to help catch common spelling errors.
  • Highlight Matching Tag by vincasIt: Highlights matching closing or opening tag in your HTML (or JSX in React). This one is another life saver!

Suggested VS Code packages: themes

  • One Dark Pro: Theme for VS Code. Based on Atom’s iconic One Dark theme.
  • Bittersweet Theme by Gerane: Bittersweet Theme ported from the Bittersweet TextMate Theme.
  • Spirited Away Color Theme by Maxfield Walker : Color theme for VSCode inspired by Spirited Away.
  • Syntax Light and Dark Theme by XephAlpha: Them for VS Code.

Related Resources