diff --git a/CHANGELOG.md b/CHANGELOG.md index 9af5d96..5a1b097 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- [#19](https://github.com/green-code-initiative/ecoCode-javascript/pull/19) add rule `@ecocode/no-empty-image-src-attribute` - [#18](https://github.com/green-code-initiative/ecoCode-javascript/pull/18) add rule `@ecocode/limit-db-query-results` - [#14](https://github.com/green-code-initiative/ecoCode-javascript/pull/14) Create SonarQube plugin - [#12](https://github.com/green-code-initiative/ecoCode-javascript/issues/12) Pack ESLint plugin into SonarQube plugin diff --git a/eslint-plugin/README.md b/eslint-plugin/README.md index c8dd434..07f5451 100644 --- a/eslint-plugin/README.md +++ b/eslint-plugin/README.md @@ -60,6 +60,7 @@ Add `@ecocode` to the `plugins` section of your `.eslintrc`, followed by rules c | :------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- | | [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md) | Avoid using high accuracy geolocation in web applications. | ✅ | | [limit-db-query-results](docs/rules/limit-db-query-results.md) | Should limit the number of returns for a SQL query | ✅ | +| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md) | Disallow usage of image with empty source attribute | ✅ | | [no-import-all-from-library](docs/rules/no-import-all-from-library.md) | Should not import all from library | ✅ | | [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md) | Disallow multiple access of same DOM element. | ✅ | | [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md) | Disallow multiple style changes at once. | ✅ | diff --git a/eslint-plugin/docs/rules/no-empty-image-src-attribute.md b/eslint-plugin/docs/rules/no-empty-image-src-attribute.md new file mode 100644 index 0000000..a160a5a --- /dev/null +++ b/eslint-plugin/docs/rules/no-empty-image-src-attribute.md @@ -0,0 +1,26 @@ +# Disallow usage of image with empty source attribute (`@ecocode/no-empty-image-src-attribute`) + +⚠️ This rule _warns_ in the ✅ `recommended` config. + + + +## Rule Details + +This rule aims to prohibit the usage of without specifying its source attribute because it causes extra and unnecessary http requests. This rule is build for the [react library](https://react.dev/) and JSX. + +## Examples + +Examples of **non compliant** code for this rule: + +```js + + +``` + +Examples of **compliant** code for this rule: + +```js +import imgSvg from './img.svg' + + +``` diff --git a/eslint-plugin/lib/rules/no-empty-image-src-attribute.js b/eslint-plugin/lib/rules/no-empty-image-src-attribute.js new file mode 100644 index 0000000..c966fd9 --- /dev/null +++ b/eslint-plugin/lib/rules/no-empty-image-src-attribute.js @@ -0,0 +1,58 @@ +/** + * Copyright (C) 2023 Green Code Initiative + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ +"use strict"; + +/** @type {import('eslint').Rule.RuleModule} */ +module.exports = { + meta: { + type: "suggestion", + docs: { + description: "Disallow usage of image with empty source attribute", + category: "eco-design", + recommended: "warn", + }, + messages: { + SpecifySrcAttribute: + "Make sure to specify src attribute when using .", + }, + schema: [], + }, + create(context) { + return { + JSXOpeningElement(node) { + if (node.name.name === "img") { + const srcValue = node.attributes.find( + (attr) => attr.name.name === "src", + ); + if (srcValue && srcValue.value && srcValue.value.value === "") { + //to prevent Empty image + context.report({ + node: srcValue, + messageId: "SpecifySrcAttribute", + }); + } else if (!srcValue) { + //to prevent + context.report({ + node, + messageId: "SpecifySrcAttribute", + }); + } + } + }, + }; + }, +}; diff --git a/eslint-plugin/tests/lib/files/logo.svg b/eslint-plugin/tests/lib/files/logo.svg new file mode 100644 index 0000000..e69de29 diff --git a/eslint-plugin/tests/lib/rules/no-empty-image-src-attribute.js b/eslint-plugin/tests/lib/rules/no-empty-image-src-attribute.js new file mode 100644 index 0000000..4092c49 --- /dev/null +++ b/eslint-plugin/tests/lib/rules/no-empty-image-src-attribute.js @@ -0,0 +1,73 @@ +/** + * Copyright (C) 2023 Green Code Initiative + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ +"use strict"; + +//------------------------------------------------------------------------------ +// Requirements +//------------------------------------------------------------------------------ + +const rule = require("../../../lib/rules/no-empty-image-src-attribute"); +const RuleTester = require("eslint").RuleTester; + +//------------------------------------------------------------------------------ +// Tests +//------------------------------------------------------------------------------ + +const ruleTester = new RuleTester({ + parserOptions: { + ecmaVersion: 2021, + sourceType: "module", + ecmaFeatures: { + jsx: true, + }, + }, +}); +const expectedError1 = { + messageId: "SpecifySrcAttribute", + type: "JSXAttribute", +}; +const expectedError2 = { + messageId: "SpecifySrcAttribute", + type: "JSXOpeningElement", +}; + +ruleTester.run("image-src-attribute-not-empty", rule, { + valid: [ + ` + This is a SVG image + `, + ` + import logoSvg from "../files/logo.svg"; + This is a SVG image + `, + ], + + invalid: [ + { + code: ` + + `, + errors: [expectedError1], + }, + { + code: ` + This is an empty image + `, + errors: [expectedError2], + }, + ], +});