@polyv/eslint-config 0.8.0 → 1.0.0

package/rules/no-vue-component-variable-name-conflict/README.md

@@ -0,0 +1,85 @@
+# no-vue-component-variable-name-conflict
+
+`polyv/no-vue-component-variable-name-conflict` 用于禁止 Vue `<script setup>` 中的组件导入名和 lower camel 本地声明产生命名冲突。
+
+## 适用场景
+
+在 `<script setup>` 中，Vue 组件导入名通常会在模板里自动暴露。例如 `MemberType` 会对应模板里的 `<member-type>`。
+
+如果同一个 `<script setup>` 又声明了 `memberType` 变量、函数或类，模板和 ESLint 的变量使用标记容易把 `<member-type>` 关联到 `memberType`，从而导致真正的组件导入 `MemberType` 被判断为未使用。
+
+## 使用方式
+
+如果已经组合 `polyv.configs.common`，`polyv` plugin 会自动注册：
+
+```javascript
+// eslint.config.mjs
+import polyv from '@polyv/eslint-config';
+
+export default [
+  ...polyv.configs.common,
+  {
+    rules: {
+      'polyv/no-vue-component-variable-name-conflict': 'error'
+    }
+  }
+];
+```
+
+Vue2 项目通常直接组合 `polyv.configs.vue2`，该配置会默认启用本规则：
+
+```javascript
+// eslint.config.mjs
+import polyv from '@polyv/eslint-config';
+
+export default [
+  ...polyv.configs.common,
+  ...polyv.configs.ts,
+  ...polyv.configs.vue2
+];
+```
+
+## 错误示例
+
+```vue
+<!-- bad.vue -->
+<template>
+  <member-type v-model="memberType" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import MemberType from './components/member-type.vue';
+
+const memberType = ref('online');
+</script>
+```
+
+## 正确示例
+
+```vue
+<!-- good.vue -->
+<template>
+  <member-type v-model="currentMemberType" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import MemberType from './components/member-type.vue';
+
+const currentMemberType = ref('online');
+</script>
+```
+
+## 检查范围
+
+该规则只检查 `.vue` 文件中的 `<script setup>`：
+
+- 收集模板里的 kebab-case 标签，例如 `<member-type>`。
+- 收集 `<script setup>` 中 PascalCase 组件导入，例如 `MemberType`。
+- 把组件名转换为 kebab-case 标签名和 lower camel 变量名，例如 `MemberType` 对应 `<member-type>` 和 `memberType`。
+- 检查 `<script setup>` 中同名 lower camel 的变量、函数或类声明。
+
+## 自动修复
+
+该规则不提供自动修复。变量改名会影响业务语义和引用范围，应由开发者按提示手动调整为更明确的名称，例如 `currentMemberType`。

package/rules/no-vue-component-variable-name-conflict/index.mjs

