Merge pull request #972 from research-software-directory/fix-vscode-p…

…roject-settings Fix VSCode project settings for ESLint and formating
research-software-directory · Sep 1, 2023 · 37d25da · 37d25da
2 parents ab1edac + 6acf3ab
commit 37d25da
Show file tree

Hide file tree

Showing 152 changed files with 1,658 additions and 1,672 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,23 +1,18 @@
 {
-  // required to indicate that eslint project is not in the root
+  // ESLint
   "eslint.workingDirectories": [
     "./frontend",
   ],
-  // FORMAT ON SAVE for VSC
-  // based on this acticle https://www.aleksandrhovhannisyan.com/blog/format-code-on-save-vs-code-eslint/
-  // define files to validate, can have more options
-  // but in this project we use typescript and react
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-  ],
-  // it tells VScode to use eslint plugin
-  // Note! you might also need to disable Prettier or VSCode defaults
+  // Formating with ESLint:
+  "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
   },
+  "[javascript][javascriptreact][typescript][typescriptreact]": {
+    "editor.tabSize": 2,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true,
+  },
   // Tailwind plugin integration
   "css.validate": false,
   "editor.quickSuggestions": {
@@ -26,26 +21,10 @@
   "tailwindCSS.includeLanguages": {
     "plaintext": "html"
   },
+  // Backend
   "[java]": {
     "editor.suggest.snippetsPreventQuickSuggestions": false,
     "editor.useTabStops": true,
     "editor.insertSpaces": false,
   },
-  "java.configuration.updateBuildConfiguration": "automatic",
-  "java.test.config": {
-    "envFile": "${workspaceFolder}/.env",
-  },
-  "[typescript]": {
-    "editor.tabSize": 2,
-    "editor.insertSpaces": true,
-    "editor.detectIndentation": false
-  },
-  "[typescriptreact]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[javascript]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
 }
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -1,8 +1,22 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "no-debugger":"warn",
+    // --- Linting ---
+    "no-debugger": "warn",
     "no-console": "warn",
+    // use direct imports on material-ui to improve
+    // performance in unit tests with jest
+    // see https://blog.bitsrc.io/why-is-my-jest-suite-so-slow-2a4859bb9ac0
+    "no-restricted-imports": [
+      "warn",
+      {
+        "name": "@mui/material",
+        "message": "Please use \"import foo from '@mui/material/foo'\" instead."
+      }
+    ],
+    // do not warn for use of img element
+    "@next/next/no-img-element": "off",
+    // --- Formating ---
     "eol-last": [
       "warn",
       "always"
@@ -15,35 +29,25 @@
       "warn",
       "never"
     ],
-    "object-curly-spacing": [
-      "warn",
-      "never"
-    ],
-    "array-bracket-spacing": [
+    "indent": [
       "warn",
-      "never"
+      2,
+      {
+        "SwitchCase": 1
+      }
     ],
-    // we use 2 spaces to indent our code
-    // causes eslint error TypeError: Cannot read property 'loc' of undefined
-    // see https://github.com/typescript-eslint/typescript-eslint/issues/792
-    // "indent": ["warn", 2],
-    // we want to avoid extraneous spaces
     "no-trailing-spaces": "warn",
     "no-multi-spaces": [
       "warn"
     ],
     "no-multiple-empty-lines": "warn",
-    // use direct imports on material-ui to improve
-    // performance in unit tests with jest
-    // see https://blog.bitsrc.io/why-is-my-jest-suite-so-slow-2a4859bb9ac0
-    "no-restricted-imports": [
+    "object-curly-spacing": [
       "warn",
-      {
-        "name": "@mui/material",
-        "message": "Please use \"import foo from '@mui/material/foo'\" instead."
-      }
+      "never"
     ],
-    // do not warn for use of img element
-    "@next/next/no-img-element":"off"
+    "array-bracket-spacing": [
+      "warn",
+      "never"
+    ]
   }
 }
diff --git a/frontend/components/GlobalSearchAutocomplete/index.tsx b/frontend/components/GlobalSearchAutocomplete/index.tsx
@@ -188,7 +188,7 @@ export default function GlobalSearchAutocomplete(props: Props) {
 
                     <div className="text-xs text-current text-opacity-40">
                       {item?.source}{item?.is_published === false && <span
-                      className="flex-nowrap border px-1 py-[2px] rounded bg-warning ml-3 text-xs text-warning-content">unpublished</span>}
+                        className="flex-nowrap border px-1 py-[2px] rounded bg-warning ml-3 text-xs text-warning-content">unpublished</span>}
                     </div>
 
                   </div>

