VS Code Installation and Set Up

VS Code Installation and Set Up

Installing VS Code

***Go to*** the <a href="https://code.visualstudio.com/docs/setup/mac" target="_blank" style="color: rgba(123,220,181, 1)">Visual Studio Code on macOS</a> <strong style="color: rgba(247,141,167, 1)">page</strong> on the ***VS Code*** <strong style="color: rgba(247,141,167, 1)">website</strong>, and ***follow*** the <strong style="color: rgba(247,141,167, 1)">instructions</strong> ***there***.

Suggested VS Code package:Github

<strong style="color: rgba(235,20,76, 1)">Github</strong> by <strong style="color: rgba(235,20,76, 1)">KnisterPeter</strong>: This **VS Code extension** <strong style="color: rgba(247,141,167, 1)"><em>integrates</em></strong> with **GitHub**. I <strong style="color: rgba(247,141,167, 1)"><em>suggest</em></strong> this **extension** <strong style="color: rgba(247,141,167, 1)"><em>simply because</em></strong> it <strong style="color: rgba(247,141,167, 1)"><em>enables</em></strong> <strong style="color: rgba(0,208,132, 1)">Github authentication</strong> in **VS Code** <strong style="color: rgba(247,141,167, 1)"><em>using</em></strong> <strong style="color: rgba(0,208,132, 1)">personal access tokens</strong> for the **purpose** of **being able** to <strong style="color: rgba(247,141,167, 1)"><em>interact</em></strong> with **Github** from <strong style="color: rgba(247,141,167, 1)"><em>VS Code's</em></strong> <strong style="color: rgba(0,208,132, 1)">Integrated Terminal</strong>.

Github VS Code extension contd

The <strong style="color: rgba(235,20,76, 1)">Github extension</strong> also has an <strong style="color: rgba(247,141,167, 1)"><em>extensive</em></strong> **description** with **screen shots** of <strong style="color: rgba(247,141,167, 1)"><em>how</em></strong> to <strong style="color: rgba(247,141,167, 1)"><em>enable</em></strong> <strong style="color: rgba(0,208,132, 1)">Github authentication</strong> using the **Github** <strong style="color: rgba(0,208,132, 1)">personal access token</strong> <strong style="color: rgba(247,141,167, 1)"><em>within</em></strong> the **extension description**. You <strong style="color: rgba(247,141,167, 1)"><em>can access</em></strong> that **information** by <strong style="color: rgba(247,141,167, 1)"><em>clicking</em></strong> on the <strong style="color: rgba(0,208,132, 1)">extension listing</strong>, which **can** be <strong style="color: rgba(247,141,167, 1)"><em>found</strong></em> by <strong style="color: rgba(247,141,167, 1)"><em>clicking</em></strong> on the **VS Code extensions icon** <strong style="color: rgba(247,141,167, 1)"><em>located</strong></em> on the <strong style="color: rgba(247,141,167, 1)"><em>outermost</em></strong> **left edge** of the <strong style="color: rgba(247,141,167, 1)"><em>active</em></strong> **VS Code** <strong style="color: rgba(247,141,167, 1)"><em>window instance</em></strong>.

The VS Code extensions icon

The <strong style="color: rgba(0,208,132, 1)">VS Code extensions icon</strong> is the <strong style="color: rgba(247,141,167, 1)"><em>6th</em></strong> **one down** from the <strong style="color: rgba(247,141,167, 1)"><em>top</em></strong>, **starting with** the **files icon** (<strong style="color: rgba(247,141,167, 1)"><em>followed</em></strong> by the <strong style="color: rgba(0,208,132, 1)">magnifying glass icon</strong>). When you <strong style="color: rgba(247,141,167, 1)"><em>click</em></strong> on that <strong style="color: rgba(0,208,132, 1)">icon</strong>, you will <strong style="color: rgba(247,141,167, 1)"><em>see</em></strong> what is **shown** in the <strong style="color: rgba(0,208,132, 1)">screen shot</strong> in the <strong style="color: rgba(247,141,167, 1)"><em>previous slide</em></strong>. And <strong style="color: rgba(247,141,167, 1)"><em>where</em></strong> **Github** <strong style="color: rgba(247,141,167, 1)"><em>has been typed</em></strong> is **where** you would <strong style="color: rgba(247,141,167, 1)"><em>type</em></strong> the **name** of the **extension** you are <strong style="color: rgba(247,141,167, 1)"><em>looking for</em></strong>. It will <strong style="color: rgba(247,141,167, 1)"><em>then appear</em></strong> in the <strong style="color: rgba(0,208,132, 1)">listing</strong>, and you can then <strong style="color: rgba(247,141,167, 1)"><em>add it</em></strong> to **VS Code**.

