Add prettier and run prettier command via lint-staged

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:vue/recommended',
+    'prettier',
   ],
   parserOptions: {
     parser: '@babel/eslint-parser',
@@ -16,7 +17,6 @@ module.exports = {
   rules: {
     'linebreak-style': ['error', 'unix'],
     semi: ['error', 'always'],
-    quotes: ['error', 'single'],
     'comma-dangle': ['error', 'always-multiline'],
     'vue/require-v-for-key': 0,
     'vue/require-default-prop': 0,
@@ -25,6 +25,7 @@ module.exports = {
     'vue/html-indent': ['error', 4],
     'vue/script-indent': ['error', 4, {
       baseIndent: 1,
+      switchCase: 1,
     }],
     'vue/no-unused-vars': 0,
     'vue/html-self-closing': 0,

.lintstagedrc.json

@@ -0,0 +1,9 @@
+{
+  "*.{js,vue}": [
+    "prettier --write",
+    "eslint --quiet --cache --fix"
+  ],
+  "*.scss": [
+    "stylelint --config node_modules/do-bulma/.stylelintrc.json --fix"
+  ]
+}

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "vueIndentScriptAndStyle": true,
+  "htmlWhitespaceSensitivity": "ignore",
+  "printWidth": 100,
+  "tabWidth": 4,
+  "singleAttributePerLine": true
+}

package-lock.json

@@ -39,6 +39,7 @@
         "core-js": "^3.32.0",
         "duplicate-package-checker-webpack-plugin": "^3.0.0",
         "eslint": "^8.46.0",
+        "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-vue": "^9.16.1",
         "esm": "^3.2.25",
         "husky": "^8.0.3",
@@ -47,6 +48,7 @@
         "lint-staged": "^13.2.3",
         "node-fetch": "^3.3.2",
         "postcss": "^8.4.31",
+        "prettier": "3.0.3",
         "sass": "^1.64.2",
         "sass-loader": "^13.3.2",
         "stylelint": "^15.10.2",
@@ -4469,6 +4471,22 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/@vue/component-compiler-utils/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
@@ -8608,6 +8626,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
+      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.16.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.16.1.tgz",
@@ -16367,16 +16397,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "1.19.1",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
       "dev": true,
-      "optional": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/pretty-checkbox": {
@@ -23235,6 +23267,13 @@
             "source-map": "^0.6.1"
           }
         },
+        "prettier": {
+          "version": "2.8.8",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+          "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+          "dev": true,
+          "optional": true
+        },
         "yallist": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
@@ -26439,6 +26478,13 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
+      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-plugin-vue": {
       "version": "9.16.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.16.1.tgz",
@@ -31772,11 +31818,10 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.19.1",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "pretty-checkbox": {
       "version": "3.0.3",

package.json

@@ -23,7 +23,8 @@
     "test:eslint:fix": "npm run test:eslint -- --fix",
     "test:stylelint": "stylelint 'src/**/*.scss' --config node_modules/do-bulma/.stylelintrc.json",
     "test:i18n-packs": "node --es-module-specifier-resolution=node src/nginxconfig/i18n/verify.js",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "prettier": "prettier --write 'src/**/*.{js,vue}'"
   },
   "jest": {
     "testRegex": "/test/.*.js?$"
@@ -71,6 +72,7 @@
     "core-js": "^3.32.0",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-vue": "^9.16.1",
     "esm": "^3.2.25",
     "husky": "^8.0.3",
@@ -79,6 +81,7 @@
     "lint-staged": "^13.2.3",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.31",
+    "prettier": "3.0.3",
     "sass": "^1.64.2",
     "sass-loader": "^13.3.2",
     "stylelint": "^15.10.2",
@@ -88,14 +91,6 @@
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0"
   },
-  "lint-staged": {
-    "*.{js,vue}": [
-      "eslint --quiet --cache --fix"
-    ],
-    "*.scss": [
-      "stylelint --config node_modules/do-bulma/.stylelintrc.json --fix"
-    ]
-  },
   "overrides": {
     "@vue/cli-service": {
       "mini-css-extract-plugin": "^1.6.2"