├── .editorconfig ├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src ├── app │ ├── 01-edicion-basica │ │ ├── 01-movimientos.html │ │ ├── 02-movimientos.html │ │ ├── 03-comentarios.ts │ │ ├── 04-comentarios.html │ │ ├── 05-nuevo-arachivo.html │ │ ├── 06-definicion.ts │ │ ├── 07-borrar-lineas.ts │ │ ├── 08-deshacer-rehacer.ts │ │ ├── 09-zen-mode.html │ │ ├── 10-terminal.html │ │ ├── 11-emmet-wrap.html │ │ ├── 12-chrome-tabs.html │ │ └── extra │ │ │ └── funciones.ts │ ├── 02-multi-cursor-edicion │ │ ├── 01-clonar-lineas.html │ │ ├── 02-multi-cursor-basico.html │ │ ├── 03-multi-cursor-copy.html │ │ ├── 04-multi-cursor-formato.ts │ │ ├── 05-capitalizar.ts │ │ ├── 06-todas-ocurrencias.html │ │ ├── 07-siguiente-ocurrencia.html │ │ └── 09-arreglos.ts │ ├── 03-clases-definiciones │ │ ├── 01-clase-definiciones.ts │ │ ├── 02-ir-a-linea.css │ │ ├── 03-markdown.md │ │ ├── 04-replace-definition.ts │ │ └── extra │ │ │ └── classes.ts │ ├── 04-snippets │ │ ├── 01-console-log.ts │ │ └── 02-clase-snippet.ts │ ├── 05-extensiones │ │ ├── 01-json-to-ts.ts │ │ ├── 02-todos.ts │ │ ├── 03-bookmarks.ts │ │ ├── 04-material-theme.md │ │ ├── 05-live-server.html │ │ └── 06-colors.ts │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ └── app.module.ts ├── assets │ ├── .gitkeep │ └── css │ │ └── bootstrap.css ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events.json 15 | speed-measure-plugin.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "program": "${workspaceFolder}/serve", 12 | "preLaunchTask": "tsc: build - tsconfig.json", 13 | "outFiles": [ 14 | "${workspaceFolder}/dist/out-tsc/**/*.js" 15 | ] 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "bracket-pair-colorizer-2.showBracketsInRuler": true 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Curso de VSCode 2 | 3 | Un pequeño repositorio donde aprenderemos un par de trucos para trabajar rápidamente con Visual Studio Code. 4 | 5 | También hay un par de extensiones bastante útiles que les pueden servir. 6 | 7 | ## Extensiones 8 | 9 | * [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) 10 | 11 | * [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) 12 | 13 | * [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) 14 | 15 | * [Liveserver](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 16 | 17 | * [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 18 | 19 | * [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) 20 | 21 | * [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) 22 | 23 | * [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) 24 | 25 | * [TODO Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "vscApp": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/vscApp", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "src/styles.css" 27 | ], 28 | "scripts": [], 29 | "es5BrowserSupport": true 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "aot": true, 45 | "extractLicenses": true, 46 | "vendorChunk": false, 47 | "buildOptimizer": true, 48 | "budgets": [ 49 | { 50 | "type": "initial", 51 | "maximumWarning": "2mb", 52 | "maximumError": "5mb" 53 | } 54 | ] 55 | } 56 | } 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "options": { 61 | "browserTarget": "vscApp:build" 62 | }, 63 | "configurations": { 64 | "production": { 65 | "browserTarget": "vscApp:build:production" 66 | } 67 | } 68 | }, 69 | "extract-i18n": { 70 | "builder": "@angular-devkit/build-angular:extract-i18n", 71 | "options": { 72 | "browserTarget": "vscApp:build" 73 | } 74 | }, 75 | "test": { 76 | "builder": "@angular-devkit/build-angular:karma", 77 | "options": { 78 | "main": "src/test.ts", 79 | "polyfills": "src/polyfills.ts", 80 | "tsConfig": "src/tsconfig.spec.json", 81 | "karmaConfig": "src/karma.conf.js", 82 | "styles": [ 83 | "src/styles.css" 84 | ], 85 | "scripts": [], 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ] 90 | } 91 | }, 92 | "lint": { 93 | "builder": "@angular-devkit/build-angular:tslint", 94 | "options": { 95 | "tsConfig": [ 96 | "src/tsconfig.app.json", 97 | "src/tsconfig.spec.json" 98 | ], 99 | "exclude": [ 100 | "**/node_modules/**" 101 | ] 102 | } 103 | } 104 | } 105 | }, 106 | "vscApp-e2e": { 107 | "root": "e2e/", 108 | "projectType": "application", 109 | "prefix": "", 110 | "architect": { 111 | "e2e": { 112 | "builder": "@angular-devkit/build-angular:protractor", 113 | "options": { 114 | "protractorConfig": "e2e/protractor.conf.js", 115 | "devServerTarget": "vscApp:serve" 116 | }, 117 | "configurations": { 118 | "production": { 119 | "devServerTarget": "vscApp:serve:production" 120 | } 121 | } 122 | }, 123 | "lint": { 124 | "builder": "@angular-devkit/build-angular:tslint", 125 | "options": { 126 | "tsConfig": "e2e/tsconfig.e2e.json", 127 | "exclude": [ 128 | "**/node_modules/**" 129 | ] 130 | } 131 | } 132 | } 133 | } 134 | }, 135 | "defaultProject": "vscApp" 136 | } -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to vscApp!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vsc-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~7.2.0", 15 | "@angular/common": "~7.2.0", 16 | "@angular/compiler": "~7.2.0", 17 | "@angular/core": "~7.2.0", 18 | "@angular/forms": "~7.2.0", 19 | "@angular/platform-browser": "~7.2.0", 20 | "@angular/platform-browser-dynamic": "~7.2.0", 21 | "@angular/router": "~7.2.0", 22 | "core-js": "^2.5.4", 23 | "rxjs": "~6.3.3", 24 | "tslib": "^1.9.0", 25 | "zone.js": "~0.8.26" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "~0.13.0", 29 | "@angular/cli": "~7.3.5", 30 | "@angular/compiler-cli": "~7.2.0", 31 | "@angular/language-service": "~7.2.0", 32 | "@types/node": "~8.9.4", 33 | "@types/jasmine": "~2.8.8", 34 | "@types/jasminewd2": "~2.0.3", 35 | "codelyzer": "~4.5.0", 36 | "jasmine-core": "~2.99.1", 37 | "jasmine-spec-reporter": "~4.2.1", 38 | "karma": "~4.0.0", 39 | "karma-chrome-launcher": "~2.2.0", 40 | "karma-coverage-istanbul-reporter": "~2.0.1", 41 | "karma-jasmine": "~1.1.2", 42 | "karma-jasmine-html-reporter": "^0.2.2", 43 | "protractor": "~5.4.0", 44 | "ts-node": "~7.0.0", 45 | "tslint": "~5.11.0", 46 | "typescript": "~3.2.2" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/01-movimientos.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | 21 |