VS Code Packages: code snippets

<strong style="color: rgba(235,20,76, 1)">30 Seconds of Code</strong> by <strong style="color: rgba(235,20,76, 1)">30 Seconds</strong>: **JavaScript snippets** you can <strong style="color: rgba(247,141,167, 1)"><em>understand</em></strong> in **30 seconds** or <strong style="color: rgba(247,141,167, 1)"><em>less</em></strong>. <strong style="color: rgba(235,20,76, 1)">ESDoc MDN</strong> by <strong style="color: rgba(235,20,76, 1)">Samundra Khatri</strong>: If <strong style="color: rgba(247,141,167, 1)"><em>you</em></strong> **are coding** and in the <strong style="color: rgba(247,141,167, 1)"><em>middle</em></strong> you **forget syntax** or a **description** about <strong style="color: rgba(247,141,167, 1)"><em>any</em></strong> **javascript api**, then <strong style="color: rgba(247,141,167, 1)"><em>just write</em></strong> <strong style="color: rgba(0,208,132, 1)">//mdn [object].[method]</strong>.

VS Code packages: compilers

<strong style="color: rgba(235,20,76, 1)">Babel JavaScript</strong> by <strong style="color: rgba(235,20,76, 1)">Michael McDermott</strong>: for **syntax highlighting**. It <strong style="color: rgba(247,141,167, 1)"><em>supports</em></strong> **ES201x**, **React**, **JSX**, **Flow**, and **GraphQL syntax highlighting**. <strong style="color: rgba(235,20,76, 1)">Babel ES6/ES7</strong> by <strong style="color: rgba(235,20,76, 1)">D. Zaonnotti</strong>: <strong style="color: rgba(247,141,167, 1)"><em>Adds</em></strong> **JS Babel ES6/ES7** <strong style="color: rgba(247,141,167, 1)"><em>syntax coloring</em></strong>.

VS Code packages: env related

<strong style="color: rgba(235,20,76, 1)">Cloak</strong> by <strong style="color: rgba(235,20,76, 1)">John Papa</strong>: **Hides/shows** your <strong style="color: rgba(0,208,132, 1)">secrets</strong> in **environment files**, to <strong style="color: rgba(247,141,167, 1)"><em>avoid</em></strong> **accidentally sharing** them with <strong style="color: rgba(247,141,167, 1)"><em>everyone</em></strong>. <strong style="color: rgba(235,20,76, 1)">DotENV</strong> by <strong style="color: rgba(235,20,76, 1)">Mike Stead</strong>: <strong style="color: rgba(247,141,167, 1)"><em>support</em></strong> for <strong style="color: rgba(0,208,132, 1)">dotenv</strong> <strong style="color: rgba(247,141,167, 1)"><em>file syntax</em></strong>.

VS Code packages: formatters

<strong style="color: rgba(235,20,76, 1)">Beautify</strong> by <strong style="color: rgba(235,20,76, 1)">HookyQR</strong>: <strong style="color: rgba(247,141,167, 1)"><em>Beautify</em></strong> **code** <strong style="color: rgba(247,141,167, 1)"><em>in place</em></strong> for **VS Code**. <strong style="color: rgba(235,20,76, 1)">Beautify css/sass/scss/less</strong> by <strong style="color: rgba(235,20,76, 1)">Michele Melluso</strong>: <strong style="color: rgba(247,141,167, 1)"><em>Beautify</em></strong> **css**, **sass**, **scss**, and **less** in <strong style="color: rgba(0,208,132, 1)">VS Code</strong>. <strong style="color: rgba(235,20,76, 1)">AB HTML Formatter</strong> by <strong style="color: rgba(235,20,76, 1)">Anton Burov</strong>: <strong style="color: rgba(247,141,167, 1)"><em>formats</em></strong> and <strong style="color: rgba(247,141,167, 1)"><em>re-indents</em></strong> **HTML code**. <strong style="color: rgba(235,20,76, 1)">Prettier</strong> by <strong style="color: rgba(235,20,76, 1)">Prettier</strong>: **Formatter**. It’s an <strong style="color: rgba(247,141,167, 1)"><em>opinionated</em></strong> **code formatter** <strong style="color: rgba(247,141,167, 1)"><em>turned into</em></strong> an <strong style="color: rgba(0,208,132, 1)">extension</strong> for **VS Code**.

