feat: introduce eslint

Author: zhiyuanzmj

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.fixAll.stylelint": "explicit"
+    "source.fixAll.eslint": "explicit"
   }
 }

docs/.vitepress/config.ts

@@ -33,6 +33,10 @@ export default defineConfig({
             text: 'Migration',
             link: `/introduction/migration`,
           },
+          {
+            text: 'ESLint',
+            link: `/introduction/eslint`,
+          },
         ],
       },
       {
@@ -59,7 +63,7 @@ export default defineConfig({
     ],
   },
   markdown: {
-    languages: ['js', 'ts'],
+    languages: ['js', 'ts', 'tsx'],
     codeTransformers: [
       transformerTwoslash({
         twoslasher: createTwoslasher({

docs/index.md

@@ -33,5 +33,8 @@ features:
   - icon: 🌈
     title: Hot Module Replacement
     details: Support functional components or defined by defineComponent.
+  - icon: ⚙️
+    title: ESLint
+    details: Provide an ESLint plugin for vue-jsx-vapor to automatically fix code.
 ---
 

docs/introduction/eslint.md

@@ -0,0 +1,85 @@
+# ESLint
+
+This is an ESLint plugin for `vue-jsx-vapor` to automatically fix code.
+
+## Install
+
+```sh
+pnpm add @vue-jsx-vapor/eslint
+```
+
+## Setup
+
+```ts 
+// eslint.config.ts
+import vueJsxVapor from '@vue-jsx-vapor/eslint'
+
+export default [
+  vueJsxVapor()
+]
+```
+
+## define-style
+
+Use `prettier` to format styles in the defineStyle macro.
+
+```ts twoslash
+import vueJsxVapor from '@vue-jsx-vapor/eslint'
+
+export default [
+  vueJsxVapor({
+    rules: {
+      'vue-jsx-vapor/define-style': ['error', { tabWidth: 2 }]
+    }
+  })
+]
+```
+
+## jsx-sort-props
+
+This is a modified version of [@stylistic/jsx/jsx-sort-props](https://eslint.style/rules/jsx/jsx-sort-props), supporting custom reservedFirst and reservedLast options.
+
+```ts twoslash
+import vueJsxVapor from '@vue-jsx-vapor/eslint'
+
+export default [
+  vueJsxVapor({
+    rules: {
+      'vue-jsx-vapor/jsx-sort-props': ['error', { 
+        reservedFirst: ['v-if', 'v-for'], 
+        reservedLast: ['v-slot'],
+      }]
+    }
+  })
+]
+```
+
+### `reservedFirst`
+
+Defaults to `['v-if', 'v-else-if', 'v-else', 'v-for', 'key', 'ref', 'v-model']`
+
+If given as an array, the array's values will override the default list of reserved props.
+These props will respect the order specified in the array:
+
+```jsx
+// before
+const Before = <App a v-for={i in list} v-if={list} b />
+
+// after
+const After = <App v-if={list} v-for={i in list} a b />
+```
+
+### `reservedLast`
+
+Defaults to `['v-text', 'v-html', 'v-slots', 'v-slot']`
+
+This can be an array option. These props must be listed after all other props.
+These will respect the order specified in the array:
+
+```jsx
+// before
+const Before = <App v-slot={{ foo }} onClick={onClick} />
+
+// after
+const After = <App onClick={onClick} v-slot={{ foo }} />
+```

docs/package.json

@@ -8,6 +8,7 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
+    "@vue-jsx-vapor/eslint": "workspace:*",
     "vue": "catalog:",
     "vue-jsx-vapor": "workspace:*"
   },

eslint.config.js

@@ -0,0 +1,27 @@
+import { sxzz } from '@sxzz/eslint-config'
+import vueJsxVapor from './packages/eslint/src/index'
+
+export default [
+  ...(await sxzz()
+    .removeRules(
+      'unicorn/filename-case',
+      'import/no-default-export',
+      'unicorn/no-new-array',
+    )
+    .append([
+      {
+        name: 'docs',
+        files: ['**/*.md/*.tsx'],
+        rules: {
+          'no-var': 'off',
+          'no-mutable-exports': 'off',
+          'no-duplicate-imports': 'off',
+          'import/first': 'off',
+          'unused-imports/no-unused-vars': 'off',
+        },
+      },
+    ])),
+  vueJsxVapor({
+    ignores: ['**/docs/**'],
+  }),
+]

eslint.config.ts

@@ -31,7 +31,7 @@
     "lint": "eslint .",
     "play": "npm -C playground run dev",
     "test": "vitest",
-    "release": "pnpm lint && bumpp -r --all -x 'pnpm run changelog'",
+    "release": "bumpp -r --all -x 'pnpm run changelog'",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "docs:dev": "pnpm run -C ./docs dev",
     "docs:preview": "pnpm run -C ./docs preview",

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@vue-jsx-vapor/eslint",
+  "version": "2.2.0",
+  "packageManager": "pnpm@10.4.1",
+  "description": "Vue JSX Vapor ESLint Plugin",
+  "type": "module",
+  "keywords": [
+    "vue",
+    "jsx",
+    "vapor",
+    "eslint"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/vuejs/vue-jsx-vapor#readme",
+  "bugs": {
+    "url": "https://github.com/vuejs/vue-jsx-vapor/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vue-jsx-vapor.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "dev": "./src/index.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "publishConfig": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "DEV=true tsup",
+    "release": "bumpp && npm publish",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@prettier/sync": "^0.5.5"
+  },
+  "devDependencies": {
+    "@typescript-eslint/utils": "^8.29.1",
+    "eslint-vitest-rule-tester": "^2.2.0"
+  }
+}

packages/eslint/package.json

@@ -0,0 +1,38 @@
+import rules, { type Rules } from './rules'
+import type { Linter } from 'eslint'
+
+export const plugins = {
+  'vue-jsx-vapor': {
+    rules,
+  },
+}
+
+export { rules, type Rules }
+
+export default ({ rules = {}, ...options }: Linter.Config<Rules> = {}) => ({
+  name: 'vue-jsx-vapor',
+  plugins,
+  rules: {
+    'style/jsx-sort-props': 'off',
+    'react/jsx-sort-props': 'off',
+    'vue-jsx-vapor/jsx-sort-props': rules['vue-jsx-vapor/jsx-sort-props'] || [
+      'warn',
+      {
+        callbacksLast: true,
+        shorthandFirst: true,
+        reservedFirst: [
+          'v-if',
+          'v-else-if',
+          'v-else',
+          'v-for',
+          'key',
+          'ref',
+          'v-model',
+        ],
+        reservedLast: ['v-text', 'v-html', 'v-slots', 'v-slot'],
+      },
+    ],
+    'vue-jsx-vapor/define-style': rules['vue-jsx-vapor/define-style'] || 'warn',
+  } satisfies Rules & Record<string, unknown>,
+  ...options,
+})