extract-vue-options

要开发一个 ESLint 自定义规则，用于处理 Vue 2 语法的 Vue 文件，并提取 data 选项中所有属性的属性名和 methods 选项中所有方法的方法名，你可以按照以下步骤来实现：

1. 安装所需的依赖项：

   npm install eslint eslint-plugin-vue --save-dev
   

2. 创建 ESLint 自定义规则文件。例如，将文件命名为 extract-vue-options.js：

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Extract data properties and method names from Vue 2 components',
      category: 'Best Practices',
      recommended: false
    },
    schema: [] // no options
  },
  create(context) {
    return {
      'ExportDefaultDeclaration > ObjectExpression': (node) => {
        // 判断当前文件是否是 Vue 文件
        const filename = context.getFilename();
        if (!filename.endsWith('.vue')) {
          return;
        }

        let dataProperties = [];
        let methodNames = [];

        node.properties.forEach(property => {
          if (property.key.name === 'data' && property.value.type === 'FunctionExpression') {
            const returnStatement = property.value.body.body.find(
              statement => statement.type === 'ReturnStatement'
            );
            if (returnStatement && returnStatement.argument.type === 'ObjectExpression') {
              dataProperties = returnStatement.argument.properties.map(
                prop => prop.key.name
              );
            }
          }

          if (property.key.name === 'methods' && property.value.type === 'ObjectExpression') {
            methodNames = property.value.properties.map(
              method => method.key.name
            );
          }
        });

        context.report({
          node,
          message: `data properties: ${dataProperties.join(', ')}; methods: ${methodNames.join(', ')}`
        });
      }
    };
  }
};

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Extract data properties and method names from Vue 2 components and count their occurrences using regex',
      category: 'Best Practices',
      recommended: false
    },
    schema: [] // no options
  },
  create(context) {
    let dataProperties = [];
    let methodNames = [];

    return {
      'ExportDefaultDeclaration > ObjectExpression': (node) => {
        // 判断当前文件是否是 Vue 文件
        const filename = context.getFilename();
        if (!filename.endsWith('.vue')) {
          return;
        }

        node.properties.forEach(property => {
          if (property.key.name === 'data' && property.value.type === 'FunctionExpression') {
            const returnStatement = property.value.body.body.find(
              statement => statement.type === 'ReturnStatement'
            );
            if (returnStatement && returnStatement.argument.type === 'ObjectExpression') {
              dataProperties = returnStatement.argument.properties.map(
                prop => prop.key.name
              );
            }
          }

          if (property.key.name === 'methods' && property.value.type === 'ObjectExpression') {
            methodNames = property.value.properties.map(
              method => method.key.name
            );
          }
        });
      },
      'Program:exit': () => {
        // 判断当前文件是否是 Vue 文件
        const filename = context.getFilename();
        if (!filename.endsWith('.vue')) {
          return;
        }

        const sourceCode = context.getSourceCode().text;
        const reportMessages = [];

        function countOccurrences(source, name) {
          const regex = new RegExp(`\\b${name}\\b`, 'g');
          return (source.match(regex) || []).length;
        }

        dataProperties.forEach(property => {
          const count = countOccurrences(sourceCode, property);
          reportMessages.push(`data property '${property}' appears ${count} times`);
        });

        methodNames.forEach(method => {
          const count = countOccurrences(sourceCode, method);
          reportMessages.push(`method '${method}' appears ${count} times`);
        });

        context.report({
          node: context.getAncestors()[0],
          message: reportMessages.join('; ')
        });
      }
    };
  }
};

3. 配置 ESLint 使用该自定义规则。在你的 ESLint 配置文件（例如 .eslintrc.js）中，添加规则：

module.exports = {
  extends: [
    // ... your other extends
    'plugin:vue/recommended'
  ],
  plugins: [
    // ... your other plugins
    'vue'
  ],
  rules: {
    // ... your other rules
    'custom/extract-vue-options': 'warn'
  },
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        'custom/extract-vue-options': 'warn'
      }
    }
  ],
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.vue']
      }
    }
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
    ecmaVersion: 2020,
    ecmaFeatures: {
      jsx: true
    }
  }
};

4. 在 ESLint 配置文件中注册自定义规则：

const extractVueOptions = require('./path/to/extract-vue-options.js');

module.exports = {
  // ... other configurations
  rules: {
    'custom/extract-vue-options': extractVueOptions
  }
};

5. 运行 ESLint 检查你的 Vue 文件，确保规则生效：

npx eslint . --ext .vue

这段代码创建了一个自定义 ESLint 规则，扫描 Vue 组件中的 data 和 methods 选项，并提取其中的属性名和方法名，并在 ESLint 报告中显示这些信息。