@@ -0,0 +1,262 @@
+function getFilename(context) {
+  return context.filename || context.getFilename?.();
+}
+
+function isVueFile(context) {
+  return getFilename(context)?.endsWith('.vue') === true;
+}
+
+function getSourceCode(context) {
+  return context.sourceCode || context.getSourceCode();
+}
+
+function getParserServices(context) {
+  return getSourceCode(context).parserServices || context.parserServices;
+}
+
+function getAttributeName(attribute) {
+  return attribute?.key?.name ?? null;
+}
+
+function isScriptSetupElement(node) {
+  return (
+    node.type === 'VElement' &&
+    node.name === 'script' &&
+    node.startTag?.attributes?.some((attribute) => getAttributeName(attribute) === 'setup')
+  );
+}
+
+function getScriptSetupRanges(context) {
+  const services = getParserServices(context);
+  const fragment = services?.getDocumentFragment?.();
+
+  if (!fragment?.children) {
+    return [];
+  }
+
+  return fragment.children
+    .filter(isScriptSetupElement)
+    .map((node) => [
+      node.startTag.range[1],
+      node.endTag?.range?.[0] ?? node.range[1]
+    ]);
+}
+
+function isInRanges(node, ranges) {
+  if (!node?.range) {
+    return false;
+  }
+
+  return ranges.some(([start, end]) => node.range[0] >= start && node.range[1] <= end);
+}
+
+function isKebabCaseTagName(tagName) {
+  return /^[a-z][a-z0-9]*(?:-[a-z0-9]+)+$/.test(tagName);
+}
+
+function isComponentLocalName(name) {
+  return /^[A-Z]/.test(name);
+}
+
+function toKebabCase(name) {
+  return name
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/_/g, '-')
+    .toLowerCase();
+}
+
+function toLowerCamelCase(name) {
+  return name.charAt(0).toLowerCase() + name.slice(1);
+}
+
+function toSuggestName(componentName) {
+  return `current${componentName}`;
+}
+
+function getImportLocalNames(node) {
+  return node.specifiers
+    .map((specifier) => specifier.local?.name)
+    .filter((name) => typeof name === 'string' && isComponentLocalName(name));
+}
+
+function addLocalDeclaration(localDeclarations, name, node) {
+  if (!name || localDeclarations.has(name)) {
+    return;
+  }
+
+  localDeclarations.set(name, node);
+}
+
+function collectPatternIdentifiers(pattern, identifiers) {
+  if (!pattern) {
+    return;
+  }
+
+  if (pattern.type === 'Identifier') {
+    identifiers.push(pattern);
+    return;
+  }
+
+  if (pattern.type === 'RestElement') {
+    collectPatternIdentifiers(pattern.argument, identifiers);
+    return;
+  }
+
+  if (pattern.type === 'AssignmentPattern') {
+    collectPatternIdentifiers(pattern.left, identifiers);
+    return;
+  }
+
+  if (pattern.type === 'ArrayPattern') {
+    pattern.elements.forEach((element) => collectPatternIdentifiers(element, identifiers));
+    return;
+  }
+
+  if (pattern.type === 'ObjectPattern') {
+    pattern.properties.forEach((property) => {
+      if (property.type === 'Property') {
+        collectPatternIdentifiers(property.value, identifiers);
+        return;
+      }
+
+      collectPatternIdentifiers(property.argument, identifiers);
+    });
+  }
+}
+
+function getDeclarationIdentifierNodes(node) {
+  if (
+    (node.type === 'FunctionDeclaration' || node.type === 'ClassDeclaration') &&
+    node.id?.type === 'Identifier'
+  ) {
+    return [node.id];
+  }
+
+  if (node.type !== 'VariableDeclarator') {
+    return [];
+  }
+
+  const identifiers = [];
+  collectPatternIdentifiers(node.id, identifiers);
+  return identifiers;
+}
+
+function isRootTemplateElement(node) {
+  return (node.rawName || node.name) === 'template' && node.parent?.type === 'VDocumentFragment';
+}
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '禁止 Vue script setup 中的组件导入名和 lower camel 本地声明产生命名冲突'
+    },
+    schema: [],
+    messages: {
+      componentVariableNameConflict:
+        '变量 "{{variableName}}" 与组件 "{{componentName}}" 的模板标签 "<{{tagName}}>" 命名冲突，可能导致模板把该标签识别为变量而不是组件。请将变量改成更明确的名称，例如 "{{suggestName}}"。'
+    }
+  },
+  create(context) {
+    if (!isVueFile(context)) {
+      return {};
+    }
+
+    const services = getParserServices(context);
+    if (!services?.defineTemplateBodyVisitor) {
+      return {};
+    }
+
+    const scriptSetupRanges = getScriptSetupRanges(context);
+    if (scriptSetupRanges.length === 0) {
+      return {};
+    }
+
+    const templateTags = new Set();
+    const componentImports = new Map();
+    const localDeclarations = new Map();
+    let hasReported = false;
+
+    function reportConflicts() {
+      if (hasReported) {
+        return;
+      }
+
+      hasReported = true;
+
+      componentImports.forEach((component) => {
+        const localDeclaration = localDeclarations.get(component.variableName);
+        if (!templateTags.has(component.tagName) || !localDeclaration) {
+          return;
+        }
+
+        context.report({
+          node: localDeclaration,
+          messageId: 'componentVariableNameConflict',
+          data: component
+        });
+      });
+    }
+
+    return services.defineTemplateBodyVisitor(
+      {
+        VElement(node) {
+          const tagName = node.rawName || node.name;
+          if (typeof tagName === 'string' && isKebabCaseTagName(tagName)) {
+            templateTags.add(tagName);
+          }
+        },
+        'VElement:exit'(node) {
+          if (isRootTemplateElement(node)) {
+            reportConflicts();
+          }
+        }
+      },
+      {
+        ImportDeclaration(node) {
+          if (!isInRanges(node, scriptSetupRanges)) {
+            return;
+          }
+
+          getImportLocalNames(node).forEach((componentName) => {
+            const tagName = toKebabCase(componentName);
+            componentImports.set(componentName, {
+              componentName,
+              tagName,
+              variableName: toLowerCamelCase(componentName),
+              suggestName: toSuggestName(componentName)
+            });
+          });
+        },
+        VariableDeclarator(node) {
+          if (!isInRanges(node, scriptSetupRanges)) {
+            return;
+          }
+
+          getDeclarationIdentifierNodes(node).forEach((identifier) => {
+            addLocalDeclaration(localDeclarations, identifier.name, identifier);
+          });
+        },
+        FunctionDeclaration(node) {
+          if (!isInRanges(node, scriptSetupRanges)) {
+            return;
+          }
+
+          getDeclarationIdentifierNodes(node).forEach((identifier) => {
+            addLocalDeclaration(localDeclarations, identifier.name, identifier);
+          });
+        },
+        ClassDeclaration(node) {
+          if (!isInRanges(node, scriptSetupRanges)) {
+            return;
+          }
+
+          getDeclarationIdentifierNodes(node).forEach((identifier) => {
+            addLocalDeclaration(localDeclarations, identifier.name, identifier);
+          });
+        }
+      }
+    );
+  }
+};