VS Code Packages: Git related

<strong style="color: rgba(235,20,76, 1)">GitLens</strong> by <strong style="color: rgba(235,20,76, 1)">Eric Amodio</strong>: <strong style="color: rgba(247,141,167, 1)"><em>Blame</em></strong>, <strong style="color: rgba(247,141,167, 1)"><em>code authorship</em></strong>, <strong style="color: rgba(247,141,167, 1)"><em>activity heatmaps</em></strong>, <strong style="color: rgba(247,141,167, 1)"><em>recent changes</strong></em> and <strong style="color: rgba(247,141,167, 1)"><em>history</em></strong> are <strong style="color: rgba(247,141,167, 1)"><em>only some</em></strong> of the **features** it <strong style="color: rgba(247,141,167, 1)"><em>provides</em></strong>. If you are **working on** <strong style="color: rgba(247,141,167, 1)"><em>any repository</em></strong> with **more than one** <strong style="color: rgba(247,141,167, 1)"><em>contributor</em></strong>, this is **something** you should <strong style="color: rgba(247,141,167, 1)"><em>probably</em></strong> **have**. **Supercharge** the **Git** <strong style="color: rgba(247,141,167, 1)"><em>capabilities</em></strong> built into **Visual Studio Code** — <strong style="color: rgba(247,141,167, 1)"><em>Visualize</em></strong> **code authorship** **at** a **glance** via <strong style="color: rgba(0,208,132, 1)">Git blame annotations</strong> and <strong style="color: rgba(0,208,132, 1)">code lens</strong>, <strong style="color: rgba(247,141,167, 1)"><em>seamlessly</em></strong> **navigate** and <strong style="color: rgba(247,141,167, 1)"><em>explore</em></strong> <strong style="color: rgba(0,208,132, 1)">Git repositories</strong>, <strong style="color: rgba(247,141,167, 1)"><em>gain</em></strong> **valuable insights** via <strong style="color: rgba(247,141,167, 1)"><em>powerful</em></strong> **comparison commands**, and so <strong style="color: rgba(247,141,167, 1)"><em>much more</em></strong>. <strong style="color: rgba(235,20,76, 1)">Git History</strong> by <strong style="color: rgba(235,20,76, 1)">Don Jayamanne</strong>: <strong style="color: rgba(247,141,167, 1)"><em>View</em></strong> **git log**, **file history**, <strong style="color: rgba(247,141,167, 1)"><em>compare</em></strong> **branches** or **commits**.

VS Code Packages: Integrated Terminal

To <strong style="color: rgba(247,141,167, 1)"><em>open</em></strong> an **instance** of <strong style="color: rgba(235,20,76, 1)">Integrated Terminal</strong> in your **VSCode editor**, <strong style="color: rgba(247,141,167, 1)"><em>press</em></strong> the <strong style="color: rgba(247,141,167, 1)"><em>following keys</em></strong> when <strong style="color: rgba(247,141,167, 1)"><em>inside</em></strong> **VSCode**: <strong style="color: rgba(0,208,132, 1)">"Control + backtick"</strong> The **plus sign** should be <strong style="color: rgba(247,141,167, 1)"><em>ignored</em></strong>. What this <strong style="color: rgba(247,141,167, 1)"><em>means</em></strong> is that you <strong style="color: rgba(247,141,167, 1)"><em>should</em></strong> **press** the **Control key** <strong style="color: rgba(247,141,167, 1)"><em>followed by</em></strong> the **backtick key**. <strong style="color: rgba(247,141,167, 1)"><em>Another way</em></strong> to <strong style="color: rgba(247,141,167, 1)"><em>open</em></strong> the <strong style="color: rgba(235,20,76, 1)">Integrated Terminal</strong> is to <strong style="color: rgba(247,141,167, 1)"><em>press</em></strong> the **Command key + J key**. <strong style="color: rgba(247,141,167, 1)"><em>Toggling</em></strong> those <strong style="color: rgba(0,208,132, 1)">two keys</strong> will <strong style="color: rgba(247,141,167, 1)"><em>either</em></strong> **open** or **close** the <strong style="color: rgba(235,20,76, 1)">Terminal</strong> <strong style="color: rgba(247,141,167, 1)"><em>instance</em></strong>.

