chore: lint fixes

Noction · Apr 9, 2024 · 3eae09f · 3eae09f
1 parent 3780a08
commit 3eae09f
Show file tree

Hide file tree

Showing 41 changed files with 2,202 additions and 1,574 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/playground.yml b/.github/workflows/playground.yml
@@ -1,4 +1,4 @@
-name: 'playground'
+name: playground
 
 on:
   push:

diff --git a/.stylelintignore b/.stylelintignore
@@ -1,7 +1,2 @@
-# .gitignore syntax (uses node-ignore behind the scenes)
-{
-  rules: {},
-  ignoreFiles: [
-    '**/*.js'
-  ]
-}
+dist/
+docs/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -17,7 +17,6 @@ To set the repository up:
 | 3. Install [`@antfu/ni`](https://github.com/antfu/ni)                                                    | `npm i -g @antfu/ni` |
 | 4. Install dependencies under the project root                                                           | `ni`                 |
 
-
 ## 💡 Commands
 
 ### `nr dev`
@@ -93,7 +92,6 @@ This will let GitHub know the issues are linked, and automatically close them on
 
 It's ok to have multiple commits in a single PR, you don't need to rebase or force push for your changes as we will use `Squash and Merge` to squash the commits into one commit when merging.
 
-
 ### Update Dependencies
 
 With `taze`, you can run `taze major -Ir` to check and select the versions to update interactive. `-I` stands for `--interactive`, `-r` stands for `--recursive` for monorepo.

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,5 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  vue: true,
+})
diff --git a/package.json b/package.json
@@ -1,10 +1,17 @@
 {
   "name": "@noction/vue-draggable-grid-monorepo",
   "version": "1.10.1",
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=18",
+    "pnpm": "^8"
+  },
   "scripts": {
     "lint": "pnpm -P -r \"/^lint:.*/\"",
-    "lint:es": "pnpm -P -r lint:es",
-    "lint:style": "pnpm -P -r lint:style",
+    "lint:es": "eslint .",
+    "lint:es:fix": "eslint . --fix",
+    "lint:style": "stylelint **/*.{css,scss,vue}",
+    "lint:style:fix": "stylelint **/*.{css,scss,vue} --fix",
     "typecheck": "pnpm -P -r typecheck",
     "build": "pnpm -P -r build",
     "build:lib": "pnpm -F vue-draggable-grid build",
@@ -14,16 +21,11 @@
     "release": "pnpm run lint && bumpp package.json packages/playground/package.json packages/vue-draggable-grid/package.json --commit --push --tag"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@antfu/eslint-config": "^2.13.0",
     "bumpp": "^9.3.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-sort-exports": "^0.8.0",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint": "^9.0.0",
+    "eslint-plugin-perfectionist": "^2.8.0",
+    "lint-staged": "^15.2.2",
     "sass": "^1.69.7",
     "simple-git-hooks": "^2.9.0",
     "stylelint": "^16.1.0",
@@ -32,14 +34,8 @@
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "typescript": "^5.3.3",
-    "vue-eslint-parser": "^9.4.0",
     "vue-tsc": "^1.8.27"
   },
-  "engines": {
-    "node": ">=18",
-    "pnpm": "^8"
-  },
-  "packageManager": "[email protected]",
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },

diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -7,8 +7,6 @@
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "lint:es": "eslint \"src/**/*.{js,ts,vue}\" --fix --color",
-    "lint:style": "stylelint src/**/*.{css,scss,vue} --color --fix",
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -1,25 +1,12 @@
-<template>
-  <div class="app-wrap">
-    <nav>
-      <a href="#/">Home</a>
-      <a href="#/responsive">Responsive</a>
-    </nav>
-
-    <div class="page-wrapper">
-      <component :is="currentView" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import Home from './pages/Home.vue';
-import Responsive from './pages/Responsive.vue';
-import NotFound from './pages/NotFound.vue';
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
+import Home from './pages/Home.vue'
+import Responsive from './pages/Responsive.vue'
+import NotFound from './pages/NotFound.vue'
 
 const routes = {
   '/': Home,
-  '/responsive': Responsive
+  '/responsive': Responsive,
 }
 
 const currentPath = ref(window.location.hash)
