chore: replace eslint with biomejs (#2189)

**TLDR; Replace eslint and prettier (except css) for linting and
formatting.**

After doing some testing, debugging and fighting with getting eslint to
work in #2175, I made this to test biomejs as a replacement.

Either way we had to do big config changes for eslint 9.x so might
aswell try biomejs.

In general a positive experience having tested biomejs.

- Linting is now done for the whole repo, except "ignores".
- Seperated gh workflows.
  - Linting is now done in a separate workflow for the whole repo.
- Building and testing the individual packages or apps i their own
workflow. (will do more renames here after merging into `next`)
- New recommended vscode extension for biomejs.

- Biomejs lints, formats and sorts import order in <1s, while eslint 8.x
uses >40s for only linting.
  - Linting when coding is also noticeably faster
- Biomejs is still limited in what can be configured, but most of its
current features set is good enough for our needs.
- Biomejs is only 1 dependency, opposed to 11 dependencies from eslint
  - No more hassle upgrading dependencies hopefully
- Biomejs lacks:
- CSS formatting, ([but its being worked
on](https://biomejs.dev/internals/language-support/)), so we are still
using prettier for this.
  - Typed-linting? (i think)
- No way of defining our own import order
([RFC](biomejs/biome#3015))
- No plugin support [but its
planned](https://biomejs.dev/blog/roadmap-2024/)
- Biomejs also has some new good linting rules we fixed
  - https://biomejs.dev/linter/rules/no-for-each/
  - https://biomejs.dev/linter/rules/no-comma-operator/
  - https://biomejs.dev/linter/rules/no-shadow-restricted-names/
  - https://biomejs.dev/linter/rules/no-useless-else/
  - https://biomejs.dev/linter/rules/no-assign-in-expressions/
  - https://biomejs.dev/linter/rules/no-accumulating-spread/
  - https://biomejs.dev/linter/rules/no-implicit-any-let/

Author: mimarz

.changeset/tender-ties-swim.md

@@ -0,0 +1,6 @@
+---
+'@digdir/designsystemet-react': patch
+'@digdir/designsystemet': patch
+---
+
+Changed linter and formatter from eslint to biomejs

.eslintignore

@@ -1,15 +1,12 @@
-name: Checks Storefront
+name: Build Storefront
 on:
   workflow_dispatch:
   pull_request:
     paths:
       - 'apps/storefront/**'
-  push:
-    paths:
-      - 'apps/storefront/**'
 jobs:
   checks:
-    name: Builds, lints and tests code
+    name: Build & test
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -27,9 +24,4 @@ jobs:
         run: yarn build:storefront
       - name: Types
         run: yarn types:storefront
-      - name: Lint Code
-        run: yarn lint ./apps/storefront
-      - name: Lint CSS
-        run: yarn lint-style ./apps/storefront/**/*.css
-      - name: Test
-        run: yarn test
+

.eslintrc.cjs

@@ -1,16 +1,12 @@
-name: Checks Packages
+name: Build Packages
 on:
   workflow_dispatch:
   pull_request:
     paths:
       - 'packages/**'
-      - '*.*js'
-  push:
-    paths:
-      - 'packages/**'
 jobs:
   checks:
-    name: Builds, lints and tests code
+    name: Build & test
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -19,9 +15,5 @@ jobs:
         run: yarn build
       - name: Types
         run: yarn types:react
-      - name: Lint Code
-        run: yarn lint:all
-      - name: Lint CSS
-        run: yarn lint-style
       - name: Test
         run: yarn test

.github/workflows/check-storefront.yml

@@ -0,0 +1,20 @@
+name: Checks
+on:
+  workflow_dispatch:
+  pull_request:
+    paths:
+      - 'packages/**'
+      - 'apps/**'
+      - 'biome.jsonc'
+jobs:
+  checks:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/gh-setup
+      - name: Biome CI
+        run: yarn biome ci .
+      - name: Lint CSS
+        run: yarn lint-style
+

.github/workflows/checks-packages.yml

@@ -1,6 +1,5 @@
 {
   "recommendations": [
-    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "unifiedjs.vscode-mdx",
     "christian-kohler.npm-intellisense",
@@ -22,6 +21,7 @@
     "editorconfig.editorconfig",
     "zignd.html-css-class-completion",
     "streetsidesoftware.code-spell-checker",
-    "streetsidesoftware.code-spell-checker-norwegian-bokmal"
+    "streetsidesoftware.code-spell-checker-norwegian-bokmal",
+    "biomejs.biome"
   ]
 }

.github/workflows/checks.yml

@@ -1,8 +1,15 @@
 {
   "git.rebaseWhenSync": true,
   "git.autofetch": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "prettier.prettierPath": "./node_modules/prettier",
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
@@ -11,22 +18,5 @@
     "packages/theme/brand/digdir/typography/primary.css",
     "packages/theme/brand/digdir/semantic.css"
   ],
-  "[ignore]": {
-    "editor.defaultFormatter": "foxundermoon.shell-format"
-  },
-  "eslint.probe": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "html",
-    "vue",
-    "markdown",
-    "mdx"
-  ],
-  "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}",
-  "cSpell.words": ["altinn", "brreg", "designsystemet", "digdir"],
-  "cSpell.language": "en,nb",
-  "cSpell.ignorePaths": ["**/node_modules/**", "**/package.json", "yarn.lock"],
-  "cSpell.enabledLanguageIds": ["markdown", "plaintext"]
+  "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}"
 }

.vscode/extensions.json

@@ -1,7 +1,7 @@
 'use client';
-import { useState } from 'react';
+import { Button, Tooltip } from '@digdir/designsystemet-react';
 import { ClipboardIcon } from '@navikt/aksel-icons';
-import { Tooltip, Button } from '@digdir/designsystemet-react';
+import { useState } from 'react';
 
 import classes from './ClipboardButton.module.css';
 

.vscode/settings.json

@@ -1,17 +1,17 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Button, Tooltip } from '@digdir/designsystemet-react';
 import { FilesIcon } from '@navikt/aksel-icons';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { format } from 'prettier/standalone.js';
-import * as prettierMarkdown from 'prettier/plugins/markdown.js';
+import * as prettierBabel from 'prettier/parser-babel';
+import * as prettierEstree from 'prettier/plugins/estree';
 import * as prettierHtml from 'prettier/plugins/html.js';
+import * as prettierMarkdown from 'prettier/plugins/markdown.js';
 import * as prettierCSS from 'prettier/plugins/postcss.js';
 import * as prettierTypescript from 'prettier/plugins/typescript.js';
-import * as prettierEstree from 'prettier/plugins/estree';
-import * as prettierBabel from 'prettier/parser-babel';
+import { format } from 'prettier/standalone.js';
+import { useEffect, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Button, Tooltip } from '@digdir/designsystemet-react';
 
 import classes from './CodeSnippet.module.css';
 
@@ -67,10 +67,7 @@ const CodeSnippet = ({
   };
 
   return (
-    <div
-      className={classes.codeSnippet}
-      data-ds-color-mode='dark'
-    >
+    <div className={classes.codeSnippet} data-ds-color-mode='dark'>
       {snippet && (
         <>
           <Tooltip content={toolTipText}>

apps/_components/src/ClipboardButton/ClipboardButton.tsx

@@ -1,4 +1,4 @@
-import { Paragraph, Modal } from '@digdir/designsystemet-react';
+import { Modal, Paragraph } from '@digdir/designsystemet-react';
 import type { ColorNumber } from '@digdir/designsystemet/color';
 import {
   getColorNameFromNumber,
@@ -26,17 +26,11 @@ const Field = ({
   return (
     <div className={classes.field}>
       {label && (
-        <Paragraph
-          size='sm'
-          className={classes.label}
-        >
+        <Paragraph size='sm' className={classes.label}>
           {label}
         </Paragraph>
       )}
-      <Paragraph
-        size='sm'
-        className={classes.value}
-      >
+      <Paragraph size='sm' className={classes.value}>
         {value}
       </Paragraph>
       {copyBtn && <ClipboardButton value={value} />}
@@ -78,11 +72,7 @@ export const ColorModal = ({
           </div>
           <div className={classes.container}>
             <div className={classes.left}>
-              <Field
-                label='Hexkode:'
-                value={hex}
-                copyBtn
-              />
+              <Field label='Hexkode:' value={hex} copyBtn />
               <Field
                 label='HSLuv:'
                 value={
@@ -105,10 +95,7 @@ export const ColorModal = ({
                   value={getColorCombinations(weight)}
                 />
               )}
-              <Field
-                label=''
-                value='Mer informasjon om fargen kommer.'
-              />
+              <Field label='' value='Mer informasjon om fargen kommer.' />
             </div>
             <div
               className={classes.right}

apps/_components/src/CodeSnippet/CodeSnippet.tsx

@@ -1,6 +1,6 @@
 import {
-  getColorNameFromNumber,
   type ColorNumber,
+  getColorNameFromNumber,
 } from '@digdir/designsystemet/color';
 
 export const capitalizeFirstLetter = (str: string) => {