VS Code Packages: JSON related

<strong style="color: rgba(235,20,76, 1)">json</strong> by <strong style="color: rgba(235,20,76, 1)">Zain Chen</strong>: <strong style="color: rgba(0,208,132, 1)">JSON</strong> for **Visual Studio Code**.

VS Code packages: linters

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

VS Code Packages: Live Server

<strong style="color: rgba(235,20,76, 1)">Live Server</strong> by <strong style="color: rgba(235,20,76, 1)">Ritwick Dey</strong>: an **easy way** to <strong style="color: rgba(247,141,167, 1)"><em>serve</em></strong> <strong style="color: rgba(0,208,132, 1)">static</strong> and <strong style="color: rgba(0,208,132, 1)">dynamic pages</strong> from **VS Code**, while it also <strong style="color: rgba(247,141,167, 1)"><em>supports</em></strong> <strong style="color: rgba(0,208,132, 1)">live reloading</strong>.

VS Code packages: Live Share

This <strong style="color: rgba(0,208,132, 1)">extension</strong> is a <strong style="color: rgba(0,208,132, 1)">must</strong> and **HUGE**! <strong style="color: rgba(235,20,76, 1)">VS Code Live Share</strong> by <strong style="color: rgba(235,20,76, 1)">Microsoft</strong>: **Visual Studio Live Share** <strong style="color: rgba(247,141,167, 1)"><em>enables</em></strong> you to <strong style="color: rgba(0,208,132, 1)">collaboratively edit</strong> and <strong style="color: rgba(0,208,132, 1)">debug</strong> <strong style="color: rgba(247,141,167, 1)"><em>with others</em></strong> in <strong style="color: rgba(0,208,132, 1)">real time</strong>, <strong style="color: rgba(247,141,167, 1)"><em>regardless</em></strong> what <strong style="color: rgba(0,208,132, 1)">programming languages</strong> you're <strong style="color: rgba(247,141,167, 1)"><em>using</em></strong> or **app types** you're <strong style="color: rgba(247,141,167, 1)"><em>building</em></strong>. It **allows you** to <strong style="color: rgba(247,141,167, 1)"><em>instantly</em></strong> (and <strong style="color: rgba(247,141,167, 1)"><em>securely</em></strong>) <strong style="color: rgba(0,208,132, 1)">share</strong> your <strong style="color: rgba(0,208,132, 1)">current project </strong>, and then <strong style="color: rgba(247,141,167, 1)"><em>as needed</em></strong>, share <strong style="color: rgba(0,208,132, 1)">debugging sessions</strong>, <strong style="color: rgba(0,208,132, 1)">terminal instances</strong>, <strong style="color: rgba(0,208,132, 1)">localhost web apps</strong>, and <strong style="color: rgba(247,141,167, 1)"><em>more</em></strong>! **Developers** that <strong style="color: rgba(247,141,167, 1)"><em>join</em></strong> your <strong style="color: rgba(0,208,132, 1)">sessions</strong> **receive all** of their <strong style="color: rgba(0,208,132, 1)">editor context</strong> from your <strong style="color: rgba(247,141,167, 1)"><em>environment</em></strong> (e.g. **language services**, **debugging**), which <strong style="color: rgba(247,141,167, 1)"><em>ensures</em></strong> **they can** <strong style="color: rgba(247,141,167, 1)"><em>start</em></strong> **productively collaborating** <strong style="color: rgba(247,141,167, 1)"><em>immediately</em></strong>, **without needing** to <strong style="color: rgba(247,141,167, 1)"><em>clone</em></strong> any **repos** or <strong style="color: rgba(247,141,167, 1)"><em>install</em></strong> any **SDK**s. <strong style="color: rgba(247,141,167, 1)"><em>Includes</em></strong> **Session Chat**, <strong style="color: rgba(247,141,167, 1)"><em>Includes</em></strong> **sharing** the <strong style="color: rgba(247,141,167, 1)"><em>project</em></strong> in **question** via <strong style="color: rgba(0,208,132, 1)">Live Server</strong> in the <strong style="color: rgba(0,208,132, 1)">Browser</strong>.
To <strong style="color: rgba(247,141,167, 1)"><em>view</em></strong> **my post** on <strong style="color: rgba(247,141,167, 1)"><em>getting started</em></strong> with <strong style="color: rgba(0,208,132, 1)">Live Share</strong>, <strong style="color: rgba(247,141,167, 1)"><em>please visit</em></strong> <a href="" target="_blank" style="color: rgba(123,220,181, 1)">Successfully Using Live Share Extension in VS Code</a> **on** <a href="https://www.interglobalmedianetwork.com/" target="_blank" style="color: rgba(123,220,181, 1)">interglobalmedianetwork.com</a>.

