Restore former eslint settings (#37)

Restores eslint settings from the webviz project, along with some modifications for TypeScript compatibility and newer eslint/webpack versions. Contains a workaround for import-js/eslint-plugin-import#1996.

.eslintrc.yaml

@@ -3,17 +3,21 @@ env:
   es6: true
   node: true
 
-ignorePatterns:
-  - "app/**/*.js" # ignore flow files for now
+plugins:
+  - react
+  - react-hooks
+  - "@typescript-eslint"
+  - header
 
 extends:
-  - "eslint:recommended"
-  - "plugin:react/recommended"
-  - "plugin:@typescript-eslint/eslint-recommended"
-  - "plugin:@typescript-eslint/recommended"
-  - "plugin:import/errors"
-  - "plugin:import/warnings"
-  - "plugin:import/typescript"
+  - eslint:recommended
+  - plugin:react/recommended
+  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:import/errors
+  - plugin:import/warnings
+  - plugin:import/typescript
+  - plugin:prettier/recommended
 
 parser: "@typescript-eslint/parser"
 parserOptions:
@@ -24,31 +28,57 @@ parserOptions:
   sourceType: module
   project: tsconfig.json
 
-plugins:
-  - "@typescript-eslint"
-  - "header"
-  - "react"
-  - "react-hooks"
+settings:
+  react:
+    version: detect
+  import/internal-regex: "^@foxglove-studio/"
 
 rules:
+  no-console: off # configured in no-restricted-syntax
   "@typescript-eslint/ban-ts-comment": off # TODO: remove once we fix all TS issues
   # It's sometimes useful to explicitly name to guard against future changes
   "@typescript-eslint/no-inferrable-types": off
   "@typescript-eslint/no-empty-function": off
   "@typescript-eslint/prefer-nullish-coalescing": warn
-  "react/react-in-jsx-scope": off
-  "react/prop-types": warn
-  "react-hooks/rules-of-hooks": error
-  "react-hooks/exhaustive-deps": error
-  "header/header":
+  react/react-in-jsx-scope: off
+  react/prop-types: warn
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: error
+  header/header:
     - error
     - line
     # We do not provide a default license header template, because eslint-plugin-header
     # is too eager to delete existing license blocks (which must be handled carefully)
     - pattern: "^ This Source Code Form"
       template: null
 
-settings:
-  "import/ignore": ["\\.js$"] # ignore flow files for now
-  react:
-    version: detect
+  curly: error
+  "@typescript-eslint/no-unused-vars":
+    [error, { vars: all, args: after-used, varsIgnorePattern: "^_", argsIgnorePattern: "^_" }]
+  no-underscore-dangle: [error, { allowAfterThis: true }]
+  # Some good ones that people really should be adding to import/recommended:
+  import/first: error
+  import/no-self-import: error
+  import/no-useless-path-segments: error
+  import/no-mutable-exports: error
+  import/newline-after-import: error
+  import/no-duplicates: error # https://github.com/benmosher/eslint-plugin-import/issues/242#issuecomment-230118951
+  # Group imports into two groups: packages and files. Sort alphabetically
+  # within those groups.
+  import/order:
+    - error
+    - alphabetize: { order: asc }
+      newlines-between: always
+      groups: [[builtin, external], [internal, parent, sibling, index]]
+
+  prefer-arrow-callback: [error, { allowNamedFunctions: true }]
+  "@typescript-eslint/no-shadow": error
+  no-restricted-syntax:
+    - error
+    - selector: "MethodDefinition[kind='get'], Property[kind='get']"
+      message: "Property getters are not allowed; prefer function syntax instead."
+    - selector: "MethodDefinition[kind='set'], Property[kind='set']"
+      message: "Property setters are not allowed; prefer function syntax instead."
+    # We disable console methods here rather than using no-console so that it doesn't prohibit overrides such as "console.info = ..."
+    - selector: "CallExpression[callee.object.name='console'][callee.property.name!=/^(warn|error|debug|assert)$/]"
+      message: "Unexpected property on console object was called"

.vscode/settings.json

@@ -7,5 +7,9 @@
     "**/bower_components": true,
     "**/*.code-search": true,
     ".yarn/**": true
+  },
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
   }
 }

