chore:运行lint添加pug并修改Home.vue为pug

Author: langen qu

.eslintrc.js

@@ -1,31 +1,28 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint"
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
   overrides: [
     {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)"
-      ],
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
       env: {
-        jest: true
-      }
-    }
-  ]
+        jest: true,
+      },
+    },
+  ],
 };

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/typescript",
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript',
   transform: {
-    "^.+\\.vue$": "vue-jest"
-  }
+    '^.+\\.vue$': 'vue-jest',
+  },
 };

package.json

@@ -35,6 +35,7 @@
     "lint-staged": "^9.5.0",
     "prettier": "^1.19.1",
     "typescript": "~3.9.3",
+    "vue-cli-plugin-pug": "^1.0.7",
     "vue-jest": "^5.0.0-0"
   },
   "gitHooks": {

src/views/Home.vue

@@ -1,8 +1,7 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
+<template lang="pug">
+.home
+  img(alt="Vue logo" src="../assets/logo.png")
+  HelloWorld(msg="Welcome to Your Vue.js + TypeScript App")
 </template>
 
 <script lang="ts">

tests/unit/example.spec.ts

@@ -1,11 +1,11 @@
-import { shallowMount } from "@vue/test-utils";
-import HelloWorld from "@/components/HelloWorld.vue";
+import { shallowMount } from '@vue/test-utils';
+import HelloWorld from '@/components/HelloWorld.vue';
 
-describe("HelloWorld.vue", () => {
-  it("renders props.msg when passed", () => {
-    const msg = "new message";
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message';
     const wrapper = shallowMount(HelloWorld, {
-      props: { msg }
+      props: { msg },
     });
     expect(wrapper.text()).toMatch(msg);
   });