Add eslintrc (#502)

closes #510 Adds basic eslintrc using prettier Adds editorconfig
RaspberryPiFoundation · May 30, 2023 · b2a6952 · b2a6952
1 parent b6a05e5
commit b2a6952
Show file tree

Hide file tree

Showing 194 changed files with 7,910 additions and 5,794 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -64,10 +64,20 @@
         "github.remotehub",
         "circleci.circleci",
         "stylelint.vscode-stylelint",
-        "Orta.vscode-jest"
+        "Orta.vscode-jest",
+        "christian-kohler.path-intellisense",
+        "esbenp.prettier-vscode",
+        "avraammavridis.vsc-react-documentation",
+        "ofhumanbondage.react-proptypes-intellisense",
+        "syler.sass-indented",
+        "codezombiech.gitignore"
       ],
       "settings": {
-        "terminal.integrated.defaultProfile.linux": "zsh"
+        "terminal.integrated.defaultProfile.linux": "zsh",
+        "jest.autoRun": {
+          "watch": false,
+          "onSave": "test-src-file"
+        }
       }
     }
   },

diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,47 @@
+{
+  "root": true,
+  "extends": [
+    "react-app",
+    "react-app/jest",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "prettier",
+    "react",
+    "jsx-a11y",
+    "jest"
+  ],
+  "settings": {
+    "react": {
+      "version": "18.1.0"
+    }
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "env": {
+    "amd": true,
+    "browser": true,
+    "es6": true,
+    "jquery": false,
+    "node": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": false,
+        "jsxSingleQuote": false,
+        "trailingComma": "all",
+        "semi": true,
+        "bracketSpacing": true,
+        "arrowParens": "always"
+      }
+    ]
+  }
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 ### Changed
+- Move eslint config to `.eslintrc.json` with prettier support
+- Add `.editorconfig`
 
 ### Fixed
 

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "codemirror": "^6.0.1",
     "container-query-polyfill": "^1.0.2",
     "date-fns": "^2.29.3",
+    "eslint-config-prettier": "^8.8.0",
     "file-saver": "^2.0.5",
     "fs-extra": "^9.0.1",
     "graphql": "^16.6.0",
@@ -76,7 +77,9 @@
     "build": "node scripts/build.js",
     "build:dev": "yarn run build-storybook && node scripts/build.js",
     "build-storybook": "cd ./storybook && yarn install && yarn run build-storybook -- -o ../public/storybook --loglevel warn",
-    "lint": "eslint src/. --ext .js",
+    "lint": "eslint src/**/*.{js,jsx,json}",
+    "lint:fix": "eslint --fix src/**/*.{js,jsx,json}",
+    "format": "prettier --write src/**/*.{js,jsx,css,md,json,scss} --config ./.prettierrc",
     "stylelint": "stylelint --syntax=scss src/**/*.scss",
     "test": "node scripts/test.js --transformIgnorePatterns 'node_modules/(?!three)/'",
     "test:integration": "cd e2e; docker compose up --exit-code-from cypress",
@@ -86,12 +89,6 @@
     "build:wc": "NODE_ENV=production BABEL_ENV=production webpack build -c ./webpack.component.config.js",
     "heroku-postbuild": "export PUBLIC_URL='' && yarn build && yarn build:wc"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -135,6 +132,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.9.2",
@@ -160,6 +158,7 @@
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",
+    "prettier": "^2.8.8",
     "react-dev-utils": "^11.0.3",
     "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,21 +1,21 @@
-import App from './App';
-import { Provider } from 'react-redux'
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
-import { Cookies, CookiesProvider } from 'react-cookie';
-import configureStore from 'redux-mock-store';
-
-jest.mock('./utils/Notifications')
-jest.mock('./components/Editor/EditorSlice', () => {
-  const actual = jest.requireActual('./components/Editor/EditorSlice')
+import App from "./App";
+import { Provider } from "react-redux";
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import { Cookies, CookiesProvider } from "react-cookie";
+import configureStore from "redux-mock-store";
+
+jest.mock("./utils/Notifications");
+jest.mock("./components/Editor/EditorSlice", () => {
+  const actual = jest.requireActual("./components/Editor/EditorSlice");
   return {
     ...actual,
-    saveProject: jest.fn()
-  }
-})
+    saveProject: jest.fn(),
+  };
+});
 
-describe('Browser prefers light mode', () => {
-  let store
+describe("Browser prefers light mode", () => {
+  let store;
   let cookies;
 
   beforeEach(() => {
@@ -28,49 +28,49 @@ describe('Browser prefers light mode', () => {
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
       dispatchEvent: jest.fn(),
-    })
+    });
 
-    cookies = new Cookies()
-    const middlewares = []
-    const mockStore = configureStore(middlewares)
+    cookies = new Cookies();
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
     const initialState = {
       editor: {},
-      auth: {}
-    }
+      auth: {},
+    };
     store = mockStore(initialState);
-  })
+  });
 
