feat: add eslint plugin @stylistic/eslint-plugin

.eslintignore

@@ -1,4 +1,7 @@
 # Common
 node_modules
 dist
-# Examples
+# No rules to lint
+**/*.md
+**/*.json
+**/*.yaml

.eslintrc.js

@@ -1,52 +1,72 @@
+const stylistic = require('@stylistic/eslint-plugin')
+
+const customized = stylistic.configs.customize({
+  // the following options are the default values
+  indent: 2,
+  quotes: 'single',
+  semi: false,
+})
+
 module.exports = {
-    parser: 'vue-eslint-parser',
-    parserOptions: {
-      parser: '@typescript-eslint/parser',
-      sourceType: 'module',
-    },
-    env: {
-      browser: true,
-      node: true,
-    },
-    plugins: ['@typescript-eslint'],
-    extends: [
-      'plugin:@typescript-eslint/recommended',
-      'plugin:vue/vue3-recommended',
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  plugins: [
+    '@typescript-eslint',
+    '@stylistic',
+  ],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+  ],
+  rules: {
+    ...customized.rules,
+    // js/ts
+    'eol-last': 'error',
+    'no-trailing-spaces': 'error',
+    'comma-style': ['error', 'last'],
+    'comma-dangle': ['error', 'always-multiline'],
+    'no-multi-spaces': 'error',
+    'quotes': [
+      'error',
+      'single',
+      { avoidEscape: true, allowTemplateLiterals: true },
     ],
-    rules: {
-      // js/ts
-      'eol-last': 'error',
-      'no-trailing-spaces': 'error',
-      'comma-style': ['error', 'last'],
-      'comma-dangle': ['error', 'always-multiline'],
-      'no-multi-spaces': 'error',
-      quotes: [
-        'error',
-        'single',
-        { avoidEscape: true, allowTemplateLiterals: true },
-      ],
-      camelcase: ['error', { properties: 'never' }],
-      'object-curly-spacing': ['error', 'always'],
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-var-requires': 'off',
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
-        {
-          'args': 'all',
-          'argsIgnorePattern': '^_',
-          'caughtErrors': 'all',
-          'caughtErrorsIgnorePattern': '^_',
-          'destructuredArrayIgnorePattern': '^_',
-          'varsIgnorePattern': '^_',
-          'ignoreRestSiblings': true,
-        },
-      ],
-      '@typescript-eslint/no-this-alias': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
+    'camelcase': ['error', { properties: 'never' }],
+    'object-curly-spacing': ['error', 'always'],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+  },
+  overrides: [
+    {
+      files: ['packages/docs/**/*.vue'],
+      rules: {
+        'vue/multi-word-component-names': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+      },
     },
-  }
-
-
+  ],
 
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "npm.packageManager": "pnpm",
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true,
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "eslint.enable": true,
+  "eslint.runtime": "node",
+  "eslint.format.enable": true,
+  "eslint.useFlatConfig": false,
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "vue",
+  ]
+}

jest.config.js

@@ -5,4 +5,4 @@ module.exports = {
     '^.+\\.vue$': 'vue-jest',
   },
   moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
-};
+}

package.json

@@ -26,17 +26,19 @@
     "dev": "pnpm -F fluent-editor-docs dev",
     "build": "pnpm -F fluent-editor-docs build",
     "build:lib": "pnpm -F @opentiny/fluent-editor build",
-    "lint": "eslint . --cache",
-    "lint:fix": "eslint . --fix",
+    "lint": "eslint \"packages/**/*.{js,ts,vue}\" --cache",
+    "lint:fix": "eslint \"packages/**/*.{js,ts,vue}\" --fix",
     "install:browser": "pnpm -F fluent-editor-docs install:browser",
     "test": "pnpm -F fluent-editor-docs test",
     "report": "pnpm -F fluent-editor-docs report"
   },
   "devDependencies": {
-    "eslint-plugin-vue": "^9.27.0",
+    "@types/node": "^15.0.2",
+    "@stylistic/eslint-plugin": "^2.7.2",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
-    "eslint": "^8.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
     "lint-staged": "^12.1.4"
   },
   "gitHooks": {

packages/docs/fluent-editor/.vitepress/theme/index.ts

@@ -1,13 +1,15 @@
-import Theme from 'vitepress/theme'
+import type { Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme'
 import DemoPreview, { useComponents } from '@vitepress-code-preview/container'
 import '@vitepress-code-preview/container/dist/style.css'
 import './style.css'
 import { insertBaiduScript } from './insert-baidu-script'
 
-export default {
-  ...Theme,
+export const define = <T>(value: T): T => value;
+export default define<Theme>({
+  ...DefaultTheme,
   enhanceApp({ app }) {
     useComponents(app, DemoPreview)
     insertBaiduScript()
   }
-}
+});

packages/docs/fluent-editor/demos/basic-usage.spec.ts

@@ -1,13 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test('has toolbar', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull());
-  await page.goto('http://localhost:5173/fluent-editor/docs/basic-usage');
+  page.on('pageerror', exception => expect(exception).toBeNull())
+  await page.goto('http://localhost:5173/fluent-editor/docs/basic-usage')
 
-  const toolbar = page.locator('.ql-toolbar');
-  const editor = page.locator('.ql-editor');
+  const toolbar = page.locator('.ql-toolbar')
+  const editor = page.locator('.ql-editor')
 
-  await expect(toolbar).toBeVisible();
+  await expect(toolbar).toBeVisible()
   await expect(await editor.innerHTML()).toEqual(
     [
       '<p>',
@@ -16,5 +16,5 @@ test('has toolbar', async ({ page }) => {
       '!',
       `</p>`,
     ].join(''),
-  );
-});
+  )
+})

