feat: Add link to rule at error; show rule description when mouseovered

Author: finom

packages/backend/api/init.js

@@ -1,7 +1,9 @@
-const loadRules = require('eslint/lib/load-rules');
+const { Linter } = require('eslint');
 const reactPlugin = require('eslint-plugin-react');
 const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
 
+const eslintRules = new Linter().getRules();
+
 const airbnb = require('eslint-config-airbnb');
 const google = require('eslint-config-google');
 const standard = require('eslint-config-standard');
@@ -30,10 +32,15 @@ const configs = {
     eslint: getRules(eslint)
 };
 
+const getRuleInfo = ([name, value]) => ({
+    name,
+    docs: value.meta.docs
+});
+
 const rulesList = {
-    eslint: Object.keys(loadRules()),
-    react: Object.keys(reactPlugin.rules),
-    'jsx-a11y': Object.keys(jsxA11yPlugin.rules)
+    eslint: [...eslintRules].map(getRuleInfo),
+    react: Object.entries(reactPlugin.rules).map(getRuleInfo),
+    'jsx-a11y': Object.entries(jsxA11yPlugin.rules).map(getRuleInfo)
 };
 
 module.exports = (req, res) => {

packages/frontend/Messages.js

@@ -4,7 +4,7 @@ import bindNode from 'matreshka/bindnode';
 import display from 'matreshka/binders/display';
 
 export default class Messages extends MatreshkaArray {
-    itemRenderer = '<pre class="result-item">{{ line }}:{{ column }} {{ type }} {{ message }}</pre>';
+    itemRenderer = '<pre class="result-item">{{ line }}:{{ column }} {{ type }} {{ message }} (<a href="{{ link }}" target="_blank">{{ ruleId }}</a>) </pre>';
     constructor(data, parent) {
         super()
             .bindNode({
@@ -17,6 +17,22 @@ export default class Messages extends MatreshkaArray {
             })
             .on('*@render', ({ self }) => {
                 calc(self, 'type', 'severity', severity => (severity === 1 ? 'warning' : 'error'));
+                calc(self, 'link', 'ruleId', (ruleId) => {
+                    const [groupName, ruleName] = ruleId.split('/');
+                    if (!ruleName) {
+                        return `http://eslint.org/docs/rules/${groupName}`;
+                    }
+
+                    if (groupName === 'react') {
+                        return `https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/${ruleName}.md`;
+                    }
+
+                    if (groupName === 'jsx-a11y') {
+                        return `https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/${ruleName}.md`;
+                    }
+
+                    return null;
+                });
                 bindNode(self, 'type', ':sandbox', {
                     setValue(type, { node }) {
                         node.classList.add(`result-${type}`);

packages/frontend/Rules/Rule.js

@@ -1,8 +1,16 @@
 import MatreshkaObject from 'matreshka/object';
 
 export default class Rule extends MatreshkaObject {
-    renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4 col-sm-6 col-xs-12 form-check-label">
-        <input type="checkbox" checked="{{ isOn }}"> {{ name }}
+    renderer = ({ docs, name }) => `<label
+        title="${docs.description || ''}"
+        class="col-md-4 col-sm-6 col-xs-12 form-check-label"
+    >
+        <input
+            title="{{ dynamicValueJSON }}"
+            type="checkbox"
+            checked="{{ isOn }}"
+        >
+        ${name}
     </label>`;
     constructor(data) {
         super(data)

packages/frontend/Rules/index.js

@@ -1,6 +1,5 @@
 import MatreshkaArray from 'matreshka/array';
 import RulesGroup from './RulesGroup';
-// import plugins from '../lint/plugins';
 
 export default class Rules extends MatreshkaArray {
     Model = RulesGroup;
@@ -14,36 +13,9 @@ export default class Rules extends MatreshkaArray {
                     this.trigger('rulechange');
                 }
             });
-        // .render()
-        // .recreate(plugins)
-        // .update(data);
     }
 
-    /* async render() {
-        const { payload } = await ( await fetch('/api/init') ).json();
-
-        this.recreate(Object.entries(payload).map(([pluginName, value]) => ({
-            pluginName,
-            rules: value.map(name => ({ name, value: 'off' }))
-        })))
-    }*/
-
     update(config) {
-        /* const groups = {};
-        for(const [fullRuleName, value] of Object.entries(config)) {
-            let [groupName, ruleName] = fullRuleName.split('/');
-
-            if(!ruleName) {
-                groupName = 'eslint';
-                ruleName = fullRuleName;
-            }
-
-            const group = groups[groupName] || {};
-            groups[groupName] = group;
-
-            group[ruleName] = value;
-        }*/
-
         for (const group of this) {
             for (const rule of group) {
                 const fullRuleName = group.getFullRuleName(rule.name);
@@ -52,22 +24,6 @@ export default class Rules extends MatreshkaArray {
         }
 
         return this;
-
-        // console.log(groups)
-        /* if (!rules) return this;
-
-        for (const group of this) {
-            for (const rule of group) {
-                const fullRuleName = group.getFullRuleName(rule.ruleName, group.name);
-                const recommended = (this.useRecommended
-                    && group.plugin.configs
-                    && group.plugin.configs.recommended
-                    && group.plugin.configs.recommended.rules)
-                    || {};
-
-                rule.value = rules[fullRuleName] || recommended[fullRuleName] || 'off';
-            }
-        }*/
     }
 
     toJSON() {

packages/frontend/css/style.css

@@ -983,6 +983,11 @@ button[type="reset"]:active {}
     border: 1px solid transparent;
     margin: 15px 0;
     padding: 0.8em;
+    white-space: normal;
+}
+
+.result-item a {
+    white-space: nowrap;
 }
 
 .result-item:empty {

packages/frontend/index.js

@@ -62,7 +62,7 @@ module.exports = new class App extends MatreshkaObject {
 
         this.rules.recreate(Object.entries(rulesList).map(([pluginName, value]) => ({
             pluginName,
-            rules: value.map(name => ({ name, value: 'off' }))
+            rules: value.map(({ name, docs }) => ({ name, docs, value: 'off' }))
         })));
     }