docs: unify code conventions in example code within document (#156)

Fixes #155 

### Changes

Remove unused commas, semicolons, and spaces.
Also fix the incorrect constructor depth.

Author: TakhyunKim

docs/configuration.md

@@ -106,7 +106,7 @@ createRoot(document.getElementById('root')!).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true,  }}
+      config={{ hideUntilHover: true }}
       eventBusConfig={{ debug: true }}
       plugins={[
         {

docs/framework/react/guides/custom-plugins.md

@@ -14,18 +14,18 @@ This is our library code:
 counter.ts
 ```tsx
 export function createCounter() {
-  let count = 0;
-  const history = [];
+  let count = 0
+  const history = []
 
   return {
     getCount: () => count,
     increment: () => {
-      history.push(count);
-      count++;
+      history.push(count)
+      count++
     },
     decrement: () => {
-      history.push(count);
-      count--;
+      history.push(count)
+      count--
     },
   };
 }
@@ -49,11 +49,11 @@ import { EventClient } from '@tanstack/devtools-event-client'
 type EventMap = {
   // The key of the event map is a combination of {pluginId}:{eventSuffix}
   // The value is the expected type of the event payload
-  'custom-devtools:counter-state': { count: number, history: number[], }
+  'custom-devtools:counter-state': { count: number, history: number[] }
 }
 
 class CustomEventClient extends EventClient<EventMap> {
-constructor() {
+  constructor() {
     super({
       // The pluginId must match that of the event map key
       pluginId: 'custom-devtools',
@@ -117,13 +117,13 @@ DevtoolsPanel.ts
 import { DevtoolsEventClient } from './eventClient.ts'
 
 export function DevtoolPanel() {
-  const [state,setState] = useState();
+  const [state, setState] = useState()
 
   useEffect(() => {
     // subscribe to the emitted event
     const cleanup = DevtoolsEventClient.on("counter-state", e => setState(e.payload)
     return cleanup
-  }, []);
+  }, [])
 
   return (
     <div>

docs/framework/solid/basic-setup.md

@@ -65,7 +65,7 @@ render(() => (
       ]}
     />
   </>
-), document.getElementById('root')!);
+), document.getElementById('root')!)
 ```
 
 Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](../../../configuration.md) section.

docs/production.md

@@ -1,11 +1,11 @@
 ---
 title: Production
 id: production
---- 
- 
+---
+
 
 The whole point of devtools is to help you during development, so it's generally not recommended to include them in production builds, but if you know what you're doing, you can.
- 
+
 
 ## Vite Plugin Configuration
 
@@ -39,9 +39,9 @@ Here's an example using environment variables:
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
 export default function Devtools(){
-  return   <TanStackDevtools plugins={[
+  return <TanStackDevtools plugins={[
     // Add your custom plugins here
-  ]} />  
+  ]} />
 }
 
 // App.tsx
@@ -55,7 +55,7 @@ function App() {
     </>
   )
 }
-``` 
+```
 
 ## Where to install the Devtools
 
@@ -69,4 +69,4 @@ This depends on if you are shedding development dependencies in production or no
 
 For Development, you can install the devtools as a development dependency and import them in your application code. The Vite plugin will take care of stripping them out of the production build.
 
-For Production, you can install the devtools as a regular dependency and import them in your application code using the `/production` sub-export and then you also need to set `removeDevtoolsOnBuild` to `false` in the Vite plugin configuration.
+For Production, you can install the devtools as a regular dependency and import them in your application code using the `/production` sub-export and then you also need to set `removeDevtoolsOnBuild` to `false` in the Vite plugin configuration.

docs/vite-plugin.md

@@ -27,7 +27,7 @@ export default {
 }
 ```
 
-And you're done! 
+And you're done!
 
 ## Configuration
 
@@ -61,16 +61,16 @@ export default {
         port: 1234,
         // console log debug logs or not
         debug: false
-      }, 
+      },
     }),
     // ... rest of your plugins here
   ],
 }
- 
+
 ```
 
 ### editor
- 
+
 > [!IMPORTANT] `editor` is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use `launch-editor` under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors
 
 The open in editor configuration which has two fields, `name` and `open`,
@@ -91,14 +91,14 @@ export default {
             `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
           )
         },
-      }, 
+      },
     }),
     // ... rest of your plugins here
   ],
 }
- 
+
 ```
- 
+
 ### enhancedLogs
 
   Configuration for enhanced logging. Defaults to enabled.
@@ -119,11 +119,12 @@ export default {
 ```
 
 ### removeDevtoolsOnBuild
- 
+
 Whether to remove devtools from the production build. Defaults to true.
-  
+
 ```ts
 import { devtools } from '@tanstack/devtools-vite'
+
 export default {
   plugins: [
     devtools({
@@ -136,7 +137,7 @@ export default {
 
 ### logging
   Whether to log information to the console. Defaults to true.
-  
+
 ```ts
 import { devtools } from '@tanstack/devtools-vite'
 
@@ -150,7 +151,7 @@ export default {
 }
 ```
 
-### injectSource 
+### injectSource
 
 Configuration for source injection. Defaults to enabled.
 
@@ -181,4 +182,4 @@ the Panel available on the page. Simply click on any element while holding down
 
 ### Advanced console logs
 
-Allows you to go directly to the console log location directly from the browser/terminal
+Allows you to go directly to the console log location directly from the browser/terminal