feat-eslint + prettier代码规范

2025-04-05 06:12:44 +08:00 · 2022-06-03 11:40:54 +08:00 · 2022-06-03 11:40:54 +08:00 · b7ae8b7349
commit b7ae8b7349
parent a95275e3ad
18 changed files with 4268 additions and 757 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,20 @@
+# eslint 忽略检查 (根据项目需要自行添加)
+node_modules
+dist
+.idea
+.vscode
+.hbuilderx
+src/manifest.json
+src/pages.json
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+*.yaml
+dist
+/public
+/docs
+.husky
+.local
+/bin
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,111 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  parser: 'vue-eslint-parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/essential',
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['@', './src']],
+        extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
+      },
+    },
+  },
+  plugins: ['vue', '@typescript-eslint', 'prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-var': 'error',
+    'prettier/prettier': 'error',
+    'vue/no-multiple-template-root': 'off',
+    'no-mutating-props': 'off',
+    'vue/no-v-html': 'off',
+    // @fixable 必须使用单引号，禁止使用双引号
+    quotes: [
+      'error',
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true,
+      },
+    ],
+    // 结尾必须有分号;
+    semi: [
+      'error',
+      'always',
+      {
+        omitLastInOneLineBlock: true,
+      },
+    ],
+    'vue/script-setup-uses-vars': 'error',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/v-on-event-hyphenation': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 /node_modules/
 /dist/
 /.idea/
-/.hbuilderx/
+/.hbuilderx/
+/.eslintcache
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,20 @@
+# 忽略格式化文件 (根据项目需要自行添加)
+node_modules
+dist
+.idea
+.vscode
+.hbuilderx
+src/manifest.json
+src/pages.json
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+*.yaml
+dist
+/public
+/docs
+.husky
+.local
+/bin
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  vueIndentScriptAndStyle: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+};
--- a/index.html
+++ b/index.html
@ -3,11 +3,15 @@
  <head>
    <meta charset="UTF-8" />
    <script>
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
-        CSS.supports('top: constant(a)'))
+      var coverSupport =
+        'CSS' in window &&
+        typeof CSS.supports === 'function' &&
+        (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'));
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+          (coverSupport ? ', viewport-fit=cover' : '') +
+          '" />',
+      );
    </script>
    <title></title>
    <!--preload-links-->
--- a/package.json
+++ b/package.json
@ -29,7 +29,9 @@
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
-    "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
+    "lint": "eslint --cache --max-warnings 0  \"src/**/*.{vue,ts}\" --fix",
+    "prettier": "prettier --write \"src/**/*.{js,ts,json,css,scss,vue}\""
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-alpha-3040820220424001",
@ -54,9 +56,17 @@
    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3040820220424001",
    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3040820220424001",
    "@types/node": "^17.0.38",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^9.1.0",
+    "prettier": "^2.6.2",
    "sass": "^1.52.1",
    "typescript": "^4.6.3",
    "vite": "^2.9.6",
+    "vite-plugin-eslint": "^1.6.1",
    "vite-plugin-windicss": "^1.8.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -1,28 +1,29 @@
 <script setup lang="ts">
-import {onLaunch, onShow, onHide} from "@dcloudio/uni-app";
+  import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';

-onLaunch(() => {
-  console.log("App Launch");
-});
-onShow(() => {
-  console.log("App Show");
-});
-onHide(() => {
-  console.log("App Hide");
-});
+  onLaunch(() => {
+    console.log('App Launch');
+  });
+  onShow(() => {
+    console.log('App Show');
+  });
+  onHide(() => {
+    console.log('App Hide');
+  });
 </script>
 <style lang="scss">
-:not(not), ::before, ::after {
-  box-sizing: border-box;
-}
+  :not(not),
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }

-
-/* 隐藏scroll-view的滚动条 */
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
+  /* 隐藏scroll-view的滚动条 */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
 </style>
--- a/src/components/test/Test.vue
+++ b/src/components/test/Test.vue
@ -1,14 +1,16 @@
-<template>
-  Test Component
-</template>
+<template>Test Component-----{{ msg }}</template>

 <script lang="ts">
-import {defineComponent} from 'vue';
+  import { defineComponent } from 'vue';

-export default defineComponent({
-  name: 'Test',
-  setup() {
-  }
-});
+  export default defineComponent({
+    name: 'Test',
+    setup() {
+      const msg = 'sdfa';
+      return {
+        msg,
+      };
+    },
+  });
 </script>
 <style scoped lang="scss"></style>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1,8 +1,8 @@
-/// <reference types="vite/client" />
+// / <reference types="vite/client" />

 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import { DefineComponent } from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -1,5 +1,5 @@
-import { createSSRApp } from "vue";
-import App from "./App.vue";
+import { createSSRApp } from 'vue';
+import App from './App.vue';
 import 'virtual:windi.css';
 export function createApp() {
  const app = createSSRApp(App);
--- a/src/manifest.json
+++ b/src/manifest.json
@ -1,72 +1,72 @@
 {
-    "name" : "",
-    "appid" : "",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        /* 模块配置 */
-        "modules" : {},
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {},
-            /* SDK配置 */
-            "sdkConfigs" : {}
-        }
+  "name": "",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  /* 5+App特有相关 */
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
    },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true
