Replace ESLint, Stylelint, and Prettier with Biome - #961
Conversation
![marie-hermes-agent[bot]](https://avatars.githubusercontent.com/u/17425394?s=60&v=4){kind=small}
| const { paddingLeft, paddingRight } = getComputedStyle(containerRef.current); | ||
| const containerWidthWithoutPadding = | ||
| containerWidth - parseInt(paddingLeft) - parseInt(paddingRight); | ||
| containerWidth - Number.parseInt(paddingLeft) - Number.parseInt(paddingRight); |
There was a problem hiding this comment.
Good change - Number.parseInt() is preferred over the global parseInt() function for better clarity and consistency.
| export function formatBytes(bytes: number | string): string { | ||
| let l = 0; | ||
| let n = typeof bytes === 'number' ? bytes : parseInt(bytes, 10) || 0; | ||
| let n = typeof bytes === 'number' ? bytes : Number.parseInt(bytes, 10) || 0; |
There was a problem hiding this comment.
Good change - Number.parseInt() is preferred over the global parseInt() function.
|
|
||
| useEffect(() => { | ||
| if (typeof window !== undefined) { | ||
| if (typeof window !== 'undefined') { |
There was a problem hiding this comment.
This condition will always be true. typeof window returns a string, so it will never be undefined (the value). This should be typeof window !== 'undefined' to check if the window object exists. This is a critical bug that could cause issues in SSR environments.
| > | ||
| <div className="container"> | ||
| <nav role="navigation" className={styles.header}> | ||
| <nav className={styles.header}> |
There was a problem hiding this comment.
Removing the role="navigation" attribute reduces accessibility. The <nav> element already has implicit navigation role, but explicit roles are often preferred for screen readers and accessibility tools. Consider keeping this attribute.
| "useOptionalChain": "off" | ||
| }, | ||
| "correctness": { | ||
| "useExhaustiveDependencies": "off" |
There was a problem hiding this comment.
Disabling useExhaustiveDependencies could lead to React Hook dependency issues and potential bugs. This rule helps catch missing dependencies in useEffect, useMemo, and useCallback hooks. Consider enabling this rule and fixing the violations instead.
| "useExhaustiveDependencies": "off" | ||
| }, | ||
| "security": { | ||
| "noDangerouslySetInnerHtml": "off" |
There was a problem hiding this comment.
Disabling noDangerouslySetInnerHtml removes an important security check. This rule helps prevent XSS vulnerabilities. If you need to use dangerouslySetInnerHTML, it should be done carefully with proper sanitization.
| "useNodejsImportProtocol": "off" | ||
| }, | ||
| "suspicious": { | ||
| "noExplicitAny": "off", |
There was a problem hiding this comment.
Disabling noExplicitAny removes type safety checks. This could lead to less type-safe code. Consider enabling this rule and gradually fixing any types with proper TypeScript types.
1 participant
Summary
Switch the project from the ESLint + Stylelint + Prettier stack to Biome so linting/formatting is consolidated in one tool and local/CI checks are simpler to maintain.
Changes
biome.json, replace lint scripts inpackage.json, and remove ESLint/Stylelint/Prettier dependencies and config filesTesting
./node_modules/.bin/biome check ../node_modules/.bin/tsc --noEmit --incremental