update prettier and apply formatting (#298)

update prettier and apply new format and lining command

Co-authored-by: Peter Wolanin <107691+pwolanin@users.noreply.github.com>

Author: pwolanin

.github/workflows/node.js.yml

@@ -27,7 +27,7 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
-#    - run: npm run lint
+    - run: npm run format:check
     - run: npm run build
     - run: npm run cy:run
     - name: Cypress e2e run

babel.config.js

@@ -1,14 +1,17 @@
 module.exports = {
-  "presets": [
-    ["@babel/preset-env", {
-      "useBuiltIns": "entry",
-      "targets": {
-        "node": "current"
-      }
-    }]
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        useBuiltIns: "entry",
+        targets: {
+          node: "current",
+        },
+      },
+    ],
   ],
-  "plugins": [
-    '@babel/plugin-transform-modules-commonjs',
-    "transform-object-rest-spread"
-  ]
-}
+  plugins: [
+    "@babel/plugin-transform-modules-commonjs",
+    "transform-object-rest-spread",
+  ],
+};

cypress.config.js

@@ -1,18 +1,18 @@
-const  { defineConfig } = require('cypress');
-const { startDevServer } = require('@cypress/vite-dev-server');
+const { defineConfig } = require("cypress");
+const { startDevServer } = require("@cypress/vite-dev-server");
 
-module.exports=defineConfig({
+module.exports = defineConfig({
   component: {
-    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+    specPattern: "**/*.cy.{js,jsx,ts,tsx}",
     devServer: {
-      framework: 'vue',
-      bundler: 'vite',
+      framework: "vue",
+      bundler: "vite",
     },
   },
   e2e: {
-    baseUrl: 'http://localhost:8080', // Default Vite dev server port
-    supportFile: 'cypress/support/e2e.js',
-    specPattern: 'cypress/e2e/**/*.cy.js',
+    baseUrl: "http://localhost:8080", // Default Vite dev server port
+    supportFile: "cypress/support/e2e.js",
+    specPattern: "cypress/e2e/**/*.cy.js",
     viewportWidth: 1280,
     viewportHeight: 720,
     defaultCommandTimeout: 3000,
@@ -22,11 +22,11 @@ module.exports=defineConfig({
       openMode: 0,
     },
     setupNodeEvents(on, config) {
-      on('dev-server:start', (options) => {
+      on("dev-server:start", (options) => {
         return startDevServer({
           options,
           viteConfig: {
-            configFile: 'vite.config.js', // Path to your Vite config file
+            configFile: "vite.config.js", // Path to your Vite config file
           },
         });
       });
@@ -35,4 +35,3 @@ module.exports=defineConfig({
     },
   },
 });
-

package-lock.json

@@ -10,6 +10,8 @@
     "build": "vite build",
     "test": "jest --testPathIgnorePatterns ./e2e",
     "lint": "standard --plugin html 'src/**/*.{js,vue}'",
+    "format:check": "prettier --check src ./*.js",
+    "format": "prettier --write src ./*.js",
     "serve-http": "vite preview --port 8080",
     "cy:open": "cypress open",
     "cy:run": "cypress run --component",
@@ -57,7 +59,7 @@
     "imports-loader": "^4.0.1",
     "node-sass": "^9.0.0",
     "postcss-loader": "^7.3.3",
-    "prettier": "3.1.0",
+    "prettier": "^3.5.3",
     "sass": "^1.70.0",
     "sass-loader": "^13.3.2",
     "standard": "^17.1.0",

package.json

@@ -1,5 +1,3 @@
 module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
-}
+  plugins: [require("autoprefixer")],
+};

postcss.config.js

@@ -3,49 +3,49 @@
     <nav-bar></nav-bar>
     <div class="notifications">
       <notification
-         v-for="item in notifications"
-         :key="item.id"
-         :msg="item.msg"
-         @dismiss="removeNotification(item.id)"></notification>
+        v-for="item in notifications"
+        :key="item.id"
+        :msg="item.msg"
+        @dismiss="removeNotification(item.id)"
+      ></notification>
     </div>
     <router-view></router-view>
     <site-footer v-if="shouldShowFooter"></site-footer>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
-import values from 'lodash/values'
-
-import NavBar from './components/nav-bar.vue'
-import Notification from './components/notification.vue'
-import SiteFooter from './components/site-footer.vue'
+import { mapState, mapMutations } from "vuex";
+import values from "lodash/values";
 
+import NavBar from "./components/nav-bar.vue";
+import Notification from "./components/notification.vue";
+import SiteFooter from "./components/site-footer.vue";
 
 export default {
   computed: {
     ...mapState({
       notifications: (state) => values(state.notifications),
-      pendingRequests: (state) => Object.keys(state.pendingRequests || [])
+      pendingRequests: (state) => Object.keys(state.pendingRequests || []),
     }),
-    isLoading () {
-      const routeName = this.$route && this.$route.name
-      return (this.pendingRequests.length > 0) && (routeName !== 'splash')
+    isLoading() {
+      const routeName = this.$route && this.$route.name;
+      return this.pendingRequests.length > 0 && routeName !== "splash";
+    },
+    shouldShowFooter() {
+      const routeName = this.$route && this.$route.name;
+      return routeName !== "city-map";
     },
-    shouldShowFooter () {
-      const routeName = this.$route && this.$route.name
-      return routeName !== 'city-map'
-    }
   },
   methods: mapMutations({
-    removeNotification: 'REMOVE_NOTIFICATION'
+    removeNotification: "REMOVE_NOTIFICATION",
   }),
   components: {
-    'nav-bar': NavBar,
-    'notification': Notification,
-    'site-footer': SiteFooter
-  }
-}
+    "nav-bar": NavBar,
+    notification: Notification,
+    "site-footer": SiteFooter,
+  },
+};
 </script>
 
 <style lang="sass">