linthtml/vscode-linthtml

A vscode extension that bring LintHTML errors in vscode

LintHTML

The HTML5 linter and validator you need.

LintHTML is a fork of htmllint featuring a built-in CLI and multiple bug fixes and improvements. The migration from htmllint to LintHTML is easy, as all htmllint's rules can be used with LintHTML – just follow this simple guide.

Installation and Usage

You can install LintHTML either locally or globally. For most cases we recommend the former, which can be achieved this way with npm:

npm install @linthtml/linthtml --save-dev

You should then init a configuration file:

npx linthtml --init

This will generate a file .linthtmlrc in the current directory.

After that, you can run LintHTML on any file or directory like this:

npx linthtml 'yourfile.html'
npx linthtml 'src/**/*.html'

If you want to read about alternative installation and usage methods, have a look to the installation and usage page in the documentation.

Migrate from htmllint

To migrate from htmllint to LintHTML, first remove all the htmllint-related packages you were using:

npm uninstall htmllint htmllint-cli

Then rename the file .htmlintrc to .linthtmlrc. You might want to remove the rules indent-delta and indent-width-cont from there in case you were using them since LintHTML's indent style checker deals with those aspects out of the box.

Finally, install LintHTML:

npm install @linthtml/linthtml --save-dev

Rules

The list of current rules and deprecations can be found in here.

Global Configuration

By default, LintHTML will look for a JSON, YAML, or JavaScript file named .linthtmlrc.* or a linthtmlConfig section in package.json. Anyway, you can specify a custom configuration file using the --config option when running LintHTML in the command line. See our documentation about configuration to see how to configure rules, use custom parser, plugins...

Inline Configuration

Sometimes it is necessary to disable a rule or tweak the configuration for a specific line, block or HTML file. This might be the case, for example, for an inline SVG block of code. This can be achieved by using inline configurations.

Inline configurations are HTML comments beginning with the keyword linthtml-XXX.

XXX can be replaced with the following values, which are called instructions. Instructions have different effects:

• configure : change a rule configuration for the HTML nodes that follow
• enable : activate a rule which was has deactivated previously
• disable : disable a rule

Configure instruction

Multiple rules can be set in a single inline configuration comment. Values must be surrounded with double/single quotes if they contain spaces, and must be either a valid value for the rule (encoded in pretty-much-JSON).

Some examples:

• change the tag-bans rule value

<!-- linthtml-configure tag-bans="['p','style']" -->
<!-- linthtml-configure tag-bans=['p','style'] -->

• turn off the attr-bans rule

<!-- linthtml-configure attr-bans="false" -->
<!-- linthtml-configure attr-bans=false -->
<!-- linthtml-configure attr-bans="off" -->

We recommend using the enable/disable instructions instead 😉

• turn on the attr-bans rule

<!-- linthtml-configure attr-bans="true" -->
<!-- linthtml-configure attr-bans=true -->

⚠️ you can only turn on rules that have been deactivated by an inline config We recommend using the enable/disable instructions instead 😉

• restore the previous value of the tag-bans rule ⚠️ works only with the legacy config

<!-- linthtml-configure tag-bans="$previous" -->

It's worth noting that inline configurations only affect the file they're on, so if they are not explicitly reversed with the $previous value, they will just apply until the end of the file.

Ecosystem

Apart from the built-in CLI, you might want to use some of the following tools to integrate LintHTML in different scenarios:

• vscode-linthtml: an extension for the VSCode IDE
• gulp-linthtml: a gulp interface for LintHTML

🚧 Coming soon:

• linthtml-loader: LintHTML loader for webpack
• broccoli-linthtml: Integrates HTML linting with LintHTML as part of your Broccoli build pipeline

Contributing

Contributions are welcome, please make sure to use the proper GitHub tag on your issue/PR.

• cli: anything related to LintHTML's CLI
• rule: anything related to the rules (bugs, improvements, docs, new rules...)
• core: anything related to LintHTML's core (file parsing, plugin system...)

vscode-linthtml's Issues

Activate for any language extension adjacent to HTML

Linthtml is really cool! However, I wish I could specify the file extensions to check when using the vscode linter. I can run yarn linthtml src/**/*.{html,erb,liquid,md} at the command line no problem, but in vscode I only see the errors visually if my file is set to the HTML language with an .html extension. Any thoughts?

i installed Linthtml by yarn global

i installed Linthtml by yarn global
( so my project dont use package.json of yarn or npm )

yarn global add @linthtml/linthtml

> linthtml --init

