feat: eslint + stylelint

.eslintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  parserOptions: {
+    parser: "@babel/eslint-parser",
+    sourceType: "module",
+    requireConfigFile: false,
+  },
+  extends: [
+    "@nuxtjs",
+    "prettier/prettier",
+    "eslint:recommended",
+    "plugin:vue/recommended",
+    "plugin:prettier/recommended",
+    "plugin:nuxt/recommended",
+  ],
+  plugins: ["vue", "prettier"],
+  // add your custom rules here
+  rules: {
+    semi: [2, "never"],
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/component-name-in-template-casing": ["error", "PascalCase"],
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          normal: "never",
+          void: "always",
+        },
+      },
+    ],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline": "off",
+    "prettier/prettier": ["error", { semi: false }],
+  },
+  globals: {
+    $nuxt: true,
+  },
+}

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-npm run pretty-quick
+npm run pre-commit

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "semi": false
+}

assets/js/regex.worker.js

@@ -17,7 +17,10 @@ const regex = { ws, sse, socketio }
 // type = ws/sse/socketio
 async function validator(type, url) {
   console.time(`validator ${url}`)
-  const [res1, res2] = await Promise.all([regex[type][0].test(url), regex[type][1].test(url)])
+  const [res1, res2] = await Promise.all([
+    regex[type][0].test(url),
+    regex[type][1].test(url),
+  ])
   console.timeEnd(`validator ${url}`)
   return res1 || res2
 }

components/docs/Folder.vue

@@ -4,8 +4,8 @@
       <i class="material-icons">folder_open</i>
       {{ folder.name || $t("none") }}
     </h3>
-    <div v-for="(folder, index) in folder.folders" :key="index">
+    <div v-for="(subFolder, index) in folder.folders" :key="index">
-      <DocsFolder :folder="folder" />
+      <DocsFolder :folder="subFolder" />
     </div>
     <div v-for="(request, index) in folder.requests" :key="index">
       <DocsRequest :request="request" />
@@ -16,7 +16,7 @@
 <script>
 export default {
   props: {
-    folder: Object,
+    folder: { type: Object, default: () => {} },
   },
 }
 </script>
@@ -28,15 +28,12 @@ export default {
   @apply justify-center;
   @apply flex-1;
   @apply p-4;
+  @apply border-l;
+  @apply border-brdColor;
+  @apply mt-4;
 
   .material-icons {
     @apply mr-4;
   }
 }
-
-.folder {
-  @apply border-l;
-  @apply border-brdColor;
-  @apply mt-4;
-}
 </style>

components/docs/Request.vue

@@ -4,42 +4,42 @@
       <i class="material-icons">insert_drive_file</i>
       {{ request.name || $t("none") }}
     </h4>
