fix: fix lint issues

arianrhodsandlot · Aug 9, 2023 · 34be6aa · 34be6aa
1 parent 72878ef
commit 34be6aa
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 65 deletions.
diff --git a/scripts/dev-browser.ts b/scripts/dev-browser.ts
@@ -19,7 +19,7 @@ await waitForFile(extensionManifest)
 const context = await chromium.launchPersistentContext(userDataDir, {
   headless: false,
   devtools: true,
-  // eslint-disable-next-line unicorn/no-null
+
   viewport: null,
   args: [
     `--disable-extensions-except=${pathToExtension}`,

diff --git a/src/pages/options/components/app.tsx b/src/pages/options/components/app.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import { Button } from '@rmwc/button'
 import { Checkbox } from '@rmwc/checkbox'
 import { Elevation } from '@rmwc/elevation'
@@ -54,49 +53,49 @@ function App() {
 
   return (
     <form className={`theme-${isDark ? 'dark' : 'light'}`}>
-      <Typography use='subtitle2' tag='h2'>
+      <Typography tag='h2' use='subtitle2'>
         {i18n('optionsWindowSize')}
       </Typography>
-      <Elevation z={0} className='elevation-with-padding'>
+      <Elevation className='elevation-with-padding' z={0}>
         <Elevation z={0}>
-          <Typography use='subtitle2' tag='h3'>
+          <Typography tag='h3' use='subtitle2'>
             {i18n('optionsWidth')}
           </Typography>
           <Slider
             className='slider-size slider-width'
+            discrete
+            displayMarkers
+            max={800}
+            min={300}
             name='width'
-            value={width}
             onInput={(e) => {
               setWidth(e.detail.value)
             }}
-            discrete
-            displayMarkers
-            min={300}
-            max={800}
             step={50}
+            value={width}
           />
         </Elevation>
         <Elevation z={0}>
-          <Typography use='subtitle2' tag='h3'>
+          <Typography tag='h3' use='subtitle2'>
             {i18n('optionsHeight')}
           </Typography>
           <Slider
             className='slider-size slider-height'
+            discrete
+            displayMarkers
+            max={600}
+            min={300}
             name='height'
-            value={height}
             onInput={(e) => {
               setHeight(e.detail.value)
             }}
-            discrete
-            displayMarkers
-            min={300}
-            max={600}
             step={50}
+            value={height}
           />
         </Elevation>
       </Elevation>
 
-      <Typography use='subtitle2' tag='h3'>
+      <Typography tag='h3' use='subtitle2'>
         {i18n('optionsTheme')}
       </Typography>
       <Elevation z={0}>
@@ -106,13 +105,13 @@ function App() {
           { value: 'dark', label: i18n('optionsDark') },
         ].map(({ value, label }) => (
           <Radio
-            name='theme'
-            key={value}
-            value={value}
             checked={theme === value}
+            key={value}
+            name='theme'
             onChange={() => {
               setTheme(value)
             }}
+            value={value}
           >
             {label}
           </Radio>
@@ -121,14 +120,14 @@ function App() {
 
       {isContextMenuEnabled ? (
         <>
-          <Typography use='subtitle2' tag='h3'>
+          <Typography tag='h3' use='subtitle2'>
             {i18n('optionsShowContextMenu')}
           </Typography>
           <Elevation z={0}>
             <Checkbox
-              name='showContextMenu'
-              label={showContextMenu ? i18n('optionsEnabled') : i18n('optionsDisabled')}
               checked={showContextMenu}
+              label={showContextMenu ? i18n('optionsEnabled') : i18n('optionsDisabled')}
+              name='showContextMenu'
               onChange={(e) => {
                 setShowContextMenu(e.currentTarget.checked)
               }}
@@ -137,66 +136,66 @@ function App() {
         </>
       ) : undefined}
 
-      <Typography use='subtitle2' tag='h3'>
+      <Typography tag='h3' use='subtitle2'>
         {i18n('optionsDocs')}
       </Typography>
-      <Elevation z={0} className='elevation-with-padding'>
-        <Button icon='open_in_new' outlined dense href='https://devdocs.io/settings' target='_blank' tag='a'>
+      <Elevation className='elevation-with-padding' z={0}>
+        <Button dense href='https://devdocs.io/settings' icon='open_in_new' outlined tag='a' target='_blank'>
           {i18n('optionsSelectFrom')}
         </Button>
       </Elevation>
 
-      <Typography use='subtitle2' tag='h3'>
+      <Typography tag='h3' use='subtitle2'>
         {i18n('optionsShortcut')}
       </Typography>
-      <Elevation z={0} className='elevation-with-padding'>
+      <Elevation className='elevation-with-padding' z={0}>
         <Button
-          icon='keyboard'
-          outlined
           dense
           href='chrome://extensions/shortcuts'
-          target='_blank'
-          tag='a'
+          icon='keyboard'
           onClick={(e) => {
             e.preventDefault()
             browser.tabs.create({ url: e.currentTarget.href })
           }}
+          outlined
+          tag='a'
+          target='_blank'
         >
           {i18n('optionsConfigureShortcuts')}
         </Button>
       </Elevation>
 
-      <Elevation z={0} className='footer'>
-        <Typography use='caption' tag='h3'>
+      <Elevation className='footer' z={0}>
+        <Typography tag='h3' use='caption'>
           DevDocs Web Ext
           <span className='space'>-</span>
           {i18n('optionsVersion')} {version}
         </Typography>
-        <Typography use='caption' tag='div'>
+        <Typography tag='div' use='caption'>
           {i18n('optionsAboutDesc')}
         </Typography>
-        <Typography use='caption' tag='div'>
+        <Typography tag='div' use='caption'>
           <a href='https://chrome.google.com/webstore/detail/devdocs-web-ext/kdjoccdpjblcefijcfhnjoljodddedpj'>
-            <Icon icon={{ icon: 'star_half' }}></Icon>
+            <Icon icon={{ icon: 'star_half' }} />
             {i18n('optionsRate')}
           </a>
           <span className='space'>·</span>
           <a href='https://github.com/arianrhodsandlot/devdocs-web-ext'>
-            <Icon icon={{ icon: 'code' }}></Icon>
+            <Icon icon={{ icon: 'code' }} />
             {i18n('optionsSource')}
           </a>
           <span className='space'>·</span>
           <a href='https://github.com/arianrhodsandlot'>
-            <Icon icon={{ icon: 'copyright' }}></Icon>
+            <Icon icon={{ icon: 'copyright' }} />
             arianrhodsandlot
           </a>
         </Typography>
       </Elevation>
 
       <a
         className='github-fork-ribbon right-bottom fixed'
-        href='https://github.com/arianrhodsandlot/devdocs-web-ext'
         data-ribbon='Star me on GitHub'
+        href='https://github.com/arianrhodsandlot/devdocs-web-ext'
         title='Star me on GitHub'
       >
         Star me on GitHub
@@ -206,4 +205,3 @@ function App() {
 }
 
 export default App
-/* eslint-enable @typescript-eslint/no-shadow */
diff --git a/src/pages/popup/components/app.tsx b/src/pages/popup/components/app.tsx
@@ -16,9 +16,9 @@ export default function App() {
     <>
       <Header />
       <Routes>
-        <Route path='/' element={<Home />} />
-        <Route path='/search' element={<Search />} />
-        <Route path='*' element={<Content />} />
+        <Route element={<Home />} path='/' />
+        <Route element={<Search />} path='/search' />
+        <Route element={<Content />} path='*' />
       </Routes>
     </>
   )

diff --git a/src/pages/popup/components/content.tsx b/src/pages/popup/components/content.tsx
@@ -12,7 +12,7 @@ function cssEscape(selector: string) {
   try {
     return CSS.escape(selector)
   } catch {
-    return selector.replace(/([#,./:[\]])/gu, '\\$1')
+    return selector.replaceAll(/([#,./:[\]])/gu, '\\$1')
   }
 }
 
@@ -45,7 +45,7 @@ export default function Content() {
         }
       }
     },
-    [location]
+    [location],
   )
 
   useEffect(() => {
@@ -183,11 +183,11 @@ export default function Content() {
     <div className='_container' role='document'>
       <div className='_content' role='main'>
         <div
+          aria-hidden='true'
           className={classnames(['_page', doc ? `_${doc.type}` : ''])}
+          dangerouslySetInnerHTML={{ __html: content }}
           onClick={onContentClick}
           ref={pageRef as React.MutableRefObject<HTMLDivElement>}
-          dangerouslySetInnerHTML={{ __html: content }}
-          aria-hidden='true'
         />
       </div>
     </div>

diff --git a/src/pages/popup/components/header.tsx b/src/pages/popup/components/header.tsx
@@ -152,19 +152,19 @@ function Header() {
 
   return (
     <div className='_header'>
-      <form className='_search' autoComplete='off'>
+      <form autoComplete='off' className='_search'>
         <svg>
           <use href='#icon-search' />
         </svg>
         <input
-          defaultValue={query}
-          placeholder='Search...'
           className='input _search-input'
-          spellCheck={false}
+          defaultValue={query}
           onInput={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder='Search...'
           ref={inputRef}
+          spellCheck={false}
           style={docName ? { paddingLeft: inputPaddingLeft } : {}}
-          onKeyDown={handleKeyDown}
         />
         {docName ? (
           <div className='_search-tag' ref={scopeRef as React.MutableRefObject<HTMLDivElement>}>

diff --git a/src/pages/popup/components/search.tsx b/src/pages/popup/components/search.tsx
@@ -34,7 +34,7 @@ export default function Search() {
       const maxFocusPos = entries.length - 1
       setFocusPos(focusPos === maxFocusPos ? 0 : focusPos + 1)
     },
-    [focusPos, entries]
+    [focusPos, entries],
   )
 
   const focusPrevEntry = useCallback(
@@ -45,7 +45,7 @@ export default function Search() {
       const maxFocusPos = entries.length - 1
       setFocusPos(focusPos === 0 ? maxFocusPos : focusPos - 1)
     },
-    [focusPos, entries]
+    [focusPos, entries],
   )
 
   const enterFocusEntry = useCallback(
@@ -58,7 +58,7 @@ export default function Search() {
         navigate(getEntryUrl(focusEntry))
       }
     },
-    [focusPos, entries, navigate]
+    [focusPos, entries, navigate],
   )
 
   const getEntryRef = useCallback(
@@ -75,7 +75,7 @@ export default function Search() {
       }
       return ref
     },
-    [entries]
+    [entries],
   )
 
   const search = useCallback(
@@ -107,7 +107,7 @@ export default function Search() {
       setFocusPos(newFocusPos)
       setFailMessage(newFailMessage)
     },
-    [location, navigate]
+    [location, navigate],
   )
 
   useEffect(() => {
@@ -170,14 +170,14 @@ export default function Search() {
       <div className='_list-note'>
         Note: documentations must be{' '}
         <a
-          href='https://devdocs.io/settings'
           className='_list-note-link'
-          target='_blank'
-          rel='noopener noreferrer'
+          href='https://devdocs.io/settings'
           onClick={(e) => {
             e.preventDefault()
             browser.tabs.create({ url: e.currentTarget.href })
           }}
+          rel='noopener noreferrer'
+          target='_blank'
         >
           enabled
         </a>{' '}
@@ -193,8 +193,8 @@ export default function Search() {
             focus: focusPos === i ? 'focus' : '',
           })}
           key={`${entry.doc.slug}-${entry.doc.name}/${entry.path}-${entry.name}`}
-          to={getEntryUrl(entry)}
           ref={getEntryRef(entry)}
+          to={getEntryUrl(entry)}
         >
           <div className='_list-count'>{getDocVersion(entry.doc)}</div>
           <div className='_list-text'>{entry.name}</div>

diff --git a/src/pages/popup/index.tsx b/src/pages/popup/index.tsx
@@ -53,7 +53,7 @@ async function main() {
   render(
     <HashRouter>
       <App />
-    </HashRouter>
+    </HashRouter>,
   )
 }
 

diff --git a/src/types/doc.d.ts b/src/types/doc.d.ts
@@ -22,7 +22,7 @@ interface Entry {
   name: string
   path: string
   type: string
-  // eslint-disable-next-line no-use-before-define
+
   doc: ExtendedDoc
 }
 

diff --git a/src/types/message.d.ts b/src/types/message.d.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-use-before-define
 type WrapedResponseContent = WrapedResponseContentRecord | WrapedResponseContentRecord[]
 
 type WrapedResponseContentRecord = Record<