markuplint / markuplint Goto Github PK

An HTML linter for all markup developers.

License: MIT License

TypeScript 95.02% HTML 1.85% JavaScript 1.49% Vue 0.09% Pug 0.07% Svelte 0.04% CSS 0.70% Dockerfile 0.01% Liquid 0.01% Handlebars 0.01% PHP 0.01% EJS 0.02% Mustache 0.02% Nunjucks 0.01% Shell 0.01% Astro 0.13% MDX 0.51%

linter html webcomponents custom-elements html-linter vue svelte pug markup-languages php

markuplint's Introduction

Peace of mind in your markup - An HTML linter for all markup developers.

Website

Packages

Package	Name	Platform
CLI	`markuplint`	Node.js
Core	`@markuplint/ml-core`	Universal
Rules	`@markuplint/rules`	Universal
HTML Parser	`@markuplint/html-parser`	Universal
Specs and Schemas	`@markuplint/html-spec`	Universal

More Packages...

Template Parser Plugins

Package	Name	Platform
JSX	`@markuplint/jsx-parser`	Universal
Vue	`@markuplint/vue-parser`	Universal
Svelte	`@markuplint/svelte-parser`	Universal
Astro	`@markuplint/astro-parser`	Universal
Pug	`@markuplint/pug-parser`	Universal
PHP	`@markuplint/php-parser`	Universal

More Template Parser Plugins...

Editor Extensions

Visual Studio Code

License

Thanks

This linter is inspired by:

markuplint's People

Contributors

Stargazers

Watchers

Forkers

ktsn sylvaindumont tyankatsu0105 noeloasis fossabot sylviap666 justin-leung yu-kgr yama masup9 yusukehirao conao3 yamanoku mikimhk pirosikick mojahige kgsi thebearingedge kagankan shippokun kimulaco petamoriken kobakazu0429 undsoft grgr-dkrk hiro0218 d-kawaguchi bugfire takenspc konomae dqn nakagawa-satoya nagashimam 53able puku0x konojunya tnyo43 gyugyu monoharada saekitominaga apple-yagi exoego daku10 okathira takehirotada tuti995

markuplint's Issues

markuplintのアイコン設定

VSCodeを使っているのですが、vscode-iconsで、.markuplintrcの際にアイコンが何も適用されていないです。

追加する予定はありますか？

Warning obsolete DOCTYPE declaration

DOCTYPE declarations other than <!doctype html> are almost old, so need to warn them all.

Following items are example of the old DOCTYPE declarations:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Want to add options to CLI.

Want options that there are in API to CLI.
Ex: locale

WAI-ARIA rule

I designed a rule for WAI-ARIA is:

Warn if the role attribute and/or aria-* attributes don't set in accordance with specs that are WAI-ARIA and/or "ARIA in HTML".

Warn if:

Use the role that doesn't exist in the spec.
Use the abstract role.
Use the aria-* attribute that doesn't belong to a set role (or an implicit role).
[Optional] Use a bad value of the aria-* attribute.
[Optional] Use the not permitted role according to ARIA in HTML.
[Optional] Set the implicit role explicitly.

Rule Details

👎 Examples of incorrect code for this rule

<div role="landmark" aria-busy="busy">
	<ul>
		<li role="button">an item</li>
	</ul>
	<button aria-checked="true">Click me!</button>
</div>

👍 Examples of correct code for this rule

<div role="banner" aria-busy="true">
	<ul>
		<li role="menuitemcheckbox">an item</li>
	</ul>
	<button aria-pressed="true">Click me!</button>
</div>

Setting value

Type: boolean

Options

`checkingValue`

Warn if use a bad value of the aria-* attribute. This is optional but you should not disable it if you need to follow the spec. But you can disable it temporarily if you need when it happened to a problem on the spec was updated (ex: If a value was added to an allowed list on the spec, etc).

Type: boolean
Optional
Default: true

`permittedAriaRoles`