-    <p class="doc-desc" v-if="request.url">
+    <p v-if="request.url" class="doc-desc">
       <span>
         {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.path">
+    <p v-if="request.path" class="doc-desc">
       <span>
         {{ $t("path") }}:
         <code>{{ request.path || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.method">
+    <p v-if="request.method" class="doc-desc">
       <span>
         {{ $t("method") }}:
         <code>{{ request.method || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.auth">
+    <p v-if="request.auth" class="doc-desc">
       <span>
         {{ $t("authentication") }}:
         <code>{{ request.auth || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.httpUser">
+    <p v-if="request.httpUser" class="doc-desc">
       <span>
         {{ $t("username") }}:
         <code>{{ request.httpUser || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.httpPassword">
+    <p v-if="request.httpPassword" class="doc-desc">
       <span>
         {{ $t("password") }}:
         <code>{{ request.httpPassword || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.bearerToken">
+    <p v-if="request.bearerToken" class="doc-desc">
       <span>
         {{ $t("token") }}:
         <code>{{ request.bearerToken || $t("none") }}</code>
@@ -56,7 +56,11 @@
     </span>
     <h4 v-if="request.params">{{ $t("parameters") }}</h4>
     <span v-if="request.params">
-      <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
+      <p
+        v-for="parameter in request.params"
+        :key="parameter.key"
+        class="doc-desc"
+      >
         <span>
           {{ parameter.key || $t("none") }}:
           <code>{{ parameter.value || $t("none") }}</code>
@@ -65,26 +69,30 @@
     </span>
     <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
     <span v-if="request.bodyParams">
-      <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
+      <p
+        v-for="payload in request.bodyParams"
+        :key="payload.key"
+        class="doc-desc"
+      >
         <span>
           {{ payload.key || $t("none") }}:
           <code>{{ payload.value || $t("none") }}</code>
         </span>
       </p>
     </span>
-    <p class="doc-desc" v-if="request.rawParams">
+    <p v-if="request.rawParams" class="doc-desc">
       <span>
         {{ $t("parameters") }}:
         <code>{{ request.rawParams || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.contentType">
+    <p v-if="request.contentType" class="doc-desc">
       <span>
         {{ $t("content_type") }}:
         <code>{{ request.contentType || $t("none") }}</code>
       </span>
     </p>
-    <p class="doc-desc" v-if="request.requestType">
+    <p v-if="request.requestType" class="doc-desc">
       <span>
         {{ $t("request_type") }}:
         <code>{{ request.requestType || $t("none") }}</code>
@@ -96,7 +104,7 @@
 <script>
 export default {
   props: {
-    request: Object,
+    request: { type: Object, default: () => {} },
   },
 }
 </script>
@@ -108,12 +116,6 @@ export default {
   @apply justify-center;
   @apply flex-1;
   @apply p-4;
-
-  .material-icons {
-    @apply mr-4;
-  }
-}
-.request {
   @apply border;
   @apply border-brdColor;
   @apply rounded-lg;
@@ -122,6 +124,10 @@ export default {
   h4 {
     @apply mt-4;
   }
+
+  .material-icons {
+    @apply mr-4;
+  }
 }
 
 .doc-desc {
@@ -130,13 +136,6 @@ export default {
   @apply justify-center;
   @apply flex-1;
   @apply p-4;
-
-  .material-icons {
-    @apply mr-4;
-  }
-}
-
-.doc-desc {
   @apply text-fgLightColor;
   @apply border-b;
   @apply border-dashed;
@@ -146,5 +145,9 @@ export default {
   &:last-child {
     @apply border-b-0;
   }
+
+  .material-icons {
+    @apply mr-4;
+  }
 }
 </style>

jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  moduleFileExtensions: ["ts", "js", "json", "vue"],
+  watchman: false,
+  moduleNameMapper: {
+    ".+\\.(svg)\\?inline$": "<rootDir>/__mocks__/svgMock.js",
+    "^~/(.*)$": "<rootDir>/$1",
+    "^~~/(.*)$": "<rootDir>/$1",
+  },
+  transform: {
+    "^.+\\.js$": "babel-jest",
+    ".*\\.(vue)$": "vue-jest",
+  },
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  snapshotSerializers: ["jest-serializer-vue"],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    "<rootDir>/components/**/*.vue",
+    "<rootDir>/pages/*.vue",
+  ],
+  testURL: "http://localhost/",
+  preset: "ts-jest/presets/js-with-babel",
+}

nuxt.config.js

@@ -4,7 +4,8 @@ require("dotenv").config()
 export const options = {
   name: "Hoppscotch",
   shortDescription: "Open source API development ecosystem",
-  description: "Helps you create requests faster, saving precious time on development.",
+  description:
+    "Helps you create requests faster, saving precious time on development.",
   loading: {
     color: "var(--ac-color)",
     background: "var(--bg-color)",
@@ -106,6 +107,10 @@ export default {
   buildModules: [
     // https://github.com/nuxt-community/pwa-module
     "@nuxtjs/pwa",
+    // https://github.com/nuxt-community/eslint-module
+    "@nuxtjs/eslint-module",
+    // https://github.com/nuxt-community/stylelint-module
+    "@nuxtjs/stylelint-module",
     // https://github.com/nuxt-community/analytics-module
     "@nuxtjs/google-analytics",
     // https://github.com/nuxt-community/gtm-module
@@ -135,6 +140,7 @@ export default {
     // https://github.com/nuxt-community/sitemap-module
     "@nuxtjs/sitemap",
   ],
+
   // PWA module configuration (https://pwa.nuxtjs.org/setup)
   pwa: {
     meta: {
@@ -156,6 +162,13 @@ export default {
     },
   },
 
+  // ESLint module configuration (https://github.com/nuxt-community/eslint-module)
+  eslint: {
+    // fix: true,
+    // emitWarning: true,
+    // quiet: true,
+  },
+
   // Toast module configuration (https://github.com/nuxt-community/modules/tree/master/packages/toast)
   toast: {
     position: "bottom-center",
@@ -373,7 +386,7 @@ export default {
         config.module.rules.push({
           test: /\.js$/,
           include: /(node_modules)/,
-          exclude: /(node_modules)\/(ace\-builds)|(@firebase)/,
+          exclude: /(node_modules)\/(ace-builds)|(@firebase)/,
           loader: "babel-loader",
           options: {
             plugins: [

package.json

@@ -9,15 +9,18 @@
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate --modern",
-    "pretty-quick": "pretty-quick --staged --pattern \"**/*.*(html|js|json|vue)\"",
+    "analyze": "npx nuxt build -a",
+    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
+    "lint": "npm run lint:js && npm run lint:style",
+    "lintfix": "eslint --ext .js,.vue --ignore-path .gitignore . --fix",
     "test": "jest",
-    "postinstall": "husky install"
+    "postinstall": "husky install",
+    "pre-commit": "lint-staged"
   },
-  "prettier": {
+  "lint-staged": {
-    "trailingComma": "es5",
+    "*.{js,vue}": "eslint",
-    "semi": false,
+    "*.{css,vue}": "stylelint"
-    "singleQuote": false,
-    "printWidth": 100
   },
   "dependencies": {
     "@apollo/client": "^3.3.18",
@@ -52,14 +55,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.2",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/preset-env": "^7.14.2",
     "@nuxt/types": "^2.15.6",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.0.5",
     "@nuxtjs/dotenv": "^1.4.1",
+    "@nuxtjs/eslint-config": "^6.0.0",
+    "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/pwa": "^3.3.5",
+    "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/tailwindcss": "^4.1.2",
     "@testing-library/jest-dom": "^5.12.0",
     "@types/lodash": "^4.14.169",
@@ -67,49 +74,25 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.6.3",
     "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-nuxt": ">=2.0.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.9.0",
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "jest-serializer-vue": "^2.0.2",
+    "lint-staged": "^11.0.0",
     "postcss": "^8.2.15",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
     "raw-loader": "^4.0.2",
     "sass": "^1.32.13",
     "sass-loader": "^10.2.0",
+    "stylelint": "^13.12.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^22.0.0",
     "ts-jest": "^26.5.6",
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "ts",
-      "js",
-      "json",
-      "vue"
-    ],
-    "watchman": false,
-    "moduleNameMapper": {
-      ".+\\.(svg)\\?inline$": "<rootDir>/__mocks__/svgMock.js",
-      "^~/(.*)$": "<rootDir>/$1",
-      "^~~/(.*)$": "<rootDir>/$1"
-    },
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      ".*\\.(vue)$": "vue-jest"
-    },
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
-    ],
-    "snapshotSerializers": [
-      "jest-serializer-vue"
-    ],
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "<rootDir>/components/**/*.vue",
-      "<rootDir>/pages/*.vue"
-    ],
-    "testURL": "http://localhost/",
-    "preset": "ts-jest/presets/js-with-babel"
   }
 }

stylelint.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  // add your custom config here
+  // https://stylelint.io/user-guide/configuration
+  rules: {
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+          "mixin",
+          "include",
+        ],
+      },
+    ],
+    "declaration-block-trailing-semicolon": null,
+    "no-descending-specificity": null,
+  },
+}