chore: format and lint code (#19)

* chore: format and lint code * chore: lint files
eslint · Apr 20, 2022 · 50a9bd3 · 50a9bd3
1 parent 16d3514
commit 50a9bd3
Show file tree

Hide file tree

Showing 20 changed files with 6,342 additions and 1,991 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+_site
+src/assets/js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,66 @@
+"use strict";
+
+module.exports = {
+    root: true,
+    extends: ["eslint"],
+    parserOptions: {
+        ecmaVersion: 2022
+    },
+    rules: {
+
+        // Disable eslint-plugin-node rules from eslint-config-eslint
+        "no-process-exit": "off",
+        "func-style": "off",
+        "node/no-deprecated-api": "off",
+        "node/no-extraneous-require": "off",
+        "node/no-missing-require": "off",
+        "node/no-unpublished-bin": "off",
+        "node/no-unpublished-require": "off",
+        "node/no-unsupported-features/es-builtins": "off",
+        "node/no-unsupported-features/es-syntax": "off",
+        "node/no-unsupported-features/node-builtins": "off",
+        "node/process-exit-as-throw": "off",
+        "node/shebang": "off",
+        "node/no-extraneous-import": "off",
+        "node/no-missing-import": "off",
+        "node/no-unpublished-import": "off",
+
+        // Disable rules that the codebase doesn't currently follow.
+        "jsdoc/require-jsdoc": "off",
+        "jsdoc/require-returns": "off",
+        "jsdoc/require-param-description": "off",
+        "jsdoc/require-param-type": "off"
+    },
+    overrides: [
+        {
+            files: ["src/playground/**/*.{js,jsx}"],
+            plugins: ["react", "jsx-a11y"],
+            extends: ["plugin:react/recommended", "plugin:jsx-a11y/recommended"],
+            parserOptions: {
+                sourceType: "module",
+                ecmaFeatures: {
+                    jsx: true
+                }
+            },
+            env: {
+                browser: true,
+                es6: true,
+                node: false
+            },
+            settings: {
+                react: {
+                    version: "16.8.6"
+                }
+            },
+            rules: {
+                "react/jsx-no-target-blank": "error",
+
+                // Disable rules that the codebase doesn't currently follow.
+                // It might be a good idea to enable these in the future.
+                "jsx-a11y/no-onchange": "off",
+                "react/prop-types": "off",
+                "jsdoc/require-jsdoc": "off"
+            }
+        }
+    ]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
         "prestart": "npm run build",
         "start": "node tools/dev-server.js",
         "build": "npm-run-all install:playground build:sass build:eleventy build:webpack images",
+        "lint": "eslint --ext=.js,.jsx .",
+        "fix": "npm run lint -- --fix",
         "postinstall": "npm run install:playground"
     },
     "devDependencies": {
@@ -32,6 +34,12 @@
         "cross-env": "^7.0.3",
         "css-loader": "^6.7.1",
         "dom-parser": "^0.1.6",
+        "eslint": "^8.13.0",
+        "eslint-config-eslint": "^7.0.0",
+        "eslint-plugin-jsdoc": "^39.2.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-react": "^7.29.4",
         "express": "^4.17.3",
         "imagemin": "^8.0.1",
         "imagemin-cli": "^7.0.0",

diff --git a/src/_data/helpers.js b/src/_data/helpers.js
@@ -1,14 +1,16 @@
+"use strict";
+
 module.exports = {
+
     /**
      * Returns some attributes based on whether the link is active or
      * a parent of an active item
-     *
-     * @param {String} itemUrl is the link in question
-     * @param {String} pageUrl is the page context
-     * @returns {String} is the attributes or empty
+     * @param {string} itemUrl is the link in question
+     * @param {string} pageUrl is the page context
+     * @returns {string} is the attributes or empty
      */
-    getLinkActiveState: function(itemUrl, pageUrl) {
-        let response = '';
+    getLinkActiveState(itemUrl, pageUrl) {
+        let response = "";
 
         if (itemUrl === pageUrl) {
             response = ' aria-current="page" ';
@@ -20,10 +22,13 @@ module.exports = {
 
         return response;
     },
-    excludeThis: function(arr, pageUrl) {
-        var newArray = [];
+    excludeThis(arr, pageUrl) {
+        const newArray = [];
+
         arr.forEach(item => {
-            if(item.url !== pageUrl) newArray.push(item);
+            if (item.url !== pageUrl) {
+                newArray.push(item);
+            }
         });
         return newArray;
     }

diff --git a/src/assets/scss/components/alert.scss b/src/assets/scss/components/alert.scss
@@ -108,7 +108,7 @@
 .alert__line-number {
     font-weight: 500;
     margin-bottom: .25rem;
-
+    border-bottom: 1px solid currentColor;
     .alert--error & {
         color: var(--color-rose-700);
 

diff --git a/src/playground/App.js b/src/playground/App.js
@@ -37,8 +37,7 @@ const hasLocalStorage = () => {
 const App = () => {
     const { text: storedText, options: storedOptions } = JSON.parse(window.localStorage.getItem("linterDemoState") || "{}");
     const { text: urlText, options: urlOptions } = getUrlState();
-
-    const [text, setText] = useState(urlText || storedText || `/* eslint quotes: ["error", "double"] */\nconst a = 'b';`);
+    const [text, setText] = useState(urlText || storedText || "/* eslint quotes: [\"error\", \"double\"] */\nconst a = 'b';");
     const [fix, setFix] = useState(false);
     const [options, setOptions] = useState(
         urlOptions || storedOptions || {
@@ -80,7 +79,7 @@ const App = () => {
                 error
             };
         }
-    }
+    };
 
     const storeState = ({ newText, newOptions }) => {
         const serializedState = JSON.stringify({ text: newText || text, options: newOptions || options });
@@ -90,23 +89,22 @@ const App = () => {
         }
 
         window.location.hash = Unicode.encodeToBase64(serializedState);
-    }
+    };
 
     const { messages, output, fatalMessage } = lint();
     const isInvalidAutofix = fatalMessage && text !== output;
     const sourceCode = linter.getSourceCode();
 
-    const onFix = (message) => {
-        const { fix } = message;
-
-        if (fix && message.fix) {
+    const onFix = message => {
+        if (message.fix) {
             const { output: fixedCode } = SourceCodeFixer.applyFixes(text, [message], true);
+
             setText(fixedCode);
-            storeState({ newText: fixedCode});
+            storeState({ newText: fixedCode });
         }
-    }
+    };
 
-    const updateOptions = (newOptions) => {
+    const updateOptions = newOptions => {
         setOptions(newOptions);
         storeState({ newOptions });
     };
@@ -138,15 +136,16 @@ const App = () => {
             </div>
 
             <div className="playground__main">
-                <main className="playground__editor" id="main" tabIndex="0" aria-label="Editor">
+                <main className="playground__editor" id="main" aria-label="Editor">
                     <CodeEditor
+                        tabIndex="0"
                         codeValue={text}
                         errors={messages}
                         eslintOptions={options}
-                        onUpdate={(value) => {
+                        onUpdate={value => {
                             setFix(false);
                             setText(value);
-                            storeState({ newText: value});
+                            storeState({ newText: value });
                         }}
                         getIndexFromLoc={sourceCode && sourceCode.getIndexFromLoc.bind(sourceCode)}
                     />
@@ -159,28 +158,28 @@ const App = () => {
                     {
                         isInvalidAutofix && <Alert type="error" text={`Invalid autofix! ${fatalMessage.message}`} />
                     }
-                    {messages.length > 0 && messages.map((message) => (
-                        message.suggestions ?  (
-                            <Alert 
+                    {messages.length > 0 && messages.map(message => (
+                        message.suggestions ? (
+                            <Alert
                                 key={`${message.ruleId}-${message.line}-${message.column}`}
-                                type={message.severity === 2 ? 'error' : 'warning'}
+                                type={message.severity === 2 ? "error" : "warning"}
                                 message={message}
                                 suggestions={message.suggestions}
                                 onFix={onFix}
                             />
                         ) : (
-                                <Alert
-                                    key={`${message.ruleId}-${message.line}-${message.column}`}
-                                    type={message.severity === 2 ? 'error' : 'warning'}
-                                    message={message}
-                                    onFix={onFix}
-                                />
+                            <Alert
+                                key={`${message.ruleId}-${message.line}-${message.column}`}
+                                type={message.severity === 2 ? "error" : "warning"}
+                                message={message}
+                                onFix={onFix}
+                            />
                         )
                     ))}
                 </section>
             </div>
         </div>
-    )
+    );
 };
 
 export default App;
diff --git a/src/playground/components/Alert.js b/src/playground/components/Alert.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Alert({ type, text, message, onFix, ...props}) {
+export default function Alert({ type, text, message, onFix }) {
     if (!message) {
         return (
             <article aria-roledescription={type} className={`alert alert--${type}`}>
@@ -28,17 +28,17 @@ export default function Alert({ type, text, message, onFix, ...props}) {
                         <path d="M9.49999 6.66667V10M9.49999 13.3333H9.50832M17.8333 10C17.8333 14.6024 14.1024 18.3333 9.49999 18.3333C4.89762 18.3333 1.16666 14.6024 1.16666 10C1.16666 5.39763 4.89762 1.66667 9.49999 1.66667C14.1024 1.66667 17.8333 5.39763 17.8333 10Z" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round" />
                     </svg>
                     <span className="visually-hidden">Error</span>
-                    <a href="#" className="alert__line-number">
+                    <p className="alert__line-number">
                         <span className="line-number">{line}</span>
                         <span aria-hidden="true">:</span>
                         <span className="colun-number">{column}</span>
-                    </a>
+                    </p>
                 </div>
                 <div className="alert__text">
                     {alertMessage}
                     {ruleId && (
                         <>
-                            &nbsp; &#40;<a href={`https://eslint.org/docs/rules/${ruleId}`} target="_blank">{ruleId}</a>&#41;
+                            &nbsp; &#40;<a href={`https://eslint.org/docs/rules/${ruleId}`} target="_blank" rel="noreferrer">{ruleId}</a>&#41;
                         </>
                     )}
                 </div>
@@ -59,6 +59,7 @@ export default function Alert({ type, text, message, onFix, ...props}) {
                             <li
                                 className="alert__fix-options__item"
                                 role="menuitem"
+                                onKeyPress={() => onFix(suggestion)}
                                 tabIndex="-1"
                                 key={suggestion.desc}
                                 onClick={() => onFix(suggestion)}
@@ -76,5 +77,5 @@ export default function Alert({ type, text, message, onFix, ...props}) {
                 )
             )}
         </article>
-    )
-};
+    );
+}
diff --git a/src/playground/components/CodeEditor.js b/src/playground/components/CodeEditor.js
@@ -1,35 +1,34 @@
 import React from "react";
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror from "@uiw/react-codemirror";
 import { history } from "@codemirror/history";
 import { bracketMatching } from "@codemirror/matchbrackets";
-import { javascript, esLint } from '@codemirror/lang-javascript';
+import { javascript, esLint } from "@codemirror/lang-javascript";
 import { linter } from "../utils/codemirror-linter-extension";
 import { ESLintPlaygroundTheme, ESLintPlaygroundHighlightStyle } from "../utils/codemirror-theme";
 import { Linter as ESLint } from "../node_modules/eslint/lib/linter/";
 import "../scss/editor.scss";
 
-export default function CodeEditor({ codeValue, onUpdate, errors, eslintOptions, ...props}) {
+export default function CodeEditor({ codeValue, onUpdate, eslintOptions }) {
     return (
         <>
             <CodeMirror
                 value={codeValue}
                 minWidth="100%"
                 height="100%"
-                autoFocus={true}
                 extensions={
                     [
                         history(),
                         bracketMatching(),
-                        linter(esLint(new ESLint(), eslintOptions), { delay: 0}),
+                        linter(esLint(new ESLint(), eslintOptions), { delay: 0 }),
                         javascript(),
                         ESLintPlaygroundTheme,
-                        ESLintPlaygroundHighlightStyle,
+                        ESLintPlaygroundHighlightStyle
                     ]
                 }
-                onChange={(value) => {
+                onChange={value => {
                     onUpdate(value);
                 }}
             />
         </>
     );
-};
+}