package/utils.mjs

@@ -0,0 +1,3 @@
+export const devWarnProdError = process.env.NODE_ENV === 'production'
+  ? 'error'
+  : 'warn';

package/.editorconfig

@@ -1,5 +0,0 @@
-[*.{js,jsx,ts,tsx,mjs,vue,css,scss,html,json,md,txt}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintrc.js

@@ -1,3 +0,0 @@
-const config = require('./lib/for-js');
-config.env.node = true;
-module.exports = config;

package/.gitattributes

@@ -1,12 +0,0 @@
-*.js eol=lf
-*.jsx eol=lf
-*.ts eol=lf
-*.tsx eol=lf
-*.mjs eol=lf
-*.vue eol=lf
-*.css eol=lf
-*.scss eol=lf
-*.html eol=lf
-*.json eol=lf
-*.txt eol=lf
-*.md eol=lf

package/.nvmrc

@@ -1 +0,0 @@
-20

package/lib/for-js.js

@@ -1,84 +0,0 @@
-/**
- * JavaScript 验证规则（基础规则）。
- */
-
-const {
-  devWarnProdError,
-  strictErrorOtherwiseWarn
-} = require('./util');
-
-module.exports = {
-  parser: '@babel/eslint-parser',
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    requireConfigFile: false
-  },
-  env: {
-    browser: true,
-    es6: true
-  },
-  plugins: [
-    'promise'
-  ],
-  extends: [
-    'eslint:recommended',
-    'standard',
-    'plugin:import/recommended',
-    'plugin:sonarjs/recommended'
-  ],
-  rules: {
-    semi: ['error', 'always'],
-    'space-before-function-paren': ['error', {
-      anonymous: 'never',
-      named: 'never',
-      asyncArrow: 'always'
-    }],
-    'operator-linebreak': ['error', 'after', {
-      overrides: {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'comma-dangle': ['error', 'only-multiline'],
-    'no-trailing-spaces': ['error', { ignoreComments: true }],
-    'no-multiple-empty-lines': ['error', { max: 2 }],
-    'wrap-iife': ['error', 'inside'],
-    'no-confusing-arrow': 'error',
-    'padded-blocks': 'off',
-
-    camelcase: 'error',
-    'no-debugger': devWarnProdError,
-    'no-unused-vars': [devWarnProdError, {
-      vars: 'all',
-      args: 'after-used',
-      ignoreRestSiblings: true,
-      caughtErrors: 'none'
-    }],
-    'no-use-before-define': ['error', {
-      functions: false,
-      classes: false,
-      variables: true
-    }],
-    'no-loop-func': 'error',
-    'no-script-url': 'error',
-    'no-new': 'off',
-    'no-constant-condition': devWarnProdError,
-    'no-empty': [devWarnProdError, { allowEmptyCatch: true }],
-    'no-lonely-if': 'off',
-    'no-var': 'error',
-    'no-template-curly-in-string': 'off',
-    'prefer-promise-reject-errors': 'error',
-
-    'import/no-unresolved': 'off',
-    'import/no-duplicates': 'error',
-
-    'promise/prefer-await-to-then': 'warn',
-
-    'sonarjs/cognitive-complexity': ['error', 20],
-    'sonarjs/no-duplicate-string': [devWarnProdError, { threshold: 5 }],
-    'sonarjs/prefer-single-boolean-return': 'off',
-    'sonarjs/no-collection-size-mischeck': 'off',
-    'sonarjs/no-nested-template-literals': strictErrorOtherwiseWarn
-  }
-};

package/lib/for-ts.js

@@ -1,88 +0,0 @@
-/**
- * TypeScript 工程的附加验证规则。
- */
-
-const {
-  devWarnProdError,
-  strictErrorOtherwiseWarn
-} = require('./util');
-
-module.exports = {
-  overrides: [{
-    files: ['*.ts', '*.tsx'],
-    extends: [
-      'plugin:@typescript-eslint/recommended',
-      'plugin:import/typescript'
-    ],
-    rules: {
-      semi: 'off',
-      '@typescript-eslint/semi': ['error', 'always'],
-
-      indent: 'off',
-      '@typescript-eslint/indent': ['error', 2, {
-        SwitchCase: 1
-      }],
-
-      'comma-spacing': 'off',
-      '@typescript-eslint/comma-spacing': ['error'],
-
-      'comma-dangle': 'off',
-      '@typescript-eslint/comma-dangle': ['error', 'only-multiline'],
-
-      'no-use-before-define': 'off',
-      '@typescript-eslint/no-use-before-define': ['error', {
-        functions: false,
-        classes: false,
-        variables: true
-      }],
-
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': [devWarnProdError, {
-        vars: 'all',
-        args: 'after-used',
-        ignoreRestSiblings: true,
-        caughtErrors: 'none'
-      }],
-
-      'no-loop-func': 'off',
-      '@typescript-eslint/no-loop-func': 'error',
-
-      'space-before-function-paren': 'off',
-      '@typescript-eslint/space-before-function-paren': ['error', {
-        anonymous: 'never',
-        named: 'never',
-        asyncArrow: 'always'
-      }],
-
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/no-empty-interface': 'off',
-      '@typescript-eslint/type-annotation-spacing': ['error', {
-        after: true,
-        before: false,
-        overrides: {
-          arrow: {
-            before: true,
-            after: true
-          }
-        }
-      }],
-      '@typescript-eslint/explicit-module-boundary-types': devWarnProdError,
-      '@typescript-eslint/naming-convention': [strictErrorOtherwiseWarn, {
-        selector: 'enumMember',
-        format: ['PascalCase']
-      }, {
-        selector: 'enum',
-        format: ['PascalCase']
-      }],
-      '@typescript-eslint/no-var-requires': 'off',
-      '@typescript-eslint/no-for-in-array': 'error'
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
-      }
-    }
-  }]
-};