Warn if use the not permitted role according to ARIA in HTML. This is optional because it is for the HTML as the host language and it is not the spec of WAI-ARIA.

Type: boolean
Optional
Default: true

`disallowSetImplicitRole`

Disallow set the implicit role explicitly. This is optional because it is for the HTML as the host language and it is not the spec of WAI-ARIA.

Type: boolean
Optional
Default: true

Default notification severity

error

Markuplint not added to .bin folder after installation in 1.0.0-alpha

Terminal shows markuplint not found after install 1.0.0-alpha.7, and there is no markuplint folder under node_modules/.bin/.
Version 0.32.0 doesn't have this issue.

issues

attr-value-quotes: misjudgment void attributes
attr-value-quotes: mis parse <hx> tag name
character-reference: misjudgment in <script></script>

Required specs

For `v1.0.0`

Documents

Features

CLI
Reporter
i18n
JSON Schema

Rules

The new logo

The current logo was made just quick by me.
I want a designer to improve it properly.

Want:

Accessible.
Compatible with dark mode.
Usable for a small area.
Monochromatic variation.

`<label>` tag, No labelable elements other than the labeled control are allowed.

<label> tag, No labelable elements other than the labeled control are allowed.
https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Technical_summary

JSX Support

Support of multiple files for scanning

It would be nice if i could use a package.json script like:

"markuplint": "markuplint \"./src/**/*.html\""

Somehow a page said in Japanese.

The page: https://markuplint.dev/rules/attr-spacing

[indentation] warned when previous line has a self-closing custom element

  <x-foo />
  <span>lorem</span>
--^ [indentation] warning

Ignore blocks

Is there possibility of adding option to ignore certain parts of the markup? For example, common use case when using PHP templates is to use <?php … ?> blocks which can create confusion for markuplint parser. Is it possible to create some option (or rule) to ignore those blocks (via regex, …)?

Features for Accessibility

`*.erb` support

I'm running a monolithic Rails application at work. I'm trying to have the front end responsibilities on the front side, but I don't think I can do that yet and I think some of it will remain.

I think many people would be happy if erb files were also subject to markuplint 🙏

https://markuplint.dev/setting-for-other-languages

Features for Performances

<script defer>
<link rel="preload">
<link rel="modulepreload" href="*.mjs">
<img loading="lazy"> <iframe loading="lazy">
Resource Hints
Ref: https://gist.github.com/tkadlec/683b26344cde774170b94c0fcf0088b4

Doesn't work "childNodeRules" props on configuration file.

Show help message when invoke command without argument

In general, when the user directly invokes a command that requires an argument, it will often output a simple help along with an indication that an argument is required.

I discovered the --help option on a hunch, but it's not friendly.
Please show a help message with a warning that an argument is required when the user invokes markuplint it without any argument?

npm without argument

dbbf47d7060b% npm

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /home/conao/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

[email protected] /home/conao/.anyenv/envs/nodenv/versions/14.13.0/lib/node_modules/npm

markuplint without argument

(nothing output)

dbbf47d7060b% npx markuplint       
dbbf47d7060b%

Support to a format of the GCC Error Messages

Ref: https://www.gnu.org/prep/standards/html_node/Errors.html

Features for Practices

autoplay attribute with muted attribute for the video element

Rule `case-sensitive-attr-name` doesn't work correctly

Version

v1.6.1

Steps to reproduce

{
  "rules": {
    "case-sensitive-attr-name": {
      "value": "lower",
      "severity": "warning"
    }
  }
}

What is expected?

passed

What is actually happening?

warning: Attribute name of HTML elements should be uppercase (case-sensitive-attr-name)

Enable to use default rules and config detection feature via Node.js API

Hello!

I encounters a problem which I cannot utilize default rules and default config detection on easy way during I'm writing a gulp plugin to use markuplint in gulp task.

The Node.js APIs (verify and verifyFile) looks to assume the users to specify ruleset and rules by themselves. It would be a bit hard for a plugin devs to use the APIs.