VS Code packages: Markdown related

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

VS Code packages: REST related

<strong style="color: rgba(235,20,76, 1)">REST Client</strong> by <strong style="color: rgba(235,20,76, 1)">Huachao Mao</strong>: <strong style="color: rgba(247,141,167, 1)"><em>allows you</em></strong> to <strong style="color: rgba(247,141,167, 1)"><em>send</em></strong> <strong style="color: rgba(0,208,132, 1)">HTTP requests</strong> and <strong style="color: rgba(247,141,167, 1)"><em>view</em></strong> the <strong style="color: rgba(0,208,132, 1)">responses</strong> <strong style="color: rgba(247,141,167, 1)"><em>directly</em></strong> in <strong style="color: rgba(0,208,132, 1)">VS Code</strong>.

VS Code packages: spell checkers

<strong style="color: rgba(235,20,76, 1)">Code Spell Checker</strong> by <strong style="color: rgba(235,20,76, 1)">Street Side Software</strong>: A <strong style="color: rgba(247,141,167, 1)"><em>basic</em></strong> <strong style="color: rgba(0,208,132, 1)">spell checker</strong> for <strong style="color: rgba(0,208,132, 1)">source code</strong> that <strong style="color: rgba(247,141,167, 1)"><em>works</em></strong> with <strong style="color: rgba(0,208,132, 1)">camelCase code</strong>. The <strong style="color: rgba(247,141,167, 1)"><em>goal</em></strong> of the <strong style="color: rgba(0,208,132, 1)">spell checker</strong> is to <strong style="color: rgba(247,141,167, 1)"><em>help catch</em></strong> <strong style="color: rgba(0,208,132, 1)">common spelling errors</strong>. <strong style="color: rgba(235,20,76, 1)">Highlight Matching Tag</strong> by <strong style="color: rgba(235,20,76, 1)">vincasIt</strong>: <strong style="color: rgba(247,141,167, 1)"><em>Highlights matching</em></strong> **closing** and **opening tag** in your **HTML** (or **JSX** in **React**). <strong style="color: rgba(247,141,167, 1)"><em>This one</em></strong> is <strong style="color: rgba(0,208,132, 1)">another life saver</strong>!

VS Code packages: themes

<strong style="color: rgba(235,20,76, 1)">One Dark Pro</strong>: **Theme** for **VS Code**. <strong style="color: rgba(247,141,167, 1)"><em>Based</em></strong> on **Atom’s** <strong style="color: rgba(247,141,167, 1)"><em>iconic</em></strong> **One Dark theme**. <strong style="color: rgba(235,20,76, 1)">Bittersweet Theme</strong> by <strong style="color: rgba(235,20,76, 1)">Gerane</strong>: **Bittersweet Theme** <strong style="color: rgba(247,141,167, 1)"><em>ported</em></strong> from the **Bittersweet TextMate Theme**. <strong style="color: rgba(235,20,76, 1)">Spirited Away Color Theme</strong> by <strong style="color: rgba(235,20,76, 1)">Maxfield Walker</strong>: **Color theme** for **VSCode** <strong style="color: rgba(247,141,167, 1)"><em>inspired by</em></strong> **Spirited Away**. <strong style="color: rgba(235,20,76, 1)">Syntax Light and Dark Theme</strong> by <strong style="color: rgba(235,20,76, 1)">XephAlpha</strong>: <strong style="color: rgba(0,208,132, 1)">Theme</strong> for <strong style="color: rgba(0,208,132, 1)">VS Code</strong>.

Related Resources

<ul> <li> <a href="https://code.visualstudio.com/docs/setup/mac" style="color: rgba(123,220,181, 1)" target="_blank"> Visual Studio Code on macOS </a> </li> <li> <a href="https://hackernoon.com/10-essential-vs-code-extensions-for-javascript-developers-in-2019-e8320e3f421e" target="_blank" style="color: rgba(123,220,181, 1)"> 10 Essential VS Code Extensions for JavaScript Developers in 2019 </a> </li> </ul>