package/lib/for-vue2-js.js

@@ -1,45 +0,0 @@
-/**
- * Vue.js 工程的验证规则。
- */
-
-const { strictErrorOtherwiseWarn } = require('./util');
-const jsConfig = require('./for-js');
-
-module.exports = Object.assign({}, jsConfig, {
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    ...jsConfig.parserOptions
-  },
-  extends: [
-    ...jsConfig.extends,
-    '@vue/standard',
-    'plugin:vue/essential'
-  ],
-  rules: {
-    ...jsConfig.rules,
-    'vue/html-indent': ['error', 2],
-    'vue/html-self-closing': ['error', {
-      html: {
-        void: 'always',
-        normal: 'never',
-        component: 'always'
-      },
-      svg: 'always',
-      math: 'always'
-    }],
-    'vue/no-v-html': 'off',
-    'vue/max-attributes-per-line': ['error', {
-      singleline: 3,
-      multiline: 1
-    }],
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/custom-event-name-casing': [strictErrorOtherwiseWarn, 'kebab-case'],
-    'vue/no-mutating-props': strictErrorOtherwiseWarn,
-    'vue/multi-word-component-names': [strictErrorOtherwiseWarn, {
-      ignores: ['index', 'Index', 'default', 'Default']
-    }],
-    'vue/attribute-hyphenation': [strictErrorOtherwiseWarn, 'always'],
-    'vue/v-on-event-hyphenation': [strictErrorOtherwiseWarn, 'always']
-  }
-});

package/lib/util.js

@@ -1,7 +0,0 @@
-exports.devWarnProdError = process.env.NODE_ENV === 'production'
-  ? 'error'
-  : 'warn';
-
-exports.strictErrorOtherwiseWarn = process.env.STRICT_LINT !== 'false'
-  ? 'error'
-  : 'warn';