chore: move to ESLint Flat Config (#3003)

* chore: move to ESLint Flat Config

* fix: add gitignore

.gitignore

@@ -39,3 +39,6 @@ pnpm-debug.log*
 
 # vitest
 /html
+
+# packages/nutui-taro-demo
+/packages/nutui-taro-demo/src/app.config.ts

eslint.config.js

@@ -0,0 +1,7 @@
+import NutUI from '@nutui/eslint-config'
+import gitignore from 'eslint-config-flat-gitignore'
+
+export default [
+  gitignore(),
+  ...NutUI
+]

package.json

@@ -55,8 +55,9 @@
     "test": "vitest",
     "test:ui": "vitest --ui --coverage",
     "test:c": "vitest --coverage",
-    "lint": "eslint ./src ./packages/**/src --ext .vue,.ts,.tsx,.js,.jsx",
+    "lint": "eslint ./src ./packages/**/src",
     "lint:fix": "pnpm lint --fix",
+    "lint:ui": "pnpm eslint-config-inspector",
     "copydocs": "node ./scripts/copymd.cjs",
     "attrs": "node ./scripts/createAttributes.cjs",
     "attrs:taro": "node ./scripts/createAttributes.cjs taro",
@@ -80,6 +81,8 @@
   "devDependencies": {
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
+    "@eslint/config-inspector": "^0.1.0",
+    "@eslint/eslintrc": "^3.0.2",
     "@nutui/eslint-config": "workspace:*",
     "@nutui/prettier-plugin": "workspace:*",
     "@nutui/vite-plugins": "workspace:*",
@@ -94,6 +97,7 @@
     "autoprefixer": "^10.4.19",
     "codesandbox": "^2.2.3",
     "eslint": "^8.57.0",
+    "eslint-config-flat-gitignore": "^0.1.3",
     "fs-extra": "^11.2.0",
     "happy-dom": "^14.3.9",
     "husky": "^9.0.11",
@@ -116,7 +120,7 @@
     "node": "^18.0.0 || >=20.0.0"
   },
   "nano-staged": {
-    "*.{ts,tsx,js,jsx,vue,scss,md}": "prettier --write",
+    "*.{css,scss,md}": "prettier --write",
     "*.{ts,tsx,js,jsx,vue}": "eslint --fix"
   },
   "repository": {

packages/nutui-eslint-config/index.js

@@ -1,46 +1,64 @@
-module.exports = {
-  extends: ['plugin:vue/base', 'eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true
+import pluginJs from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import pluginTs from 'typescript-eslint'
+import stylistic from '@stylistic/eslint-plugin'
+
+import parserVue from 'vue-eslint-parser'
+import parserTs from '@typescript-eslint/parser'
+
+export default [
+  pluginJs.configs.recommended,
+  stylistic.configs.customize({
+    quoteProps: 'as-needed',
+    commaDangle: 'never',
+    braceStyle: '1tbs'
+  }),
+  ...pluginTs.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    rules: {
+      // typescript-eslint
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      // eslint-plugin-vue
+      'vue/v-on-event-hyphenation': [
+        'error',
+        'always',
+        {
+          autofix: true
+        }
+      ],
+      'vue/no-v-html': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/first-attribute-linebreak': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-text-v-html-on-component': 'off',
+      // TODO: will be removed
+      'vue/html-self-closing': 'off',
+      'vue/html-closing-bracket-newline': 'off',
+      'vue/singleline-html-element-content-newline': 'off'
     }
   },
-  plugins: ['vue', '@typescript-eslint'],
-  env: {
-    es6: true,
-    node: true,
-    browser: true,
-    jest: true
-  },
-  globals: {
-    vi: true,
-    NodeJS: true,
-    TaroGeneral: true
-  },
-  rules: {
-    // basic
-    semi: [2, 'never'],
-    // @typescript-eslint
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/ban-types': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': 'error',
-    // eslint-plugin-vue
-    'vue/v-on-event-hyphenation': [
-      'error',
-      'always',
-      {
-        autofix: true
+  {
+    languageOptions: {
+      parser: parserVue,
+      globals: {
+        vi: true,
+        NodeJS: true,
+        TaroGeneral: true
+      },
+      parserOptions: {
+        parser: parserTs,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        }
       }
-    ],
-    'vue/no-v-html': 'off',
-    'vue/first-attribute-linebreak': 'off',
-    'vue/multi-word-component-names': 'off',
-    'vue/no-v-text-v-html-on-component': 'off'
+    }
   }
-}
+]

packages/nutui-eslint-config/package.json

@@ -9,6 +9,7 @@
     "jdf2e"
   ],
   "author": "jdf2e",
+  "type": "module",
   "license": "MIT",
   "main": "index.js",
   "publishConfig": {
@@ -24,11 +25,13 @@
     "url": "https://github.com/jdf2e/nutui/issues"
   },
   "dependencies": {
+    "@stylistic/eslint-plugin": "^1.7.0",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.24.0",
-    "vue-eslint-parser": "^9.4.2"
+    "typescript-eslint": "^7.4.0",
+    "vue-eslint-parser": "^9.4.2",
+    "@eslint/js": "^8.57.0"
   },
   "devDependencies": {
     "eslint": "^8.57.0"

packages/nutui-playground/src/store.ts

@@ -101,6 +101,7 @@ export class NutUIStore extends ReplStore {
     this.state.mainFile = CONTAINER_FILE
     this.setActive(APP_FILE)
   }
+
   serialize() {
     const files = this.getFiles()
     delete files[IMPORTMAP_FILE]
@@ -109,11 +110,12 @@ export class NutUIStore extends ReplStore {
     delete files[INSTALL_FILE.replace('src/', '')]
     return '#' + utoa(JSON.stringify(files))
   }
+
   setNutUIVersion(v: string) {
     style.value = `https://cdn.jsdelivr.net/npm/@nutui/nutui@${v}/dist/style.css`
     const install = new File(INSTALL_FILE, installCode.value, true)
     this.addFile(install)
-    compileFile(this, install).then((errs) => this.state.errors.push(...errs))
+    compileFile(this, install).then(errs => this.state.errors.push(...errs))
     this.setImportMap({
       imports: {
         '@nutui/nutui': `https://cdn.jsdelivr.net/npm/@nutui/nutui@${v}/dist/nutui.js`,

packages/nutui-taro-demo/src/business/pages/address/index.vue

@@ -244,7 +244,7 @@ const showSelected = () => {
 const onChange = (cal: CalBack, tag: string) => {
   const name = (address as any)[cal.next]
   if (name?.length < 1) {
-    ;(showPopup as any)[tag] = false
+    (showPopup as any)[tag] = false
   }
 }
 const close1 = (val: CalResult) => {

packages/nutui-taro-demo/src/business/pages/category/index.vue

@@ -7,13 +7,13 @@
 
     <h2>只显示文字</h2>
     <nut-category :category="data.category" @change="changeText">
-      <nut-category-pane type="text" :category-child="data.categoryChild2" @on-change="onChange"> </nut-category-pane
-    ></nut-category>
+      <nut-category-pane type="text" :category-child="data.categoryChild2" @on-change="onChange"> </nut-category-pane>
+    </nut-category>
 
     <h2>自定义分类</h2>
-    <nut-category
-      ><nut-category-pane type="custom" :custom-category="customCategory" @on-change="changeCustom"> </nut-category-pane
-    ></nut-category>
+    <nut-category>
+      <nut-category-pane type="custom" :custom-category="customCategory" @on-change="changeCustom"> </nut-category-pane>
+    </nut-category>
   </Demo>
 </template>
 

packages/nutui-taro-demo/src/business/pages/comment/index.vue

@@ -79,8 +79,8 @@ const getData = () => {
     method: 'GET',
     url: 'https://storage.360buyimg.com/nutui/3x/comment_data.json',
     success: (res) => {
-      res.data.Comment.info.avatar =
-        'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png'
+      res.data.Comment.info.avatar
+        = 'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png'
       cmt.value = res.data.Comment
     }
   })

packages/nutui-taro-demo/src/business/pages/timeselect/basic.vue

@@ -42,7 +42,7 @@ const onChange = (pannelKey) => {
 }
 
 const onSelect = (item) => {
-  let curTimeIndex = time.value[0]['list'].findIndex((time) => time === item)
+  let curTimeIndex = time.value[0]['list'].findIndex(time => time === item)
   if (curTimeIndex === -1) {
     time.value[0]['list'].push(item)
   } else {

packages/nutui-taro-demo/src/business/pages/timeselect/multiple.vue

@@ -34,7 +34,7 @@ const times = ref([
 
 const onChange = (pannelKey) => {
   key.value = pannelKey
-  const curTime = time.value.find((item) => item.key == pannelKey)
+  const curTime = time.value.find(item => item.key == pannelKey)
   if (!curTime) {
     time.value.push({
       key: pannelKey,
@@ -44,8 +44,8 @@ const onChange = (pannelKey) => {
 }
 
 const onSelect = (item) => {
-  let findIndex = time.value.findIndex((item) => item.key == key.value)
-  let curTimeIndex = time.value[findIndex]['list'].findIndex((time) => time === item)
+  let findIndex = time.value.findIndex(item => item.key == key.value)
+  let curTimeIndex = time.value[findIndex]['list'].findIndex(time => time === item)
   if (curTimeIndex === -1) {
     time.value[findIndex]['list'].push(item)
   } else {

packages/nutui-taro-demo/src/business/pages/timeselect/title.vue

@@ -43,7 +43,7 @@ const onChange = (pannelKey) => {
 }
 
 const onSelect = (item) => {
-  let curTimeIndex = time.value[0]['list'].findIndex((time) => time === item)
+  let curTimeIndex = time.value[0]['list'].findIndex(time => time === item)
   if (curTimeIndex === -1) {
     time.value[0]['list'].push(item)
   } else {

packages/nutui-taro-demo/src/components/header.vue

@@ -19,7 +19,7 @@ import config from '@/packages/../config.json'
 
 const isH5 = Taro.getEnv() === Taro.ENV_TYPE.WEB
 
-//返回demo页
+// 返回demo页
 const navigateTo = () => {
   Taro.navigateBack()
 }

packages/nutui-taro-demo/src/dentry/pages/calendar/multiple.vue

@@ -16,6 +16,6 @@ import { ref } from 'vue'
 const show = ref(false)
 const date = ref([])
 const choose = (param) => {
-  date.value = param.map((item) => item[3])
+  date.value = param.map(item => item[3])
 }
 </script>

packages/nutui-taro-demo/src/dentry/pages/checkbox/methods.vue

@@ -1,9 +1,11 @@
 <template>
   <nut-cell>
     <nut-checkbox-group ref="group" v-model="state.checkboxgroup3" @change="changeBox4">
-      <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">{{
-        item.value
-      }}</nut-checkbox>
+      <nut-checkbox v-for="item in state.checkboxsource" :key="item.label" :label="item.label">
+        {{
+          item.value
+        }}
+      </nut-checkbox>
     </nut-checkbox-group>
   </nut-cell>
   <nut-cell>

packages/nutui-taro-demo/src/dentry/pages/datepicker/filter.vue

@@ -19,7 +19,7 @@ const confirm = ({ selectedValue }) => {
 }
 const filter = (type, options) => {
   if (type === 'hour') {
-    return options.filter((option) => Number(option.value) % 6 === 0)
+    return options.filter(option => Number(option.value) % 6 === 0)
   }
   return options
 }

packages/nutui-taro-demo/src/dentry/pages/input/format.vue

@@ -6,5 +6,5 @@
 import { ref } from 'vue'
 const val1 = ref('')
 const val2 = ref('')
-const formatter = (value) => value.replace(/\d/g, '')
+const formatter = value => value.replace(/\d/g, '')
 </script>

packages/nutui-taro-demo/src/dentry/pages/uploader/index.vue

@@ -23,7 +23,7 @@
       :status="progressPercentage == 100 ? '' : 'active'"
     >
     </nut-progress>
-    <!-- 
+    <!--
       album 从相册选图
       camera 使用相机
       environment 使用后置摄像头(仅H5纯浏览器)
@@ -123,7 +123,7 @@ const clearUpload = () => {
 }
 
 const beforeXhrUpload = (taroUploadFile: any, options: any) => {
-  //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
+  // taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
   const uploadTask = taroUploadFile({
     url: options.url,
     filePath: options.taroFilePath,
@@ -134,7 +134,7 @@ const beforeXhrUpload = (taroUploadFile: any, options: any) => {
     }, //
     formData: options.formData,
     name: options.name,
-    success(response: { errMsg: any; statusCode: number; data: string }) {
+    success(response: { errMsg: any, statusCode: number, data: string }) {
       if (options.xhrState == response.statusCode) {
         options.onSuccess?.(response, options)
       } else {
@@ -146,7 +146,7 @@ const beforeXhrUpload = (taroUploadFile: any, options: any) => {
     }
   })
   options.onStart?.(options)
-  uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
+  uploadTask.progress((res: { progress: any, totalBytesSent: any, totalBytesExpectedToSend: any }) => {
     options.onProgress?.(res, options)
     // console.log('上传进度', res.progress);
     // console.log('已经上传的数据长度', res.totalBytesSent);