eslint-plugin-light 1.0.14 → 1.0.17

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## <small>1.0.17 (2025-07-23)</small>
+
+* feat(eslint-plugin): add no-direct-img-src rule ([4223182](https://github.com/novlan1/plugin-light/commits/4223182))
+
+
+
+## <small>1.0.16 (2025-07-18)</small>
+
+* feat(eslint): add no-todo-comment rule ([8b555b7](https://github.com/novlan1/plugin-light/commits/8b555b7))
+
+
+
+## <small>1.0.15 (2025-06-16)</small>
+
+* feat(eslint-plugin-light): add img v-lazy ([5807b47](https://github.com/novlan1/plugin-light/commits/5807b47))
+
+
+
 ## <small>1.0.14 (2025-06-11)</small>
 
 * feat(eslint-plugin-light): 优化classname-per-line ([fa99594](https://github.com/novlan1/plugin-light/commits/fa99594))

package/README.md

@@ -412,6 +412,82 @@ module.exports = {
 | ------ | -------------------------------- | ------ |
 | counts | 检查阈值，小于阈值时，可以在一行 | `3`    |
 
+### 3.12. img-v-lazy
+
+强制 `img` 标签使用 `v-lazy` 而不是 `:src`，可用于 Vue 项目中。
+
+Usage:
+
+```js
+// .eslintrc.js
+
+module.exports = {
+  plugins: [
+    'light',
+  ],
+  rules: {
+    'light/img-v-lazy': 2,
+  },
+}
+```
+
+### 3.13. no-direct-img-src
+
+在 `jsx/tsx` 中禁止直接使用 `img src`，必须使用封装的 [`CdnImage` 组件](https://novlan1.github.io/docs/press-pix/zh-CN/cdn-image.html)，可用于 React 项目中。
+
+与 [img-v-lazy 规则](#_3-12-img-v-lazy) 类似，都是为了防止直接使用 COS 图片，而不是 CDN 图片。
+
+Usage:
+
+```js
+// .eslintrc.js
+
+module.exports = {
+  plugins: [
+    'light',
+  ],
+  rules: {
+    'light/no-direct-img-src': 2,
+
+    // 传入参数
+    'light/no-direct-img-src': [2, {
+      componentName: 'MyCdnImage',
+    }],
+  },
+}
+```
+
+配置选项：
+
+| 字段          | 说明                   | 默认值     |
+| ------------- | ---------------------- | ---------- |
+| componentName | 提示词中的自定义组件名 | `CdnImage` |
+
+### 3.14. no-todo-comment
+
+不允许存在 TODO。可防止调试代码被意外带到线上。
+
+Usage:
+
+```js
+// .eslintrc.js
+
+module.exports = {
+  plugins: [
+    'light',
+  ],
+  rules: {
+    'light/no-todo-comment': 2,
+  },
+}
+```
+
+配置选项：
+
+| 字段    | 说明       | 默认值  |
+| ------- | ---------- | ------- |
+| keyword | 检查关键词 | `TODO:` |
+
 ## 4. 更新日志
 
 [点此查看](./CHANGELOG.md)

package/lib/rules/img-v-lazy.js

@@ -0,0 +1,56 @@
+const utils = require('eslint-plugin-vue/lib/utils');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce using v-lazy instead of :src on img tags',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+  },
+  create(context) {
+    return utils.defineTemplateBodyVisitor(context, {
+      'VElement[name=\'img\']'(node) {
+        const srcBinding = node.startTag.attributes.find(attr => attr.directive
+                 && attr.key.name
+                 && attr.key.name.name === 'bind'
+                 && attr.key.argument
+                 && attr.key.argument.name === 'src');
+
+
+        const hasVLazy = node.startTag.attributes.some(attr => attr.directive
+                 && attr.key.name.name === 'lazy');
+
+        if (srcBinding && !hasVLazy) {
+          context.report({
+            node,
+            message: 'Use v-lazy instead of :src for image loading',
+            fix(fixer) {
+              // 获取 :src 绑定的完整表达式文本
+              const srcText = context.getSourceCode().getText(srcBinding.value.expression);
+
+              // 获取 :src 属性的完整文本
+              const fullSrcText = context.getSourceCode().getText(srcBinding);
+
+              // 计算替换文本
+              let replacement;
+              if (fullSrcText.startsWith(':')) {
+                replacement = `v-lazy="${srcText}"`;
+              } else if (fullSrcText.startsWith('v-bind:')) {
+                replacement = `v-lazy="${srcText}"`;
+              } else {
+                replacement = `v-lazy="${srcText}"`;
+              }
+
+              // 精确替换，不添加额外空格
+              return fixer.replaceText(srcBinding, replacement);
+            },
+          });
+        }
+      },
+    });
+  },
+};

package/lib/rules/no-direct-img-src.js

@@ -0,0 +1,43 @@
+const DEFAULT_COMPONENT_NAME = 'CdnImage';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '禁止直接使用 img src，必须使用封装的自定义组件',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          componentName: {
+            type: 'string',
+            default: DEFAULT_COMPONENT_NAME,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name === 'img') {
+          const srcAttribute = node.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'src');
+          const options = context.options[0] || {};
+          const componentName = options.componentName ?? DEFAULT_COMPONENT_NAME;
+
+          if (srcAttribute) {
+            context.report({
+              node,
+              message: `禁止直接使用 img src，必须使用封装的 ${componentName} 组件`,
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/lib/rules/no-todo-comment.js

@@ -0,0 +1,42 @@
+const DEFAULT_KEYWORD = 'TODO:';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '禁止使用未规范的TODO注释',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          keyword: {
+            type: 'string',
+            default: DEFAULT_KEYWORD,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    const comments = sourceCode.getAllComments();
+
+    comments.forEach((comment) => {
+      const options = context.options[0] || {};
+      const keyword = options.keyword ?? DEFAULT_KEYWORD;
+
+      if (comment.value.includes(keyword)) {
+        context.report({
+          node: comment,
+          message: '不允许 TODO 存在',
+        });
+      }
+    });
+
+    return {};
+  },
+};

package/lib/test/no-direct-img-src.js

@@ -0,0 +1,39 @@
+const { RuleTester } = require('eslint');
+
+const rule = require('../rules/no-direct-img-src');
+
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+const ERROR_MESSAGE = '禁止直接使用 img src，必须使用封装的 CdnImage 组件';
+
+
+ruleTester.run('no-direct-img-src', rule, {
+  valid: [
+    {
+      code: '<CdnImage src="image.png" alt="example" />',
+    },
+    {
+      code: '<div><CdnImage src="image.jpg" /></div>',
+    },
+  ],
+  invalid: [
+    {
+      code: '<img src="image.png" alt="example" />',
+      errors: [{ message: ERROR_MESSAGE }],
+    },
+    {
+      code: '<img src={require("./image.jpg")} className="img" />',
+      errors: [{ message: ERROR_MESSAGE }],
+    },
+  ],
+});
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-light",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "description": "Simple Eslint Plugin",
   "keywords": [
     "eslint",