build: disable biome formatter for now (#65464)

.vscode/settings.json

@@ -48,7 +48,7 @@
   "[typescriptreact]": {
     "editor.formatOnSave": true,
     "editor.tabSize": 2,
-    "editor.defaultFormatter": "biomejs.biome",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "quickfix.biome": "explicit",
       "source.fixAll.eslint": "explicit"
@@ -58,7 +58,7 @@
   "[javascriptreact]": {
     "editor.formatOnSave": true,
     "editor.tabSize": 2,
-    "editor.defaultFormatter": "biomejs.biome",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "quickfix.biome": "explicit",
       "source.fixAll.eslint": "explicit"

biome.json

@@ -79,7 +79,7 @@
   },
   "javascript": {
     "formatter": {
-      "enabled": true,
+      "enabled": false,
       "lineWidth": 90,
       "quoteStyle": "single",
       "jsxQuoteStyle": "double",

package.json

@@ -228,11 +228,11 @@
     "lint:js": "eslint static/app tests/js --ext .js,.jsx,.ts,.tsx",
     "lint:css": "stylelint 'static/app/**/*.[jt]sx'",
     "lint:biome": "biome check .",
-    "lint:prettier": "prettier **/*.md **/*.yaml --check",
+    "lint:prettier": "prettier **/*.md **/*.yaml **/*.{ts,tsx} --check",
     "fix": "yarn fix:biome && yarn fix:prettier && yarn fix:eslint",
     "fix:eslint": "eslint static/app tests/js --ext .js,.jsx,.ts,.tsx --fix",
     "fix:biome": "biome check . --apply",
-    "fix:prettier": "prettier **/*.md **/*.yaml --write",
+    "fix:prettier": "prettier **/*.md **/*.yaml **/*.{ts,tsx} --write",
     "dev": "(yarn check --verify-tree || yarn install --check-files) && sentry devserver",
     "dev-ui": "SENTRY_UI_DEV_ONLY=1 SENTRY_WEBPACK_PROXY_PORT=7999 yarn webpack serve",
     "dev-acceptance": "NO_DEV_SERVER=1 NODE_ENV=development yarn webpack --watch",

static/app/actionCreators/projects.tsx

@@ -415,14 +415,20 @@ export async function fetchAnyReleaseExistence(
 function makeProjectTeamsQueryKey({
   orgSlug,
   projectSlug,
-}: {orgSlug: string; projectSlug: string}): ApiQueryKey {
+}: {
+  orgSlug: string;
+  projectSlug: string;
+}): ApiQueryKey {
   return [`/projects/${orgSlug}/${projectSlug}/teams/`];
 }
 
 export function useFetchProjectTeams({
   orgSlug,
   projectSlug,
-}: {orgSlug: string; projectSlug: string}) {
+}: {
+  orgSlug: string;
+  projectSlug: string;
+}) {
   return useApiQuery<Team[]>(makeProjectTeamsQueryKey({orgSlug, projectSlug}), {
     staleTime: 0,
     retry: false,
@@ -433,7 +439,10 @@ export function useFetchProjectTeams({
 export function useAddTeamToProject({
   orgSlug,
   projectSlug,
-}: {orgSlug: string; projectSlug: string}) {
+}: {
+  orgSlug: string;
+  projectSlug: string;
+}) {
   const api = useApi();
   const queryClient = useQueryClient();
 
@@ -454,7 +463,10 @@ export function useAddTeamToProject({
 export function useRemoveTeamFromProject({
   orgSlug,
   projectSlug,
-}: {orgSlug: string; projectSlug: string}) {
+}: {
+  orgSlug: string;
+  projectSlug: string;
+}) {
   const api = useApi();
   const queryClient = useQueryClient();
 

static/app/components/alert.tsx

@@ -144,15 +144,13 @@ const alertStyles = ({
     font-size: ${theme.fontSizeMedium};
     border-radius: ${theme.borderRadius};
     border: 1px solid ${alertColors.border};
-    background: ${
-      opaque
-        ? `linear-gradient(
+    background: ${opaque
+      ? `linear-gradient(
           ${alertColors.backgroundLight},
           ${alertColors.backgroundLight}),
           linear-gradient(${theme.background}, ${theme.background}
         )`
-        : `${alertColors.backgroundLight}`
-    };
+      : `${alertColors.backgroundLight}`};
 
     a:not([role='button']) {
       color: ${theme.textColor};
@@ -176,32 +174,26 @@ const alertStyles = ({
       color: ${alertColors.iconColor};
     }
 
-    ${
-      hovered &&
-      `
+    ${hovered &&
+    `
       border-color: ${alertColors.borderHover};
       ${IconWrapper}, ${IconChevron} {
         color: ${alertColors.iconHoverColor};
       }
-    `
-    }
+    `}
 
-    ${
-      showExpand &&
-      `cursor: pointer;
+    ${showExpand &&
+    `cursor: pointer;
       ${TrailingItems} {
        cursor: auto;
       }
-    `
-    }
+    `}
 
-    ${
-      system &&
-      `
+    ${system &&
+    `
       border-width: 0 0 1px 0;
       border-radius: 0;
-    `
-    }
+    `}
   `;
 };
 

static/app/components/alerts/snoozeAlert.tsx

@@ -203,5 +203,6 @@ const DropdownTrigger = styled(Button)`
 
 const MuteButton = styled(Button)<{hasDropdown: boolean}>`
   box-shadow: none;
-  border-radius: ${p => (p.hasDropdown ? p.theme.borderRadiusLeft : p.theme.borderRadius)};
+  border-radius: ${p =>
+    p.hasDropdown ? p.theme.borderRadiusLeft : p.theme.borderRadius};
 `;

static/app/components/avatar/styles.tsx

@@ -10,10 +10,8 @@ export const imageStyle = (props: ImageStyleProps) => css`
   top: 0px;
   left: 0px;
   border-radius: ${props.round ? '50%' : '3px'};
-  ${
-    props.suggested &&
-    css`
+  ${props.suggested &&
+  css`
     filter: grayscale(100%);
-  `
-  }
+  `}
 `;

static/app/components/button.tsx

@@ -432,9 +432,8 @@ const getColors = ({
       color: ${color};
     }
 
-    ${
-      size !== 'zero' &&
-      `
+    ${size !== 'zero' &&
+    `
       &:hover,
       &:active,
       &[aria-expanded="true"] {
@@ -446,8 +445,7 @@ const getColors = ({
         color: ${colorActive || color};
         border-color: ${borderActive};
       }
-    `
-    }
+    `}
 
     &:focus-visible {
       ${getFocusState()}

static/app/components/checkbox.tsx

@@ -174,13 +174,13 @@ const StyledCheckbox = styled('div')<{
         `
       : p.checked
         ? css`
-          background: ${p.color ?? p.theme.active};
-          border: 0;
-        `
+            background: ${p.color ?? p.theme.active};
+            border: 0;
+          `
         : css`
-          background: ${p.theme.background};
-          border: 1px solid ${p.theme.gray200};
-        `}
+            background: ${p.theme.background};
+            border: 1px solid ${p.theme.gray200};
+          `}
 `;
 
 const VariableWeightIcon = styled('svg')<{size: string; invertColors?: boolean}>`

static/app/components/demo/demoHeader.tsx

@@ -96,8 +96,7 @@ const Wrapper = styled('div')<{collapsed: boolean}>`
   gap: ${space(4)};
 
   margin-left: calc(
-    -1 * ${p =>
-      p.collapsed ? p.theme.sidebar.collapsedWidth : p.theme.sidebar.expandedWidth}
+    -1 * ${p => (p.collapsed ? p.theme.sidebar.collapsedWidth : p.theme.sidebar.expandedWidth)}
   );
 
   position: fixed;