Mrc 4694 : Prettier Setup

.github/workflows/test.yml

@@ -26,6 +26,8 @@ jobs:
         run: npm run lint --prefix=app/server
       - name: Lint front end
         run: npm run lint --prefix=app/static
+      - name: Check formatting frontend
+        run: npm run format:check --prefix=app/static
       - name: Check versions
         run: npm run genversion --prefix=app/server -- --check-only
       - name: Upload coverage

.gitignore

@@ -1,5 +1,4 @@
 /.idea/
-/.vscode/
 /app/server/coverage/
 /app/server/node_modules/
 /app/server/public/css/

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "r.lsp.promptToInstall": false,
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+    "editor.formatOnPaste": false, // required 
+    "editor.formatOnType": false, // required
+    "editor.formatOnSave": true, // optional 
+    "editor.formatOnSaveMode": "file", // required to format on save
+    "files.autoSave": "onFocusChange", // optional but recommended
+    "vs-code-prettier-eslint.prettierLast": "false" // set as "true" to run 'prettier' last not first
+
+}

app/static/.eslintrc.js

@@ -3,19 +3,13 @@ module.exports = {
     env: {
         node: true
     },
-    extends: [
-        "plugin:vue/vue3-essential",
-        "@vue/airbnb",
-        "@vue/typescript/recommended"
-    ],
+    extends: ["plugin:vue/vue3-essential", "@vue/airbnb", "@vue/typescript/recommended", "prettier"],
     parserOptions: {
         ecmaVersion: 2020
     },
     rules: {
         "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-        "comma-dangle": ["error", "never"],
-        indent: ["error", 4],
         quotes: ["error", "double", { avoidEscape: true }],
         "max-len": [2, 120, 4],
         "arrow-body-style": "off",
@@ -27,24 +21,25 @@ module.exports = {
         "no-underscore-dangle": "off",
         "no-unused-vars": "off",
         "@typescript-eslint/no-unused-vars": ["error"],
-        "no-await-in-loop": "off"
+        "no-await-in-loop": "off",
+        "no-useless-concat": "off"
     },
-    overrides: [{
-        files: [
-            "**/tests/**/*.{j,t}s"
-        ],
-        env: {
-            jest: true
-        },
-        rules: {
-            "@typescript-eslint/no-explicit-any": "off",
-            "@typescript-eslint/explicit-module-boundary-types": "off",
-            "@typescript-eslint/no-unused-vars": "off",
-            "@typescript-eslint/no-empty-function": "off",
-            "max-classes-per-file": "off",
-            "no-useless-constructor": "off"
+    overrides: [
+        {
+            files: ["**/tests/**/*.{j,t}s"],
+            env: {
+                jest: true
+            },
+            rules: {
+                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/explicit-module-boundary-types": "off",
+                "@typescript-eslint/no-unused-vars": "off",
+                "@typescript-eslint/no-empty-function": "off",
+                "max-classes-per-file": "off",
+                "no-useless-constructor": "off"
+            }
         }
-    }],
+    ],
     globals: {
         NodeJS: true
     }

app/static/.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+test-results
+node_modules
+dist

app/static/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "semi": true,
+    "tabWidth": 4,
+    "singleQuote": false,
+    "printWidth": 120,
+    "trailingComma": "none"
+}

app/static/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-    presets: [
-        "@vue/cli-plugin-babel/preset"
-    ]
+    presets: ["@vue/cli-plugin-babel/preset"]
 };

app/static/hotReload/vue.config.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const baseConfig = require("../vue.config");
-const WebpackShellPlugin = require('webpack-shell-plugin');
+const WebpackShellPlugin = require("webpack-shell-plugin");
 
 module.exports = {
     ...baseConfig,

app/static/jest.config.js

@@ -5,12 +5,8 @@ module.exports = {
         "\\.md$": "jest-raw-loader"
     },
     collectCoverage: true,
-    testMatch: [
-        "**/?(*.)test.(js|ts)"
-    ],
-    coveragePathIgnorePatterns: [
-        "./tests/mocks.ts"
-    ],
+    testMatch: ["**/?(*.)test.(js|ts)"],
+    coveragePathIgnorePatterns: ["./tests/mocks.ts"],
     transformIgnorePatterns: ["node_modules/(?!(d3-format))"],
     moduleNameMapper: {
         "raw-loader!.*/help/(.*)$": "<rootDir>/src/app/help/$1"