ESLint/Prettier setup (microsoft#817)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>

README.md

@@ -252,6 +252,22 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
 contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
 
+When contributing to this repository, please help keep the codebase clean and maintainable by running 
+the formatter and linter with `npm run format` this will run `npx eslint --fix` and `npx prettier --write` 
+on the frontebnd codebase. 
+
+If you are using VSCode, you can add the following settings to your `settings.json` to format and lint on save:
+
+```json
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "editor.formatOnSave": true,
+    "prettier.requireConfig": true,
+}
+```
+
 ## Trademarks
 
 This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft 

frontend/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+public
+build
+dist

frontend/.eslintrc.json

@@ -0,0 +1,94 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier"
+  ],
+  "plugins": ["@typescript-eslint", "import", "simple-import-sort", "prettier"],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    // "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {},
+      {
+        "usePrettierrc": false
+      }
+    ],
+    "quote-props": [2, "as-needed"],
+    "comma-dangle": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "no-debugger": "error",
+    "react/prop-types": 0,
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "object-curly-newline": [
+      "error",
+      {
+        "ObjectExpression": "always",
+        "ObjectPattern": { "multiline": "as-needed" },
+        "ImportDeclaration": "never",
+        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
+      }
+    ],
+    "object-curly-spacing": ["error", "as-needed", { "objectsInObjects": true }],
+    "no-underscore-dangle": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "no-await-in-loop": 0,
+    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
+    "arrow-parens": ["error", "as-needed"],
+    "no-unused-vars": "off", // Turn off the base rule and use @typescript-eslint/no-unused-vars
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true,
+        "args": "after-used"
+      }
+    ],
+    "import/prefer-default-export": 0,
+    "react/no-find-dom-node": 0,
+    "no-shadow": 0,
+    "max-len": 0,
+    "consistent-return": 0,
+    "no-plusplus": 0,
+    "spaced-comment": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/jsx-filename-extension": 0,
+    "indent": ["error", 2],
+    "react/jsx-indent": ["error", 2],
+    "react/jsx-indent-props": ["error", 2],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "simple-import-sort/exports": "error",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          // Packages `react` related packages come first.
+          ["^react", "^@?\\w"],
+          // Internal packages.
+          ["^(@|components)(/.*|$)"],
+          // Side effect imports.
+          ["^\\u0000"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+          // Style imports.
+          ["^.+\\.?(css)$"]
+        ]
+      }
+    ]
+  },
+  "ignorePatterns": ["node_modules/", "build/", "dist/", "public/", "*.config.ts"]
+}

frontend/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+public
+build
+dist

frontend/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "arrowParens": "avoid",
+    "trailingComma": "none",
+    "endOfLine": "auto",
+    "tabWidth": 2,
+    "printWidth": 120,
+    "bracketSpacing": true,
+    "bracketSameLine": true,
+    "jsxSingleQuote": false,
+    "quoteProps": "as-needed"
+}

frontend/eslint.config.ts

@@ -0,0 +1,20 @@
+import globals from 'globals'
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { FlatCompat } from '@eslint/eslintrc'
+import pluginJs from '@eslint/js'
+
+// mimic CommonJS variables -- not needed if using CommonJS
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({ baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended })
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  ...compat.extends('standard-with-typescript'),
+  pluginReactConfig,
+  eslintConfigPrettier
+]

frontend/jest.config.ts

@@ -1,11 +1,11 @@
-import type {Config} from '@jest/types';
+import type { Config } from '@jest/types'
 
 const config: Config.InitialOptions = {
   verbose: true,
   transform: {
-    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.tsx?$': 'ts-jest'
   },
-  setupFilesAfterEnv: ['<rootDir>/polyfills.js'],
-};
+  setupFilesAfterEnv: ['<rootDir>/polyfills.js']
+}
 
-export default config;
+export default config