diff --git a/.prettierignore b/.prettierignore index ab70b0cd..01c3f683 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,9 +2,7 @@ **/fixtures **/__snapshots__ lerna.json -packages/website/out -packages/website/src/out -packages/website/**/*.html +packages/website/ packages/web-linter/out .next dist diff --git a/docs/getting-started.md b/docs/getting-started.md index 065dd1e5..bc818d36 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -1,5 +1,15 @@ # Getting Started +## Contents + +- [Prerequisite](#prerequisite) +- [Installation](#installation) +- [Configuration](#configuration) + - [Flat config](#flat-config) + - [eslintrc config (.eslintrc.\*)](#eslintrc-config-eslintrc) +- [Lint HTML in JavaScript Template Literal](#lint-html-in-javascript-template-literals) +- [Editor Configuration](#editor-configuration) + ## Prerequisite - Node.js: `^12.22.0 || ^14.17.0 || >=16.0.0`. @@ -156,6 +166,57 @@ module.exports = { }; ``` +## Lint HTML in JavaScript Template Literals + +This plugin provides the ability to lint not only HTML files, but also HTML written in [JavaScript Template Literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). +You can set the [@html-eslint rules](./rules.md) in your settings to lint JavaScript code without any additional configuration. + +```js,eslint.config.js +import eslintHTML from "@html-eslint/eslint-plugin"; +export default [ + // You can use the @html-eslint rules in your ESLint configuration for JS! + // This is used to lint HTML written inside Template Literal. + "plugins": { + "@html-eslint": eslintHTML + }, + "rules": { + // Specifies the @html-eslint rules to apply to Template Literal. + "@html-eslint/no-inline-styles": 1, + "@html-eslint/indent": 1, + } +]; +``` + +Not all Template literals are recognized as HTML. +There are two ways to get the plugin to recognize them as HTML. + +```js +// 1. Tagged Templates with a function named `html` +html`
`; + +// 2. Template Literal after a html comment (/* html */) +const code = /* html */ `
`; +``` + +If you want to specify that linting should be done with keywords other than `html`, you can change the settings option. + +```js + { + "plugins": { + "@html-eslint": eslintHTML + }, + settings: { + html: { + templateLiterals: { + // default options + tags: ["^html$"], + comments: ["^\\s*html\\s*$"], + } + } + }, +} +``` + ## Editor Configuration ### VSCode diff --git a/packages/website/.eslintrc.js b/packages/website/.eslintrc.js index 78cf1073..37cfb8af 100644 --- a/packages/website/.eslintrc.js +++ b/packages/website/.eslintrc.js @@ -2,6 +2,15 @@ module.exports = { root: true, plugins: ["@html-eslint"], parserOptions: { ecmaVersion: 2020, sourceType: "module" }, + rules: { + "@html-eslint/indent": ["error", 2], + "@html-eslint/element-newline": "error", + "@html-eslint/lowercase": "error", + "@html-eslint/no-extra-spacing-attrs": "error", + "@html-eslint/no-multiple-empty-lines": "error", + "@html-eslint/no-trailing-spaces": "error", + "@html-eslint/quotes": "error", + }, overrides: [ { files: ["**/*.html"], diff --git a/packages/website/scripts/generates/renderer.js b/packages/website/scripts/generates/renderer.js index 21cb6f32..08cfb9d4 100644 --- a/packages/website/scripts/generates/renderer.js +++ b/packages/website/scripts/generates/renderer.js @@ -12,7 +12,10 @@ module.exports = { const id = text .toLowerCase() .replace(/^@/, "") - .replace(/[\s\/]/g, "-"); + .replace(/[^a-zA-Z0-9]/g, "-") + .replace(/[\s\/]/g, "-") + .replace(/-+/g, "-") + .replace(/-$/, ""); return ` ${text} @@ -56,10 +59,12 @@ module.exports = { `; }, link(href, title, text) { - if (href.indexOf("http") === 0) { - text += ``; + const isExternal = href.indexOf("http") === 0; + if (isExternal) { + text += /* html */ ``; } - return `${text}`; + href = href.replace(/\.md$/, ""); + return /* html */ `${text}`; }, tablecell(content, flags) { if (flags.header) { diff --git a/packages/website/src/common.css b/packages/website/src/common.css index 1396a0e0..db2674b4 100644 --- a/packages/website/src/common.css +++ b/packages/website/src/common.css @@ -79,7 +79,7 @@ @apply list-disc body3 text-black-700 pl-[20px]; } .md-listitem { - @apply my-[14px]; + @apply my-[12px]; } .md-p { @apply body3 text-black-700 py-[6px]; @@ -100,10 +100,10 @@ @apply display1 text-black-900 my-[28px]; } .md-heading2 { - @apply display3 text-black-900 my-[12px]; + @apply display3 text-black-900 mb-3 mt-6; } .mad-heading3 { - @apply text-lg my-2 md:text-xl scroll-mt-[64px]; + @apply text-lg mb-3 mt-5 md:text-xl scroll-mt-[64px]; } .md-heading4 { @apply my-2 block scroll-mt-[64px]; diff --git a/packages/website/src/components/footer.html b/packages/website/src/components/footer.html index e0159655..5925f6fa 100644 --- a/packages/website/src/components/footer.html +++ b/packages/website/src/components/footer.html @@ -1,27 +1,27 @@ diff --git a/packages/website/src/components/header/header.html b/packages/website/src/components/header/header.html index c25dd36c..aa19eec3 100644 --- a/packages/website/src/components/header/header.html +++ b/packages/website/src/components/header/header.html @@ -22,34 +22,34 @@ }
- - - html-eslint - - - v{{ version }} - - + - - + html-eslint + + + v{{ version }} + + + +
diff --git a/packages/website/src/components/header/nav.html b/packages/website/src/components/header/nav.html index e9cd193f..c7f706f9 100644 --- a/packages/website/src/components/header/nav.html +++ b/packages/website/src/components/header/nav.html @@ -1,32 +1,32 @@ diff --git a/packages/website/src/components/home.html b/packages/website/src/components/home.html index f71fff5a..1a2c5d8c 100644 --- a/packages/website/src/components/home.html +++ b/packages/website/src/components/home.html @@ -1,69 +1,69 @@
-
-

