From 9c2846154a593c841a38305018cdc9c8dafc222d Mon Sep 17 00:00:00 2001 From: "J.C. Jones" Date: Tue, 26 Feb 2019 17:36:12 -0700 Subject: [PATCH] Add ESLint to the build process, and cleanup default ESLint issues. (#474) This adds a basic [ESLint](https://eslint.org/) definition that, to not be too onerous, ignores whitespace constraints and picks the most common style from our existing `.js` files. This is split into three commits: one to add ESLint, one to run `eslint --fix` on the affected files, and one for the couple of manual changes. --- .eslintrc.yml | 16 ++++++++++ build.sh | 3 ++ static/js/ga.js | 6 ++-- static/js/glossary.js | 9 +++--- static/js/main.js | 56 +++++++++++++++++------------------ static/js/main.min.js | 2 +- static/js/stats.js | 68 +++++++++++++++++++++---------------------- 7 files changed, 91 insertions(+), 69 deletions(-) create mode 100644 .eslintrc.yml diff --git a/.eslintrc.yml b/.eslintrc.yml new file mode 100644 index 0000000000..83aeccf470 --- /dev/null +++ b/.eslintrc.yml @@ -0,0 +1,16 @@ +env: + browser: true + es6: true +extends: 'eslint:recommended' +rules: + indent: + - off + linebreak-style: + - error + - unix + quotes: + - error + - double + semi: + - error + - always diff --git a/build.sh b/build.sh index 656106733d..12e2400fd2 100755 --- a/build.sh +++ b/build.sh @@ -5,8 +5,11 @@ set -eu # This script uses node-sass and uglifyjs # npm install -g node-sass # npm install -g uglify-es +# npm install -g eslint echo "Processing scss..." node-sass --output-style compressed src/css/main.scss static/css/main.min.css echo "Minifying js..." uglifyjs static/js/main.js -o static/js/main.min.js -c -m +echo "Checking js..." +find static/js -name "*.js" -not -name "*min.js" | xargs eslint diff --git a/static/js/ga.js b/static/js/ga.js index 055c472a97..932161bedc 100644 --- a/static/js/ga.js +++ b/static/js/ga.js @@ -1,5 +1,7 @@ // Google Analytics +/*eslint-disable*/ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} -gtag('js', new Date()); -gtag('config', 'UA-56433935-1'); +/*eslint-enable*/ +gtag("js", new Date()); +gtag("config", "UA-56433935-1"); diff --git a/static/js/glossary.js b/static/js/glossary.js index 9c1c6f6907..5b1a9973a3 100644 --- a/static/js/glossary.js +++ b/static/js/glossary.js @@ -1,22 +1,23 @@ // search all links (into definitions) linking to elements in the current page (href starts with #) // To set the title of the link to the definition it points to -document.querySelectorAll('[id^="def-"]').forEach(function(def){ +document.querySelectorAll("[id^=\"def-\"]").forEach(function(def){ const id = def.id; let title = def.parentNode.textContent; if ( title.match(/\.\s/) ) { // We take everything until the last period. (Everything after are links such as "Wikipedia" title = title.match(/^.*\.\s/)[0]; } - document.querySelectorAll('.definition>a[href^="#'+id+'"]').forEach(function(a){ + document.querySelectorAll(".definition>a[href^=\"#"+id+"\"]").forEach(function(a){ a.title = title; }); }); // search for invalid links -document.querySelectorAll('.definition>a[href^="#"]').forEach(function(a){ +/*eslint no-console: ["error", { allow: ["error"] }] */ +document.querySelectorAll(".definition>a[href^=\"#\"]").forEach(function(a){ if ( a.title ) return; let href = a.href; - let id = href.substring(href.indexOf('#')+1); + let id = href.substring(href.indexOf("#")+1); if ( ! id ) return; let el = document.getElementById(id); if ( ! el ) { diff --git a/static/js/main.js b/static/js/main.js index 3695866c3d..0bf3d1f009 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,39 +4,39 @@ (function (window, document) { -const MENU_ID = 'menu'; +const MENU_ID = "menu"; const MENU_SELECTOR = `#${MENU_ID}`; -const MENU_OPEN_CLASS = 'open'; +const MENU_OPEN_CLASS = "open"; // Applied to NAV_MENU_PARENTs when they're active/open. // Note that this doesn't not get applied with NAV_MENU_HOVERABLE. -const NAV_MENU_ACTIVE_CLASS = 'pure-menu-active'; +const NAV_MENU_ACTIVE_CLASS = "pure-menu-active"; const NAV_MENU_ACTIVE_SELECTOR = `.${NAV_MENU_ACTIVE_CLASS}`; // When applied to a NAV_MENU_PARENT_ item, the menu will toggle on hover // (See https://purecss.io/menus/#dropdowns) -const NAV_MENU_HOVERABLE_CLASS = 'pure-menu-allow-hover'; +const NAV_MENU_HOVERABLE_CLASS = "pure-menu-allow-hover"; // Applied to nav menu items that are parents of a sub-menu -const NAV_MENU_PARENT_CLASS = 'pure-menu-has-children'; +const NAV_MENU_PARENT_CLASS = "pure-menu-has-children"; const NAV_MENU_PARENT_SELECTOR = `.${NAV_MENU_PARENT_CLASS}`; // The containing