VS Code integration of HTMLHint, an HTML linter.
License: MIT License
VSCode extension to support HTML-Hint, an HTML linter.
htmlhint and htmlhint-server foldershtmlhint and htmlhint-serverhtmlhint-servernpm run compile or npm run watch to build the server and copy it into the htmlhint folderhtmlhint
Same as #23. However, in this opportunity it is happening with last version of VSCode and HTMLHint:
I modified the Angular 2 QuickStart project to place the component markup to a HTML file and to handle the 'click' event of the H1 element. So, the app.component.html file is
<h1 (click)="helloWorld()">My First Angular 2 App</h1>
HtmlHint in VS Code shows me the following errors:
But, if I run htmlhint in the Command Prompt, I only see:
htmlhint version is 0.9.13. My extension version is 0.0.3.
Hello,
How I know specification does not recommend to change default role for semantic tags, for example <footer role='button'></footer>. Also such attributes as aria-required may have only value true or false, but now any string could be write in. It would be cool to have hints for such situations. It is possible to add some warnings or errors about ARIA?
I wish to run htmlhint for the whole project. I've found a working example for eslint:
http://shripalsoni.com/blog/configure-eslint-in-visual-studio-code/
Wich is the value to use in problemMatcher to make htmlhint work?
Actually error messages are just print to the console without being parsed.
It would be nice to have file extensions support, in order to run HTLMHint also in template files (like Freemarker, Velocity, etc).
This is probably slowing down the editor / extension process a lot.
You can return a promise, use async/await with https://www.npmjs.com/package/mz etc.
All the other linter extensions like eslint, tslint etc. do not bundle the linter with the extension, because projects can depend on specific versions of a linter (config file schemas can change, etc). If you bundle the linter, it is also impossible to update the linter if you have not released an update for the extension yet.
Please look for htmlhint in the node_modules folder in the currently opened project (relative to where .htmlhintrc is located) and if it can't be found, use a globally installed version, and if it still can't be found, print an error message.
I'm a bit confused with these options.
'tag-self-close' is useful if someone wants to check XML syntax, but it is not if someone wants to check HTML syntax. 'empty-tag-not-self-closed' is then more suitable.
Could 'empty-tag-not-self-closed' be added to vscode-htmlhint?
By the way, could you add to the vscode-htmlhint wiki a list of available options (like https://github.com/htmlhint/HTMLHint/wiki/Rules)?
This is actually a duplicate of an issue published in the official HTMLHint repository. In SVG a lot of attributes and elements are camelCase which leads htmlhint to display an error. This problem has been solved in the official HTMLHint (on May 2016) by enabling a white list of attributes and elements that can be lowercase. Here is the corresponding issue: html5+svg attributes are camelCase.
Could you update the plugin with the new code please?
Here is an information that can be useful to build a default white list:
SVG camelCase attributes
SVG camelCase elements
Would you mind adding me as a maintainer of a project. I want to add additional functionality (ignore), fix some cases (Angular support) and help people with bugs.
Would you add me as a maintainer, or would you accept pull requests?
I have my htmlhint options in vscode set as
"htmlhint.options": {
"attr-lowercase": ["*ngIf", "*ngFor", "viewBox"],
"attr-no-duplication": true,
"attr-value-double-quotes": true,
"doctype-first": false,
"id-unique": true,
"spec-char-escape": true,
"src-not-empty": true,
"style-disabled": false,
"tag-pair": true,
"tagname-lowercase": true
},I want my tags to be lowercase, but some SVG tags, such as linearGradient are falsely flagged as errors.
I would expect to be able to add an array of ignore items, like I can with attr-lowercase, as in
"tagname-lowercase": ["linearGradient"]
But this still flags an error. Is it possible to have tags as exceptions?
.vue can be treated exactly as .html.
How to ignore info and warnings ? I don't want fix the problem and i don't want see the number of those problems.
example error in line 230
or all errors about duplicate id tag
More description in the readme and a custom banner color would be nice.
VCS v. 1.38 error on starting HTMLhint.
OS: Windows 10
Per review comment here, we're scanning files in node_modules directories.
Probably need to include an option to not do this.
Can you support a setting that ignores files? I like to minify my html, so I don't want vscode to complain about the minified file.
Installed 0.6.0 on VS Code 1.35 and it does nothing, invalid HTML files are not highlighted.
From @smlombardi on January 17, 2017 17:13
| Extension | Author | Version |
|---|---|---|
| material-icon-theme | PKief | 1.2.0 |
| code-settings-sync | Shan | 2.4.2 |
| sort-lines | Tyriar | 1.1.0 |
| html-css-class-completion | Zignd | 1.0.3 |
| Bookmarks | alefragnani | 0.10.2 |
| project-manager | alefragnani | 0.13.0 |
| vscode-angular-files | alexiv | 1.3.7 |
| one-monokai | azemoh | 0.2.4 |
| vscode-icontheme-nomo-dark | be5invis | 1.2.5 |
| vscode-eslint | dbaeumer | 1.2.2 |
| githistory | donjayamanne | 0.1.5 |
| tslint | eg2 | 0.8.1 |
| vscode-great-icons | emmanuelbeziat | 1.1.38 |
| Angular2 | johnpapa | 1.0.2 |
| theme-karyfoundation-themes | karyfoundation | 10.3.0 |
| ftp-sync | lukasz-wronski | 0.3.2 |
| HTMLHint | mkaufman | 0.3.3 |
| vscode-csscomb | mrmlnc | 4.0.0 |
| vscode-postcss-sorting | mrmlnc | 2.2.0 |
| vscode-stylefmt | mrmlnc | 2.2.2 |
| Theme-1337 | ms-vscode | 0.1.2 |
| angular2-inline | natewallace | 0.0.17 |
| nonbreakingspace | smlombardi | 0.0.1 |
| vscode-icons | robertohuertasm | 7.0.1 |
| stylelint | shinnn | 0.21.2 |
| darcula-extended | smlombardi | 3.2.0 |
| theme-tesla | smlombardi | 6.0.0 |
| change-case | wmaurer | 1.0.0 |
Steps to Reproduce:
Prior to the most recent Insiders update I did not have this issue
html, head or body tags
My project has an .htmlhintrc file which says not to apply this rule:
{
"tagname-lowercase": true,
"attr-lowercase": ["viewBox", "test"],
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"style-disabled": false
}But I get the error anyway.
Copied from original issue: microsoft/vscode#18678
As in "jscs.preset", it would be nice to have support for a external .htmlhintrc file. I see that putting the file directly in project is widely recommended, but there are some scenarios in which .htmlhintrc must be apart.
is there a way to tell Visual studio code to use htmlhint.json instead of redefining the content of the htmlhint.json in VSC again?
I tried to use htmlhint for validation of hmtl templates in vuejs files.
But hmtlhint doesn`t find the erros in the html.
My .vue file looks like this:
<template> <DIV> <span>test</span> </DIV> </template>
My vscode settings look like this:
"htmlhint.documentSelector": ["html", "vue", "vue-html"],
But when i am editing an html file in the project, the html files AND the vue-templates are validated.
When i am changing .vue files to html language service it is working directly. But then i loose support for other languages (script-, style-tags instead of template) in vue files.
"files.associations": {
"*.vue": "html",
}
If you want that the VS code JSON editor provides validation and intellisense for .htmlhintrc files, you have to configure a JSON schema.
If there's already such a schema accessible via http or http, add the following to your contributes section:
"contributes": {
"jsonValidation": [{
"fileMatch": ".htmlhintrc",
"url": "http://json.schemastore.org/htmlhintrc"
}]If you want to provide one in your extension, have something like
"jsonValidation": [{
"fileMatch": ".htmlhintrc",
"url": "./schemas/htmlhintrc.schema.json"
}]Like in the title, it would be nice if Twig or Blade files can work with this
it's es module now. please upgrade
I've downloaded your extension. Now, I'd like to know how to use it.
Could you add to your ReadMe, some exposition that explains how the developer uses your extension. Does VS Code use it automatically? How do I know it's enabled??
This repo: https://github.com/yaniswang/HTMLHint has a "Get Started" section. It even mentions command line steps for running the program? Is that what we're doing here, too?
Would love to use your extension, or, maybe, I'm using it, and I don't even know it. Some clarification would be a big help. Thanks,
This extension appears to be using rootPath from the LSP. This is a deprecated property that may not work as expected in a multi-root workspace.
See this guide on implementing multi-root support: https://github.com/Microsoft/vscode/wiki/Adopting-Multi-Root-Workspace-APIs#language-client--language-server
It is not recognizing the .htmlhintrc file on the latest version (1.45.1)
I'm working on VS 2015, is possible to be available on it ?
Adding php to documentSelector option doesn't make much sense, since extension doesn't know how to ignore embedded PHP (<?php, <?, <?=, ?>, heredoc opening <<<HTML and closing \nHTML;) tags inside php files when mixing with html code, which is usual for PHP coding. That's why errors, that doesn't related to html, appears for embedded tags every time linter is running with message Special characters must be escaped.
Regex pattern for excluding php tags and its content should run before pass document to linter.
It is very important for php coding.
I hope you will fix this as soon as possible to make every programmer much happier.
Thank you very much!
Linter doesn't work for unsaved php files (and html too), when you just started typing or copy pasting code.
Linter doesn't start to check php file until any other html document is open. That's very annoying, especially when you aren't using html documents in projects at all.
OS: 10.11.6 (El Capitan).
VS: 1.29.1
It is a bit weird to have invalid HTML with a duplicate closing tag and have it reported as warning.
I dunno if I'm doing something wrong, but opening and closing html files with lint errors doesn't clear up the lint errors from the "Problems" tab.
Other linters show only the errors from currently open files in editors. This one just adds errors and you have to restart VSCode to get rid of them.
Can we get an option to tweak this behavior?
htmlhint has been recently updated with all kinds of fixes and improvements. Development is active once again now that @thedaviddias has become a maintainer.
Would be good to see this extension get all the shiny new stuff ✨
Your extension works really great :)
I have an idea to improve it a little bit. Your extension checks only the currently opened file, because that's how vscode works. Errors, warnings and issues are displayed only for all of the currently opened files.
If you want to check all the files in the project, a script can be run, that checks all the files. For example a command can be created inside the script section in a package.json file. This can be run on the command line to output all errors in the project. Vscode can also run this scripts and check its output. It uses a matcher to translate a line of output into an error, which is displayed in the Problems view.
So now the Problems view is populated with errors found in all files. If I open a file with an error, your extension kicks in and adds additional errors, usually the same errors as the errors, which are already present. From my understanding, vscode is able to merge these errors if the extension adds a source to its diagnostic messages and if an owner is configured in the problem matcher, that matches the source.
You can check the owner of an error by going to the problems view, right clicking an error, copying it, pasting it in an editor and looking at the owner property. You will see, that your extension has generated name by now.
My matcher for the compact output looks like this:
"problemMatcher": {
"owner": "",
"fileLocation": [
"relative",
"${workspaceFolder}"
],
"source": "htmlhint",
"pattern": {
"regexp": "^(.+?):\\sline\\s(\\d+),\\scol\\s(\\d+),\\s(\\w+?)\\s-\\s([^(]*\\((\\S+)\\))$",
"file": 1,
"line": 2,
"column": 3,
"severity": 4,
"message": 5,
"code": 6
}
}
This works with the Code Spell Checker extension. My guess is, that it adds its owner here: https://github.com/Jason-Rev/vscode-spell-checker/blob/56c9e68cb0057bded8016d5b9c09276074b5ecb5/server/src/validator.ts#L53 The source attribute seems to be added as owner in the problems view.
Could you be so kind to add an owner to diagnostics, so that the Problems view does not contain duplicates anymore?
Cheers,
Thomas
Hi
Is it possible to add support for new unsaved files.
We use VS Code as our editor for HTML that we then copy and paste into a CMS, so we just use a new html file but never save it.
Thanks
Nick
In the actual version we have this code:
"htmlhint.documentSelector": [
"html",
"htm"
]But as I see we can only put html documents in this configuration, we cannot put php, or erb, haml or some other markup language that combines html with something else, it would be very useful if we can integrate this functionality in a close future making the code like this:
"htmlhint.documentSelector": [
"html",
"htm",
"php",
"erb",
"haml"
]Integrate more languages to documentSelector for lint html in another markup languages
PerformanceHTMLHint0.6.0Windows_NT x64 10.0.102401.36.1
C:\Users\admin\mkaufman.HTMLHint-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Readme file ends with sentence fragment "Note that in order to have the linter apply to addi".
PerformanceHTMLHint0.6.0Windows_NT x64 10.0.102401.36.1
C:\Users\admin\mkaufman.HTMLHint-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
I installed the extension and got the following error popup: 'linter.verify is not a function'.
I found that if I changed the following line (168) in server.js (C:\Users\me.vscode\extensions\mkaufman.htmlhint-0.7.0\server\server.js) from:
const result = server.Files.resolveModule2(rootFolder, 'htmlhint', nodePath, trace).
to:
const result = server.Files.resolveModule(rootFolder, 'htmlhint').
then it worked...?!
Here's my VSCode About info:
Version: 1.45.1 (user setup)
Commit: 5763d909d5f12fe19f215cbfdd29a91c0fa9208a
Date: 2020-05-14T08:27:35.169Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.17134
should try to make minimum squiggle length of three for improved visibility.
Repro:
./test/test.html.</ul> to </li>Image:
Is the project still being maintained?
Please let us know, it's important for people that use this extension
Please could you consider adding a CHANGELOG.md so users can see what's change in each release. There is no Changelog tab in the Extension view in VS Code and there have been no 'Releases' made in GitHub so I can't see what was changed between releases.
P.S. Thank you very much for this extension - I find it very helpful.
I have a coding standard that requires putting additional element attributes on their own line and tabbed to be flush with the first attribute.
<a href="somelink"
class="some-class"
title="My Link">Link</a>
Can a rule for this be added?
Diagnostics have a source field that should be set so that users can understand the source of the error.
This helps in situations as described in this issue microsoft/vscode#22289
Get a lot of warnings while using with Angular 2+. Any chance of a capability to check whether Angular is in environment and warnings should be supressed automatically? Or some manual granular settings to do it?
Sample:
Issue Type: Performance Issue
Performance Issue
mkaufman.HTMLHint-unresponsive.cpuprofile.txt
Extension version: 0.6.0
VS Code version: Code 1.42.0 (ae08d5460b5a45169385ff3fd44208f431992451, 2020-02-06T10:51:34.058Z)
OS version: Windows_NT x64 10.0.10240
| Item | Value |
|---|---|
| CPUs | Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz (8 x 3600) |
| GPU Status | 2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off surface_control: disabled_off surface_synchronization: enabled_on video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off webgl: enabled webgl2: enabled |
| Load (avg) | undefined |
| Memory (System) | 15.87GB (10.91GB free) |
| Process Argv | |
| Screen Reader | no |
| VM | 0% |
undefined
undefined;
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.