feat(rule): add no-img-element

README.md

@@ -103,6 +103,7 @@ Include all the below rules, as well as all priority rules in above categories,
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 |  | [nuxt/no-timing-in-fetch-data](./docs/rules/no-timing-in-fetch-data.md) | Disallow `setTimeout/setInterval` in `asyncData/fetch` |
+|  | [nuxt/no-img-element](./docs/rules/no-img-element.md) | Prohibit usage of HTML `<img>` element |
 
 ### Other Rules
 

docs/rules/no-img-element.md

@@ -0,0 +1,30 @@
+# nuxt/no-img-element
+
+> Prohibit usage of HTML <img> element
+
+- :gear: This rule is included in `"plugin:nuxt/recommended"`.
+
+## Rule Details
+
+This rule is for preventing using `<img>` element
+
+Examples of **incorrect** code for this rule:
+
+```js
+
+<img src="/nuxt.png" />
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+<nuxt-img src="/nuxt.png" />
+
+```
+
+## :mag: Implementation
+
+- [Rule source](../../lib/rules/no-img-element.js)
+- [Test source](../../lib/rules/__tests__/no-cjs-in-config.test.js)

lib/configs/recommended.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: require.resolve('./base.js'),
   rules: {
+    'nuxt/no-img-element': 'error',
     'nuxt/no-timing-in-fetch-data': 'error'
   }
 }

lib/index.js

@@ -3,6 +3,7 @@ module.exports = {
     'no-env-in-context': require('./rules/no-env-in-context'),
     'no-env-in-hooks': require('./rules/no-env-in-hooks'),
     'no-globals-in-created': require('./rules/no-globals-in-created'),
+    'no-img-element': require('./rules/no-img-element'),
     'no-this-in-fetch-data': require('./rules/no-this-in-fetch-data'),
     'no-timing-in-fetch-data': require('./rules/no-timing-in-fetch-data'),
     'no-cjs-in-config': require('./rules/no-cjs-in-config'),

lib/rules/__tests__/no-img-element.test.js

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Prohibit usage of HTML <img> element
+ * @author Xin Du <clark.duxin@gmail.com>
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../no-img-element')
+
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2018 }
+})
+
+ruleTester.run('no-img-element', rule, {
+
+  valid: [
+    {
+      filename: 'page.vue',
+      code: `
+      <template>
+        <nuxt-img src="nuxt.png" />
+      </template>
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'page.vue',
+      code: `
+      <template>
+        <img src="nuxt.png" />
+      </template>
+      `,
+      errors: [{
+        message: 'Do not use <img>. Use Image from \'@nuxt/image\' instead. See https://image.nuxtjs.org/getting-started/installation/.',
+        type: 'VElement'
+      }]
+    }
+  ]
+})

lib/rules/no-img-element.js

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview Prohibit usage of HTML <img> element
+ * @author Xin Du <clark.duxin@gmail.com>
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prohibit usage of HTML <img> element',
+      category: 'recommended'
+    }
+  },
+  create: function (context) {
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement (node) {
+        if (node.rawName !== 'img') {
+          return
+        }
+
+        if (node.startTag.attributes === 0) {
+          return
+        }
+
+        context.report({
+          node,
+          message: 'Do not use <img>. Use Image from \'@nuxt/image\' instead. See https://image.nuxtjs.org/getting-started/installation/.'
+        })
+      }
+    })
+  }
+}