convert eslint

.eslintrc.js

@@ -1,17 +1,39 @@
 module.exports = {
-    root: true,
-    parserOptions: {
-        sourceType: "module"
-    },
-    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
+    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
+    },
+    requireConfigFile: false
   },
+  plugins: [
+    'vue',
+    '@typescript-eslint'
+  ],
   rules: {
-        'no-console': 'off',
-        'comma-dangle': [2,'never']
+    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,4 +1,4 @@
-import {createRouter, createWebHashHistory, RouteRecord, RouteRecordRaw} from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecord, RouteRecordRaw } from 'vue-router'
 
 import Home from '../views/tst/Home.vue'
 

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 {
@@ -14,18 +14,18 @@ export const store = createStore<State>({
     num: 888
   },
   mutations: {
-        setNum(state: State, num: number) {
+    setNum (state: State, num: number) {
       state.num = num
     }
   },
   getters: {
-        getNum(state: State) {
+    getNum (state: State) {
       return state.num
     }
   }
 })
 
 // 定义自己的 `useStore` 组合式函数
-export function useStore() {
+export function useStore () {
   return baseUseStore(key)
 }

src/utils/request.js

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

src/views/tst/About.vue

@@ -1,12 +1,13 @@
 <template>
+  <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,7 +21,6 @@ const addBtn = () => {
   store.commit('setNum', ++count.value)
 }
 
-
 </script>
 
 <style scoped lang="scss">

src/views/tst/Home.vue

@@ -1,10 +1,9 @@
 <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>

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,