{"id":22486222,"url":"https://github.com/mike-works/vscode-fundamentals","last_synced_at":"2026-01-30T01:20:54.680Z","repository":{"id":39005542,"uuid":"100902251","full_name":"mike-works/vscode-fundamentals","owner":"mike-works","description":"👨‍🏫 Mike's Visual Studio Code Course","archived":false,"fork":false,"pushed_at":"2025-07-28T18:44:39.000Z","size":9515,"stargazers_count":201,"open_issues_count":22,"forks_count":107,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-28T20:43:08.121Z","etag":null,"topics":["course","javascript","jsdoc","typescript","visual-studio-code"],"latest_commit_sha":null,"homepage":"https://frontendmasters.com/courses/visual-studio-code/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mike-works.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-08-21T02:01:54.000Z","updated_at":"2025-06-09T14:28:06.000Z","dependencies_parsed_at":"2023-10-14T23:15:09.888Z","dependency_job_id":"74c0a496-6c3e-4c6f-9c65-f2a5bd5e88bd","html_url":"https://github.com/mike-works/vscode-fundamentals","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/mike-works/vscode-fundamentals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mike-works%2Fvscode-fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mike-works%2Fvscode-fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mike-works%2Fvscode-fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mike-works%2Fvscode-fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mike-works","download_url":"https://codeload.github.com/mike-works/vscode-fundamentals/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mike-works%2Fvscode-fundamentals/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268440290,"owners_count":24250767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["course","javascript","jsdoc","typescript","visual-studio-code"],"created_at":"2024-12-06T17:14:07.932Z","updated_at":"2026-01-30T01:20:49.641Z","avatar_url":"https://github.com/mike-works.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align='center'\u003e\n  \u003ca href=\"https://mike.works\" target='_blank'\u003e\n    \u003cimg height=40 src='https://assets.mike.works/img/login_logo-33a9e523d451fb0d902f73d5452d4a0b.png' /\u003e\n  \u003c/a\u003e \n\u003c/p\u003e\n\u003cp align='center'\u003e\n  \u003ca href=\"https://mike.works/course/vs-code-607be6c\" target='_blank'\u003e\n    \u003cimg height=150 src='https://user-images.githubusercontent.com/558005/29501029-30794568-85da-11e7-9163-698aa235e74e.png' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href=\"https://travis-ci.org/mike-works/vscode-fundamentals\" title=\"Build Status\"\u003e\n    \u003cimg title=\"Build Status\" src=\"https://travis-ci.org/mike-works/vscode-fundamentals.svg?branch=solution\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/mike-works/vscode-fundamentals/releases\" title=\"Version\"\u003e\n    \u003cimg title=\"Version\" src=\"https://img.shields.io/github/tag/mike-works/vscode-fundamentals.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align='center'\u003e\nThis is the example project used for the \u003ca title=\"Mike Works, Inc.\" href=\"https://mike.works\"\u003eMike Works\u003c/a\u003e \u003ca title=\"Visual Studio Code Fundamentals\" href=\"https://mike.works/course/vs-code-607be6c\"\u003eVisual Studio Code\u003c/a\u003e course.\n\u003c/p\u003e\n\n# Course outline and slides\n * [View course outline here](https://mike.works/course/vs-code-607be6c)\n * [View slides here](https://github.com/mike-works/vscode-fundamentals/tree/master/docs)\n\n# About This Workshop\n\nVisual Studio Code is a modern, lightweight and full-featured code editor, built from the ground up to suit the needs of web developers, and JavaScript developers in particular. In this course, we'll dive deep into using, customizing and extending it.\n\n\n# What will we do?\n\nWe’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.\n\nIf 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.\n\nBecause VS Code is built with web technology, it’s easy for JavaScript and TypeScript developers to customize and extend. We’ll build two extensions of our own, unlocking extra productivity when working on common tasks.\n\n\n#### By coding along with this two day (split into four half-days) workshop, you will:\n\n* Get hands on experience with debugging in a variety of scenarios\n* Learn how to use launch configurations to execute programs run shell scripts\n* Unlock extra productivity by consolidating your terminal, debugger and editor into one tool\n* Learn about deep customization options that make a **REAL** difference in how you get your work done\n* Get a tour of plugins so powerful, after using them you’ll wonder how you ever lived without them!\n* Build your own “code snippet” extension\nAnd more…\n\n# Setup\n\nPlease make sure you have the following software installed before arriving at the workshop or beginning the course.\n\n## General Packages\n\nPlease make sure you have the following general software installed\n\n| Required | Library | Version Range | Notes |\n| ------------- | ------------- | ---| --- |\n| ✔ | [Node.js](http://nodejs.org/)  | \u003e= 8.0 | [nvm](https://github.com/creationix/nvm) is highly recommended for managing multiple node versions on a single machine |\n| ✔ | [Visual Studio Code](https://code.visualstudio.com/)  | \u003e= 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! |\n| ✔ | [Yarn](https://yarnpkg.com/)  | \u003e= 0.24 | An alternative to [npm](https://github.com/npm/npm) (if you are using nvm: `brew install yarn --without-node`, else use `brew install yarn`) |\n| ✔ | [SQLite](https://sqlite.org/)  | \u003e= 3 | An embedded relational database (hint: `brew install sqlite3`)|\n\n## VS Code Extensions\n\nAdditionally, 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\n\n| Required | Extension | Notes |\n| ------------- | ------------- | --- |\n| ✔ | [sass-indented](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented) | Syntax highlighting and code completion support for [Sass](http://sass-lang.com) stylesheets |\n| ✔ | [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | Static code analysis for JavaScript and JSX files |\n| ✔ | [jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) | Syntax highlighting for [Jest snapshot testing](https://facebook.github.io/jest/docs/snapshot-testing.html) and in-editor test pass/fail statuses |\n| ✔ | [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) | Allows us to attach to Chrome for debugging |\n|   | [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons) | Better file and folder icons |\n|   | [rest-client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) | An in-editor REST client, so we can experiment with our API effortlessly |\n\n## Global Node.js Packages\n\nMake sure you have these npm packages installed globally. This can be done by running\n\n```\nnpm install -g \u003cpackage-name\u003e\n```\n\n| Required | Library | Version Range |\n| ------------- | ------------- | ---|\n| ✔ | [babel-eslint](https://github.com/babel/babel-eslint)  | ^7.0.0 |\n| ✔ | [eslint](https://github.com/eslint/eslint) | ^4.0.0 |\n| ✔ | [eslint-plugin-babel](https://github.com/babel/eslint-plugin-babel)  | ^4.0.0 |\n| ✔ | [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)  | ^7.1.0 |\n\n## Project setup\n\nFirst, clone this project from Github\n\n```\ngit clone https://github.com/mike-works/vscode-fundamentals vscode\ncd vscode\n```\n\nFinally, while in the top-level folder of this project, download the and install this project's dependencies by running\n\n```\nyarn\n```\n\nTo start the app, run\n\n```\nnpm start\n```\n\nand you should see something on `http://localhost:3000`\n\n### Troubleshooting\n\n#### What if I have an older version of Node.js?\n\nYou may run into problems during the workshop! An easy way to deal with this is to...\n\n* install [nvm](https://github.com/creationix/nvm) by running\n\n```sh\ncurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash\n```\nor Wget:\n\n```sh\nwget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash\n```\n* then restart your terminal\n* then run\n```sh\nnvm install stable\nnvm use stable\nnvm alias default stable\n```\n\n#### What if I get an error like `Please install sqlite3 package manually`?\n\nIf you use OS X, it can be installed with [homebew](https://brew.sh/)\n\n```sh\nbrew install sqlite3\n```\n\nWindows and Linux users, please install the appropriate [official release](https://sqlite.org/download.html).\n\n\n## Files and Folders\n\nThis is a free-standing client/server system, including\n\n* A database\n* A REST API\n* A single-page-app web client\n\n````\n Project\n │\n ├─ client/            📱 React web client\n │  ├─ components/     📊 React components\n │  │  │\n │  │  ├─ my-thing/index.jsx        Component implementation\n │  │  ├─ my-thing/index.test.js    Component tests\n │  │  └─ my-thing/styles.scss      Component styles\n │  │\n │  ├─ routes/         🔝 Top-level React components, each corresponding to a \"page\" in our app\n │  ├─ sass/           💅 Global Sass stylesheets\n │  ├─ app.jsx         🎁 React \"App\" component  \n │  ├─ index.js        🎬 Web client entry point\n │  └─ index.ejs       📄 Template for web client index.html\n │\n ├─ db/                💾 SQLite databases\n ├─ dist/              📦 Web client development/production builds\n ├─ server/            🛒 Node.js API to support the web client\n ├─ webpack/           ⚙️ Build configuration\n └─ .vapid.json        🔐 VAPID private and public keys\n````\n\n## What are the pieces?\n\n* [Webpack 3](https://webpack.js.org)\n* [Babel](http://babeljs.io/) 7.x, setup with the [babel-preset-env](https://github.com/babel/babel/tree/7.0/packages/babel-preset-env) plugins, compiling to ES5 JavaScript\n* [TSLint](https://palantir.github.io/tslint/) for linting TypeScript\n* [sass-loader](https://github.com/webpack-contrib/sass-loader) for traditional management of [Sass](http://sass-lang.com/) styles\n* [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) so compiled styles are external stylesheets instead of inline style blocks\n* [React](http://facebook.github.io/react/) as a component library\n* [MUI](https://www.muicss.com/) as a lightweight (6.6K) Material Design inspired UI kit\n* [Jest](http://facebook.github.io/jest/) as a testing platform\n* [SQLite3](https://www.sqlite.org/) - as a lightweight, embedded database (for API)\n* [Koa](http://koajs.com/) - as a HTTP server for our API.\n\n## License\nWhile the general license for this project is the BSD 3-clause, the exercises\nthemselves are proprietary and are licensed on a per-individual basis, usually\nas a result of purchasing a ticket to a public workshop, or being a participant\nin a private training.\n\nHere are some guidelines for things that are **OK** and **NOT OK**, based on our\nunderstanding of how these licenses work:\n\n### OK\n* Using everything in this project other than the exercises (or accompanying tests) \nto build a project used for your own free or commercial training material\n* Copying code from build scripts, configuration files, tests and development \nharnesses that are not part of the exercises specifically, for your own projects\n* As an owner of an individual license, using code from tests, exercises, or\nexercise solutions for your own non-training-related project.\n\n### NOT OK (without express written consent)\n* Using this project, or any subset of \nexercises contained within this project to run your own workshops\n* Writing a book that uses the code for these exercises\n* Recording a screencast that contains one or more of this project's exercises \n\n\n## Copyright\n\n\u0026copy; 2018 [Mike Works, Inc.](https://mike.works), All Rights Reserved\n\n###### This material may not be used for workshops, training, or any other form of instructing or teaching developers, without express written consent\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmike-works%2Fvscode-fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmike-works%2Fvscode-fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmike-works%2Fvscode-fundamentals/lists"}