feat: Add meta-charset-require rule (#1628)

coliff · web-flow · commit dfda7fa45bba · 2025-06-05T21:33:29.000+09:00
diff --git a/dist/core/rules/index.js b/dist/core/rules/index.js
diff --git a/src/core/rules/index.ts b/src/core/rules/index.ts
@@ -23,6 +23,7 @@ export { default as inlineScriptDisabled } from './inline-script-disabled'
 export { default as inlineStyleDisabled } from './inline-style-disabled'
 export { default as inputRequiresLabel } from './input-requires-label'
 export { default as mainRequire } from './main-require'
+export { default as metaCharsetRequire } from './meta-charset-require'
 export { default as metaDescriptionRequire } from './meta-description-require'
 export { default as metaViewportRequire } from './meta-viewport-require'
 export { default as scriptDisabled } from './script-disabled'
diff --git a/src/core/rules/meta-charset-require.ts b/src/core/rules/meta-charset-require.ts
@@ -0,0 +1,50 @@
+import { Block, Listener } from '../htmlparser'
+import { Rule } from '../types'
+
+export default {
+  id: 'meta-charset-require',
+  description: '<meta charset=""> must be present in <head> tag.',
+  init(parser, reporter) {
+    let headSeen = false
+    let metaCharsetSeen = false
+    let metaCharsetContent = ''
+    let headEvent: Block | null = null
+
+    const onTagStart: Listener = (event) => {
+      const tagName = event.tagName.toLowerCase()
+      if (tagName === 'head') {
+        headSeen = true
+        headEvent = event
+      } else if (tagName === 'meta') {
+        const mapAttrs = parser.getMapAttrs(event.attrs)
+        if (mapAttrs['charset'] !== undefined) {
+          metaCharsetSeen = true
+          metaCharsetContent = mapAttrs['charset'] || ''
+        }
+      }
+    }
+
+    parser.addListener('tagstart', onTagStart)
+    parser.addListener('end', () => {
+      if (headSeen && headEvent) {
+        if (!metaCharsetSeen) {
+          reporter.error(
+            '<meta charset=""> must be present in <head> tag.',
+            headEvent.line,
+            headEvent.col,
+            this,
+            headEvent.raw
+          )
+        } else if (metaCharsetContent.trim() === '') {
+          reporter.error(
+            '<meta charset=""> value must not be empty.',
+            headEvent.line,
+            headEvent.col,
+            this,
+            headEvent.raw
+          )
+        }
+      }
+    })
+  },
+} as Rule
diff --git a/test/rules/meta-charset-require.spec.js b/test/rules/meta-charset-require.spec.js
@@ -0,0 +1,46 @@
+const HTMLHint = require('../../dist/htmlhint.js').HTMLHint
+const ruleId = 'meta-charset-require'
+
+describe('Rule: meta-charset-require', () => {
+  it('should not report an error when a valid meta charset is present', () => {
+    const code = `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body></body></html>`
+    const messages = HTMLHint.verify(code, { [ruleId]: true })
+    expect(messages.length).toBe(0)
+  })
+
+  it('should report an error when meta charset is missing', () => {
+    const code = `<!DOCTYPE html><html><head></head><body></body></html>`
+    const messages = HTMLHint.verify(code, { [ruleId]: true })
+    expect(messages.length).toBe(1)
+    expect(messages[0].message).toBe(
+      '<meta charset=""> must be present in <head> tag.'
+    )
+  })
+
+  it('should report an error when meta charset value is blank', () => {
+    const code = `<!DOCTYPE html><html><head><meta charset=""></head><body></body></html>`
+    const messages = HTMLHint.verify(code, { [ruleId]: true })
+    expect(messages.length).toBe(1)
+    expect(messages[0].message).toBe(
+      '<meta charset=""> value must not be empty.'
+    )
+  })
+
+  it('should report an error when meta charset value is only whitespace', () => {
+    const code = `<!DOCTYPE html><html><head><meta charset=" "></head><body></body></html>`
+    const messages = HTMLHint.verify(code, { [ruleId]: true })
+    expect(messages.length).toBe(1)
+    expect(messages[0].message).toBe(
+      '<meta charset=""> value must not be empty.'
+    )
+  })
+
+  it('should report an error when meta charset is missing and only other meta tags are present', () => {
+    const code = `<!DOCTYPE html><html><head><meta name="description" content="desc"></head><body></body></html>`
+    const messages = HTMLHint.verify(code, { [ruleId]: true })
+    expect(messages.length).toBe(1)
+    expect(messages[0].message).toBe(
+      '<meta charset=""> must be present in <head> tag.'
+    )
+  })
+})
diff --git a/website/src/content/docs/list-rules.md b/website/src/content/docs/list-rules.md
@@ -2,6 +2,7 @@
 id: list-rules
 title: List of rules
 description: A complete list of all the rules for HTMLHint
+draft: true
 ---
 
 ## Doctype and Head
@@ -10,6 +11,7 @@ description: A complete list of all the rules for HTMLHint
 - [`doctype-html5`](/rules/doctype-html5): Invalid doctype.
 - [`head-script-disabled`](/rules/head-script-disabled): The `<script>` tag cannot be used in `<head>` tag.
 - [`html-lang-require`](/rules/html-lang-require): The HTML lang attribute is required.
+- [`meta-charset-require`](/rules/meta-charset-require): `<meta charset="">` must be present in `<head>` tag.
 - [`meta-description-require`](/rules/meta-description-require): `<meta name="description">` with non-blank content must be present in `<head>` tag.
 - [`meta-viewport-require`](/rules/meta-viewport-require): `<meta name="viewport">` with non-blank content must be present in `<head>` tag.
 - [`script-disabled`](/rules/script-disabled): `<script>` tags cannot be used.
diff --git a/website/src/content/docs/rules/index.mdx b/website/src/content/docs/rules/index.mdx
@@ -9,6 +9,7 @@ description: A complete list of all the rules for HTMLHint
 - [`doctype-html5`](doctype-html5/): Invalid doctype.
 - [`head-script-disabled`](head-script-disabled/): The `<script>` tag cannot be used in `<head>` tag.
 - [`html-lang-require`](html-lang-require/): The HTML lang attribute is required.
+- [`meta-charset-require`](meta-charset-require/): `<meta charset="">` must be present in `<head>` tag.
 - [`meta-description-require`](meta-description-require/): `<meta name="description">` with non-blank content must be present in `<head>` tag.
 - [`meta-viewport-require`](meta-viewport-require/): `<meta name="viewport">` with non-blank content must be present in `<head>` tag.
 - [`script-disabled`](script-disabled/): `<script>` tags cannot be used.
diff --git a/website/src/content/docs/rules/inline-script-disabled.mdx b/website/src/content/docs/rules/inline-script-disabled.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following pattern are considered violations
+### The following patterns are considered violations
 
 ```html
 <img src="test.gif" onclick="alert(1);">
diff --git a/website/src/content/docs/rules/meta-charset-require.mdx b/website/src/content/docs/rules/meta-charset-require.mdx
@@ -0,0 +1,38 @@
+---
+id: meta-charset-require
+title: meta-charset-require
+description: Ensures every HTML document includes a meta charset tag within the head element for proper character encoding.
+sidebar:
+  hidden: true
+  badge: New
+---
+
+import { Badge } from '@astrojs/starlight/components';
+
+A `<meta charset="">` must be present in `<head>` tag.
+
+Level: <Badge text="Error" variant="danger" />
+
+## Config value
+
+1. true: enable rule
+2. false: disable rule
+
+### The following patterns are **not** considered rule violations
+
+```html
+<html><head><meta charset="utf-8"></head></html>
+```
+
+### The following patterns are considered rule violations
+
+```html
+<!-- Missing meta charset -->
+<html><head></head></html>
+
+<!-- Empty meta charset value -->
+<html><head><meta charset=""></head></html>
+
+<!-- Whitespace-only meta charset value -->
+<html><head><meta charset=" "></head></html>
+```
