2 |
3 | ## Customizing Visual Studio Code
4 |
5 | * 🎨 [Workspace Customization](./workspace.md)
6 | * ☑️ [Tasks](./tasks.md)
7 | * 🚀 [Launch Configuration](./launch-configuration.md)
8 |
9 |
--------------------------------------------------------------------------------
/client/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | @import '_variables';
2 |
3 | @mixin large-screens() {
4 | @media (min-width: $small-screen-width) {
5 | @content;
6 | }
7 | }
8 |
9 | @mixin small-screens() {
10 | @media (max-width: $small-screen-width) {
11 | @content;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | cache:
3 | directories:
4 | - ~/.npm
5 | notifications:
6 | email: false
7 | node_js:
8 | - '10'
9 | - '8'
10 | after_success:
11 | - npm run travis-deploy-once "npm run semantic-release"
12 | branches:
13 | except:
14 | - /^v\d+\.\d+\.\d+$/
15 |
--------------------------------------------------------------------------------
/client/utils/api.js:
--------------------------------------------------------------------------------
1 | let metaContents =
2 | /** @type {HTMLMetaElement} */(document.head.querySelector('meta[name="fegrocer-api-endpoint"]')).content;
3 | let apiEndpoint = new URL(window.location.href);
4 | apiEndpoint.protocol = window.location.protocol;
5 |
6 | export const endpoint = apiEndpoint.toString();
--------------------------------------------------------------------------------
/client/global.d.ts:
--------------------------------------------------------------------------------
1 | interface IGroceryItem {
2 | id: number;
3 | price: number;
4 | name: string;
5 | unit: string;
6 | imageUrl: string;
7 | }
8 |
9 | interface ICartItem {
10 | groceryItem: IGroceryItem;
11 | qty: number;
12 | }
13 |
14 | declare module 'muicss/lib/react/container';
15 | declare module 'muicss/lib/react/appbar';
--------------------------------------------------------------------------------
/client/components/app-footer/index.test.js:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import React from 'react';
3 | import AppFooter from './index';
4 | import renderer from 'react-test-renderer';
5 |
6 | test('AppFooter renders as expected', () => {
7 | const component = renderer.create(
8 | {o.name}
10 |11 | 12 | 13 | {o.status} 14 | 15 | 16 | ${o.totalPrice} 17 |
18 |
27 |
2 |
3 | # Using Visual Studio Code
4 |
5 | * 📄 [Awesome Documents](./markdown.md)
6 | * ⏩ [Emmet](./emmet.md)
7 | * 🎛 [Refactoring](./refactoring.md)
8 | * ✅ [Type-Checking](./type-checking.md)
9 | * 🐞 [Debugging](./debugging.md)
10 |
11 | ---
12 |
13 | ## The best way to get to know this editor...
14 |
15 | Let's use it to do some stuff!
16 |
17 | Here's the example we will be working with - a grocery app! 
18 | It's a client/server app, built with bleeding edge versions of the following:
19 | - [React 16 (beta)](https://github.com/facebook/react/issues/10294)
20 | - [Webpack 3](https://webpack.js.org/)
21 | - [TypeScript 2.5](https://blogs.msdn.microsoft.com/typescript/2017/08/31/announcing-typescript-2-5/)
22 | - [Koa](http://koajs.com/)
23 |
24 |
25 | This is intended to show you the most modern web tools🔧 available. 95% of this can be done in older versions too!
26 |
27 | 
2 |
3 | # Using Visual Studio Code
4 |
5 | * 📄 [Awesome Documents](./markdown.md)
6 | * ⏩ [Emmet](./emmet.md)
7 | * 🎛 **Refactoring**
8 | * ✅ [Type-Checking](./type-checking.md)
9 | * 🐞 [Debugging](./debugging.md)
10 |
11 | ---
12 |
13 | ## Navigating & Refactoring
14 |
15 | ### Go To
16 |
17 | * ...file
18 | * ...definition
19 | * ...type definition
20 | * ...symbol
21 | * ...in file
22 | * ...in workspace
23 | * ...line (by number)
24 |
25 |
4 | 
5 |