convert eslint

.eslintrc.js

@@ -1,17 +1,39 @@
 module.exports = {
-    root: true,
-    parserOptions: {
-        sourceType: "module"
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'standard',
+    'plugin:vue/vue3-recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true
     },
-    parser: "vue-eslint-parser",
-    extends: ["plugin:vue/vue3-essential","plugin:vue/vue3-strongly-recommended","plugin:vue/vue3-recommended"],
-    env: {
-        browser: true,
-        node: true,
-        es6: true
-    },
-    rules: {
-        'no-console': 'off',
-        'comma-dangle': [2,'never']
-    }
-}
+    requireConfigFile: false
+  },
+  plugins: [
+    'vue',
+    '@typescript-eslint'
+  ],
+  rules: {
+    semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
+    'no-var': 'error', // 禁止使用 var
+    indent: ['error', 2], // 缩进2格
+    'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
+    quotes: [2, 'single'], // 使用单引号
+    'vue/html-closing-bracket-newline': 'off', // 不强制换行
+    'vue/singleline-html-element-content-newline': 'off', // 不强制换行
+    'vue/max-attributes-per-line': ['error', {
+      singleline: { max: 5 },
+      multiline: { max: 5 }
+    }] // vue template模板元素第一行最多5个属性
+    // 其它的规则可以去eslint查看，根据自己需要进行添加
+  }
+}

package.json

@@ -16,13 +16,20 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.24",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
     "@vitejs/plugin-vue": "^2.3.1",
-    "eslint": "^8.13.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-vue": "^8.6.0",
     "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.2",
+    "vite-plugin-eslint": "^1.4.0",
     "vue-tsc": "^0.29.8"
   }
 }

src/App.vue

@@ -3,8 +3,10 @@
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png"/>
-  <router-view/>
+  <div>
+    <img alt="Vue logo" src="./assets/logo.png">
+    <router-view />
+  </div>
 </template>
 
 <style>

src/main.ts

@@ -1,9 +1,8 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 
-// @ts-ignore
 import router from '@/router/index'
-// @ts-ignore
-import {store,key} from '@/store/index'
 
-createApp(App).use(router).use(store,key).mount('#app')
+import { store, key } from '@/store/index'
+
+createApp(App).use(router).use(store, key).mount('#app')

src/router/index.ts

@@ -1,24 +1,24 @@
-import {createRouter, createWebHashHistory, RouteRecord, RouteRecordRaw} from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecord, RouteRecordRaw } from 'vue-router'
 
 import Home from '../views/tst/Home.vue'
 
 const routes: Array<RouteRecordRaw> =
     [
-        {
-            path: '/',
-            name: 'Home',
-            component: Home
-        },
-        {
-            path: '/about',
-            name: 'About',
-            component: () => import('../views/tst/About.vue')
-        }
+      {
+        path: '/',
+        name: 'Home',
+        component: Home
+      },
+      {
+        path: '/about',
+        name: 'About',
+        component: () => import('../views/tst/About.vue')
+      }
     ]
 
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes
+  history: createWebHashHistory(),
+  routes
 })
 
-export default router
+export default router

src/store/index.ts

@@ -1,5 +1,5 @@
-import {InjectionKey} from 'vue'
-import {createStore, useStore as baseUseStore, Store} from 'vuex'
+import { InjectionKey } from 'vue'
+import { createStore, useStore as baseUseStore, Store } from 'vuex'
 
 // 为 store state 声明类型
 export interface State {
@@ -10,22 +10,22 @@ export interface State {
 export const key: InjectionKey<Store<State>> = Symbol()
 
 export const store = createStore<State>({
-    state: {
-        num: 888
-    },
-    mutations: {
-        setNum(state: State, num: number) {
-            state.num = num
-        }
-    },
-    getters: {
-        getNum(state: State) {
-            return state.num
-        }
+  state: {
+    num: 888
+  },
+  mutations: {
+    setNum (state: State, num: number) {
+      state.num = num
     }
+  },
+  getters: {
+    getNum (state: State) {
+      return state.num
+    }
+  }
 })
 
 // 定义自己的 `useStore` 组合式函数
-export function useStore() {
-    return baseUseStore(key)
-}
+export function useStore () {
+  return baseUseStore(key)
+}

src/utils/request.js

@@ -1,18 +1,18 @@
-import axios from "axios"
+import axios from 'axios'
 
 const service = axios.create({
-    baseURL: 'http://127.0.0.1:8888',
-    timeout: 10000
+  baseURL: 'http://127.0.0.1:8888',
+  timeout: 10000
 })
 
 service.interceptors.request.use(config => {
-    return config
+  return config
 })
 
 service.interceptors.response.use(response => {
-    return response
-},error => {
-    return Promise.reject(error)
+  return response
+}, error => {
+  return Promise.reject(error)
 })
 
-export default service
+export default service

src/views/tst/About.vue

@@ -1,12 +1,13 @@
 <template>
-  <div>{{ name }} -- {{ showCount }}</div>
-  <button @click="addBtn">addBtn</button>
+  <div>
+    <div>{{ name }} -- {{ showCount }}</div>
+    <button @click="addBtn">addBtn</button>
+  </div>
 </template>
 
-
 <script setup lang="ts">
-import {ref, computed} from 'vue'
-import {useStore} from '@/store/index'
+import { ref, computed } from 'vue'
+import { useStore } from '@/store/index'
 
 const store = useStore()
 const showCount = computed(() => {
@@ -20,11 +21,10 @@ const addBtn = () => {
   store.commit('setNum', ++count.value)
 }
 
-
 </script>
 
 <style scoped lang="scss">
 button{
   margin-top: 10px;
 }
-</style>
+</style>

src/views/tst/Home.vue

@@ -1,14 +1,13 @@
 <template>
-  <div>{{name}}</div>
+  <div>{{ name }}</div>
 </template>
 
-
 <script setup lang="ts">
-import {ref} from 'vue'
+import { ref } from 'vue'
 
 const name = ref('this is home')
 </script>
 
 <style scoped>
 
-</style>
+</style>

vite.config.ts

@@ -1,9 +1,14 @@
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import {resolve} from "path";
+import eslintPlugin from 'vite-plugin-eslint'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue()],
+    plugins: [vue(),
+        eslintPlugin({
+            include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
+        })],
     server: {
         host: '0.0.0.0',
         port: 3000,