- An ESLint -
- plugin
- to lint and fix HTML code. -

-

- ESLint is a popular linting tool, but it only supports JavaScript.
- This plugin allows you to lint your HTML code without having to install a separate linting tool or worry about editor support. -

-
    -
  • -

    - - Getting Started - -

    -
    • -
  • -

    - - Playground - -

    -
    • -
  • -

    - - All Rules - -

    +
    +

    + An ESLint +
    + plugin
    + to lint and fix HTML code. +

    +

    + ESLint is a popular linting tool, but it only supports JavaScript.
    + This plugin allows you to lint HTML files and HTML code in JavaScript Template Literals. +

    + - -
    -

    FAQ

    -
      -
    • -

      Q: Lint JavaScript inside HTML

      -

      - A: This ESLint plugin supports linting HTML syntax and does not provide JavaScript syntax linting. To lint JavaScript in HTML, such as inline scripts, you can use eslint-plugin-html -

      -
      • -
    -
    -

    - If you find this project useful,
    - Please support this project with a Github Star! -

    -
    +
    • +
+ +
+

FAQ

+
    +
  • +

    Q: Lint JavaScript inside HTML

    +

    + A: This ESLint plugin supports linting HTML syntax and does not provide JavaScript syntax linting. To lint JavaScript in HTML, such as inline scripts, you can use eslint-plugin-html +

    +
    • +
+
+

+ If you find this project useful,
+ Please support this project with a Github Star! +

+
diff --git a/packages/website/src/components/layout.html b/packages/website/src/components/layout.html index 20b44d02..196464c2 100644 --- a/packages/website/src/components/layout.html +++ b/packages/website/src/components/layout.html @@ -6,42 +6,42 @@ - - - html-eslint - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - + + + html-eslint + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + + diff --git a/packages/website/src/components/nav-list.html b/packages/website/src/components/nav-list.html index 5bf31654..a7779e08 100644 --- a/packages/website/src/components/nav-list.html +++ b/packages/website/src/components/nav-list.html @@ -1,26 +1,26 @@
- - + +
diff --git a/packages/website/src/components/nav.html b/packages/website/src/components/nav.html index 136c2863..d1931cea 100644 --- a/packages/website/src/components/nav.html +++ b/packages/website/src/components/nav.html @@ -8,97 +8,97 @@ }
- +
+ + diff --git a/packages/website/src/components/playground.html b/packages/website/src/components/playground.html index df000116..f80f3cf6 100644 --- a/packages/website/src/components/playground.html +++ b/packages/website/src/components/playground.html @@ -1,5 +1,5 @@
- -

Playground

-
-
-
-

HTML

-
-
-

JavaScript

-
+

Playground

+
+
+
+

HTML

+
+
+

JavaScript

+
+
+
+ +
+
+
+
+ .eslintrc.json
-
- +
+
-
-
-
- .eslintrc.json -
-
- -
-
-
-
-
    -
  • - Errors -
    • -
  • - Fixed -
    • -
-
-
-
- HERE -
+
+
+
+
    +
  • + Errors +
    • +
  • + Fixed +
    • +
+
+
+
+ HERE +
-
-
- - + -
+
diff --git a/packages/website/src/components/template.html b/packages/website/src/components/template.html index 2cf29e7e..be369c73 100644 --- a/packages/website/src/components/template.html +++ b/packages/website/src/components/template.html @@ -1,14 +1,14 @@ - - {{meta}} - - - - - - - - - - + + {{meta}} + + + + + + + + + + diff --git a/packages/website/src/index.html b/packages/website/src/index.html index ed431ace..dced8a9d 100644 --- a/packages/website/src/index.html +++ b/packages/website/src/index.html @@ -1,14 +1,14 @@ - - html-eslint - - - - - - - - - + + html-eslint + + + + + + + + + diff --git a/packages/website/src/playground.html b/packages/website/src/playground.html index 7c81b592..d7bed6ea 100644 --- a/packages/website/src/playground.html +++ b/packages/website/src/playground.html @@ -1,15 +1,15 @@ - - Playground - html-eslint - - - - - - - - - - + + Playground - html-eslint + + + + + + + + + + diff --git a/packages/website/src/scripts/playground/view.js b/packages/website/src/scripts/playground/view.js index 52a8e6b6..ef3bfd58 100644 --- a/packages/website/src/scripts/playground/view.js +++ b/packages/website/src/scripts/playground/view.js @@ -103,11 +103,11 @@ export class View { `; } - return /* html */ `
  • + return `
  • ${line}:${column} - ${message}(${ruleId}) + "@html-eslint/", + "" + )}">${ruleId})
    • `; } } diff --git a/packages/website/src/templates/rule.html b/packages/website/src/templates/rule.html index f9d268d5..73f780e3 100644 --- a/packages/website/src/templates/rule.html +++ b/packages/website/src/templates/rule.html @@ -1,9 +1,9 @@ - - - - - - + + + + + +