Переформатировал код

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: [
+	presets: [
-    '@vue/app'
+		"@vue/app",
-  ]
+	],
-}
+};

public/index.html

@@ -1,22 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
-    <meta charset="utf-8">
+	<meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-    <title>Packmate</title>
+		  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  </head>
+	<title>Packmate</title>
-  <body>
+</head>
-    <noscript>
+<body>
-      <strong>We're sorry but packmate-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+<noscript>
-    </noscript>
+	<strong>We're sorry but Packmate doesn't work properly without JavaScript enabled. Please enable it to
-    <div id="app"></div>
+		continue.</strong>
-    <!-- built files will be auto injected -->
+</noscript>
 
-	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<div id="app"></div>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-	</body>
+		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+		crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+		crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+		crossorigin="anonymous"></script>
+</body>
 </html>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Navbar.vue

@@ -37,8 +37,8 @@
 				<button type="button" class="btn btn-link">
 					<svg id="i-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16"
 						 fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-						<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z"/>
+						<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z"></path>
-						<circle cx="16" cy="16" r="4"/>
+						<circle cx="16" cy="16" r="4"></circle>
 					</svg>
 				</button>
 			</div>
@@ -48,7 +48,7 @@
 
 <script lang="ts">
     import {Component, Vue} from "vue-property-decorator";
-    import CtfService from '@/components/CtfService.vue';
+    import CtfService from "@/components/CtfService.vue";
 
     @Component({
         data() {

src/components/Sidebar.vue

@@ -15,10 +15,10 @@
 				<!--					</a>-->
 				<!--				</li>-->
 				<Stream
-					v-for="stream in streams"
+						v-for="stream in streams"
-					:key="stream.id"
+						:key="stream.id"
-					:id="stream.id"
+						:id="stream.id"
-					:time="stream.time"></Stream>
+						:time="stream.time"></Stream>
 			</ul>
 		</div>
 	</nav>
@@ -26,7 +26,7 @@
 
 <script lang="ts">
     import {Component, Prop, Vue} from "vue-property-decorator";
-    import Stream from '@/components/Stream.vue';
+    import Stream from "@/components/Stream.vue";
 
     @Component({
         components: {Stream},

src/components/Stream.vue

@@ -1,9 +1,9 @@
 <template>
 	<li class="nav-item">
-<!--		<a class="nav-link active" href="#">-->
+		<!--		<a class="nav-link active" href="#">-->
-<!--			#1<br/>-->
+		<!--			#1<br/>-->
-<!--			13:37:01-->
+		<!--			13:37:01-->
-<!--		</a>-->
+		<!--		</a>-->
 		<router-link class="nav-link" active-class="active" :to="'/' + $route.params.servicePort + '/' + id">
 			#{{id}}<br/>
 			{{time}}

src/main.ts

@@ -5,6 +5,6 @@ import router from './router';
 Vue.config.productionTip = false;
 
 new Vue({
-    router,
+	router,
-    render: (h) => h(App),
+	render: (h) => h(App),
 }).$mount('#app');

src/router.ts

@@ -5,20 +5,20 @@ import Home from './views/Home.vue';
 Vue.use(Router);
 
 export default new Router({
-  routes: [
+	routes: [
-    {
+		{
-      path: '/:servicePort?/:streamId?',
+			path: '/:servicePort?/:streamId?',
-      name: 'home',
+			name: 'home',
-      component: Home,
+			component: Home,
-      props: true,
+			props: true,
-    },
+		},
-    {
+		// {
-      path: '/about',
+		//     path: '/about',
-      name: 'about',
+		//     name: 'about',
-      // route level code-splitting
+		//     // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
+		//     // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
+		//     // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
+		//     component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
-    },
+		// },
-  ],
+	],
 });

src/shims-tsx.d.ts

@@ -1,13 +1,17 @@
-import Vue, { VNode } from 'vue';
+import Vue, {VNode} from 'vue';
 
 declare global {
-  namespace JSX {
+	namespace JSX {
-    // tslint:disable no-empty-interface
+		// tslint:disable no-empty-interface
-    interface Element extends VNode {}
+		interface Element extends VNode {
-    // tslint:disable no-empty-interface
+		}
-    interface ElementClass extends Vue {}
+
-    interface IntrinsicElements {
+		// tslint:disable no-empty-interface
-      [elem: string]: any;
+		interface ElementClass extends Vue {
-    }
+		}
-  }
+
+		interface IntrinsicElements {
+			[elem: string]: any;
+		}
+	}
 }

src/shims-vue.d.ts

@@ -1,4 +1,4 @@
 declare module '*.vue' {
-  import Vue from 'vue';
+	import Vue from 'vue';
-  export default Vue;
+	export default Vue;
 }

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,3 +1,4 @@
+<!--suppress HtmlDeprecatedTag -->
 <template>
 	<div>
 		<Navbar></Navbar>

tslint.json

@@ -9,8 +9,15 @@
     ]
   },
   "rules": {
-    "quotemark": [true, "single"],
+    "quotemark": [
-    "indent": [true, "spaces", 2],
+      true,
+      "single"
+    ],
+    "indent": [
+      true,
+      "tabs",
+      4
+    ],
     "interface-name": false,
     "ordered-imports": false,
     "object-literal-sort-keys": false,

vue.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  lintOnSave: false
+	lintOnSave: false,
-}
+};