Configure code style

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true
+  },
+  "ignorePatterns": ["/_site"],
+  "extends": ["eslint-config-airbnb-base", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-param-reassign": ["error", { "props": false }],
+    "quotes": ["error", "single"],
+    "no-iterator": ["off"],
+    "no-return-await": ["off"]
+  }
+}

.github/workflows/pull-request.yml

@@ -40,7 +40,7 @@ jobs:
       - name: Use Node
         uses: actions/setup-node@v3
         with:
-          node-version: '17.x'
+          node-version: 18
       - name: Install node dependencies
         run: npm install
       - name: Refresh assets
@@ -78,3 +78,17 @@ jobs:
       - name: Test all links
         run: npm run test:links
 
+  lint:
+    name: Run linter
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install node dependencies
+        run: npm install
+      - name: Run eslint
+        run: npm run lint
+

.nvmrc

@@ -0,0 +1 @@
+18

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2
+}

README.md

@@ -51,6 +51,19 @@ on every pull request, but it can also be run locally. To run locally, type:
 ```
 npm run test:pa11y-ci
 ```
+### Code Formatting ###
+
+#### Prettier ####
+We use [Prettier](https://prettier.io/) for code formatting. You can run prettier manually with
+```
+npx prettier . --write
+```
+Note that this will overwrite files in place. See `npx prettier --help` for more CLI options.
+
+An easier way to use prettier is to integrate it into your IDE/editor. For example, [integration exists for VS Code](https://github.com/prettier/prettier-vscode) such that prettier runs on a file every time you save it.
+
+You can also add prettier as a [git commit hook](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks), but you will need to set up the script yourself. For example, you can symlink [this template](/utils/pre-commit) file into `.git/hooks/pre-commit`
+
 ## Contributing
 If you are interested in contributing to this repository, you can read more at
 [CONTRIBUTING](CONTRIBUTING.md).

_data/env.js

@@ -9,5 +9,5 @@
  */
 module.exports = {
   production:
-    process.env.NODE_ENV == "production" || process.env.BRANCH == "main",
+    process.env.NODE_ENV === 'production' || process.env.BRANCH === 'main',
 };

assets/accessibility/js/flashing.js

@@ -1,24 +1,23 @@
-window.addEventListener('DOMContentLoaded', function () {
-  console.log('foo')
-  var blinking = false,
-    interval,
-    blinkEl = document.getElementsByClassName('blink')[0],
-    blinkBtn = document.getElementById('blinkbutton');
+window.addEventListener('DOMContentLoaded', () => {
+  let blinking = false;
+  let interval;
+  const blinkEl = document.getElementsByClassName('blink')[0];
+  const blinkBtn = document.getElementById('blinkbutton');
 
   function toggleBlinking(el) {
-    var display = el.style.display;
+    const { display } = el.style;
     if (display === 'inline') {
       el.style.display = 'none';
     } else {
       el.style.display = 'inline';
     }
   }
 
-  blinkBtn.addEventListener('click', function () {
+  blinkBtn.addEventListener('click', () => {
     if (!blinking) {
-      blinkBtn.innerText = 'Click to stop blinking'
-      interval = setInterval(function () {
-        toggleBlinking(blinkEl)
+      blinkBtn.innerText = 'Click to stop blinking';
+      interval = setInterval(() => {
+        toggleBlinking(blinkEl);
       }, 200);
       blinking = true;
     } else {
@@ -27,5 +26,5 @@ window.addEventListener('DOMContentLoaded', function () {
       blinkEl.style.display = 'none';
       blinking = false;
     }
-  })
+  });
 });

assets/accessibility/js/keyboard-access.js

@@ -1,19 +1,19 @@
-window.addEventListener('DOMContentLoaded', function() {
-  var moveFocusLinks = document.getElementsByClassName('moveFocus');
-  var keyboardTrapLinks = document.getElementsByClassName('keyboardTrap');
+window.addEventListener('DOMContentLoaded', () => {
+  const moveFocusLinks = document.getElementsByClassName('moveFocus');
+  const keyboardTrapLinks = document.getElementsByClassName('keyboardTrap');
 
   function handleFocus() {
     keyboardTrapLinks[0].focus();
   }
 
-  Array.from(moveFocusLinks).map(function(el) {
+  Array.from(moveFocusLinks).forEach((el) => {
     el.addEventListener('focus', handleFocus);
   });
 
-  Array.from(keyboardTrapLinks).map(function(el) {
-    el.addEventListener('click', function() {
-      Array.from(moveFocusLinks).map(function(el) {
-        el.removeEventListener('focus', handleFocus);
+  Array.from(keyboardTrapLinks).forEach((trapLinkEl) => {
+    trapLinkEl.addEventListener('click', () => {
+      Array.from(moveFocusLinks).forEach((focusLinkEl) => {
+        focusLinkEl.removeEventListener('focus', handleFocus);
       });
     });
   });

assets/accessibility/js/time-outs.js

@@ -1,22 +1,25 @@
-window.addEventListener('DOMContentLoaded', function () {
-  var timer,
-    pForm = document.getElementById('pForm');
+/* eslint no-alert: 0 */
+window.addEventListener('DOMContentLoaded', () => {
+  let timer;
+  const pForm = document.getElementById('pForm');
 
-  Array.from(pForm.getElementsByTagName('input')).map(function (el) {
-    el.addEventListener('input', function () {
+  Array.from(pForm.getElementsByTagName('input')).forEach((el) => {
+    el.addEventListener('input', () => {
       if (timer) {
         clearTimeout(timer);
       }
 
-      timer = setTimeout(function () {
-        var c = confirm('Would you like more time to complete the form?'),
-          timer
-        if (c == true) {
+      timer = setTimeout(() => {
+        const c = window.confirm(
+          'Would you like more time to complete the form?',
+        );
+
+        if (c === true) {
           clearTimeout(timer);
         } else {
           pForm.reset();
         }
       }, 2000);
-    })
+    });
   });
 });

assets/derisking/js/current-link.js

@@ -1,40 +1,50 @@
+/* eslint no-plusplus: 0 */
 /**
  * Find the most recently passed heading and adds a usa-current
  * class to the correspoing link in the sidenav subnav
  */
-function setCurrentLink(){
-  if (!document.querySelector('.usa-sidenav')) { return; }
-  if (!document.querySelector('.usa-sidenav__sublist')) { return; }
+function setCurrentLink() {
+  if (!document.querySelector('.usa-sidenav')) {
+    return;
+  }
+  if (!document.querySelector('.usa-sidenav__sublist')) {
+    return;
+  }
 
-  let h3s = document.querySelectorAll('h3');
-  if (h3s.length <= 1) { return; }
+  const h3s = document.querySelectorAll('h3');
+  if (h3s.length <= 1) {
+    return;
+  }
 
-  let scrollPos = document.documentElement.scrollTop;
+  const scrollPos = document.documentElement.scrollTop;
   let topHead = h3s[0];
   let i = 0;
   let found = false;
   while (!found && i < h3s.length) {
-    if (scrollPos < h3s[i].offsetTop){
+    if (scrollPos < h3s[i].offsetTop) {
       found = true;
-    }
-    else {
+    } else {
       topHead = h3s[i];
     }
     i++;
   }
-  let href = topHead.id;
-  let oldLink = document.querySelector('.usa-sidenav__sublist .usa-current');
+  const href = topHead.id;
+  const oldLink = document.querySelector('.usa-sidenav__sublist .usa-current');
   if (oldLink) {
     oldLink.classList.remove('usa-current');
   }
-  let currentLink = document.querySelector('.usa-sidenav__sublist [href="#'+href+'"]').parentElement;
+  const currentLink = document.querySelector(
+    `.usa-sidenav__sublist [href='#${href}']`,
+  ).parentElement;
   currentLink.classList.add('usa-current');
 }
 
 /**
  * Add the event listener to find the nearest heading on user scroll
  */
-if (document.querySelector('.usa-sidenav') && document.querySelectorAll('h3').length > 1){
-  window.addEventListener('scroll',setCurrentLink);
+if (
+  document.querySelector('.usa-sidenav')
+    && document.querySelectorAll('h3').length > 1
+) {
+  window.addEventListener('scroll', setCurrentLink);
 }
-

config/buildAssets.js

@@ -1,3 +1,5 @@
+/* eslint no-restricted-syntax: 0 no-shadow: 0 */
+/** eslint doesn't like iterators/generators */
 const fs = require('fs/promises');
 const path = require('path');
 const esbuild = require('esbuild');
@@ -17,32 +19,36 @@
 }
 
 async function createAssetPaths() {
-  let pathPrefix = ''
+  let pathPrefix = '';
 
   if (process.env.BASEURL) {
-    pathPrefix = process.env.BASEURL
+    pathPrefix = process.env.BASEURL;
   }
 
   const assetPath = path.join(__dirname, '../_site/assets');
   const assetDirs = await fs.readdir(assetPath);
   const assetsFiles = await Promise.all(
     assetDirs.map(async (dir) => {
-      const files = []
-      for await (const f of getFilesInDirectory(path.join(__dirname, '../_site/assets',dir))) {
+      const files = [];
+      for await (const f of getFilesInDirectory(
+        path.join(__dirname, '../_site/assets', dir),
+      )) {
         files.push(f);
       }
       return files.map((file) => {
         const { name, ext } = path.parse(file);
         const publicDir = '_site/';
-        const assetDirs = file.slice(file.indexOf(publicDir) + publicDir.length);
+        const assetDirs = file.slice(
+          file.indexOf(publicDir) + publicDir.length,
+        );
         const hashedAt = name.lastIndexOf('-');
         const originalName = name.slice(0, hashedAt);
         const key = `${originalName}${ext}`;
         return {
           [key]: `${pathPrefix}/${assetDirs}`,
         };
       });
-    })
+    }),
   );
   const assets = Object.assign({}, ...assetsFiles.flat());
   const outputData = path.join(__dirname, '../_data/assetPaths.json');
@@ -52,7 +58,11 @@
 
 esbuild
   .build({
-    entryPoints: ['assets/_common/styles/styles.scss', 'assets/_common/js/app.js', 'assets/_common/js/admin.js'],
+    entryPoints: [
+      'assets/_common/styles/styles.scss',
+      'assets/_common/js/app.js',
+      'assets/_common/js/admin.js',
+    ],
     entryNames: '[dir]/[name]-[hash]',
     outdir: '_site/assets/',
     format: 'iife',
@@ -67,22 +77,22 @@
     minify: process.env.ELEVENTY_ENV === 'production',
     sourcemap: process.env.ELEVENTY_ENV !== 'production',
     target: ['chrome58', 'firefox57', 'safari11', 'edge18'],
-    plugins: [ 
+    plugins: [
       sassPlugin({
         loadPaths: [
-          "./node_modules/@uswds",
-          "./node_modules/@uswds/uswds/packages"
-        ]
+          './node_modules/@uswds',
+          './node_modules/@uswds/uswds/packages',
+        ],
       }),
     ],
     bundle: true,
   })
   .then(() => createAssetPaths())
   .then(() => {
     console.log('Assets have been built!');
     process.exit();
   })
   .catch((err) => {
     console.error(err);
     process.exit(1);
   });

config/filters.js

@@ -2,16 +2,12 @@
 
 const { DateTime } = require('luxon');
 
-const readableDate = (dateObj) => {
-  return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
-    'dd LLL yyyy'
-  );
-};
+const readableDate = (dateObj) => DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
+  'dd LLL yyyy',
+);
 
 // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-const htmlDateString = (dateObj) => {
-  return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
-};
+const htmlDateString = (dateObj) => DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
 
 // Get the first `n` elements of a collection.
 const head = (array, n) => {
@@ -25,21 +21,16 @@ const head = (array, n) => {
 };
 
 // Return the smallest number argument
-const min = (...numbers) => {
-  return Math.min.apply(null, numbers);
-};
-
-const filterTagList = (tags) => {
-  return (tags || []).filter(
-    (tag) => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1
-  );
-}
+const min = (...numbers) => Math.min.apply(null, numbers);
 
+const filterTagList = (tags) => (tags || []).filter(
+  (tag) => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1,
+);
 
 module.exports = {
   readableDate,
   htmlDateString,
   head,
   min,
-  filterTagList
+  filterTagList,
 };