so .linthtmlrc file is not appied at this project

Broken links in README

From the Marketplace page:

linthtml: Cannot read property 'map' of null

Expected Behavior

linthtml to successfully lint a .html file when opening a single file (not a directory).

Actual Behavior

The linter doesn't run and returns linthtml: Cannot read property 'map' of null

Steps to Reproduce the Problem

1. Install and enable the plugin
2. Open a single file in VS Code either right-clicking or using code example.html
3. The linter attempts to run, but fails with the error

Specifications

• Plugin Version: 0.2.1
• VS Code Version: 1.38.1
• Platform: OSX

Additional Notes

As far as I can tell, this is caused by Line 160 in server.ts.

const workspaces = await connection.workspace.getWorkspaceFolders(); is null when opening a single file and no additional folders/files are open.

I can submit a PR eventually if you cant get to it anytime soon.

Feature Request: extension setting to ignore certain paths or files

I am always using the extension xyz.local-history in vscode, which is creatifg a local .history folder on the repo root.
Anytime that a file is edited and changed, a copy of it will be stored in this folder.
This offers the possibility to compare the current file which is edited with an older version of it.
Issue is that linthtml will lint both files generating an error also for the older version, so that both the repo folder and the .history folder will be highlighted in red even closing all the files

I think we would need the option to set in the extension settings an array of paths / files to ignore from being checked, so that in my case above I would have the linting errors only on the current version of the file and not on its older versions.

See discussion microsoft/vscode#22289 (comment)

the path to the .linthtmlrc

Can someone please explain to me how to include (the path to) the .linthtmlrc.

Is my .linthtmlrc even correct?
If not, please give me a short instruction how to create them correctly.

Many thanks in advance

maxerr: false
raw-ignore-regex: false
attr-bans:
  - align
  - background
  - bgcolor
  - border
  - frameborder
  - longdesc
  - marginwidth
  - marginheight
  - scrolling
  - style
  - width
indent-delta: false
indent-style: nonmixed
indent-width: 4
indent-width-cont: false
spec-char-escape: true
text-ignore-regex: false
tag-bans:
  - style
  - b
  - i
tag-close: true
tag-name-lowercase: true
tag-name-match: true
tag-self-close: false
doctype-first: false
doctype-html5: false
attr-name-style: dash
attr-name-ignore-regex: false
attr-no-dup: true
attr-no-unsafe-char: true
attr-order: false
attr-quote-style: double
attr-req-value: true
attr-new-line: false
attr-validate: true
id-no-dup: true
id-class-no-ad: true
id-class-style: underscore
class-no-dup: true
class-style: false
id-class-ignore-regex: false
img-req-alt: true
img-req-src: true
html-valid-content-model: true
head-valid-content-model: true
href-style: false
link-req-noopener: true
label-req-for: true
line-end-style: lf
line-no-trailing-whitespace: true
line-max-len: false
line-max-len-ignore-regex: false
head-req-title: true
title-no-dup: true
title-max-len: 60
html-req-lang: false
lang-style: case
fig-req-figcaption: false
focusable-tabindex-style: false
input-radio-req-name: true
input-req-label: false
table-req-caption: false
table-req-header: false
tag-req-attr: false

linthtml: Cannot destructure property 'linter' of 'lintHTML.create_linters_for_files(...)[0]' as it is undefined.

Title is the only information I can gather.
linthtml: Cannot destructure property 'linter' of 'lintHTML.create_linters_for_files(...)[0]' as it is undefined.

Using version 0.6.0.

Vscode information:

Version: 1.53.0 (system setup)
Electron: 11.2.1
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Windows_NT x64 10.0.17763

Last working version with my config was 0.4.0

Below is my full .linthtmlrc:

{
  "attr-bans": [
    "align",
    "background",
    "bgcolor",
    "border",
    "color",
    "frameborder",
    "longdesc",
    "marginheight",
    "marginwidth",
    "scrolling",
    "style",
    "width"
  ],
  "attr-name-style": false,
  "attr-new-line": 1,
  "attr-no-dup": true,
  "attr-no-unsafe-char": true,
  "attr-order": [
    "accept",
    "accept-charset",
    "accesskey",
    "action",
    "alt",
    "async",
    "autocomplete",
    "autofocus",
    "autoplay",
    "charset",
    "checked",
    "cite",
    "class",
    "cols",
    "colspan",
    "content",
    "contenteditable",
    "controls",
    "coords",
    "data",
    "datetime",
    "default",
    "defer",
    "dir",
    "dirname",
    "disabled",
    "download",
    "draggable",
    "dropzone",
    "enctype",
    "for",
    "form",
    "formaction",
    "headers",
    "height",
    "hidden",
    "high",
    "href",
    "hreflang",
    "http-equiv",
    "id",
    "ismap",
    "kind",
    "label",
    "lang",
    "list",
    "loop",
    "low",
    "max",
    "maxlength",
    "media",
    "method",
    "min",
    "multiple",
    "muted",
    "name",
    "novalidate",
    "open",
    "optimum",
    "pattern",
    "placeholder",
    "poster",
    "preload",
    "readonly",
    "rel",
    "required",
    "reversed",
    "rows",
    "rowspan",
    "sandbox",
    "scope",
    "selected",
    "shape",
    "size",
    "sizes",
    "span",
    "spellcheck",
    "src",
    "srcdoc",
    "srclang",
    "srcset",
    "start",
    "step",
    "style",
    "tabindex",
    "target",
    "title",
    "translate",
    "type",
    "usemap",
    "value",
    "width",
    "wrap"
  ],
  "attr-quote-style": "double",
  "attr-req-value": false,
  "attr-validate": true,
  "class-no-dup": true,
  "class-style": "dash",
  "doctype-first": false,
  "doctype-html5": true,
  "fig-req-figcaption": true,
  "focusable-tabindex-style": true,
  "head-req-title": true,
  "head-valid-content-model": true,
  "href-style": false,
  "html-valid-content-model": true,
  "id-class-ignore-regex": false,
  "id-class-no-ad": false,
  "id-class-style": false,
  "id-no-dup": true,
  "img-req-alt": true,
  "img-req-src": true,
  "indent-style": "spaces",
  "indent-width": 2,
  "input-radio-req-name": true,
  "input-req-label": true,
  "label-req-for": true,
  "lang-style": false,
  "line-end-style": false,
  "line-max-len": false,
  "line-no-trailing-whitespace": true,
  "link-req-noopener": false,
  "spec-char-escape": false,
  "table-req-caption": true,
  "tag-bans": [
    "acronym",
    "applet",
    "basefont",
    "bgsound",
    "big",
    "blink",
    "center",
    "dir",
    "embed",
    "font",
    "frame",
    "frameset",
    "isindex",
    "listing",
    "marquee",
    "menu",
    "nobr",
    "noembed",
    "plaintext",
    "s",
    "spacer",
    "strike",
    "tt",
    "u",
    "wbr",
    "xmp"
  ],
  "tag-close": true,
  "tag-name-lowercase": true,
  "tag-name-match": true,
  "tag-req-attr": false,
  "tag-self-close": "never",
  "title-max-len": false
}

"warning"/"error" Seems to be not responding

I tried playing around the rules with warning but seems it always turns out to be error. Is there a way I could configure linthtmlrc.js so as to show the rules as warning and not error as always.
Ver : 0.4.1
Using VS-Code IDE and linthtml extension: kamikillerto.vscode-linthtml

rules: {
            'img-req-alt': [ 'warning' ],
            'img-req-alt': 'warning',
            'tag-req-attr': [
                true,
                {
                    img: [ { name: 'src' }, { name: 'alt' } ],
                    iframe: [ { name: 'title' } ],
                    button: [ { name: 'id' } ]
                }
            ],
            'line-end-style': [
                'warning',
                'lf'
            ]
        }

I reported issue on linthtml and got redirected here.
linthtml/linthtml#198 (comment)

Any workaround would also be helpful

linthtml: Cannot find global or local @linthtml/linthtml package

After install vscode-linthtml (my vscode is 1.83), I got the message linthtml: Cannot find global or local @linthtml/linthtml package.
Because I cannot connect to Internet (I copy the extension to my computer offline), is it the root cause?
Will linthtml get any package from Internet?

path should be a `path.relative()`d string, but got "…"

My colleague (win) gets the Error

path should be a `path.relative()`d string, but got "d:/[some project path]/[some file name].html"
Source: LintHTML (Extension)

For me (mac) everything works fine in the same project.

Probably related:
I saw the same error in the linthtml commandline and fixed it by changing the glob of files that should be linted.
Since vscode-linthtml has no such setting, I don’t know how to carry on with this issue.

Support for @linthtml/linthtml 0.9.0

When I try to update @linthtml/linthtml to the newest version I get this error:
linthtml: lintHTML is not a function. Check your config file ...

However, nothing is wrong with the config file, since it works for @linthtml/linthtml version 0.8.0.