-  test('Light mode class name added if no cookie', () => {
+  test("Light mode class name added if no cookie", () => {
     const appContainer = render(
       <CookiesProvider cookies={cookies}>
         <Provider store={store}>
           <App />
         </Provider>
-      </CookiesProvider>
-    )
-    expect(appContainer.container.querySelector('#app')).toHaveClass("--light")
-  })
+      </CookiesProvider>,
+    );
+    expect(appContainer.container.querySelector("#app")).toHaveClass("--light");
+  });
 
-  test('Dark mode class name added if cookie specifies dark theme', () => {
-    cookies.set('theme', 'dark')
+  test("Dark mode class name added if cookie specifies dark theme", () => {
+    cookies.set("theme", "dark");
     const appContainer = render(
       <CookiesProvider cookies={cookies}>
         <Provider store={store}>
           <App />
         </Provider>
-      </CookiesProvider>
-    )
-    expect(appContainer.container.querySelector('#app')).toHaveClass("--dark")
-  })
+      </CookiesProvider>,
+    );
+    expect(appContainer.container.querySelector("#app")).toHaveClass("--dark");
+  });
 
   afterEach(() => {
-    act(() => cookies.remove('theme'))
-  })
-})
+    act(() => cookies.remove("theme"));
+  });
+});
 
-describe('Browser prefers dark mode', () => {
+describe("Browser prefers dark mode", () => {
   let cookies;
-  let store
+  let store;
 
   beforeEach(() => {
     window.matchMedia = (query) => ({
@@ -82,84 +82,84 @@ describe('Browser prefers dark mode', () => {
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
       dispatchEvent: jest.fn(),
-    })
+    });
     cookies = new Cookies();
-    const middlewares = []
-    const mockStore = configureStore(middlewares)
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
     const initialState = {
       editor: {},
-      auth: {}
-    }
+      auth: {},
+    };
     store = mockStore(initialState);
-  })
+  });
 
-  test('Dark mode class name added if no cookie', () => {
+  test("Dark mode class name added if no cookie", () => {
     const appContainer = render(
       <CookiesProvider cookies={cookies}>
         <Provider store={store}>
           <App />
         </Provider>
-      </CookiesProvider>
-    )
-    expect(appContainer.container.querySelector('#app')).toHaveClass("--dark")
-  })
+      </CookiesProvider>,
+    );
+    expect(appContainer.container.querySelector("#app")).toHaveClass("--dark");
+  });
 
-  test('Light mode class name added if cookie specifies light theme', () => {
-    cookies.set('theme', 'light')
+  test("Light mode class name added if cookie specifies light theme", () => {
+    cookies.set("theme", "light");
     const appContainer = render(
       <CookiesProvider cookies={cookies}>
         <Provider store={store}>
           <App />
         </Provider>
-      </CookiesProvider>
-    )
-    expect(appContainer.container.querySelector('#app')).toHaveClass("--light")
-  })
+      </CookiesProvider>,
+    );
+    expect(appContainer.container.querySelector("#app")).toHaveClass("--light");
+  });
 
   afterEach(() => {
-    act(() => cookies.remove('theme'))
-  })
-})
+    act(() => cookies.remove("theme"));
+  });
+});
 
-describe('Beta banner', () => {
-  let cookies
-  let store
+describe("Beta banner", () => {
+  let cookies;
+  let store;
 
   beforeEach(() => {
-    cookies = new Cookies()
-    const middlewares = []
-    const mockStore = configureStore(middlewares)
+    cookies = new Cookies();
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
     const initialState = {
       editor: {},
-      auth: {}
-    }
+      auth: {},
+    };
     store = mockStore(initialState);
-  })
+  });
 
-  test('Renders beta banner if betaBannerDismissed cookie not set', () => {
+  test("Renders beta banner if betaBannerDismissed cookie not set", () => {
     render(
       <CookiesProvider cookies={cookies}>
         <Provider store={store}>
           <App />
         </Provider>
-      </CookiesProvider>
-    )
-    expect(screen.queryByText('betaBanner.message')).toBeInTheDocument()
-  })
+      </CookiesProvider>,
+    );
+    expect(screen.queryByText("betaBanner.message")).toBeInTheDocument();
+  });
 
-  test('Does not render beta banner if betaBannerDismissed cookie is true', () => {
-    cookies.set('betaBannerDismissed', 'true')
+  test("Does not render beta banner if betaBannerDismissed cookie is true", () => {
+    cookies.set("betaBannerDismissed", "true");
     render(
       <CookiesProvider cookies={cookies}>
         <Provider store={store}>
           <App />
         </Provider>
-      </CookiesProvider>
-    )
-    expect(screen.queryByText('betaBanner.message')).not.toBeInTheDocument()
-  })
+      </CookiesProvider>,
+    );
+    expect(screen.queryByText("betaBanner.message")).not.toBeInTheDocument();
+  });
 
   afterEach(() => {
-    act(() => cookies.remove('betaBannerDismissed'))
-  })
-})
+    act(() => cookies.remove("betaBannerDismissed"));
+  });
+});