app/.eslintrc.yaml

@@ -1,2 +1,6 @@
 parserOptions:
   project: app/tsconfig.json
+settings:
+  import/resolver:
+    webpack:
+      config: ./webpack.renderer.config.ts

app/App.tsx

@@ -4,12 +4,11 @@
 
 import { useEffect, useState } from "react";
 
+import { OsContextSingleton } from "@foxglove-studio/app/OsContext";
 import { FileContext } from "@foxglove-studio/app/components/FileContext";
 import Root from "@foxglove-studio/app/components/Root";
-import { ROSBRIDGE_WEBSOCKET_URL_QUERY_KEY } from "@foxglove-studio/app/util/globalConstants";
-
-import { OsContextSingleton } from "@foxglove-studio/app/OsContext";
 import { usePrompt } from "@foxglove-studio/app/hooks/usePrompt";
+import { ROSBRIDGE_WEBSOCKET_URL_QUERY_KEY } from "@foxglove-studio/app/util/globalConstants";
 
 function App() {
   const [bagFile, setBagFile] = useState<File | undefined>();

app/GlobalConfig.ts

@@ -39,7 +39,6 @@ const defaultHooks = {
         throw new Error(`Failed to fetch layout from URL: ${e.message}`);
       });
   },
-  getDemoModeComponent: () => null,
   async importHooksAsync() {
     return new Promise<void>((resolve, reject) => {
       if (importedPanelsByCategory && importedPerPanelHooks) {
@@ -157,7 +156,7 @@ const defaultHooks = {
     const { REMOTE_BAG_URL_2_QUERY_KEY } = require("@foxglove-studio/app/util/globalConstants");
     return [REMOTE_BAG_URL_2_QUERY_KEY];
   },
-  updateUrlToTrackLayoutChanges: async (opt: { store: Store; skipPatch: boolean }) => {
+  updateUrlToTrackLayoutChanges: async (_opt: { store: Store; skipPatch: boolean }) => {
     // Persist the layout state in URL or remote storage if needed.
     await Promise.resolve();
   },

app/PanelAPI/useBlocksByTopic.test.tsx

@@ -17,7 +17,6 @@ import * as React from "react";
 import { MessageReader, parseMessageDefinition } from "rosbag";
 
 import * as PanelAPI from ".";
-
 import { MockMessagePipelineProvider } from "@foxglove-studio/app/components/MessagePipeline";
 
 describe("useBlocksByTopic", () => {

app/PanelAPI/useBlocksByTopic.ts

@@ -11,20 +11,20 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { $ReadOnly } from "utility-types";
 import memoizeWeak from "memoize-weak";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { MessageReader } from "rosbag";
+import { $ReadOnly } from "utility-types";
 import uuid from "uuid";
 
-import useCleanup from "@foxglove-studio/app/hooks/useCleanup";
 import {
   useMessagePipeline,
   MessagePipelineContext,
 } from "@foxglove-studio/app/components/MessagePipeline";
 import PanelContext from "@foxglove-studio/app/components/PanelContext";
 import { MemoryCacheBlock } from "@foxglove-studio/app/dataProviders/MemoryCacheDataProvider";
 import ParsedMessageCache from "@foxglove-studio/app/dataProviders/ParsedMessageCache";
+import useCleanup from "@foxglove-studio/app/hooks/useCleanup";
 import {
   BobjectMessage,
   SubscribePayload,

app/PanelAPI/useDataSourceInfo.test.tsx

@@ -15,7 +15,6 @@ import { mount } from "enzyme";
 import * as React from "react";
 
 import * as PanelAPI from ".";
-
 import { MockMessagePipelineProvider } from "@foxglove-studio/app/components/MessagePipeline";
 
 describe("useDataSourceInfo", () => {

app/PanelAPI/useMessageReducer.ts

@@ -11,16 +11,15 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { $Shape } from "utility-types";
 import { useRef, useCallback, useMemo, useState, useEffect, useContext } from "react";
 import uuid from "uuid";
 
-import useCleanup from "@foxglove-studio/app/hooks/useCleanup";
 import {
   useMessagePipeline,
   MessagePipelineContext,
 } from "@foxglove-studio/app/components/MessagePipeline";
 import PanelContext from "@foxglove-studio/app/components/PanelContext";
+import useCleanup from "@foxglove-studio/app/hooks/useCleanup";
 import { Message, MessageFormat, SubscribePayload } from "@foxglove-studio/app/players/types";
 import {
   useChangeDetector,

app/PanelAPI/useMessagesByTopic.ts

@@ -11,9 +11,9 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { $ReadOnly } from "utility-types";
 import { groupBy } from "lodash";
 import { useCallback } from "react";
+import { $ReadOnly } from "utility-types";
 
 import { useMessageReducer } from "./useMessageReducer";
 import { Message, TypedMessage, MessageFormat } from "@foxglove-studio/app/players/types";

app/actions/panels.ts

@@ -11,10 +11,10 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 import CBOR from "cbor-js";
+import { create as JsonDiffCreate } from "jsondiffpatch";
 import { cloneDeep } from "lodash";
 import { MosaicPath } from "react-mosaic-component";
 import zlib from "zlib";
-import { create as JsonDiffCreate } from "jsondiffpatch";
 
 import { getGlobalHooks } from "@foxglove-studio/app/loadWebviz";
 import { LinkedGlobalVariables } from "@foxglove-studio/app/panels/ThreeDimensionalViz/Interactions/useLinkedGlobalVariables";

app/components/ButtonBase.tsx

@@ -11,8 +11,8 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { $Values } from "utility-types";
 import cx from "classnames";
+import { $Values } from "utility-types";
 
 export const PROGRESS_DIRECTION = Object.freeze({
   HORIZONTAL: "horizontal",

app/components/ContextMenu/index.tsx

@@ -13,8 +13,8 @@
 
 import * as React from "react";
 
-import Tooltip from "@foxglove-studio/app/components/TooltipBase";
 import Menu from "@foxglove-studio/app/components/Menu";
+import Tooltip from "@foxglove-studio/app/components/TooltipBase";
 
 type Props = {
   children: React.ReactNode;

app/components/ExperimentalFeatures.tsx

@@ -23,8 +23,8 @@ import TextContent from "@foxglove-studio/app/components/TextContent";
 import Tooltip from "@foxglove-studio/app/components/Tooltip";
 import { getGlobalHooks } from "@foxglove-studio/app/loadWebviz";
 import colors from "@foxglove-studio/app/styles/colors.module.scss";
-import logEvent, { getEventNames } from "@foxglove-studio/app/util/logEvent";
 import Storage from "@foxglove-studio/app/util/Storage";
+import logEvent, { getEventNames } from "@foxglove-studio/app/util/logEvent";
 
 // All these are exported for tests; please don't use them directly in your code.
 export type FeatureDescriptions = {

app/components/GlobalKeyListener.ts

@@ -14,9 +14,9 @@ import { useCallback, useMemo, useContext } from "react";
 import { useDispatch } from "react-redux";
 import { bindActionCreators } from "redux";
 
-import useEventListener from "@foxglove-studio/app/hooks/useEventListener";
 import { redoLayoutChange, undoLayoutChange } from "@foxglove-studio/app/actions/layoutHistory";
 import { ScreenshotsContext } from "@foxglove-studio/app/components/Screenshots/ScreenshotsProvider";
+import useEventListener from "@foxglove-studio/app/hooks/useEventListener";
 import { downloadFiles } from "@foxglove-studio/app/util";
 
 const inNativeUndoRedoElement = (eventTarget: EventTarget) => {

app/components/GlobalVariableSlider.tsx

@@ -13,7 +13,6 @@
 import React, { ReactElement, useCallback } from "react";
 
 import { SliderWithTicks, SliderProps } from "@foxglove-studio/app/components/SliderWithTicks";
-
 import useGlobalVariables from "@foxglove-studio/app/hooks/useGlobalVariables";
 
 type Props = {

app/components/GlobalVariablesMenu.tsx

@@ -15,7 +15,6 @@ import React, { useState, useCallback, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled, { css } from "styled-components";
 
-import { SLinkUnderline } from "@foxglove-studio/app/shared/styledComponents";
 import { AddPanelPayload, addPanel } from "@foxglove-studio/app/actions/panels";
 import ChildToggle from "@foxglove-studio/app/components/ChildToggle";
 import Flex from "@foxglove-studio/app/components/Flex";
@@ -30,6 +29,7 @@ import HelpButton from "@foxglove-studio/app/components/PanelToolbar/HelpButton"
 import useGlobalVariables from "@foxglove-studio/app/hooks/useGlobalVariables";
 import GlobalVariables from "@foxglove-studio/app/panels/GlobalVariables";
 import helpContent from "@foxglove-studio/app/panels/GlobalVariables/index.help.md";
+import { SLinkUnderline } from "@foxglove-studio/app/shared/styledComponents";
 import inScreenshotTests from "@foxglove-studio/app/stories/inScreenshotTests";
 import logEvent, { getEventTags, getEventNames } from "@foxglove-studio/app/util/logEvent";
 import { colors } from "@foxglove-studio/app/util/sharedStyleConstants";

app/components/GlobalVariablesTable.tsx

@@ -20,10 +20,10 @@ import { usePreviousValue } from "../util/hooks";
 import ChildToggle from "@foxglove-studio/app/components/ChildToggle";
 import Flex from "@foxglove-studio/app/components/Flex";
 import Icon from "@foxglove-studio/app/components/Icon";
-import { JSONInput } from "@foxglove-studio/app/components/input/JSONInput";
-import { ValidatedResizingInput } from "@foxglove-studio/app/components/input/ValidatedResizingInput";
 import Menu, { Item } from "@foxglove-studio/app/components/Menu";
 import Tooltip from "@foxglove-studio/app/components/Tooltip";
+import { JSONInput } from "@foxglove-studio/app/components/input/JSONInput";
+import { ValidatedResizingInput } from "@foxglove-studio/app/components/input/ValidatedResizingInput";
 import useGlobalVariables, { GlobalVariables } from "@foxglove-studio/app/hooks/useGlobalVariables";
 import { memoizedGetLinkedGlobalVariablesKeyByName } from "@foxglove-studio/app/panels/ThreeDimensionalViz/Interactions/interactionUtils";
 import useLinkedGlobalVariables from "@foxglove-studio/app/panels/ThreeDimensionalViz/Interactions/useLinkedGlobalVariables";

app/components/GradientPicker.stories.tsx

@@ -30,8 +30,6 @@ function Story({
   initialMaxColor?: Color;
 }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const minRef = useRef();
-  const maxRef = useRef();
   const [minColor, setMinColor] = useState(initialMinColor ?? { r: 0, g: 0, b: 0, a: 0 });
   const [maxColor, setMaxColor] = useState(initialMaxColor ?? { r: 0, g: 0, b: 0, a: 0 });
 

app/components/Icon.tsx

@@ -11,7 +11,6 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { $Shape } from "utility-types";
 import cx from "classnames";
 import * as React from "react";
 

app/components/LayoutMenu.tsx

@@ -15,11 +15,11 @@ import React, { useState } from "react";
 
 import LayoutIcon from "@foxglove-studio/app/assets/layout.svg";
 import ChildToggle from "@foxglove-studio/app/components/ChildToggle";
+import ClearBagCacheMenuItem from "@foxglove-studio/app/components/ClearBagCacheMenuItem";
 import Flex from "@foxglove-studio/app/components/Flex";
 import { WrappedIcon } from "@foxglove-studio/app/components/Icon";
 import { openLayoutModal } from "@foxglove-studio/app/components/LayoutModal";
 import Menu, { Item } from "@foxglove-studio/app/components/Menu";
-import ClearBagCacheMenuItem from "@foxglove-studio/app/components/ClearBagCacheMenuItem";
 
 export default function LayoutMenu() {
   const [isOpen, setIsOpen] = useState(false);

app/components/LayoutModal.tsx

@@ -17,8 +17,8 @@ import React, { useCallback } from "react";
 import { connect } from "react-redux";
 
 import { loadLayout } from "@foxglove-studio/app/actions/panels";
-import renderToBody from "@foxglove-studio/app/components/renderToBody";
 import ShareJsonModal from "@foxglove-studio/app/components/ShareJsonModal";
+import renderToBody from "@foxglove-studio/app/components/renderToBody";
 import { State } from "@foxglove-studio/app/reducers";
 import { PanelsState } from "@foxglove-studio/app/reducers/panels";
 

app/components/Menu/index.stories.tsx

@@ -12,7 +12,6 @@
 //   You may not use this file except in compliance with the License.
 
 import { storiesOf } from "@storybook/react";
-import React, { ReactInstance } from "react";
 import ReactDOM from "react-dom";
 
 import Menu, { Item, SubMenu } from "@foxglove-studio/app/components/Menu";

app/components/MessageHistoryDEPRECATED/index.ts

@@ -14,12 +14,12 @@
 import React, { ReactElement, useMemo } from "react";
 import { Time } from "rosbag";
 
+import * as PanelAPI from "@foxglove-studio/app/PanelAPI";
 import { getTopicsFromPaths } from "@foxglove-studio/app/components/MessagePathSyntax/parseRosPath";
 import {
   MessagePathDataItem,
   useDecodeMessagePathsForMessagesByTopic,
 } from "@foxglove-studio/app/components/MessagePathSyntax/useCachedGetMessagePathDataItems";
-import * as PanelAPI from "@foxglove-studio/app/PanelAPI";
 import { Message } from "@foxglove-studio/app/players/types";
 import { useShallowMemo } from "@foxglove-studio/app/util/hooks";
 

app/components/MessageOrderControls.tsx

@@ -16,8 +16,8 @@ import { useSelector, useDispatch } from "react-redux";
 import { setPlaybackConfig } from "@foxglove-studio/app/actions/panels";
 import Dropdown from "@foxglove-studio/app/components/Dropdown";
 import NoHeaderTopicsButton from "@foxglove-studio/app/components/NoHeaderTopicsButton";
-import { defaultPlaybackConfig } from "@foxglove-studio/app/reducers/panels";
 import { State } from "@foxglove-studio/app/reducers";
+import { defaultPlaybackConfig } from "@foxglove-studio/app/reducers/panels";
 
 const messageOrderLabel = {
   receiveTime: "Receive time",

app/components/MessagePathSyntax/MessagePathInput.test.ts

@@ -11,8 +11,8 @@
 //   found at http://www.apache.org/licenses/LICENSE-2.0
 //   You may not use this file except in compliance with the License.
 
-import { RosPath } from "./constants";
 import { tryToSetDefaultGlobalVar, getFirstInvalidVariableFromRosPath } from "./MessagePathInput";
+import { RosPath } from "./constants";
 import { getGlobalHooks } from "@foxglove-studio/app/loadWebviz";
 
 const defaultGlobalVars = getGlobalHooks().getDefaultPersistedState().panels.globalVariables;