Objetivo final

22 | 23 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/02-movimientos.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | 29 | 30 |

Objetivo final

31 | 32 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/03-comentarios.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Comentar un bloque de código 4 | 5 | Tips: 6 | ⌘ / 7 | 8 | Ctrl + \ 9 | */ 10 | 11 | const a = 10; 12 | const b = 20; 13 | const c = { a, b }; 14 | 15 | 16 | const a = 30; 17 | const b = 40; 18 | const c = { a, b }; 19 | 20 | 21 | console.log( a, b, c ); 22 | 23 | // Resultado final 24 | // Sólo dejar un bloque comentado 25 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/04-comentarios.html: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | Hola 15 |

16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 17 | Eum maiores nostrum cum quasi totam. 18 |

19 |
20 | 21 |

Objetivo final

22 | 23 |
24 | Hola 25 |

26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 27 | Eum maiores nostrum cum quasi totam. 28 |

29 |
30 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/05-nuevo-arachivo.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/06-definicion.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Ir a la definición de la función saludar rápidamente 4 | 5 | Tips: 6 | Ojear definición ⌥ F12 7 | Ir a la definición F12 8 | 9 | Ojear definición Alt + F12 10 | Ir a la definición F12 11 | */ 12 | 13 | import { saludar } from './extra/funciones'; 14 | 15 | const saludo = saludar( 'Thanos' ); 16 | 17 | console.log(saludo); 18 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/07-borrar-lineas.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Comentar un bloque de código 4 | 5 | Tips: 6 | ⇧ ⌘ K 7 | Ctrl + Shift + K 8 | 9 | PRO: 10 | Seleccionar todas las ocurrencias de la selección 11 | ⇧ ⌘ L 12 | Ctrl + Shift + L 13 | */ 14 | 15 | let NoMeBorres = ':)'; 16 | let Borrame = ':('; 17 | 18 | NoMeBorres = '1'; 19 | Borrame = 'a'; 20 | NoMeBorres = '1'; 21 | Borrame = 'a'; 22 | 23 | 24 | // Resultado final (sin los comentarios claro.) 25 | 26 | // let NoMeBorres = ':)'; 27 | 28 | // NoMeBorres = '1'; 29 | // NoMeBorres = '1'; 30 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/08-deshacer-rehacer.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Deshacer y rehacer el código 4 | § 5 | Tips: 6 | ⌘ Z 7 | ⌘ ⇧ Z 8 | Ctrl +Z 9 | Ctrl + Shift + Z 10 | 11 | */ 12 | 13 | 14 | 15 | 16 | 17 | 18 | // Demo 19 | // function holaMundo() { 20 | // return 'Saludos a todos!'; 21 | // } 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/09-zen-mode.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/10-terminal.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 |

