From 494f82601fdbfeb654afe8cdf0a6bfdbba8da8ba Mon Sep 17 00:00:00 2001 From: Matchu Date: Thu, 2 Nov 2023 18:03:15 -0700 Subject: [PATCH] Set up eslint for wardrobe-2020 Ok cool, I have just not been running any of this since moving out of impress-2020, but now that we're doing serious JS work in here it's time to turn it back on!! 1. Install eslint and the plugins we use 2. Set up a `yarn lint` command 3. Set up a git hook via husky to lint on pre-commit 4. Fix/disable all the lint errors! --- .eslintrc.json | 45 + .husky/pre-commit | 4 + app/javascript/item-page.js | 2 + app/javascript/wardrobe-2020-page.js | 2 + .../wardrobe-2020/WardrobePage/Item.js | 2 +- .../wardrobe-2020/WardrobePage/SearchPanel.js | 2 + .../WardrobePage/SearchToolbar.js | 2 + .../wardrobe-2020/WardrobePage/index.js | 33 - .../WardrobePage/useOutfitSaving.js | 2 +- .../WardrobePage/useOutfitState.js | 11 +- app/javascript/wardrobe-2020/apolloClient.js | 1 - .../components/PaginationToolbar.js | 37 - app/javascript/wardrobe-2020/util.js | 3 +- package.json | 17 +- yarn.lock | 1683 ++++++++++++++++- 15 files changed, 1760 insertions(+), 86 deletions(-) create mode 100644 .eslintrc.json create mode 100755 .husky/pre-commit diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..23380bdf --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,45 @@ +{ + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + "plugin:jsx-a11y/recommended" + ], + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "react", "react-hooks", "jsx-a11y"], + "env": { + "browser": true, + "es2021": true + }, + "globals": { + "process": true // For process.env["NODE_ENV"] + }, + "rules": { + "no-console": [ + "warn", + { + "allow": ["debug", "info", "warn", "error"] + } + ], + "import/first": "off", + "import/no-webpack-loader-syntax": "off", + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { + "varsIgnorePattern": "^unused", + "argsIgnorePattern": "^_+$|^e$" + } + ], + "react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }], + // We have some React.forwardRefs that trigger this, not sure how to improve + "react/display-name": "off", + "react/prop-types": "off" + }, + "settings": { + "react": { + "version": "detect" + } + } +} diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..63054c23 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +yarn lint --max-warnings=0 --fix diff --git a/app/javascript/item-page.js b/app/javascript/item-page.js index 16943841..5d8d56b0 100644 --- a/app/javascript/item-page.js +++ b/app/javascript/item-page.js @@ -5,6 +5,8 @@ import { AppProvider, ItemPageOutfitPreview } from "./wardrobe-2020"; const rootNode = document.querySelector("#outfit-preview-root"); const itemId = rootNode.getAttribute("data-item-id"); +// TODO: Use the new React 18 APIs instead! +// eslint-disable-next-line react/no-deprecated ReactDOM.render( diff --git a/app/javascript/wardrobe-2020-page.js b/app/javascript/wardrobe-2020-page.js index da8f369e..e8595f82 100644 --- a/app/javascript/wardrobe-2020-page.js +++ b/app/javascript/wardrobe-2020-page.js @@ -4,6 +4,8 @@ import ReactDOM from "react-dom"; import { AppProvider, WardrobePage } from "./wardrobe-2020"; const rootNode = document.querySelector("#wardrobe-2020-root"); +// TODO: Use the new React 18 APIs instead! +// eslint-disable-next-line react/no-deprecated ReactDOM.render( diff --git a/app/javascript/wardrobe-2020/WardrobePage/Item.js b/app/javascript/wardrobe-2020/WardrobePage/Item.js index 8903d612..8086fb00 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/Item.js +++ b/app/javascript/wardrobe-2020/WardrobePage/Item.js @@ -285,7 +285,7 @@ function ItemActionButton({ icon, label, to, onClick }) { ); } -function LinkOrButton({ href, component = Button, ...props }) { +function LinkOrButton({ href, component, ...props }) { const ButtonComponent = component; if (href != null) { return ; diff --git a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js index 1676f393..772823a3 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js +++ b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js @@ -227,6 +227,8 @@ function SearchResultItem({ ); return ( + // We're wrapping the control inside the label, which works just fine! + // eslint-disable-next-line jsx-a11y/label-has-associated-control