Add command to format vue/ts files #10575

.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
         "eslint:recommended",
         'plugin:@typescript-eslint/recommended',
         'plugin:vue/vue3-recommended',
+        "prettier"
     ],
     "root": true,
     "env": {
@@ -39,9 +40,6 @@ module.exports = {
     "overrides": [
         {
             "files": [ "*.vue" ],
-            "rules": {
-                "vue/html-indent": [2, 4],
-            }
         },
         {
             "files": [ "*.js" ],

.github/workflows/main.yml

@@ -24,6 +24,9 @@ jobs:
         python-version: ["3.10", "3.11", "3.12"]
 
     steps:
+      - name: Check formatting of frontend files
+        run: yarn format --check --no-write
+
       - uses: actions/checkout@v4
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5

.prettierrc

@@ -0,0 +1 @@
+{}

arches/app/src/declarations.d.ts

@@ -1,7 +1,7 @@
 // import declarations from other projects or Arches core
 
 // declare modules that have been added to your project (should mirror `package.json`)
-declare module 'arches';
+declare module "arches";
 declare module "@babel/runtime";
 declare module "@mapbox/geojson-extent";
 declare module "@mapbox/geojsonhint";
@@ -69,5 +69,5 @@ declare module "vue3-gettext";
 declare module "webpack-bundle-tracker";
 
 // declare filetypes used in `./src/` folder
-declare module '*.ts';
-declare module '*.vue';
+declare module "*.ts";
+declare module "*.vue";

arches/install/arches-app-templates/package.json

@@ -6,6 +6,7 @@
         "eslint:check": "./{{ app_name }}/media/node_modules/.bin/eslint ./{{ app_name }}/src --resolve-plugins-relative-to ./{{ app_name }}/media --ext .vue,.ts --parser ./{{ app_name }}/media/node_modules/vue-eslint-parser/index.js",
         "eslint:fix": "./{{ app_name }}/media/node_modules/.bin/eslint ./{{ app_name }}/src --resolve-plugins-relative-to ./{{ app_name }}/media --ext .vue,.ts --parser ./{{ app_name }}/media/node_modules/vue-eslint-parser/index.js --fix",
         "eslint:watch": "./{{ app_name }}/media/node_modules/.bin/nodemon --watch ./{{ app_name }}/src --ext ts,vue --exec yarn --silent eslint:check",
+        "format": "yarn prettier arches/app/src --write",
         "gettext:extract": "./{{ app_name }}/media/node_modules/.bin/vue-gettext-extract",
         "gettext:compile": "./{{ app_name }}/media/node_modules/.bin/vue-gettext-compile",
         "ts:check": "./{{ app_name }}/media/node_modules/.bin/vue-tsc --noEmit",

arches/install/arches-templates/project_name/package.json

@@ -8,6 +8,7 @@
         "eslint:check": "./media/node_modules/.bin/eslint ./src --resolve-plugins-relative-to ./media --ext .vue,.ts --parser ./media/node_modules/vue-eslint-parser/index.js",
         "eslint:fix": "./media/node_modules/.bin/eslint ./src --resolve-plugins-relative-to ./media --ext .vue,.ts --parser ./media/node_modules/vue-eslint-parser/index.js --fix",
         "eslint:watch": "./media/node_modules/.bin/nodemon --watch ./src --ext ts,vue --exec yarn --silent eslint:check",
+        "format": "yarn prettier arches/app/src --write",
         "gettext:extract": "./media/node_modules/.bin/vue-gettext-extract",
         "gettext:compile": "./media/node_modules/.bin/vue-gettext-compile",
         "ts:check": "./media/node_modules/.bin/vue-tsc --noEmit",

package.json

@@ -6,9 +6,10 @@
         "build_development": "yarn eslint:check && yarn ts:check && ./arches/app/media/node_modules/.bin/cross-env NODE_PATH=./arches/app/media/node_modules NODE_OPTIONS=--max-old-space-size=2048 ./arches/app/media/node_modules/.bin/webpack --config ./arches/webpack/webpack.config.dev.js",
         "build_production": "yarn eslint:check && yarn ts:check && ./arches/app/media/node_modules/.bin/cross-env NODE_PATH=./arches/app/media/node_modules NODE_OPTIONS=--max-old-space-size=2048 NODE_ENV=production ./arches/app/media/node_modules/.bin/webpack --config ./arches/webpack/webpack.config.prod.js",
         "build_test": "yarn eslint:check && yarn ts:check && ./arches/app/media/node_modules/.bin/cross-env NODE_PATH=./arches/app/media/node_modules NODE_OPTIONS=--max-old-space-size=2048 ./arches/app/media/node_modules/.bin/webpack --config ./arches/webpack/webpack.config.dev.js --env test=true",
-        "eslint:check": "./arches/app/media/node_modules/.bin/eslint ./arches/app/src --resolve-plugins-relative-to ./arches/app/media --ext .vue,.ts --parser ./arches/app/media/node_modules/vue-eslint-parser/index.js",
-        "eslint:fix": "./arches/app/media/node_modules/.bin/eslint ./arches/app/src --resolve-plugins-relative-to ./arches/app/media --ext .vue,.ts --parser ./arches/app/media/node_modules/vue-eslint-parser/index.js --fix",
-        "eslint:watch": "./arches/app/media/node_modules/.bin/nodemon --watch ./arches/app/src --ext ts,vue --exec yarn --silent eslint:check",
+        "eslint:check": "NODE_PATH=./arches/app/media/node_modules ./arches/app/media/node_modules/.bin/eslint ./arches/app/src --resolve-plugins-relative-to ./arches/app/media --ext .vue,.ts --parser ./arches/app/media/node_modules/vue-eslint-parser/index.js",
+        "eslint:fix": "NODE_PATH=./arches/app/media/node_modules ./arches/app/media/node_modules/.bin/eslint ./arches/app/src --resolve-plugins-relative-to ./arches/app/media --ext .vue,.ts --parser ./arches/app/media/node_modules/vue-eslint-parser/index.js --fix",
+        "eslint:watch": "NODE_PATH=./arches/app/media/node_modules ./arches/app/media/node_modules/.bin/nodemon --watch ./arches/app/src --ext ts,vue --exec yarn --silent eslint:check",
+        "format": "yarn prettier arches/app/src --write",
         "gettext:extract": "./arches/app/media/node_modules/.bin/vue-gettext-extract",
         "gettext:compile": "./arches/app/media/node_modules/.bin/vue-gettext-compile",
         "ts:check": "./arches/app/media/node_modules/.bin/vue-tsc --noEmit",
@@ -20,7 +21,9 @@
         "type": "git"
     },
     "devDependencies": {
-        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x"
+        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x",
+        "eslint-config-prettier": "9.1.0",
+        "prettier": "3.2.5"
     },
     "dependencies": {
         "@babel/runtime": "^7.17.2",
@@ -151,4 +154,4 @@
         "cytoscape-cola": "node_modules/cytoscape-cola/cytoscape-cola",
         "webcola": "node_modules/webcola/WebCola/cola.min"
     }
-}
+}

releases/7.6.0.md

@@ -47,14 +47,16 @@ JavaScript:
         @babel/plugin-transform-class-properties == 7.23.3
         @typescript-eslint/eslint-plugin == 6.18.1
         @typescript-eslint/parser == 6.18.1
+        eslint-config-prettier == 9.1.0
         eslint-plugin-vue == 9.20.0
+        prettier == 3.2.5
         primevue == 3.50.0
         nodemon == 3.0.2
         sass == 1.70.0
         ts-loader == 9.5.1
         vue3-gettext == 3.0.0-beta.4
         vue-tsc == 2.0.6
-    
+
     Removed:
         @babel/plugin-proposal-class-properties
         eslint-webpack-plugin
@@ -117,6 +119,7 @@ The minimum supported version of Python is now 3.10. Python 3.11 is encouraged,
             "eslint:check": "./media/node_modules/.bin/eslint ./src --resolve-plugins-relative-to ./media --ext .vue,.ts --parser ./media/node_modules/vue-eslint-parser/index.js",
             "eslint:fix": "./media/node_modules/.bin/eslint ./src --resolve-plugins-relative-to ./media --ext .vue,.ts --parser ./media/node_modules/vue-eslint-parser/index.js --fix",
             "eslint:watch": "./media/node_modules/.bin/nodemon --watch ./src --ext ts,vue --exec yarn --silent eslint:check",
+            "format": "yarn prettier arches/app/src --write",
             "gettext:extract": "./media/node_modules/.bin/vue-gettext-extract",
             "gettext:compile": "./media/node_modules/.bin/vue-gettext-compile",
             "ts:check": "./media/node_modules/.bin/vue-tsc --noEmit",