diff --git a/frontend/components/admin/keywords/KeywordTable.tsx b/frontend/components/admin/keywords/KeywordTable.tsx
@@ -54,49 +54,49 @@ export default function KeywordTable({loading, keywords, searchFor, deleteKeywor
         </tr>
       </thead>
       <tbody>
-      {
-        keywords.map(item => {
-          return (
-            <tr key={item.keyword}>
-              <td
-                className="py-2 px-1"
-              >
-                <KeywordEdit
-                  id={item.id}
-                  keyword={item.keyword}
-                  token={token}
-                />
-
-              </td>
-              <td>
-                <Link
-                  href={ssrSoftwareUrl({keywords:[item.keyword]})}
-                  target="_blank"
-                >
-                  {item.software_cnt ?? 0}
-                </Link>
-              </td>
-              <td>
-                <Link
-                  href={ssrProjectsUrl({keywords:[item.keyword]})}
-                  target="_blank"
+        {
+          keywords.map(item => {
+            return (
+              <tr key={item.keyword}>
+                <td
+                  className="py-2 px-1"
                 >
-                  {item.projects_cnt ?? 0}
-                </Link>
-              </td>
-              <td title="Used keyword cannot be deleted">
-                <IconButton
-                  disabled={item.projects_cnt > 0 || item.software_cnt > 0}
-                  onClick={() =>
-                    deleteKeyword(item.id)
-                  }>
-                  <DeleteIcon />
-                </IconButton>
-              </td>
-            </tr>
-          )
-        })
-      }
+                  <KeywordEdit
+                    id={item.id}
+                    keyword={item.keyword}
+                    token={token}
+                  />
+
+                </td>
+                <td>
+                  <Link
+                    href={ssrSoftwareUrl({keywords:[item.keyword]})}
+                    target="_blank"
+                  >
+                    {item.software_cnt ?? 0}
+                  </Link>
+                </td>
+                <td>
+                  <Link
+                    href={ssrProjectsUrl({keywords:[item.keyword]})}
+                    target="_blank"
+                  >
+                    {item.projects_cnt ?? 0}
+                  </Link>
+                </td>
+                <td title="Used keyword cannot be deleted">
+                  <IconButton
+                    disabled={item.projects_cnt > 0 || item.software_cnt > 0}
+                    onClick={() =>
+                      deleteKeyword(item.id)
+                    }>
+                    <DeleteIcon />
+                  </IconButton>
+                </td>
+              </tr>
+            )
+          })
+        }
       </tbody>
       <tfoot>
         <tr>

diff --git a/frontend/components/admin/organisations/AddOrganisation.test.tsx b/frontend/components/admin/organisations/AddOrganisation.test.tsx
@@ -65,7 +65,7 @@ it('calls findROR api on search', async () => {
   await waitFor(() => {
     expect(mockFindInROR).toBeCalledTimes(1)
     expect(mockFindInROR).toBeCalledWith({
-       'searchFor': searchFor
+      'searchFor': searchFor
     })
   })
 })
@@ -90,7 +90,7 @@ it('offers to add organisation when not found in ROR', async () => {
   await waitFor(() => {
     expect(mockFindInROR).toBeCalledTimes(1)
     expect(mockFindInROR).toBeCalledWith({
-       'searchFor': searchFor
+      'searchFor': searchFor
     })
   })
 
@@ -122,7 +122,7 @@ it('shows option found in ROR', async () => {
   await waitFor(() => {
     expect(mockFindInROR).toBeCalledTimes(1)
     expect(mockFindInROR).toBeCalledWith({
-       'searchFor': searchFor
+      'searchFor': searchFor
     })
   })
 

diff --git a/frontend/components/admin/pages/edit/PageEditIndex.test.tsx b/frontend/components/admin/pages/edit/PageEditIndex.test.tsx
@@ -164,15 +164,15 @@ describe('frontend/components/admin/pages/edit/index.tsx', () => {
       expect(mockUpdatePositions).toBeCalledTimes(1)
       expect(mockUpdatePositions).toBeCalledWith({
         'items':[
-         {
-          'id': 'test-id-2',
-          'position': 1,
-          'title': 'Test title 2',
-          'slug': 'test-slug-2',
-          'is_published': false
-         },
-       ],
-       'token': mockSession.token,
+          {
+            'id': 'test-id-2',
+            'position': 1,
+            'title': 'Test title 2',
+            'slug': 'test-slug-2',
+            'is_published': false
+          },
+        ],
+        'token': mockSession.token,
       })
     })
   })

diff --git a/frontend/components/admin/pages/edit/PageEditorBody.tsx b/frontend/components/admin/pages/edit/PageEditorBody.tsx
@@ -45,11 +45,11 @@ export default function PageEditorBody({links,selected,onSelect,onSorted,onDelet
             onSorted={onSorted}
           />
         </div>
-          <EditMarkdownPage
-            slug={selected}
-            onDelete={onDelete}
-            onSubmit={onSubmit}
-          />
+        <EditMarkdownPage
+          slug={selected}
+          onDelete={onDelete}
+          onSubmit={onSubmit}
+        />
       </FormProvider>
     </section>
   )

diff --git a/frontend/components/admin/pages/edit/SortableNav.tsx b/frontend/components/admin/pages/edit/SortableNav.tsx
@@ -50,7 +50,7 @@ export default function SortableNav({selected, links, onSelect, onSorted}: Pages
    */
   function renderListItem(item: RsdLink, index: number) {
     return (
-       <SortableNavItem
+      <SortableNavItem
         key={item.id}
         item={item}
         index={index}

diff --git a/frontend/components/admin/pages/saveMarkdownPage.test.ts b/frontend/components/admin/pages/saveMarkdownPage.test.ts
@@ -57,7 +57,7 @@ it('addMarkdownPage', async() => {
       'slug': 'test-slug',
       'title': 'Test title 1',
     },
-   'status': 200,
+    'status': 200,
   })
 })
 

diff --git a/frontend/components/admin/rsd-contributors/apiRsdContributors.ts b/frontend/components/admin/rsd-contributors/apiRsdContributors.ts
@@ -12,7 +12,7 @@ import {ApiParams, paginationUrlParams} from '~/utils/postgrestUrl'
 import {RsdContributor} from './useContributors'
 
 export async function getContributors({page, rows, token, searchFor, orderBy}: ApiParams<RsdContributor, keyof RsdContributor>) {
-   try {
+  try {
     let query = paginationUrlParams({rows, page})
     if (searchFor) {
       query+=`&or=(given_names.ilike.*${searchFor}*,family_names.ilike.*${searchFor}*,email_address.ilike.*${searchFor}*,orcid.ilike.*${searchFor}*)`

diff --git a/frontend/components/admin/software-highlights/SortableHighlightList.tsx b/frontend/components/admin/software-highlights/SortableHighlightList.tsx
@@ -78,36 +78,36 @@ export default function SortableHighlightsList({highlights, loading, onSorted, o
 
   return (
     <>
-       <SortableList
+      <SortableList
         items={highlights}
         onSorted={onSorted}
         onRenderItem={onRenderItem}
       />
 
-       <ConfirmDeleteModal
-         open={modal.open}
-         title="Remove software highlight"
-         body={
-           <>
-             <p>
+      <ConfirmDeleteModal
+        open={modal.open}
+        title="Remove software highlight"
+        body={
+          <>
+            <p>
                Are you sure you want to delete software <strong>{modal?.highlight?.brand_name}</strong> from hightlight?
-             </p>
-           </>
-         }
-         onCancel={() => {
-           setModal({
-             open: false
-           })
-         }}
-         onDelete={() => {
-           if (modal?.highlight?.id) {
-             onDelete(modal?.highlight?.id)
-           }
-           setModal({
-             open: false
-           })
-         }}
-       />
+            </p>
+          </>
+        }
+        onCancel={() => {
+          setModal({
+            open: false
+          })
+        }}
+        onDelete={() => {
+          if (modal?.highlight?.id) {
+            onDelete(modal?.highlight?.id)
+          }
+          setModal({
+            open: false
+          })
+        }}
+      />
     </>
   )
 }
diff --git a/frontend/components/admin/software-highlights/SortableHightlightItem.tsx b/frontend/components/admin/software-highlights/SortableHightlightItem.tsx
@@ -79,7 +79,7 @@ export default function SortableHighlightItem({pos, item, onEdit, onDelete}: Hig
             variant="square"
           >
             {brand_name.slice(0,3)}
-        </Avatar>
+          </Avatar>
         </ListItemAvatar>
       }
       <ListItemText