added prettier to project

.github/workflows/deploy.yml

@@ -20,6 +20,9 @@ jobs:
       - name: Build package
         run: npm run build -- --force
 
+      - name: Linting
+        run: npm run lint
+
 
   deploy-extension:
     needs: validation

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.turbo/
+.github/

.prettierrc

@@ -3,5 +3,20 @@
   "tabWidth": 2,
   "printWidth": 80,
   "semi": false,
-  "singleQuote": true
-}
+  "singleQuote": true,
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^@msw-devtools/core(.*)$",
+    "^@msw-devtools/json-config(.*)$",
+    "^@msw-devtools/connect(.*)$",
+    "^@msw-devtools/extension(.*)$",
+    "^@msw-devtools/demo(.*)$",
+    "^@msw-devtools/(.*)$",
+    "^[./](?!.*\\.(css|\\w+)$)",
+    "^[./](?!.*\\.css$)",
+    "^[./].*\\.css$"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

README.md

@@ -21,16 +21,19 @@ This Chrome extension simplifies working with [Mock Service Worker (MSW)](https:
 ## Key Features 🌟
 
 ### 📂 JSON Import
+
 Easily upload JSON files containing mock request configurations.
 
 <img width="300px" src="./media/extension/statuses.png" />
 
 ### 🔄 Multi-JSON Support
+
 Switch seamlessly between multiple JSON configurations within the same host environment.
 
 <img width="300px" src="./media/extension/multi-configs.png" />
 
 ### 🚀 Pass-Through Mode
+
 Enable pass-through mode to bypass JSON config and send requests directly to the server
 even if configurations are uploaded.
 
@@ -54,17 +57,15 @@ npm install @msw-devtools/connect --save-exact
 > We assume that you are already familiar with [Mock Service Worker (MSW)](https://mswjs.io/) and have
 > set up your project to work with it. If not, please visit the official [MSW](https://mswjs.io/) website for guidance.
 
-
 Just add the response resolver handler from `@msw-devtools/connect`
 
 ```javascript
+import { http } from 'msw'
 import { setupWorker } from 'msw/browser'
+
 import { createResponseResolver } from '@msw-devtools/connect'
-import { http } from 'msw'
 
-const handlers = [
-  http.all('*', createResponseResolver())
-]
+const handlers = [http.all('*', createResponseResolver())]
 
 setupWorker(...handlers).start({
   onUnhandledRequest: 'bypass'
@@ -89,7 +90,6 @@ You can only install it downloading the build and [loading it as an unpacked ext
 
 [@msw-devtools/demo](https://vkruglikov.github.io/msw-devtools-extension/)
 
-
 ## Roadmap Features 🚧
 
 ### Edit json config in the DevTools
@@ -107,4 +107,4 @@ Currently, you can use multi tabs with different configurations per host, but on
 
 ### Early request interception
 
-Currently, requests sent before the extension is initialized are not intercepted by JSON handlers.
+Currently, requests sent before the extension is initialized are not intercepted by JSON handlers.

package.json

@@ -6,6 +6,8 @@
   },
   "packageManager": "npm@8.5.0",
   "scripts": {
+    "lint": "npx prettier --check .",
+    "lint:fix": "npx prettier --write .",
     "check-types": "tsc --noEmit",
     "build": "turbo check-types build",
     "changeset": "changeset",
@@ -26,6 +28,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.11",
     "@svgr/webpack": "^8.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
     "@types/chrome": "^0.0.287",
     "@types/node": "^22.10.2",
     "@types/react": "^18",

packages/connect/README.md

@@ -4,4 +4,4 @@
 npm i @msw-devtools/connect --save-exact
 ```
 
-Getting started guide is available in [monorepo README.md](https://github.com/vkruglikov/msw-devtools-extension)
+Getting started guide is available in [monorepo README.md](https://github.com/vkruglikov/msw-devtools-extension)

packages/connect/src/resolver.ts

@@ -1,4 +1,4 @@
-import { passthrough, ResponseResolver, HttpResponse } from 'msw'
+import { HttpResponse, ResponseResolver, passthrough } from 'msw'
 
 const responseResolver: ResponseResolver = ({ requestId, request }) => {
   return new Promise((resolve, reject) => {

packages/core/src/types.ts

@@ -1,6 +1,7 @@
-import type { JsonConfig } from '@msw-devtools/json-config'
 import type { ResponseResolver } from 'msw'
 
+import type { JsonConfig } from '@msw-devtools/json-config'
+
 export enum MessageType {
   Content = 'mswde_content',
   HandleInitialized = 'mswde_handleInitialized',

packages/demo/public/mockServiceWorker.js

@@ -35,13 +35,13 @@ self.addEventListener('message', async function (event) {
   }
 
   const allClients = await self.clients.matchAll({
-    type: 'window',
+    type: 'window'
   })
 
   switch (event.data) {
     case 'KEEPALIVE_REQUEST': {
       sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
+        type: 'KEEPALIVE_RESPONSE'
       })
       break
     }
@@ -51,8 +51,8 @@ self.addEventListener('message', async function (event) {
         type: 'INTEGRITY_CHECK_RESPONSE',
         payload: {
           packageVersion: PACKAGE_VERSION,
-          checksum: INTEGRITY_CHECKSUM,
-        },
+          checksum: INTEGRITY_CHECKSUM
+        }
       })
       break
     }
@@ -65,9 +65,9 @@ self.addEventListener('message', async function (event) {
         payload: {
           client: {
             id: client.id,
-            frameType: client.frameType,
-          },
-        },
+            frameType: client.frameType
+          }
+        }
       })
       break
     }
@@ -142,10 +142,10 @@ async function handleRequest(event, requestId) {
             status: responseClone.status,
             statusText: responseClone.statusText,
             body: responseClone.body,
-            headers: Object.fromEntries(responseClone.headers.entries()),
-          },
+            headers: Object.fromEntries(responseClone.headers.entries())
+          }
         },
-        [responseClone.body],
+        [responseClone.body]
       )
     })()
   }
@@ -169,7 +169,7 @@ async function resolveMainClient(event) {
   }
 
   const allClients = await self.clients.matchAll({
-    type: 'window',
+    type: 'window'
   })
 
   return allClients
@@ -203,7 +203,7 @@ async function getResponse(event, client, requestId) {
     if (acceptHeader) {
       const values = acceptHeader.split(',').map((value) => value.trim())
       const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
+        (value) => value !== 'msw/passthrough'
       )
 
       if (filteredValues.length > 0) {
@@ -249,10 +249,10 @@ async function getResponse(event, client, requestId) {
         referrer: request.referrer,
         referrerPolicy: request.referrerPolicy,
         body: requestBuffer,
-        keepalive: request.keepalive,
-      },
+        keepalive: request.keepalive
+      }
     },
-    [requestBuffer],
+    [requestBuffer]
   )
 
   switch (clientMessage.type) {
@@ -282,7 +282,7 @@ function sendToClient(client, message, transferrables = []) {
 
     client.postMessage(
       message,
-      [channel.port2].concat(transferrables.filter(Boolean)),
+      [channel.port2].concat(transferrables.filter(Boolean))
     )
   })
 }
@@ -300,7 +300,7 @@ async function respondWithMock(response) {
 
   Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
     value: true,
-    enumerable: true,
+    enumerable: true
   })
 
   return mockedResponse