opened
muuvmuuv
username_0
<!-- Thank you for submitting a pull request! -->

**Summary**

This PR fixes #8110 where a `div` was missing and adds linter for HTML and CSS (as well as CSS in HTML)

This change was needed in favour of beautified exported reports where e.g. prettier printed an error because of that missing closing tag.

The linter where needed to prevent future errors like this and add consistence in styling CSS and HTML. We should now discuss how we want the linter to be configured, I added some defaults I _personally_ prefer the most and use in daily basis.

**Notes**

After I tested both linter's I took over the files and fixed those manually and parts automatically via `--fix`-flags. I don't think this should have broken something but it might be good someone else is looking over it and the tests, to see if everything is as before.

I was forced to add some `.vscode`-settings because my auto formatter `prettier` tried to format some files to heavy.

Something I would add to the end we could consider:

- add a formatter, like [prettier](https://github.com/prettier/prettier-vscode/), to make it easier while developing
- add a spell-checker like [vscode-spell-checker](https://github.com/Jason-Rev/vscode-spell-checker), to prevent people from writing wrong typo (I have see some, see: lighthouse-core/report/html/report-styles.css:73:14)

**Tests**

I don't have much experience with tests and don't know if all have passed before. Here is my result:

```bash
Test Suites: 7 failed, 198 passed, 205 total
Tests:       52 failed, 5 skipped, 1348 passed, 1405 total
Snapshots:   31 passed, 31 total
Time:        25.598s, estimated 26s
```

**Added packages**

- [html-linter](https://www.npmjs.com/package/html-linter) (this seems to be maintained)
- [stylelint](https://github.com/stylelint/stylelint)
- [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) (which provides [Google's CSS Style Guide]())

**Related Issues/PR's**

#8110
core: Added missing div in template and added html, css and css in html linters
issue
created
patrickhulce
username_1
Thank you so much for the fast contribution @username_0! 👏 👏 💯 

Would you mind splitting out the one `</div>` fix into a separate PR so we can get that in quickly while we try to sort out the linter pieces? :)

Ideally, I think we could land the linter on warning or a small subset of the codebase and land the rest of the fixes incrementally, WDYT? We're going to be in the middle of updating our styles and HTML for v5 so a PR that's too big will likely be frustrating to try and rebase all the time.
comment
created
Hoten
username_2
@paulirish and I are in the middle of some large report changes. We want to wait until after that before attempting to merge this in.
comment
created
brendankenny
username_3
that should be fine with the report work. Agreed with others that we should discuss in an issue before adding additional linters.
comment
created
muuvmuuv
username_0
@username_1 yeah that makes sense 🤦‍♂️, sorry. How to I roll-back without deleting the PR? Not very family-related with Git. Do I need to great a new branch on master of lighthouse?
comment
created
patrickhulce
username_1
Given that the real fix is so small, I think a new branch and PR is probably the easiest way to go :)

Appreciate the effort here nonetheless @username_0 we'll want this to happen eventually! Just after we take care of some urgent report changes first 😃
comment