Added ESLint and linted the source code. Updated README.

Author: Justin Wilkerson

.eslintignore

@@ -0,0 +1 @@
+*.css

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}

README.md

@@ -20,6 +20,8 @@ Easily create TypeScript [Playground Plugins](https://www.typescriptlang.org/v2/
 
 ✔️ Create styles with stylesheets or CSS-in-JS with Goober.
 
+✔️ Linting with ESLint
+
 ## About
 
 The TypeScript Playground V3 beta comes packed with lots of new features, including the ability to create plugins. Per the TypeScript docs:

package.json

@@ -33,13 +33,24 @@
     "@types/prettier": "^1.19.0",
     "@types/react": "^16.9.22",
     "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "2.x",
+    "@typescript-eslint/parser": "2.x",
+    "babel-eslint": "10.x",
     "concurrently": "^5.1.0",
     "cross-env": "^7.0.0",
+    "eslint": "6.x",
+    "eslint-config-react-app": "^5.2.0",
+    "eslint-plugin-flowtype": "4.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "2.x",
     "monaco-editor": "^0.20.0",
     "prettier": "^1.19.1",
     "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-css-only": "^2.0.0",
+    "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-postcss": "^2.1.1",
     "rollup-plugin-terser": "^5.2.0",
     "serve": "^11.3.0",

rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import babel from "rollup-plugin-babel";
 import postcss from "rollup-plugin-postcss";
 import image from "@rollup/plugin-image";
+import { eslint } from "rollup-plugin-eslint";
 import { terser } from "rollup-plugin-terser";
 
 const isProd = process.env.NODE_ENV === "production";
@@ -16,6 +17,7 @@ export default {
     format: "amd"
   },
   plugins: [
+    eslint(),
     postcss({
       plugins: [],
       minimize: true,
@@ -24,7 +26,7 @@ export default {
     replace({
       "process.env.NODE_ENV": JSON.stringify(
         isProd ? "production" : "development"
-      ),
+      )
     }),
     image(),
     resolve({
@@ -47,7 +49,6 @@ export default {
         "@babel/preset-typescript"
       ]
     }),
-
     isProd && terser()
   ]
 };

src/App.tsx

@@ -18,19 +18,19 @@ const App: React.FC = () => {
     formatCode,
     markers,
     setDebounce,
-    sandbox,
-    model,
-    container,
+    // sandbox,
+    // model,
+    // container,
     flashInfo,
-    showModal,
+    // showModal,
     prettier
   } = usePlugin();
 
   setDebounce(true);
 
   useEffect(() => {
     setCode(exampleCode.start, { format: "prettier" });
-  }, []);
+  }, [setCode]);
 
   useEffect(() => {
     console.log(`The editor code changed:`);

src/plugin/Provider.tsx

@@ -48,10 +48,13 @@ export const Provider: React.FC<ProviderProps> = ({
   const [markers, setMarkers] = useState<ModelMarker[]>([]);
   const [debounce, setDebounce] = useState(false);
 
-  const listenerFn = useCallback((evt: any): void => {
-    setModel({ ...evt.detail.model });
-    _setCode(sandbox.getText());
-  }, []);
+  const listenerFn = useCallback(
+    (evt: any): void => {
+      setModel({ ...evt.detail.model });
+      _setCode(sandbox.getText());
+    },
+    [sandbox]
+  );
 
   useEffect(() => {
     const disposable = sandbox.editor.onDidChangeModelDecorations(() => {
@@ -65,16 +68,16 @@ export const Provider: React.FC<ProviderProps> = ({
         });
       setMarkers(allMarkers);
     });
-    () => disposable.dispose();
-  }, []);
+    return () => disposable.dispose();
+  }, [sandbox]);
 
   useEffect(() => {
     const eventName = debounce ? "modelChangedDebounce" : "modelChanged";
     window.addEventListener(eventName, listenerFn);
     const otherEventName = debounce ? "modelChanged" : "modelChangedDebounce";
     window.removeEventListener(otherEventName, listenerFn, false);
-    () => window.removeEventListener(eventName, listenerFn, false);
-  }, [debounce]);
+    return () => window.removeEventListener(eventName, listenerFn, false);
+  }, [debounce, listenerFn]);
 
   const setCode = useCallback(
     (value: string, options?: { format: "prettier" | "monaco" }) => {
@@ -87,12 +90,12 @@ export const Provider: React.FC<ProviderProps> = ({
         sandbox.setText(value);
       }
     },
-    []
+    [sandbox]
   );
 
   const formatCode = useCallback(() => {
     return sandbox.editor.getAction("editor.action.formatDocument").run();
-  }, []);
+  }, [sandbox.editor]);
 
   const prettier = useCallback(
     (config?: Options) => {
@@ -103,7 +106,7 @@ export const Provider: React.FC<ProviderProps> = ({
 
       sandbox.setText(prettyCode);
     },
-    [code]
+    [code, sandbox]
   );
 
   // @ts-ignore