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"/>
+  <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')

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',

src/views/tst/About.vue

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

src/views/tst/Home.vue

@@ -2,7 +2,6 @@
   <div>{{ name }}</div>
 </template>
 
-
 <script setup lang="ts">
 import { ref } from 'vue'
 

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,