Enforce code styling

Author: xingrz

Diff for: package.json

@@ -44,16 +44,47 @@
       "browser": true
     },
     "extends": [
-      "plugin:vue/vue3-essential",
       "eslint:recommended",
+      "plugin:vue/vue3-recommended",
       "@vue/typescript/recommended"
     ],
     "parserOptions": {
       "ecmaVersion": 2020
     },
     "rules": {
       "@typescript-eslint/ban-ts-comment": "off",
-      "@typescript-eslint/no-non-null-assertion": "off"
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/type-annotation-spacing": "warn",
+      "vue/max-attributes-per-line": [
+        "warn",
+        {
+          "singleline": {
+            "max": 3
+          }
+        }
+      ],
+      "vue/singleline-html-element-content-newline": "off",
+      "vue/html-closing-bracket-newline": "off",
+      "vue/array-bracket-spacing": "warn",
+      "vue/arrow-spacing": "warn",
+      "vue/block-spacing": "warn",
+      "vue/comma-spacing": "warn",
+      "vue/key-spacing": [
+        "warn",
+        {
+          "beforeColon": false,
+          "afterColon": true
+        }
+      ],
+      "vue/keyword-spacing": "warn",
+      "vue/object-curly-spacing": [
+        "warn",
+        "always"
+      ],
+      "vue/prefer-template": "warn",
+      "vue/space-infix-ops": "warn",
+      "vue/space-unary-ops": "warn",
+      "vue/template-curly-spacing": "warn"
     }
   },
   "browserslist": [

Diff for: src/App.vue

@@ -8,15 +8,19 @@
           </a-button>
         </a-col>
         <a-col>
-          <a-upload :customRequest="loadGerber" :showUploadList="false">
+          <a-upload :custom-request="loadGerber" :show-upload-list="false">
             <a-button type="primary" :loading="loading">打开 Gerber 文件</a-button>
           </a-upload>
         </a-col>
       </a-row>
     </template>
     <a-tab-pane key="options" tab="选项">
       <x-panel>
-        <render-panel v-model:side="render.side" v-model:sm="render.sm" v-model:cf="render.cf" v-model:sp="render.sp" />
+        <render-panel
+          v-model:side="render.side"
+          v-model:sm="render.sm"
+          v-model:cf="render.cf"
+          v-model:sp="render.sp" />
         <layers-panel v-model:layers="layers" />
       </x-panel>
     </a-tab-pane>

Diff for: src/components/GerberView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.container" :ref="(ref) => containerRef = (ref as HTMLElement)">
+  <div :ref="(ref) => containerRef = (ref as HTMLElement)" :class="$style.container">
     <canvas :ref="(ref) => canvasRef = (ref as HTMLCanvasElement)" :class="{ [$style.dragging]: dragging }" />
   </div>
 </template>

Diff for: src/components/XPanelContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="x-panel-container" :ref="(ref) => container = ref as Element">
+  <div :ref="(ref) => container = ref as Element" class="x-panel-container">
     <a-tabs type="card" @change="handleTabChange">
       <template #rightExtra>
         <slot name="extra" />

Diff for: src/panels/LayersPanel.vue

@@ -1,21 +1,28 @@
 <template>
   <panel-unit title="图层">
-    <a-button @click="showLayers" :disabled="props.layers.length == 0">打开图层设置</a-button>
+    <a-button :disabled="props.layers.length == 0" @click="showLayers">打开图层设置</a-button>
   </panel-unit>
-  <a-modal v-model:visible="layersShown" title="图层设置" centered width="1000px">
+  <a-modal
+    v-model:visible="layersShown"
+    title="图层设置"
+    centered
+    width="1000px">
     <a-row type="flex" :gutter="[8, 8]">
       <template v-for="layer in layers" :key="layer.filename!">
         <a-col :xs="24" :md="14" :lg="16">
-          <span :class="$style.layerName">{{layer.filename}}</span>
+          <span :class="$style.layerName">{{ layer.filename }}</span>
         </a-col>
         <a-col :xs="24" :md="10" :lg="8">
           <a-space>
-            <a-select v-model:value="layer.type" :options="gerberTypes" :style="{ width: '6em' }"
+            <a-select
+              v-model:value="layer.type"
+              :options="gerberTypes"
+              :style="{ width: '6em' }"
               @change="guessLayerSide(layer)" />
-            <a-radio-group v-model:value="layer.side" v-if="hasSide(layer.type)">
+            <a-radio-group v-if="hasSide(layer.type)" v-model:value="layer.side">
               <a-radio-button value="top">顶层</a-radio-button>
               <a-radio-button value="bottom">底层</a-radio-button>
-              <a-radio-button value="inner" v-if="layer.type == 'copper'">内层</a-radio-button>
+              <a-radio-button v-if="layer.type == 'copper'" value="inner">内层</a-radio-button>
             </a-radio-group>
           </a-space>
         </a-col>

Diff for: src/panels/OutputPanel.vue

@@ -32,7 +32,13 @@
       </a-row>
     </a-form-item>
     <div>
-      <a-button type="primary" :disabled="props.layers.length == 0" :loading="rendering" @click="output">输出文件</a-button>
+      <a-button
+        type="primary"
+        :disabled="props.layers.length == 0"
+        :loading="rendering"
+        @click="output">
+        输出文件
+      </a-button>
     </div>
   </panel-unit>
 </template>

Diff for: src/panels/RenderPanel.vue

@@ -13,8 +13,7 @@
     <a-form-item label="阻焊">
       <a-row type="flex" :gutter="[8, 8]">
         <a-col>
-          <a-select :value="props.sm" @update:value="(v: RenderSolderMask) => emit('update:sm', v)"
-            :style="{ width: '10em' }">
+          <a-select :value="props.sm" :style="{ width: '10em' }" @update:value="(v: RenderSolderMask) => emit('update:sm', v)">
             <a-select-option value="green">绿色</a-select-option>
             <a-select-option value="red">红色</a-select-option>
             <a-select-option value="yellow">黄色</a-select-option>