chore: eslint 与 prettier 配合使用

.eslintignore

@@ -0,0 +1,7 @@
+# eslint 会忽略的文件
+
+.DS_Store
+node_modules
+dist
+dist-ssr
+*.local

.eslintrc.js

@@ -0,0 +1,84 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly'
+  },
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020
+  },
+  extends: [
+    'plugin:prettier/recommended', // 添加 prettier 插件
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:@typescript-eslint/recommended',
+    '@vue/standard',
+    '@vue/typescript/recommended'
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'vue/comment-directive': 'off',
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none'
+        },
+        singleline: {
+          delimiter: 'comma'
+        }
+      }
+    ],
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    'prefer-regex-literals': 'off',
+    'space-before-function-paren': ['error', 'never'],
+    'vue/array-bracket-spacing': 'error',
+    'vue/arrow-spacing': 'error',
+    'vue/block-spacing': 'error',
+    'vue/brace-style': 'error',
+    'vue/camelcase': 'error',
+    'vue/comma-dangle': 'error',
+    'vue/component-name-in-template-casing': 'error',
+    'vue/eqeqeq': 'error',
+    'vue/key-spacing': 'error',
+    'vue/match-component-file-name': 'error',
+    'vue/object-curly-spacing': 'error',
+    'vue/max-attributes-per-line': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'no-useless-escape': 'off',
+    '@typescript-eslint/no-this-alias': [
+      'error',
+      {
+        allowDestructuring: true, // Allow `const { props, state } = this`; false by default
+        allowedNames: ['self'] // Allow `const self = this`; `[]` by default
+      }
+    ],
+    'vue/attribute-hyphenation': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'dot-notation': 'off'
+  }
+}

.gitignore

@@ -1,3 +1,5 @@
+# git 会忽略的文件
+
 .DS_Store
 node_modules
 dist

.prettierignore

@@ -1,15 +1,7 @@
 # prettier 会忽略的文件
 
-/dist/*
-.local
-.output.js
-/node_modules/**
-
-**/*.svg
-**/*.sh
-
-/public/*
-
 .DS_Store
+node_modules
+dist
+dist-ssr
 *.local
-*.log

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["johnsoncodehk.volar"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "johnsoncodehk.volar"
+  ]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 UNPany
+Copyright (c) 2022 pany
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -7,7 +7,8 @@
     "build:stage": "vue-tsc --noEmit && vite build --mode staging",
     "build:prod": "vue-tsc --noEmit && vite build",
     "preview:stage": "pnpm build:stage && vite preview",
-    "preview:prod": "pnpm build:prod && vite preview"
+    "preview:prod": "pnpm build:prod && vite preview",
+    "lint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
@@ -16,7 +17,18 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.25",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^8.6.0",
     "prettier": "^2.6.2",
     "typescript": "^4.6.3",
     "unplugin-auto-import": "^0.7.1",

prettier.config.js

@@ -12,10 +12,10 @@ module.exports = {
   endOfLine: 'auto',
   /** 采用单引号 */
   singleQuote: true,
-  /** 对象或者数组的最后一个元素后面是否要加逗号 */
-  trailingComma: 'all',
+  /** 对象或者数组的最后一个元素后面不要加逗号 */
+  trailingComma: 'none',
   /** 不加分号 */
   semi: false,
   /** 不使用 tab 格式化 */
-  useTabs: false,
+  useTabs: false
 }

src/App.vue

@@ -10,7 +10,6 @@ console.info('测试 MODE', import.meta.env.MODE)
 console.info('测试 BASE_URL', import.meta.env.BASE_URL)
 console.info('测试 DEV', import.meta.env.DEV)
 console.info('测试 PROD', import.meta.env.PROD)
-const aaa = { a: 5, b: 1 }
 </script>
 
 <template>

src/components/HelloWorld.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 defineProps<{ msg: string }>()
-
-const count = ref(0)
 </script>
 
 <template>
@@ -19,18 +15,10 @@ const count = ref(0)
   <p>See <code>README.md</code> for more information.</p>
 
   <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Docs </a>
     |
     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
 </template>
 
 <style scoped>

src/types/auto-imports.d.ts

@@ -1,6 +1,4 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
-declare global {
-
-}
+declare global {}
 export {}

src/types/env.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 /** 声明自动引入的 vue 组件 */
-declare module "*.vue" {
-  import type { DefineComponent } from "vue"
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component

vite.config.ts

@@ -11,8 +11,8 @@ export default (env: ConfigEnv): UserConfigExport => {
     resolve: {
       alias: {
         /** @ 符号指向 src 目录 */
-        '@': resolve(__dirname, './src'),
-      },
+        '@': resolve(__dirname, './src')
+      }
     },
     server: {
       /** 是否开启 https */
@@ -34,9 +34,9 @@ export default (env: ConfigEnv): UserConfigExport => {
           ws: true,
           /** 是否允许跨域 */
           changeOrigin: true,
-          rewrite: (path) => path.replace('/mock-api', ''),
-        },
-      },
+          rewrite: (path) => path.replace('/mock-api', '')
+        }
+      }
     },
     build: {
       brotliSize: false,
@@ -49,12 +49,12 @@ export default (env: ConfigEnv): UserConfigExport => {
         compress: {
           drop_console: false,
           drop_debugger: true,
-          pure_funcs: ['console.log'],
+          pure_funcs: ['console.log']
         },
         output: {
           /** 删除注释 */
-          comments: false,
-        },
+          comments: false
+        }
       },
       assetsDir: 'static/assets',
       /** 静态资源打包到 dist 下的不同目录 */
@@ -62,9 +62,9 @@ export default (env: ConfigEnv): UserConfigExport => {
         output: {
           chunkFileNames: 'static/js/[name]-[hash].js',
           entryFileNames: 'static/js/[name]-[hash].js',
-          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
-        },
-      },
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+        }
+      }
     },
     /** vite 插件 */
     plugins: [
@@ -72,13 +72,13 @@ export default (env: ConfigEnv): UserConfigExport => {
       /** 自动按需导入 */
       AutoImport({
         dts: './src/types/auto-imports.d.ts',
-        resolvers: [ElementPlusResolver()],
+        resolvers: [ElementPlusResolver()]
       }),
       /** 自动按需导入 */
       Components({
         dts: './src/types/components.d.ts',
-        resolvers: [ElementPlusResolver()],
-      }),
-    ],
+        resolvers: [ElementPlusResolver()]
+      })
+    ]
   }
 }