Supports path aliases using @.

.eslintrc.yml

@@ -18,13 +18,8 @@ parserOptions:
 plugins:
   - '@typescript-eslint'
   - vuejs-accessibility
-rules: {
-  require-jsdoc: off,
-  valid-jsdoc: off,
-  new-cap: off,
-  vue/html-self-closing: [error,
-    html: {
-      void: always
-    }
-  ]
-}
+rules:
+  require-jsdoc: warn
+  valid-jsdoc: warn
+  new-cap: off
+  vue/html-self-closing: [error, html: { void: always }]

.stylelintrc.yml

@@ -8,3 +8,7 @@ plugins:
   - stylelint-prettier
 rules:
   prettier/prettier: true
+  color-function-notation: legacy
+  selector-class-pattern: null
+  no-descending-specificity: null
+  at-rule-no-unknown: null

package.json

@@ -35,9 +35,10 @@
   },
   "devDependencies": {
     "@amatlash/vite-plugin-stylelint": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
-    "@vue/compiler-sfc": "^3.2.24",
+    "@types/node": "^16.11.12",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "@vue/compiler-sfc": "^3.2.26",
     "@vue/eslint-config-typescript": "^9.1.0",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
@@ -56,8 +57,8 @@
     "stylelint-config-recommended-vue": "^1.1.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-prettier": "^2.0.0",
-    "typescript": "^4.5.3",
-    "vite": "^2.7.1",
+    "typescript": "^4.5.4",
+    "vite": "^2.7.2",
     "vite-plugin-env-compatible": "^1.1.1",
     "vite-plugin-eslint": "^1.3.0",
     "vite-plugin-vue2": "^1.9.0",

src/App.vue

@@ -15,8 +15,13 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 @Component
-/** App Component */
+/**
+ * App Component
+ */
 export default class App extends Vue {
+  /**
+   * Before create
+   */
   beforeCreate() {
     document.title = import.meta.env.VITE_APP_TITLE;
   }

src/components/HelloWorld.vue

@@ -121,6 +121,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 @Component
 /** HelloWorld Component */
 export default class HelloWorld extends Vue {
+  /** prop message */
   @Prop() msg!: string;
 }
 </script>

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig.json",
   "compilerOptions": {
-    "allowJs": true,
+    "allowJs": false,
     "target": "esnext",
     "useDefineForClassFields": true,
     "experimentalDecorators": true,
@@ -15,7 +15,12 @@
     "lib": [
       "esnext",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
   "include": [
     "src/**/*.ts",

vite.config.ts

@@ -3,9 +3,29 @@ import { createVuePlugin } from 'vite-plugin-vue2';
 import eslintPlugin from 'vite-plugin-eslint';
 import viteStylelint from '@amatlash/vite-plugin-stylelint';
 import envCompatible from 'vite-plugin-env-compatible';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        // vue @ shortcut fix
+        find: '@/',
+        replacement: `${path.resolve(__dirname, './src')}/`,
+      },
+      {
+        find: 'src/',
+        replacement: `${path.resolve(__dirname, './src')}/`,
+      },
+    ],
+  },
+  server: {
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
+  },
   plugins: [
     // Vue2
     createVuePlugin(),