2 -> 4 space indent

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -1,14 +1,15 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-  },
-  parserOptions: {
-    parser: "@typescript-eslint/parser"
-  }
+    root: true,
+    env: {
+        node: true
+    },
+    extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
+    rules: {
+        indent: ["error", 4],
+        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    },
+    parserOptions: {
+        parser: "@typescript-eslint/parser"
+    }
 };

babel.config.js

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

jest.config.js

@@ -1,27 +1,27 @@
 module.exports = {
-  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
-  transform: {
-    "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
-      "jest-transform-stub",
-    "^.+\\.tsx?$": "ts-jest"
-  },
-  transformIgnorePatterns: ["/node_modules/"],
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1"
-  },
-  snapshotSerializers: ["jest-serializer-vue"],
-  testMatch: [
-    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-  ],
-  testURL: "http://localhost/",
-  watchPlugins: [
-    "jest-watch-typeahead/filename",
-    "jest-watch-typeahead/testname"
-  ],
-  globals: {
-    "ts-jest": {
-      babelConfig: true
+    moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
+    transform: {
+        "^.+\\.vue$": "vue-jest",
+        ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+            "jest-transform-stub",
+        "^.+\\.tsx?$": "ts-jest"
+    },
+    transformIgnorePatterns: ["/node_modules/"],
+    moduleNameMapper: {
+        "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    snapshotSerializers: ["jest-serializer-vue"],
+    testMatch: [
+        "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+    ],
+    testURL: "http://localhost/",
+    watchPlugins: [
+        "jest-watch-typeahead/filename",
+        "jest-watch-typeahead/testname"
+    ],
+    globals: {
+        "ts-jest": {
+            babelConfig: true
+        }
     }
-  }
 };

package.json

@@ -5,10 +5,10 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "run-s lint:js lint:css",
+    "lint": "npm-run-all lint:js lint:css",
     "lint:js": "vue-cli-service lint",
     "lint:css": "stylelint --fix 'src/**/*.vue'",
-    "test": "run-s test:unit",
+    "test": "npm-run-all test:unit",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
@@ -35,6 +35,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "jest": ">=22 <24",
     "lint-staged": "^8.1.5",
+    "npm-run-all": "^4.1.5",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.18.2",
     "stylelint": "^10.1.0",

postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require("postcss-preset-env")]
+    plugins: [require("postcss-preset-env")]
 };

src/App.vue

@@ -1,31 +1,31 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app">
+        <div id="nav">
+            <router-link to="/">Home</router-link> |
+            <router-link to="/about">About</router-link>
+        </div>
+        <router-view />
     </div>
-    <router-view />
-  </div>
 </template>
 
 <style>
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
 }
 #nav {
-  padding: 30px;
+    padding: 30px;
 }
 
 #nav a {
-  font-weight: bold;
-  color: #2c3e50;
+    font-weight: bold;
+    color: #2c3e50;
 }
 
 #nav a.router-link-exact-active {
-  color: #42b983;
+    color: #42b983;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,16 +1,16 @@
 <template>
-  <div>
-    <h1>Hello, {{ name }}!</h1>
-  </div>
+    <div>
+        <h1>Hello, {{ name }}!</h1>
+    </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 
 export default Vue.extend({
-  name: "HelloWorld",
-  props: {
-    name: String
-  }
+    name: "HelloWorld",
+    props: {
+        name: String
+    }
 });
 </script>

src/main.ts

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

src/router.ts

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

src/shims-tsx.d.ts

@@ -1,13 +1,13 @@
 import Vue, { VNode } from "vue";
 
 declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any;
+    namespace JSX {
+        // tslint:disable no-empty-interface
+        interface Element extends VNode {}
+        // tslint:disable no-empty-interface
+        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";
-  export default Vue;
+    import Vue from "vue";
+    export default Vue;
 }

src/store.ts

@@ -4,7 +4,7 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+    state: {},
+    mutations: {},
+    actions: {}
 });

src/views/About.vue

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

src/views/Home.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld name="World" />
-  </div>
+    <div class="home">
+        <img alt="Vue logo" src="../assets/logo.png" />
+        <HelloWorld name="World" />
+    </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
 
 export default Vue.extend({
-  name: "home",
-  components: {
-    HelloWorld
-  }
+    name: "home",
+    components: {
+        HelloWorld
+    }
 });
 </script>

stylelint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: "stylelint-config-recommended"
+    extends: "stylelint-config-recommended"
 };

tests/unit/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  env: {
-    jest: true
-  }
+    env: {
+        jest: true
+    }
 };

tests/unit/example.spec.ts

@@ -2,12 +2,12 @@ import { shallowMount } from "@vue/test-utils";
 import HelloWorld from "@/components/HelloWorld.vue";
 
 describe("HelloWorld.vue", () => {
-  it("renders", () => {
-    const name = "World";
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { name }
-    });
+    it("renders", () => {
+        const name = "World";
+        const wrapper = shallowMount(HelloWorld, {
+            propsData: { name }
+        });
 
-    expect(wrapper.text()).toMatch(`Hello, ${name}!`);
-  });
+        expect(wrapper.text()).toMatch(`Hello, ${name}!`);
+    });
 });