12 | Ejecutar el comando 13 | ng serve 14 |

15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/11-emmet-wrap.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 |

17 | Ejecutar el comando 18 | ng serve 19 |

20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/12-chrome-tabs.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |

18 | Abramos muchos tabs para probar 19 |

20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/app/01-edicion-basica/extra/funciones.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | export function saludar1( nombre: string ) { 5 | return `Yo no hago nada!!!`; 6 | } 7 | 8 | export function saludar2( nombre: string ) { 9 | return `Yo no hago nada!!!`; 10 | } 11 | 12 | export function saludar3( nombre: string ) { 13 | return `Yo no hago nada!!!`; 14 | } 15 | 16 | export function saludar4( nombre: string ) { 17 | return `Yo no hago nada!!!`; 18 | } 19 | 20 | export function saludar5( nombre: string ) { 21 | return `Yo no hago nada!!!`; 22 | } 23 | 24 | export function saludar6( nombre: string ) { 25 | return `Yo no hago nada!!!`; 26 | } 27 | 28 | export function saludar7( nombre: string ) { 29 | return `Yo no hago nada!!!`; 30 | } 31 | 32 | export function saludar8( nombre: string ) { 33 | return `Yo no hago nada!!!`; 34 | } 35 | 36 | export function saludar9( nombre: string ) { 37 | return `Yo no hago nada!!!`; 38 | } 39 | 40 | export function saludar10( nombre: string ) { 41 | return `Yo no hago nada!!!`; 42 | } 43 | 44 | export function saludar11( nombre: string ) { 45 | return `Yo no hago nada!!!`; 46 | } 47 | 48 | export function saludar12( nombre: string ) { 49 | return `Yo no hago nada!!!`; 50 | } 51 | 52 | export function saludar13( nombre: string ) { 53 | return `Yo no hago nada!!!`; 54 | } 55 | 56 | export function saludar14( nombre: string ) { 57 | return `Yo no hago nada!!!`; 58 | } 59 | 60 | export function saludar15( nombre: string ) { 61 | return `Yo no hago nada!!!`; 62 | } 63 | 64 | export function saludar16( nombre: string ) { 65 | return `Yo no hago nada!!!`; 66 | } 67 | 68 | export function saludar( nombre: string ) { 69 | return `Hola ${ nombre }!!!`; 70 | } 71 | 72 | export function saludar17( nombre: string ) { 73 | return `Yo no hago nada!!!`; 74 | } 75 | 76 | export function saludar18( nombre: string ) { 77 | return `Yo no hago nada!!!`; 78 | } 79 | 80 | export function saludar19( nombre: string ) { 81 | return `Yo no hago nada!!!`; 82 | } 83 | 84 | export function saludar20( nombre: string ) { 85 | return `Yo no hago nada!!!`; 86 | } 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/01-clonar-lineas.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | Hola 19 | 20 | 21 | 22 | 23 | 24 | Hola 25 | Hola 26 | Hola 27 | Hola 28 | Hola 29 | -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/02-multi-cursor-basico.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
  • Hola Mundo
    • 25 |
  • Hola Mundo
    • 26 |
  • Hola Mundo
    • 27 |
  • Hola Mundo
    • 28 |
  • Hola Mundo
    • 29 |
  • Hola Mundo
    • 30 | -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/03-multi-cursor-copy.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | amarillo 13 | rojo 14 | verde 15 | naranja 16 | morado 17 | negro 18 | blanco 19 | 20 | 21 | 22 | amarillo 23 | rojo 24 | verde 25 | naranja 26 | morado 27 | negro 28 | blanco -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/04-multi-cursor-formato.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Crear múltiples cursores 4 | Dar el formato deseado 5 | 6 | Tips: 7 | ⇧ ⌥ ↑ / ↓ 8 | Ctrl + Alt+ ↑ / ↓ 9 | */ 10 | 11 | const hulk = 'brouce banner'; 12 | const Hawkeye = 'cinton francis'; 13 | const ironman = 'tony stark'; 14 | const spiderman = 'peter parker'; 15 | const viudaNegra = 'natalia romanova'; 16 | 17 | 18 | // Objetivo final (sin los comentarios) 19 | // const hulk = 'brouce banner'; 20 | // const Hawkeye = 'cinton francis'; 21 | // const ironman = 'tony stark'; 22 | // const spiderman = 'peter parker'; 23 | // const viudaNegra = 'natalia romanova'; 24 | -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/05-capitalizar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Crear múltiples cursores 4 | Dar el formato deseado 5 | 6 | Tips: 7 | ⇧ ⌥ ↑ / ↓ 8 | ⌃ ⇧ U 9 | ⌃ ⇧ L 10 | 11 | Ctrl + Alt+ ↑ / ↓ 12 | Ctrl + Shift + U 13 | Ctrl + Shift + L 14 | 15 | Pro: 16 | Mostrar la paleta de comandos 17 | ⇧ ⌘ P, F1 18 | Ctrl + Shift + P, F1 19 | */ 20 | 21 | function capitalizados() { 22 | 23 | const hulk = 'brouce banner'; 24 | const Hawkeye = 'cinton francis'; 25 | const ironman = 'tony stark'; 26 | const spiderman = 'peter parker'; 27 | const viudaNegra = 'natalia romanova'; 28 | 29 | } 30 | 31 | function minusculas() { 32 | 33 | const HULK = 'brouce banner'; 34 | const HAWKEYE = 'cinton francis'; 35 | const IRONMAN = 'tony stark'; 36 | const SPIDERMAN = 'peter parker'; 37 | const VIUDANEGRA = 'natalia romanova'; 38 | 39 | } 40 | 41 | 42 | 43 | // Objetivo final (sin los comentarios) 44 | 45 | function capitalizadosDemo() { 46 | 47 | const hulk = 'Brouce Banner'; 48 | const Hawkeye = 'Cinton Francis'; 49 | const ironman = 'Tony Stark'; 50 | const spiderman = 'Peter Parker'; 51 | const viudaNegra = 'Natalia Romanova'; 52 | 53 | } 54 | 55 | function minusculasDemo() { 56 | 57 | const hulk = 'brouce banner'; 58 | const hawkeye = 'cinton francis'; 59 | const ironman = 'tony stark'; 60 | const spiderman = 'peter parker'; 61 | const viudanegra = 'natalia romanova'; 62 | 63 | } 64 | 65 | -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/06-todas-ocurrencias.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | amarillo 17 |

    rojo

    18 | verde 19 | naranja 20 | naranja-azul 21 | 22 | 23 | 24 | amarillo 25 |

    rojo

    26 | verde 27 | naranja 28 | naranja-azul -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/07-siguiente-ocurrencia.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | Uno 13 | Dos 14 | Cuarenta y cinco 15 | Un millón, ciento cincuenta mil 16 | 17 | 18 | 19 | 25 | 26 | -------------------------------------------------------------------------------- /src/app/02-multi-cursor-edicion/09-arreglos.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Crear múltiples cursores 4 | Y usarlo para editar un arreglo de días de la semana 5 | 6 | Tips: 7 | ⇧ ⌥ ↑ / ↓ 8 | Ctrl + Alt+ ↑ / ↓ 9 | 10 | */ 11 | 12 | // Crear un arreglo con los días de la semana 13 | 14 | 15 | 16 | 17 | 18 | 19 | // Objetivo final 20 | 21 | const diasDemo = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']; 22 | 23 | -------------------------------------------------------------------------------- /src/app/03-clases-definiciones/01-clase-definiciones.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Objetivo: 3 | Ver rápidamente las definiciones de la clase 4 | También funciona con archivos HTML y otros 5 | 6 | Tips: 7 | ⌘ P => luego escribir la @ 8 | ⇧ ⌘ O 9 | 10 | Ctrl + P => luego escribir la @ 11 | Ctrl + Shift = O 12 | 13 | Se pueden agrupar si después de la @, se escriben : 14 | */ 15 | 16 | 17 | class SuperHeroe { 18 | 19 | nombre: string; 20 | poder: string; 21 | edad: number; 22 | pasatiempo: string; 23 | 24 | // tslint:disable-next-line:variable-name 25 | private _nombreSecreto: string; 26 | 27 | constructor() { } 28 | 29 | usarPoder() {} 30 | 31 | volar() {} 32 | 33 | correr() {} 34 | 35 | caminar() {} 36 | 37 | revivir() {} 38 | 39 | // Sólo para demostración 40 | // tslint:disable-next-line:member-ordering 41 | nombre2: string; 42 | // tslint:disable-next-line:member-ordering 43 | poder2: string; 44 | // tslint:disable-next-line:member-ordering 45 | edad2: number; 46 | // tslint:disable-next-line:member-ordering 47 | pasatiempo3: string; 48 | 49 | set nombreSecreto(nombre) { 50 | this._nombreSecreto = nombre; 51 | } 52 | 53 | get nombreSecreto() { 54 | return this._nombreSecreto; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/app/03-clases-definiciones/03-markdown.md: -------------------------------------------------------------------------------- 1 | # Tips 2 | ``` 3 | command + P : Markdown Open Preview 4 | command + P : Markdown Open Preview to the side 5 | 6 | Ctrl + P : Markdown Open Preview 7 | Ctrl + P : Markdown Open Preview to the side 8 | ``` 9 | 10 | # Dillinger 11 | 12 | [![N|Solid](https://cldup.com/dTxpPi9lDf.thumb.png)](https://nodesource.com/products/nsolid) 13 | 14 | [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger) 15 | 16 | 17 | Dillinger is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor. 18 | 19 | - Type some Markdown on the left 20 | - See HTML in the right 21 | - Magic 22 | 23 | # New Features! 24 | 25 | - Import a HTML file and watch it magically convert to Markdown 26 | - Drag and drop images (requires your Dropbox account be linked) 27 | 28 | 29 | You can also: 30 | - Import and save files from GitHub, Dropbox, Google Drive and One Drive 31 | - Drag and drop markdown and HTML files into Dillinger 32 | - Export documents as Markdown, HTML and PDF 33 | 34 | Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email. As [John Gruber] writes on the [Markdown site][df1] 35 | 36 | > The overriding design goal for Markdown's 37 | > formatting syntax is to make it as readable 38 | > as possible. The idea is that a 39 | > Markdown-formatted document should be 40 | > publishable as-is, as plain text, without 41 | > looking like it's been marked up with tags 42 | > or formatting instructions. 43 | 44 | This text you see here is *actually* written in Markdown! To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right. 45 | 46 | ### Tech 47 | 48 | Dillinger uses a number of open source projects to work properly: 49 | 50 | * [AngularJS] - HTML enhanced for web apps! 51 | * [Ace Editor] - awesome web-based text editor 52 | * [markdown-it] - Markdown parser done right. Fast and easy to extend. 53 | * [Twitter Bootstrap] - great UI boilerplate for modern web apps 54 | * [node.js] - evented I/O for the backend 55 | * [Express] - fast node.js network app framework [@tjholowaychuk] 56 | * [Gulp] - the streaming build system 57 | * [Breakdance](http://breakdance.io) - HTML to Markdown converter 58 | * [jQuery] - duh 59 | 60 | And of course Dillinger itself is open source with a [public repository][dill] 61 | on GitHub. 62 | 63 | ### Installation 64 | 65 | Dillinger requires [Node.js](https://nodejs.org/) v4+ to run. 66 | 67 | Install the dependencies and devDependencies and start the server. 68 | 69 | ```sh 70 | $ cd dillinger 71 | $ npm install -d 72 | $ node app 73 | ``` 74 | 75 | For production environments... 76 | 77 | ```sh 78 | $ npm install --production 79 | $ NODE_ENV=production node app 80 | ``` 81 | 82 | ### Plugins 83 | 84 | Dillinger is currently extended with the following plugins. Instructions on how to use them in your own application are linked below. 85 | 86 | | Plugin | README | 87 | | ------ | ------ | 88 | | Dropbox | [plugins/dropbox/README.md][PlDb] | 89 | | Github | [plugins/github/README.md][PlGh] | 90 | | Google Drive | [plugins/googledrive/README.md][PlGd] | 91 | | OneDrive | [plugins/onedrive/README.md][PlOd] | 92 | | Medium | [plugins/medium/README.md][PlMe] | 93 | | Google Analytics | [plugins/googleanalytics/README.md][PlGa] | 94 | 95 | 96 | ### Development 97 | 98 | Want to contribute? Great! 99 | 100 | Dillinger uses Gulp + Webpack for fast developing. 101 | Make a change in your file and instantanously see your updates! 102 | 103 | Open your favorite Terminal and run these commands. 104 | 105 | First Tab: 106 | ```sh 107 | $ node app 108 | ``` 109 | 110 | Second Tab: 111 | ```sh 112 | $ gulp watch 113 | ``` 114 | 115 | (optional) Third: 116 | ```sh 117 | $ karma test 118 | ``` 119 | #### Building for source 120 | For production release: 121 | ```sh 122 | $ gulp build --prod 123 | ``` 124 | Generating pre-built zip archives for distribution: 125 | ```sh 126 | $ gulp build dist --prod 127 | ``` 128 | ### Docker 129 | Dillinger is very easy to install and deploy in a Docker container. 130 | 131 | By default, the Docker will expose port 8080, so change this within the Dockerfile if necessary. When ready, simply use the Dockerfile to build the image. 132 | 133 | ```sh 134 | cd dillinger 135 | docker build -t joemccann/dillinger:${package.json.version} . 136 | ``` 137 | This will create the dillinger image and pull in the necessary dependencies. Be sure to swap out `${package.json.version}` with the actual version of Dillinger. 138 | 139 | Once done, run the Docker image and map the port to whatever you wish on your host. In this example, we simply map port 8000 of the host to port 8080 of the Docker (or whatever port was exposed in the Dockerfile): 140 | 141 | ```sh 142 | docker run -d -p 8000:8080 --restart="always" /dillinger:${package.json.version} 143 | ``` 144 | 145 | Verify the deployment by navigating to your server address in your preferred browser. 146 | 147 | ```sh 148 | 127.0.0.1:8000 149 | ``` 150 | 151 | #### Kubernetes + Google Cloud 152 | 153 | See [KUBERNETES.md](https://github.com/joemccann/dillinger/blob/master/KUBERNETES.md) 154 | 155 | 156 | ### Todos 157 | 158 | - Write MORE Tests 159 | - Add Night Mode 160 | 161 | License 162 | ---- 163 | 164 | MIT 165 | 166 | 167 | **Free Software, Hell Yeah!** 168 | 169 | [//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax) 170 | 171 | 172 | [dill]: 173 | [git-repo-url]: 174 | [john gruber]: 175 | [df1]: 176 | [markdown-it]: 177 | [Ace Editor]: 178 | [node.js]: 179 | [Twitter Bootstrap]: 180 | [jQuery]: 181 | [@tjholowaychuk]: 182 | [express]: 183 | [AngularJS]: 184 | [Gulp]: 185 | 186 | [PlDb]: 187 | [PlGh]: 188 | [PlGd]: 189 | [PlOd]: 190 | [PlMe]: 191 | [PlGa]: 192 | -------------------------------------------------------------------------------- /src/app/03-clases-definiciones/04-replace-definition.ts: -------------------------------------------------------------------------------- 1 | import { SuperHeroe } from './extra/classes'; 2 | 3 | /* 4 | Objetivo: 5 | Cambiar únicamente la refencia de SuperHeroe a Heroe 6 | OJO!: Pero no reemplazar los strings 7 | 8 | Tips: 9 | Replace Symbol 10 | F2 11 | */ 12 | 13 | 14 | const wolverine = new SuperHeroe(); 15 | const ironman = new SuperHeroe(); 16 | const spiderman = new SuperHeroe(); 17 | 18 | function saludar() { 19 | return 'El SuperHeroe Wolverine es genial!'; 20 | } 21 | 22 | function gritar() { 23 | return 'El SuperHeroe en este string no se debe de cambiar'; 24 | } 25 | 26 | -------------------------------------------------------------------------------- /src/app/03-clases-definiciones/extra/classes.ts: -------------------------------------------------------------------------------- 1 | export class SuperHeroe { 2 | 3 | nombre: string; 4 | poder: string; 5 | edad: number; 6 | pasatiempo: string; 7 | 8 | constructor() { } 9 | 10 | usarPoder() {} 11 | 12 | volar() {} 13 | 14 | correr() {} 15 | 16 | caminar() {} 17 | 18 | revivir() {} 19 | 20 | } 21 | -------------------------------------------------------------------------------- /src/app/04-snippets/01-console-log.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | // Ejemplo final 10 | console.log('hola mundo'); 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/app/04-snippets/02-clase-snippet.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | // Ejemplo final 9 | export class NuevoSuperHeroe { 10 | 11 | constructor() { 12 | 13 | } 14 | } 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/app/05-extensiones/01-json-to-ts.ts: -------------------------------------------------------------------------------- 1 | 2 | // Extensión Paste JSON as Code 3 | // https://pokeapi.co/ 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/app/05-extensiones/02-todos.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | // TODO Highlight 5 | // Todo Tree 6 | // TODO y FIXME 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/05-extensiones/03-bookmarks.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Bookmarks 4 | 5 | class Temporal { 6 | 7 | constructor(parameters) { 8 | 9 | } 10 | } 11 | 12 | 13 | class OtraClase { 14 | constructor(parameters) { 15 | 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/05-extensiones/04-material-theme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Material Theme 4 | 5 | No hay mucho que decir, pueda que te gusten, pueda que no. 6 | 7 | Material Theme 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/05-extensiones/05-live-server.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

    Hola Mundo

    13 |
    14 |

    15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut maiores nisi molestiae, quidem deleniti esse assumenda deserunt itaque incidunt debitis harum accusamus consequuntur quaerat facilis nostrum enim asperiores modi magnam. 16 |

    17 | 18 | -------------------------------------------------------------------------------- /src/app/05-extensiones/06-colors.ts: -------------------------------------------------------------------------------- 1 | // Color highlight 2 | 3 | const colores = ['#fafafa', '#7F4CCC', '#0075FF', '#FF5F45']; 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/curso-VSCode/9940531d39abb3e3437ee8129ee221a4fcfbcc8b/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    VSCode Curso

    3 |
    4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'vscApp'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('vscApp'); 27 | }); 28 | 29 | it('should render title in a h1 tag', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to vscApp!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'vscApp'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/curso-VSCode/9940531d39abb3e3437ee8129ee221a4fcfbcc8b/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/curso-VSCode/9940531d39abb3e3437ee8129ee221a4fcfbcc8b/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VscApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage/vscApp'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es5", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "codelyzer" 4 | ], 5 | "rules": { 6 | "array-type": false, 7 | "arrow-parens": false, 8 | "deprecation": { 9 | "severity": "warn" 10 | }, 11 | "import-blacklist": [ 12 | true, 13 | "rxjs/Rx" 14 | ], 15 | "interface-name": false, 16 | "max-classes-per-file": false, 17 | "max-line-length": [ 18 | true, 19 | 140 20 | ], 21 | "member-access": false, 22 | "member-ordering": [ 23 | true, 24 | { 25 | "order": [ 26 | "static-field", 27 | "instance-field", 28 | "static-method", 29 | "instance-method" 30 | ] 31 | } 32 | ], 33 | "no-consecutive-blank-lines": false, 34 | "no-console": [ 35 | true, 36 | "debug", 37 | "info", 38 | "time", 39 | "timeEnd", 40 | "trace" 41 | ], 42 | "no-empty": false, 43 | "no-inferrable-types": [ 44 | true, 45 | "ignore-params" 46 | ], 47 | "no-non-null-assertion": true, 48 | "no-redundant-jsdoc": true, 49 | "no-switch-case-fall-through": true, 50 | "no-use-before-declare": true, 51 | "no-var-requires": false, 52 | "object-literal-key-quotes": [ 53 | true, 54 | "as-needed" 55 | ], 56 | "object-literal-sort-keys": false, 57 | "ordered-imports": false, 58 | "quotemark": [ 59 | true, 60 | "single" 61 | ], 62 | "trailing-comma": false, 63 | "no-output-on-prefix": true, 64 | "use-input-property-decorator": true, 65 | "use-output-property-decorator": true, 66 | "use-host-property-decorator": true, 67 | "no-input-rename": true, 68 | "no-output-rename": true, 69 | "use-life-cycle-interface": true, 70 | "use-pipe-transform-interface": true, 71 | "component-class-suffix": true, 72 | "directive-class-suffix": true, 73 | "typedef-whitespace": false 74 | } 75 | } 76 | --------------------------------------------------------------------------------