I'm executing markuplint command via CLI to use such features. However, it decreases the flexibility of the tool.

Can we includes the features in the Node.js APIs like eslint's CLIEngine or expose them as a separated APIs so that plugin devs easily write full-featured markuplint plugins?

Testing STDIN

Unexpected results on some rules when using the pug-parser.

indentation
attr-spacing
If there is an HTML tag in siblings.

SyntaxError uE000

I came across a really weird error while trying to lint simple liquid files.

SyntaxError: Invalid tag syntax: <div class="ImageHero__Image" style="background-image: url()"

No tool finds this, not perl, sed, grep ...

.markuplintrc

{
    "extends": "@markuplint/html-spec",
    "parser": {
        "^((?!(js|css)).)*\\.liquid$": "@markuplint/liquid-parser"
    }
}

Output JSON format by CLI

Add CONTRIBUTING.md

Hi, I want to contribute to this project, but I don't familier with Node.

Could you add CONTRIBUTING.md for me and other new contributors to get running local tests or something internal information or something prerequirements before send PRs.

Support to "CRLF" Newline

Vue3 supporting.

Checking new syntax and the parser
The Implementation

[Pug] It had syntax error when using tag interpolation

https://pugjs.org/language/interpolation.html#tag-interpolation

Features for Security

rel="noreferrer noopener" on the a and area element with target="_blank"
~~download attribute on the a and area element that its href value is not same origin~~
charset attribute on the meta element that value has XSS incident

Evaluating while ignoring frontmatter format.

Want to use with Eleventy.

HTML case:

---
permalink: "{{page.filePathStem}}.html"
---

<!doctype html>
<html>
<head>
...

Pug case:

---
permalink: "| #{page.filePathStem}.html"
---

html
  head

[character-reference] <, >, & operator to usable in executable attribute on Vue template

<template>
  <div v-if="a < b"></div>
---------------^ [character-reference] error
</template>

Add `markuplint --init`

Create a default config file like eslint --init.

Thrown an exception if use the header element.

<header>
    ...
</header>

UnhandledPromiseRejectionWarning: Error: Unsupport "descendants" pseudo selector in ":descendants(article, aside, main, nav, section, [role=article], [role=complementary], [role=main], [role=navigation], [role=region])"

Cannot disable when set false from "nodeRules" or "childNodeRules"

It is a critical bug.

{
    "childNodeRules": [
        {
            "selector": "target-selector",
            "inheritance": true,
            "rules": {
                "any-rule-name": false
            }
        }
    ]
}

Add CODEOWNERS

This is a proposal.
GitHub supports CODEOWNERS

This feature makes automatically requested for review.

Proposal

Reviewing the website

See: https://next.markuplint.dev/
( "Playground" is 404 because WIP. )

The points of view:

Information
Accessibility
Usability
Performance
English

PostHTML?

Have you considered using PostHTML as HTML parser? It is well-tested and has existed for sometime, and maybe Markuplint can use it’s parser and just focus on creating linting capabilities?

Or is Markuplint’s parser more powerful and flexible that PostHTML’s one?

[feat] Can you please provide sync API with async together?

~~I'm trying to integrate this package with ESLint together, and found that I have to resolve `config`, `rules` and `locale` manually to use `verify` API.~~ I know I can follow https://github.com/markuplint/markuplint/blob/master/packages/markuplint/src/lint.ts#L64-L66 as example to get the necessary parameters quickly, but it would be better to provide a simpler API to do this job.

Maybe I should exec API instead.

const resultInfos = await exec({
  sourceCodes: sourceCode,
  names: filename,
  fix: true,
})

And there is no synchronized API provided, which is incompatible with ESLint currently.

So, I hope a synchronized API.

Thanks for your great work!

<template>
  <div v-if="bool"><span :id="uuid"></span></div>
  <div v-else><span :id="uuid"></span></div>
-------------------------^^^^ [id-duplication] error
</template>