chore: 🤖 improve eslint rules

.eslintrc.js

@@ -1,24 +1,39 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
 module.exports = {
-  extends: ['@antfu/eslint-config-ts', 'plugin:react-hooks/recommended'],
-  plugins: ['header', 'eslint-plugin-tsdoc'],
-  rules: {
-    'tsdoc/syntax': 'warn',
-    'yml/no-empty-mapping-value': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/consistent-type-definitions': 'off',
-  },
+  extends: [
+    '@antfu',
+  ],
+  plugins: ['header'],
   settings: {
     react: {
       version: 'detect',
     },
   },
+  ignorePatterns: [
+    'lib',
+    'snapshots.js',
+    'docs',
+  ],
+  rules: {
+    'yml/no-empty-mapping-value': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+  },
   overrides: [
     {
-      files: ['**/vue/**/*.tsx'],
+      files: ['**/react/**/*.tsx', '**/react/**/*.ts'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+      ],
       rules: {
-        'react-hooks/rules-of-hooks': 'off',
+        'jsx-quotes': [
+          'error',
+          'prefer-double',
+        ],
+        'react/react-in-jsx-scope': 'off',
+        'react/prop-types': 'off',
       },
     },
     {
@@ -30,11 +45,7 @@ module.exports = {
     {
       files: ['**/*.ts', '**/*.tsx', '**/*.js'],
       rules: {
-        'header/header': [
-          'error',
-          'block',
-          ' Copyright 2021, Milkdown by Mirone. ',
-        ],
+        'header/header': ['error', 'block', ' Copyright 2021, Milkdown by Mirone. '],
       },
     },
   ],

examples/vue/App.vue

@@ -1,14 +1,14 @@
-<template>
-    <Milkdown />
-</template>
-
 <script lang="ts">
-import { defineComponent } from 'vue';
-import Milkdown from './Milkdown.vue';
+import { defineComponent } from 'vue'
+import Milkdown from './Milkdown.vue'
 export default defineComponent({
-    name: 'App',
-    components: {
-        Milkdown,
-    },
-});
+  name: 'App',
+  components: {
+    Milkdown,
+  },
+})
 </script>
+
+<template>
+  <Milkdown />
+</template>

examples/vue/CodeFence/CodeFence.vue

@@ -1,108 +1,109 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { languageListSlice } from './CodeFence';
-import { useNodeCtx } from '@milkdown/vue';
-import { Node } from '@milkdown/prose/model';
+import { defineComponent } from 'vue'
+import { useNodeCtx } from '@milkdown/vue'
+import type { Node } from '@milkdown/prose/model'
+import { languageListSlice } from './CodeFence'
 
 export default defineComponent({
-    name: 'CodeFence',
-});
+  name: 'CodeFence',
+})
 </script>
 
 <script setup lang="ts">
-const metadata = useNodeCtx<Node>();
-const attrs = metadata.node.value.attrs;
-const languages = metadata.ctx.get(languageListSlice) ?? [];
+const metadata = useNodeCtx<Node>()
+const attrs = metadata.node.value.attrs
+const languages = metadata.ctx.get(languageListSlice) ?? []
 
-const filename = attrs['filename'] ?? '';
-const lang = attrs['language'] ?? '';
+const filename = attrs.filename ?? ''
+const lang = attrs.language ?? ''
 
-const showInput = attrs['showInput'] ?? false;
+const showInput = attrs.showInput ?? false
 
 const onChange = (e: Event) => {
-    const view = metadata.view;
-    const node = metadata.node;
-    const getPos = metadata.getPos;
-    const { target } = e;
-    if (!(target instanceof HTMLSelectElement)) {
-        return;
-    }
-    const { value } = target;
-    if (!view.editable) {
-        target.value = node.value.attrs['language'];
-        return;
-    }
-    const { tr } = view.state;
-    view.dispatch(
-        tr.setNodeMarkup(getPos(), undefined, {
-            ...node.value.attrs,
-            language: value,
-        }),
-    );
-};
+  const view = metadata.view
+  const node = metadata.node
+  const getPos = metadata.getPos
+  const { target } = e
+  if (!(target instanceof HTMLSelectElement))
+    return
+
+  const { value } = target
+  if (!view.editable) {
+    target.value = node.value.attrs.language
+    return
+  }
+  const { tr } = view.state
+  view.dispatch(
+    tr.setNodeMarkup(getPos(), undefined, {
+      ...node.value.attrs,
+      language: value,
+    }),
+  )
+}
 
 const toggleInput = () => {
-    const view = metadata.view;
-    const node = metadata.node;
-    const getPos = metadata.getPos;
-    if (!view.editable) {
-        return;
-    }
-    const show = node.value.attrs['showInput'];
-    const { tr } = view.state;
-    view.dispatch(
-        tr.setNodeMarkup(getPos(), undefined, {
-            ...node.value.attrs,
-            showInput: !show,
-        }),
-    );
-};
+  const view = metadata.view
+  const node = metadata.node
+  const getPos = metadata.getPos
+  if (!view.editable)
+    return
+
+  const show = node.value.attrs.showInput
+  const { tr } = view.state
+  view.dispatch(
+    tr.setNodeMarkup(getPos(), undefined, {
+      ...node.value.attrs,
+      showInput: !show,
+    }),
+  )
+}
 
 const onKeydown = (e: KeyboardEvent) => {
-    e.stopPropagation();
-};
+  e.stopPropagation()
+}
 
 const onFilenameChange = (e: Event) => {
-    const view = metadata.view;
-    const node = metadata.node;
-    const getPos = metadata.getPos;
-
-    const { target } = e;
-    if (!(target instanceof HTMLInputElement)) return;
-    if (!view.editable) {
-        return;
-    }
-    const { value } = target;
-
-    const { tr } = view.state;
-    view.dispatch(
-        tr.setNodeMarkup(getPos(), undefined, {
-            ...node.value.attrs,
-            filename: value,
-            showInput: false,
-        }),
-    );
-};
+  const view = metadata.view
+  const node = metadata.node
+  const getPos = metadata.getPos
+
+  const { target } = e
+  if (!(target instanceof HTMLInputElement))
+    return
+  if (!view.editable)
+    return
+
+  const { value } = target
+
+  const { tr } = view.state
+  view.dispatch(
+    tr.setNodeMarkup(getPos(), undefined, {
+      ...node.value.attrs,
+      filename: value,
+      showInput: false,
+    }),
+  )
+}
 </script>
 
 <template>
-    <div class="code-fence">
-        <div class="control">
-            <span class="filename">
-                {{ filename || 'No File Name' }}
-                <input v-if="showInput" @keydown="onKeydown" @change="onFilenameChange" />
-                <button v-else @click="toggleInput">edit</button>
-            </span>
-            <select @change="onChange">
-                <option v-for="language in languages" :selected="language === lang" :value="language">
-                    {{ language }}
-                </option>
-            </select>
-        </div>
-        <div class="code">
-            <slot />
-        </div>
+  <div class="code-fence">
+    <div class="control">
+      <span class="filename">
+        {{ filename || 'No File Name' }}
+        <input v-if="showInput" @keydown="onKeydown" @change="onFilenameChange">
+        <button v-else @click="toggleInput">edit</button>
+      </span>
+      <select @change="onChange">
+        <option v-for="language in languages" :key="language" :selected="language === lang" :value="language">
+          {{ language }}
+        </option>
+      </select>
+    </div>
+    <div class="code">
+      <slot />
     </div>
+  </div>
 </template>
 
 <style scoped>