Fixed lint:frontend npm script (#15631)

* Set no-var eslint rule to error.

* Fixed npm script lint:frontend

* Replaced vars with lets as per new no-var erroring out rule.

* Fixed lint errors that surfaced after fixing the lint:frontend npm script.

app/javascript/.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
   },
   plugins: ['import', 'react', 'jsx-a11y'],
   rules: {
+    'no-var': 'error',
     'import/order': ['error'],
     'import/prefer-default-export': 'off',
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],

app/javascript/articles/components/CommentsList.jsx

@@ -36,7 +36,7 @@ export const CommentsList = ({ comments = [], articlePath, totalCount }) => {
     return (
       <div className="crayons-story__comments">
         {comments.slice(0, numberOfCommentsToShow).map((comment) => {
-          return <CommentListItem comment={comment} />;
+          return <CommentListItem key={comment.id} comment={comment} />;
         })}
 
         {moreCommentsButton(comments, articlePath, totalCount)}

app/javascript/listings/components/Categories.jsx

@@ -13,7 +13,11 @@ export class Categories extends Component {
           </option>
         );
       }
-      return <option value={value}>{text}</option>;
+      return (
+        <option key={value} value={value}>
+          {text}
+        </option>
+      );
     });
   };
 
@@ -25,7 +29,7 @@ export class Categories extends Component {
           <strong>{category.name}:</strong> {category.rules}
         </li>
       );
-      return <ul>{paragraphText}</ul>;
+      return <ul key={category.name}>{paragraphText}</ul>;
     });
 
     return (

app/javascript/listings/components/CategoryLinks.jsx

@@ -12,6 +12,7 @@ export const CategoryLinks = ({ categories, onClick, selectedCategory }) => {
 
         return (
           <a
+            key={category.slug}
             href={`/listings/${category.slug}`}
             id={`category-link-${category.slug}`}
             className={`crayons-link crayons-link--block ${

app/javascript/listings/components/CategoryLinksMobile.jsx

@@ -26,6 +26,7 @@ export class CategoryLinksMobile extends Component {
           {categories.map((category) => {
             return (
               <option
+                key={category.slug}
                 value={`/listings/${category.slug}`}
                 selected={category.slug === selectedCategory}
               >

app/javascript/listings/dashboard/rowElements/tags.jsx

@@ -3,7 +3,7 @@ import { h } from 'preact';
 
 export const Tags = ({ tagList }) => {
   const tagLinks = tagList.map((tag) => (
-    <a href={`/listings?t=${tag}`} data-no-instant>
+    <a key={tag} href={`/listings?t=${tag}`} data-no-instant>
       #{tag}{' '}
     </a>
   ));

app/javascript/onboarding/components/FollowUsers.jsx

@@ -180,6 +180,7 @@ export class FollowUsers extends Component {
 
                 return (
                   <div
+                    key={user.id}
                     data-testid="onboarding-user-button"
                     className={`user content-row ${
                       selected ? 'selected' : 'unselected'

app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx

@@ -20,7 +20,7 @@ export default {
 export const Standard = () => (
   <TodaysPodcasts>
     {episodes.map((episode) => (
-      <PodcastEpisode episode={episode} />
+      <PodcastEpisode key={episode.id} episode={episode} />
     ))}
   </TodaysPodcasts>
 );

app/javascript/utilities/color/WCAGColorContrast.js

@@ -12,13 +12,16 @@ export const WCAGColorContrast = {
    * @return {Number}
    */
   ratio(rgb1, rgb2) {
+    let sRGB1;
+    let sRGB2;
+
     if (this.validRGB(rgb1)) {
-      var sRGB1 = this.RGBtosRGB(rgb1);
+      sRGB1 = this.RGBtosRGB(rgb1);
     } else {
       throw `Invalid color ${rgb1}`;
     }
     if (this.validRGB(rgb2)) {
-      var sRGB2 = this.RGBtosRGB(rgb2);
+      sRGB2 = this.RGBtosRGB(rgb2);
     } else {
       throw `Invalid color ${rgb2}`;
     }

package.json

@@ -21,7 +21,7 @@
     "build-storybook": "build-storybook -c app/javascript/.storybook -s app/assets -o app/javascript/storybook-static --quiet && yarn generate-storybook-themes",
     "prestorybook": "rm -rf app/javascript/storybook-static && yarn generate-storybook-themes",
     "storybook": "start-storybook -p 6006 -c app/javascript/.storybook -s app/assets,app/javascript/storybook-static",
-    "lint:frontend": "eslint app/assets/javascripts/**/*.js app/javascript/**/*.jsx app/javascript/**/*.js cypress/**/*.js",
+    "lint:frontend": "eslint 'app/assets/javascripts/**/*.js' 'app/javascript/**/*.jsx' 'app/javascript/**/*.js' 'cypress/**/*.js'",
     "test": "jest app/javascript/ bin/ --coverage",
     "test:watch": "jest app/javascript/ bin/ --watch",
     "postcss": "postcss public/assets/*.css -d public/assets 2> postcss_error.log",