We’ll begin by taking a look at how we can get this fantastic tool to do as much heavy lifting for us as possible. Recent improvements have perfected the ability to attach directly to browsers and Node.js for a truly excellent debugging experience.
If you spend all day looking at and manipulating code, you may as well have your settings exactly the way you want them. We’ll go deep into customizations that’ll affect embedded feedback from static code analysis, the look and feel of the editor and study a few of the best and most useful extensions.
Please make sure you have the following software installed before arriving at the workshop or beginning the course.
Please make sure you have the following general software installed
|✔||Node.js||>= 8.0||nvm is highly recommended for managing multiple node versions on a single machine|
|✔||Visual Studio Code||>= 1.14||We'll be using several specific features of the VS Code editor. We can't force you to use it, but you'll miss out if you don't!|
|✔||Yarn||>= 0.24||An alternative to npm (if you are using nvm:
|✔||SQLite||>= 3||An embedded relational database (hint:
Additionally, to take advantage of syntax hilighting, static code analysis and other editor features, you'll want to install the latest version of the following VS Code extensions
|✔||sass-indented||Syntax highlighting and code completion support for Sass stylesheets|
|✔||jest||Syntax highlighting for Jest snapshot testing and in-editor test pass/fail statuses|
|✔||Debugger for Chrome||Allows us to attach to Chrome for debugging|
|vscode-icons||Better file and folder icons|
|rest-client||An in-editor REST client, so we can experiment with our API effortlessly|
Make sure you have these npm packages installed globally. This can be done by running
npm install -g <package-name>
First, clone this project from Github
git clone https://github.com/mike-works/vscode-fundamentals vscode cd vscode
Finally, while in the top-level folder of this project, download the and install this project's dependencies by running
To start the app, run
and you should see something on
You may run into problems during the workshop! An easy way to deal with this is to...
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
nvm install stable nvm use stable nvm alias default stable
Please install sqlite3 package manually?
If you use OS X, it can be installed with homebew
brew install sqlite3
Windows and Linux users, please install the appropriate official release.
This is a free-standing client/server system, including
Project │ ├─ client/ 📱 React web client │ ├─ components/ 📊 React components │ │ │ │ │ ├─ my-thing/index.jsx Component implementation │ │ ├─ my-thing/index.test.js Component tests │ │ └─ my-thing/styles.scss Component styles │ │ │ ├─ routes/ 🔝 Top-level React components, each corresponding to a "page" in our app │ ├─ sass/ 💅 Global Sass stylesheets │ ├─ app.jsx 🎁 React "App" component │ ├─ index.js 🎬 Web client entry point │ └─ index.ejs 📄 Template for web client index.html │ ├─ db/ 💾 SQLite databases ├─ dist/ 📦 Web client development/production builds ├─ server/ 🛒 Node.js API to support the web client ├─ webpack/ ⚙️ Build configuration └─ .vapid.json 🔐 VAPID private and public keys
While the general license for this project is the BSD 3-clause, the exercises themselves are proprietary and are licensed on a per-individual basis, usually as a result of purchasing a ticket to a public workshop, or being a participant in a private training.
Here are some guidelines for things that are OK and NOT OK, based on our understanding of how these licenses work:
© 2018 Mike Works, Inc., All Rights Reserved