packages/docs/fluent-editor/demos/basic-usage.vue

@@ -10,7 +10,7 @@ onMounted(() => {
     const FluentEditor = module.default
 
     editor = new FluentEditor('#editor', {
-      theme: 'snow'
+      theme: 'snow',
     })
   })
 })

packages/docs/fluent-editor/demos/code-block-highlight.vue

@@ -9,7 +9,7 @@ const TOOLBAR_CONFIG = [
   ['bold', 'italic', 'underline', 'link'],
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['clean'],
-  ['code-block']
+  ['code-block'],
 ]
 
 onMounted(() => {
@@ -21,13 +21,13 @@ onMounted(() => {
       theme: 'snow',
       modules: {
         toolbar: TOOLBAR_CONFIG,
-        syntax: true
-      }
+        syntax: true,
+      },
     })
   })
 })
 </script>
 
 <template>
-  <div id="editor"></div>
+  <div id="editor" />
 </template>

packages/docs/fluent-editor/demos/custom-toolbar.vue

@@ -6,7 +6,7 @@ let editor
 
 const TOOLBAR_CONFIG = [
   ['undo', 'redo', 'clean'],
-  [{ header: [1, 2, 3, 4, 5, 6, false] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px']}],
+  [{ header: [1, 2, 3, 4, 5, 6, false] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }],
   ['bold', 'italic', 'strike', 'underline'],
   [{ color: [] }, { background: [] }],
   [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
@@ -21,13 +21,13 @@ onMounted(() => {
     editor = new FluentEditor('#editor', {
       theme: 'snow',
       modules: {
-        toolbar: TOOLBAR_CONFIG
-      }
+        toolbar: TOOLBAR_CONFIG,
+      },
     })
   })
 })
 </script>
 
 <template>
-  <div id="editor"></div>
+  <div id="editor" />
 </template>

packages/docs/fluent-editor/demos/emoji.vue

@@ -9,7 +9,7 @@ const TOOLBAR_CONFIG = [
   ['bold', 'italic', 'underline', 'link'],
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['clean'],
-  ['emoji']
+  ['emoji'],
 ]
 
 onMounted(() => {
@@ -20,14 +20,14 @@ onMounted(() => {
     editor = new FluentEditor('#editor', {
       theme: 'snow',
       modules: {
-        toolbar: TOOLBAR_CONFIG,
-        'emoji-toolbar': true
-      }
+        'toolbar': TOOLBAR_CONFIG,
+        'emoji-toolbar': true,
+      },
     })
   })
 })
 </script>
 
 <template>
-  <div id="editor"></div>
+  <div id="editor" />
 </template>

packages/docs/fluent-editor/demos/file-upload.vue

@@ -9,7 +9,7 @@ const TOOLBAR_CONFIG = [
   ['bold', 'italic', 'underline', 'link'],
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['clean'],
-  ['file']
+  ['file'],
 ]
 
 onMounted(() => {
@@ -21,13 +21,13 @@ onMounted(() => {
       theme: 'snow',
       modules: {
         toolbar: TOOLBAR_CONFIG,
-        file: true
-      }
+        file: true,
+      },
     })
   })
 })
 </script>
 
 <template>
-  <div id="editor"></div>
+  <div id="editor" />
 </template>

packages/docs/fluent-editor/demos/image-upload.vue

@@ -9,7 +9,7 @@ const TOOLBAR_CONFIG = [
   ['bold', 'italic', 'underline', 'link'],
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['clean'],
-  ['image']
+  ['image'],
 ]
 
 onMounted(() => {
@@ -20,14 +20,14 @@ onMounted(() => {
     editor = new FluentEditor('#editor', {
       theme: 'snow',
       modules: {
-        toolbar: TOOLBAR_CONFIG
-      }
+        toolbar: TOOLBAR_CONFIG,
+      },
     })
   })
 })
 
 </script>
 
 <template>
-  <div id="editor"></div>
+  <div id="editor" />
 </template>