Add command to format vue/ts files #10575

Author: jacobtylerwalls

.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

@@ -57,6 +57,9 @@ jobs:
           rm yarn.lock
           yarn && yarn build_test
 
+      - name: Check formatting of frontend files
+        run: yarn && yarn format --check --no-write
+
       - name: Check for missing migrations
         run: |
           python manage.py makemigrations --check

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "singleAttributePerLine": true
+}

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-templates/.eslintrc.js

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

arches/install/arches-templates/.prettierrc

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

arches/install/arches-templates/project_name/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "singleAttributePerLine": true
+}

arches/install/arches-templates/project_name/src/declarations.d.ts

@@ -1,10 +1,10 @@
 // import declarations from other projects or Arches core
-import('../media/node_modules/arches/arches/app/src/declarations.d.ts');
+import("../media/node_modules/arches/arches/app/src/declarations.d.ts");
 
 // declare modules that have been added to your project (should mirror `package.json`)
-declare module 'arches';
+declare module "arches";
 
 // declare filetypes used in `./src/` folder
-declare module '*.ts';
-declare module '*.vue';
+declare module "*.ts";
+declare module "*.vue";
 

arches/management/commands/updateproject.py

@@ -19,7 +19,7 @@ def handle(self, *args, **options):
         """
         This will replace the following files in your project:
         .babelrc, eslintrc.js, .eslintignore, .browserslistrc, .stylelintrc.json, 
-        nodemon.json and tsconfig.json, and the entire webpack directory.
+        .prettierrc, nodemon.json and tsconfig.json, and the entire webpack directory.
         
         Continue?
         """
@@ -87,7 +87,7 @@ def update_to_v7_5(self):
 
     def update_to_v7_6(self):
         # ensure project has a `messages.pot` file
-        for dotfile in ["nodemon.json", "tsconfig.json"]:
+        for dotfile in ["nodemon.json", "tsconfig.json", ".prettierrc"]:
             print("Copying {} to project root directory".format(dotfile))
             shutil.copy2(os.path.join(settings.ROOT_DIR, "install", "arches-templates", "project_name", dotfile), settings.APP_ROOT)
 

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",
@@ -154,4 +157,4 @@
         "cytoscape-cola": "node_modules/cytoscape-cola/cytoscape-cola",
         "webcola": "node_modules/webcola/WebCola/cola.min"
     }
-}
+}

releases/7.6.0.md

@@ -48,14 +48,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
@@ -118,6 +120,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": "./media/node_modules/.bin/prettier ./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",