[HTML] CRDOM200 - Creating linter + autoplay rule

[MP-Aubay]

The idea is to create a linter to check HTML files, using the rule to avoir autoplay parameter on

Rule proposal here : https://github.com/green-code-initiative/ecoCode-challenge/issues/49

First checking if it is possible to send eslint report for HTML files ton Sonar.

(Description will be update)

[Adouni]

https://developer.mozilla.org/fr/docs/Web/HTML/Element/bgsound This tag is Obsolete

[utarwyn]

Hello, thank you for this idea! We will need a new linter for HTML files, for sure :+1: This repository is intendeed to have a couple of linters for multiple languages, so he should fit well.

As ESLint is a static code analysis tool for identifying smells in JavaScript code (and TypeScript thanks to popular typescript-eslint), my idea is to use a more standard tool for HTML code. I know these tools which are popular:

• htmllint
• markuplint

But it raises the question of creating custom rules and importing into SonarQube, I think we can try a small proof of concept. What do you think of that? We can discuss it if you want 😄

ESLint supports HTML rules through plugin html-eslint, but this not official and the project is still in an alpha stage, so I don't think we should use it as a reference right now.

[MP-Aubay]

Hi @utarwyn,

I was tagging you in Slack about it :)

So at the end of the Hackaton :

• I started with eslint and the html-eslint plugin, added the new rule in the existing ecocode/eslint-plugin
• Use the existing javascript test project , do some configuration and add an HTML file with corresponding issue
• Create a html-plugin in ecoCode to see the issue in Sonarqube (similar to javascript-plugin)

I successfuly see my new rule in Sonarqube with all of the above.

I could check the two other linter to see what can be done 👍

[dedece35]

Hi @utarwyn and @MP-Aubay, one question about this html-linter : is it mandatory to have a linter for HTML in SonarQube instead of a standard way like Java, python and PHP ?

[MP-Aubay]

Hi @dedece35 ,

I was wondering the same thing since the hackaton, in the Sonarqube documentation it seems not possible to use java plugin, and the doc recommends to use Generic issue reports :

Importing generic issue reports generated by an independently run tool

But on some post in the Sonarqube community forum, some say it could be possible ... I will try a Proof of Concept on this, because if it works it would be a better solution (rules will be visible on Sonarqube).

I take a look at linters link by @utarwyn, I have a preference for markuplint as the documentation seems more detailed about creating custom rules.

[utarwyn]

Hello! Even if SonarSource does not provide an integrated AST to analyze HTML, it is possible to use our own AST because HTML parsing is quite "simple" (there are not many different nodes — see here). But it will require us to maintain code that shouldn’t be in our scope. Although I don’t think this is a good solution, the POC can give us additional arguments to move towards one solution

[MP-Aubay]

Hi @dedece35 @utarwyn ,

Good news I manage to create a html plugin (in Java) with the autoplay rule.

The rule appears correctly in Sonar under HTML language and with ecocode & eco-desing tag. When scanning a HTML file, an issue is raised correctly.

No need to create our own AST, I add the sonar-html-plugin as dependency, and just have to create custom Sensor (based on HtmlSensor) to add custom rules.

I will soon push POC code on my ecoCode fork to share with you, I will not create a PR as it should be a new repository on green-code-initiative (regarding ecoCode plugin split)

[utarwyn]

Hello, so you've managed to do better than the documentation suggests? That's great news, well done! :+1: Do you know if that POC also works in JSX/vue/Angular template code?

[MP-Aubay]

Hello,

You can see actual code here : https://github.com/MP-Aubay/ecoCode/tree/feature/html-plugin

@utarwyn I had to dig on the html plugin code to understand how it works, it seems to work well.

It works on HTML files, and it should (not tested yet) works on php, jsp and vue file for what I see in the code. I don't think it will work for JSX, Angular template (TS file) or HTML in JS files, as they don't seem scanned.

[utarwyn]

Awesome! I will check your branch. For a first iteration, it could do the job! But as a majority of websites use JS frameworks nowadays, maybe we should consider an alternative solution too :+1: It's nice to have the Vue files

[dedece35]

HI @MP-Aubay, we has decided in core-team to create a new repository for each language/platform. do you want me to create the new ecocode-html plugin repository with common settings ?

[utarwyn]

Hello, maybe we should talk about the solution before the technical implementation? Maybe at the next meeting? To be sure how the HTML plugin will work. I am interested about it because I think he may be linked to the Javascript one.

[MP-Aubay]

Hello @dedece35 & @utarwyn ,

We could talk about it at the next meeting this friday.

We should also talk about the test project, should this be a dumb repository with html, jsp, php, vue, ... files or should we use specific project for each file type ?

In theory Sonarqube just do static analysis so dumb repository would be enough, but maybe for a better human understanding specific project should be use.

[dedece35]

Hi @MP-Aubay @utarwyn I think we should have a specific technical meeting to talk about it because friday meetings, as we saw, are too short for technical discussions. what do you think to have a meeting between us during the week of monday 22th ? give me your ideas about it, please ?

[MP-Aubay]

Hi @dedece35 @utarwyn ,

Sorry for late response, I could not attend the next friday meeting, but I'm available today before 4pm and tomorrow morning, or next week if you want.

[utarwyn]

Repository for the HTML plugin has been created here: https://github.com/green-code-initiative/ecoCode-html