@@ -34,6 +21,19 @@ const currentView = computed(() => {
 })
 </script>
 
+<template>
+  <div class="app-wrap">
+    <nav>
+      <a href="#/">Home</a>
+      <a href="#/responsive">Responsive</a>
+    </nav>
+
+    <div class="page-wrapper">
+      <component :is="currentView" />
+    </div>
+  </div>
+</template>
+
 <style>
 .vue-grid-item {
   display: flex;

diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
@@ -1,7 +1,7 @@
 import '@noction/vue-draggable-grid/styles'
-import App from './App.vue'
 import VueDraggableGrid from '@noction/vue-draggable-grid'
 import { createApp } from 'vue'
+import App from './App.vue'
 
 const app = createApp(App)
 

diff --git a/packages/playground/src/pages/Home.vue b/packages/playground/src/pages/Home.vue
@@ -1,22 +1,7 @@
-<template>
-  <grid-layout
-    v-model:layout="layout"
-    :col-num="colNum"
-    :row-height="rowHeight"
-    :margin="[10]"
-    :use-css-transforms="false"
-  >
-    <template #gridItemContent="slotProps">
-      <div>
-        {{ slotProps.item.id }}
-      </div>
-    </template>
-  </grid-layout>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+/* eslint perfectionist/sort-objects: "error" */
 const colNum = ref(6)
 const layout = ref([
   { h: 2, id: 0, w: 2, x: 0, y: 0 },
@@ -30,9 +15,24 @@ const layout = ref([
   { h: 2, id: 8, w: 2, x: 4, y: 4 },
   { h: 2, id: 9, w: 2, x: 0, y: 6 },
   { h: 2, id: 10, w: 2, x: 2, y: 6 },
-  { h: 2, id: 11, w: 2, x: 4, y: 6 }
+  { h: 2, id: 11, w: 2, x: 4, y: 6 },
 ])
 
-const rowHeight = computed(() =>  (window.innerWidth - 56) / 4 )
+const rowHeight = computed(() => (window.innerWidth - 56) / 4)
 </script>
 
+<template>
+  <grid-layout
+    v-model:layout="layout"
+    :col-num="colNum"
+    :row-height="rowHeight"
+    :margin="[10]"
+    :use-css-transforms="false"
+  >
+    <template #gridItemContent="slotProps">
+      <div>
+        {{ slotProps.item.id }}
+      </div>
+    </template>
+  </grid-layout>
+</template>
diff --git a/packages/playground/src/pages/Responsive.vue b/packages/playground/src/pages/Responsive.vue
@@ -1,46 +1,46 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 
 const layoutLocal = ref([
-  { x: 0, y: 0, w: 2, h: 2, id: "0" },
-  { x: 2, y: 0, w: 2, h: 4, id: "1" },
-  { x: 4, y: 0, w: 2, h: 5, id: "2" },
-  { x: 6, y: 0, w: 2, h: 3, id: "3" },
-  { x: 8, y: 0, w: 2, h: 3, id: "4" },
-  { x: 10, y: 0, w: 2, h: 3, id: "5" },
-  { x: 0, y: 5, w: 2, h: 5, id: "6" },
-  { x: 2, y: 5, w: 2, h: 5, id: "7" },
-  { x: 4, y: 5, w: 2, h: 5, id: "8" },
-  { x: 6, y: 4, w: 2, h: 4, id: "9" },
-  { x: 8, y: 4, w: 2, h: 4, id: "10" },
-  { x: 10, y: 4, w: 2, h: 4, id: "11" },
-  { x: 0, y: 10, w: 2, h: 5, id: "12" },
-  { x: 2, y: 10, w: 2, h: 5, id: "13" },
-  { x: 4, y: 8, w: 2, h: 4, id: "14" },
-  { x: 6, y: 8, w: 2, h: 4, id: "15" },
-  { x: 8, y: 10, w: 2, h: 5, id: "16" },
-  { x: 10, y: 4, w: 2, h: 2, id: "17" },
-  { x: 0, y: 9, w: 2, h: 3, id: "18" },
-  { x: 2, y: 6, w: 2, h: 2, id: "19" },
-]);
+  { x: 0, y: 0, w: 2, h: 2, id: '0' },
+  { x: 2, y: 0, w: 2, h: 4, id: '1' },
+  { x: 4, y: 0, w: 2, h: 5, id: '2' },
+  { x: 6, y: 0, w: 2, h: 3, id: '3' },
+  { x: 8, y: 0, w: 2, h: 3, id: '4' },
+  { x: 10, y: 0, w: 2, h: 3, id: '5' },
+  { x: 0, y: 5, w: 2, h: 5, id: '6' },
+  { x: 2, y: 5, w: 2, h: 5, id: '7' },
+  { x: 4, y: 5, w: 2, h: 5, id: '8' },
+  { x: 6, y: 4, w: 2, h: 4, id: '9' },
+  { x: 8, y: 4, w: 2, h: 4, id: '10' },
+  { x: 10, y: 4, w: 2, h: 4, id: '11' },
+  { x: 0, y: 10, w: 2, h: 5, id: '12' },
+  { x: 2, y: 10, w: 2, h: 5, id: '13' },
+  { x: 4, y: 8, w: 2, h: 4, id: '14' },
+  { x: 6, y: 8, w: 2, h: 4, id: '15' },
+  { x: 8, y: 10, w: 2, h: 5, id: '16' },
+  { x: 10, y: 4, w: 2, h: 2, id: '17' },
+  { x: 0, y: 9, w: 2, h: 3, id: '18' },
+  { x: 2, y: 6, w: 2, h: 2, id: '19' },
+])
 
 const draggable = ref(true)
 const resizable = ref(true)
 </script>
 
 <template>
-    <div class="layout-json">
-            Displayed as <code>[x, y, w, h]</code>:
-            <div class="columns">
-                <div v-for="item in layoutLocal">
-                    <b>{{item.id}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
-                </div>
-            </div>
-        </div>
-        <hr/>
-        <input type="checkbox" v-model="draggable"/> Draggable
-        <input type="checkbox" v-model="resizable"/> Resizable
-        <br/>
+  <div class="layout-json">
+    Displayed as <code>[x, y, w, h]</code>:
+    <div class="columns">
+      <div v-for="item in layoutLocal" :key="item.id">
+        <b>{{ item.id }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
+      </div>
+    </div>
+  </div>
+  <hr>
+  <input v-model="draggable" type="checkbox"> Draggable
+  <input v-model="resizable" type="checkbox"> Resizable
+  <br>
 
   <div style="width: 100%; height: 100%">
     <GridLayout

diff --git a/packages/playground/src/shims-vue.d.ts b/packages/playground/src/shims-vue.d.ts
@@ -2,7 +2,7 @@
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line
+
   const component: DefineComponent<object, object, any>
 
   export default component

diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
@@ -1,37 +1,37 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
     "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "outDir": "./dist",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
     "lib": ["esnext", "dom"],
-    "allowJs": true,
-    "checkJs": false,
+    "useDefineForClassFields": true,
     "baseUrl": ".",
+    "module": "esnext",
+    "moduleResolution": "node",
     "paths": {
       "@/*": [
         "src/*"
       ]
-    }
+    },
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": false,
+    "strict": true,
+    "outDir": "./dist",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
   },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.vue"
   ],
   "exclude": [
     "./node_modules"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
   ]
 }