【无标题】

eslint 数组和对象非空判断整理

1 安装vscode的eslint

2 npx eslint --init 初始化eslint

3 配置文件

eslint.config.mjs

复制代码
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import noNullCheck from "./no-null-check.js"; // 引入自定义规则



export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
 

  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
  {
    plugins: {
      "example": {
        rules: { "no-null-check": noNullCheck }
      }
  },
  rules: {
    "example/no-null-check": "warn", // 注册自定义规则
},
   
  },
];

no-null-check.js

复制代码
module.exports = {
    meta: {
        type: "problem",
        docs: {
            description: "require non-empty initialization for arrays and objects, and check usage in lifecycle methods",
            category: "Best Practices",
            recommended: false,
        },
        schema: [],
    },
    create: function (context) {
        const dataProperties = {};

        return {
            VariableDeclaration(node) {
                node.declarations.forEach(declaration => {
                    const { init } = declaration;
                    if (init) {
                        if (
                            (init.type === 'ArrayExpression' && init.elements.length === 0) ||
                            (init.type === 'ObjectExpression' && init.properties.length === 0)
                        ) {
                            context.report({
                                node: declaration,
                                message: 'Initialization should not be empty for arrays or objects.',
                            });
                        }
                    }
                });
            },
            'Property[key.name="data"]'(node) {
                if (node.value.type === 'FunctionExpression') {
                    const returnStatement = node.value.body.body.find(
                        stmt => stmt.type === 'ReturnStatement'
                    );
                    if (returnStatement && returnStatement.argument.type === 'ObjectExpression') {
                        returnStatement.argument.properties.forEach(prop => {
                            dataProperties[prop.key.name] = prop.value;
                            if (
                                (prop.value.type === 'ArrayExpression' && prop.value.elements.length === 0) ||
                                (prop.value.type === 'ObjectExpression' && prop.value.properties.length === 0)
                            ) {
                                context.report({
                                    node: prop,
                                    message: '记得非空判断',
                                });
                            }
                        });
                    }
                }
            },
            MemberExpression(node) {
                if (node.object.name === 'this' && dataProperties[node.property.name]) {
                    const prop = dataProperties[node.property.name];
                    if (
                        (prop.type === 'ArrayExpression' && prop.elements.length === 0) ||
                        (prop.type === 'ObjectExpression' && prop.properties.length === 0)
                    ) {
                        context.report({
                            node,
                            message: 'Data property should be checked for non-emptiness before usage.',
                        });
                    }
                }
            },
        };
    },
};
相关推荐
她说可以呀2 小时前
Vue插槽
前端·javascript·vue.js
qq_448011162 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
志尊宝3 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
兰亭妙微UI设计公司7 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
小大宇7 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
潇小墨10 小时前
我给自己造了一个桌面效率助手:剪贴板、截图提单、全盘文件搜索,全都塞进快捷键里
vue.js
jktantan11 小时前
前端也需要事务:Vue Router 乐观更新、回滚与“过期事务”
前端·javascript·vue.js
biu_biubiu12 小时前
我开源了 Codebook
前端·vue.js
小李科技13 小时前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
蓝莓味的口香糖14 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js