eslint-plugin-riotjs
🤓
Overview This package contains a eslint plugin for riot.js files.
There are already pretty good plugins out there, but for work I needed
one plugin parsing the javascript outside of <script>
</script>
tags.
(In riot.js anything after the </style>
tag is considered as JavaScript)
🎉
Thanks to... Special thanks to:
- Creators of riot.js
- txchen who made the original eslint riot plugin
🤔
How does this work ( as a user) - You need to install eslint first, for this see Getting Started with eslint
- Then you need to install this plugin:
npm install --save-dev @alixfachin/eslint-plugin-riotjs
- Then in your
.eslintrc
config (.js
file, or.json
, oryaml
) add the plugin in the plugin section. For example, with a.eslintrc.js
file, you need to add:
module.exports = {
...
// some stuff
// here is the part you need to add:
"plugins": [
"eslint-plugin-riotjs",
],
}
👨💻
How does this work (as a code) The general idea
-
The plugin contains a
processor
, which must have two methods:-
preprocess
: which reads a source file and extracts the javascript which should be read, potentially in multiple blocks -
postprocess
: which is given a list of errors found byeslint
and which should correctly re-attribute them (right line number/column) with the original file scope.
-
-
For the
preprocess
, we use a simple HTML parser, and according to tag openings/closing we extract corresponding JavaScript source to be linted. -
The official documentation for es-lint plugins is at the following link: https://eslint.org/docs/developer-guide/working-with-plugins
Some detailed explanations 👨🏻🏫
-
The
extract.js
script returns an array of "codeBlock" objects, which store the JS code (codeBlock.source
) and other informations (start and end line, etc...) -
The pre-processor will concatenate all the
source
properties, but keep the other information afterwards to reconstitute the proper original number -
One issue was that we were using a lot of HTML strings into our JS code, which confuses the hell out of the HTML parser.
const message = '<p>This is a paragraph</p>';
So I had to add a routine during the pre-processor which adds the <script> ... </script>
tags around the JS bit at the bottom.
(And then remove the corresponding offset in line number to make as if the <script>
was never added).
😎
How to Contribute This plugin is my first! So I guess there are tons of stuff wrongs with it and ways to make it better. (And some hacky stuff because I'd prefer taking a shortcut sometimes). I am not sure if I will have the time to take care of this - so if I don't reply too fast feel free to fork the project and tweak it to fit your own needs!