+    /* 模块配置 */
+    "modules": {},
+    /* 应用发布信息 */
+    "distribute": {
+      /* android打包配置 */
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      /* ios打包配置 */
+      "ios": {},
+      /* SDK配置 */
+      "sdkConfigs": {}
+    }
+  },
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics": {  
-        "enable": false
-    },
-    "vueVersion" : "3"
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3"
 }
--- a/src/pages.json
+++ b/src/pages.json
@ -1,16 +1,17 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	}
+  "pages": [
+    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "uni-app"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
 }
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -1,7 +1,7 @@
 <template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
-    <view class="text-area bg-rose-500 h-30rpx p-20rpx red" >
+    <view class="text-area bg-rose-500 h-30rpx p-20rpx red">
      <text class="">{{ title }}</text>
    </view>
    <Test />
@ -9,32 +9,32 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
-import Test from "@/components/test/Test.vue";
-const title = ref('Hello')
+  import { ref } from 'vue';
+  import Test from '@/components/test/Test.vue';
+  const title = ref('Hello');
 </script>

 <style lang="scss">
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }

-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin: 200rpx auto 50rpx;
-}
+  .logo {
+    height: 200rpx;
+    width: 200rpx;
+    margin: 200rpx auto 50rpx;
+  }

-.text-area {
-  display: flex;
-  justify-content: center;
-}
+  .text-area {
+    display: flex;
+    justify-content: center;
+  }

-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
+  .title {
+    font-size: 36rpx;
+    color: #8f8f94;
+  }
 </style>
--- a/src/uni.scss
+++ b/src/uni.scss
@ -21,32 +21,32 @@ $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;

 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color: #333; //基本色
+$uni-text-color-inverse: #fff; //反色
+$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
+$uni-text-color-disable: #c0c0c0;

 /* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+$uni-bg-color: #ffffff;
+$uni-bg-color-grey: #f8f8f8;
+$uni-bg-color-hover: #f1f1f1; //点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

 /* 边框颜色 */
-$uni-border-color:#c8c7cc;
+$uni-border-color: #c8c7cc;

 /* 尺寸变量 */

 /* 文字尺寸 */
-$uni-font-size-sm:24rpx;
-$uni-font-size-base:28rpx;
-$uni-font-size-lg:32rpx;
+$uni-font-size-sm: 24rpx;
+$uni-font-size-base: 28rpx;
+$uni-font-size-lg: 32rpx;

 /* 图片尺寸 */
-$uni-img-size-sm:40rpx;
-$uni-img-size-base:52rpx;
-$uni-img-size-lg:80rpx;
+$uni-img-size-sm: 40rpx;
+$uni-img-size-base: 52rpx;
+$uni-img-size-lg: 80rpx;

 /* Border Radius */
 $uni-border-radius-sm: 4rpx;
@ -68,9 +68,9 @@ $uni-spacing-col-lg: 24rpx;
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度

 /* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:40rpx;
+$uni-color-title: #2c405a; // 文章标题颜色
+$uni-font-size-title: 40rpx;
 $uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:36rpx;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:30rpx;
+$uni-font-size-subtitle: 36rpx;
+$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-font-size-paragraph: 30rpx;
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,24 +1,31 @@
-import {defineConfig} from "vite";
-import uni from "@dcloudio/vite-plugin-uni";
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import eslintPlugin from 'vite-plugin-eslint';
 import windicss from 'vite-plugin-windicss';
 import MiniProgramTailwind from '@dcasia/mini-program-tailwind-webpack-plugin/rollup';
 import { resolve } from 'path';

 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        uni(),
-        windicss(),
-        MiniProgramTailwind({
-            // 是否开启自动转换至 rpx 单位值的功能
-            enableRpx: true,
-            // 	设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率
-            designWidth: 350
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': resolve('./src'),
-        },
+  base: './',
+  plugins: [
+    uni(),
+    windicss(),
+    MiniProgramTailwind({
+      // 是否开启自动转换至 rpx 单位值的功能
+      enableRpx: true,
+      // 	设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率
+      designWidth: 350,
+    }),
+    eslintPlugin({
+      include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
+      exclude: ['./node_modules/**'],
+      cache: false,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve('./src'),
    },
+  },
 });
--- a/windi.config.ts
+++ b/windi.config.ts
@ -1,21 +1,21 @@
-import {defineConfig} from 'vite-plugin-windicss';
+import { defineConfig } from 'vite-plugin-windicss';

 // https://windicss.org/posts/attributify.html
 export default defineConfig({
-    attributify: {
-        // prefix: ''
-    },
-    preflight: false,
-    prefixer: false,
-    extract: {
-        // 忽略部分文件夹
-        exclude: ['node_modules', '.git', 'dist', '.idea', '.vscode']
-    },
-    corePlugins: {
-        // 禁用掉在小程序环境中不可能用到的 plugins
-        container: false
-    },
-    alias: {},
-    plugins: [],
-    variants: {}
+  attributify: {
+    // prefix: ''
+  },
+  preflight: false,
+  prefixer: false,
+  extract: {
+    // 忽略部分文件夹
+    exclude: ['node_modules', '.git', 'dist', '.idea', '.vscode'],
+  },
+  corePlugins: {
+    // 禁用掉在小程序环境中不可能用到的 plugins
+    container: false,
+  },
+  alias: {},
+  plugins: [],
+  variants: {},
 });