Add Prettier code formatting for starter templates (#11)

* Add Prettier config for formatting all templates
* Format projects: angular, js, node, react, react-ts, rxjs, typescript, vue
* Add GitHub action to check code formatting

.github/workflows/prettier.yml

@@ -0,0 +1,18 @@
+name: Check code formatting
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run format:check

.gitignore

@@ -0,0 +1,8 @@
+# Ignore patterns for repo config
+/node_modules
+
+# Ignore patterns for templates
+*/node_modules
+#*/package-lock.json
+*/yarn.lock
+*/pnpm-lock.yaml

.prettierignore

@@ -0,0 +1,35 @@
+# Ignore repository config
+/*.*
+/LICENSE
+
+# Ignore specific templates
+/bootstrap-5
+/egg
+/express-simple
+/graphql
+/gsap-*
+/json-graphql-server
+/json-server
+/koa
+/nextjs
+/nodemon
+/quasar
+/slidev
+/sveltekit
+/tres
+
+# Ignore specific file formats
+# Prettier formatting of HTML is questionable, let's skip it for now
+**/*.html
+# Skipping Markdown as well, as it may contain custom DSLs that Prettier doesn't handle well
+**/*.md
+**/*.mdx
+# Maybe skip formatting templating languages too
+**/*.svelte
+**/*.vue
+
+# We maybe don't want to have those files in the first place?
+**/dist/*
+**/build/*
+**/.vscode/*
+**/package-lock.json

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": ["**/.stackblitzrc"],
+      "options": { "parser": "json" }
+    },
+    {
+      "files": ["**/*.svelte"],
+      "options": { "parser": "svelte" }
+    }
+  ]
+}

angular/angular.json

@@ -41,9 +41,7 @@
             "main": "src/main.ts",
             "outputPath": "dist/demo",
             "scripts": [],
-            "styles": [
-              "src/global_styles.css"
-            ],
+            "styles": ["src/global_styles.css"],
             "tsConfig": "src/tsconfig.app.json"
           }
         },
@@ -56,13 +54,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "exclude": [
-              "**/node_modules/**"
-            ],
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ]
+            "exclude": ["**/node_modules/**"],
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"]
           }
         },
         "serve": {
@@ -80,17 +73,12 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "karmaConfig": "src/karma.conf.js",
             "main": "src/test.ts",
             "polyfills": [],
             "scripts": [],
-            "styles": [
-              "styles.css"
-            ],
+            "styles": ["styles.css"],
             "tsConfig": "src/tsconfig.spec.json"
           }
         }
@@ -103,4 +91,4 @@
     }
   },
   "version": 1
-}
+}

angular/package.json

@@ -36,4 +36,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.9.0"
   }
-}
+}

angular/src/karma.conf.js

@@ -10,15 +10,15 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, './coverage/my-app'),
       reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -27,6 +27,6 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

angular/src/main.ts

@@ -8,9 +8,9 @@ import { bootstrapApplication } from '@angular/platform-browser';
   standalone: true,
   imports: [CommonModule],
   template: `
-    <h1>Hello from {{name}}!</h1>
+    <h1>Hello from {{ name }}!</h1>
     <a target="_blank" href="https://angular.io/start">
-      Learn more about Angular 
+      Learn more about Angular
     </a>
   `,
 })

angular/src/tsconfig.app.json

@@ -4,11 +4,6 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "files": [
-    "main.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.d.ts"
-  ]
+  "files": ["main.ts", "polyfills.ts"],
+  "include": ["**/*.d.ts"]
 }

angular/src/tsconfig.spec.json

@@ -2,17 +2,8 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
+    "types": ["jasmine", "node"]
   },
-  "files": [
-    "test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
+  "files": ["test.ts", "polyfills.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }

js/index.js

@@ -3,4 +3,4 @@ import './style.css';
 
 // Write Javascript code!
 const appDiv = document.getElementById('app');
-appDiv.innerHTML = `<h1>JS Starter</h1>`;
+appDiv.innerHTML = `<h1>JS Starter</h1>`;

js/package.json

@@ -3,4 +3,4 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {}
-}
+}

js/style.css

@@ -1,3 +1,4 @@
-h1, h2 {
+h1,
+h2 {
   font-family: Lato;
-}
+}

js/tsconfig.json

@@ -2,4 +2,4 @@
   "compilerOptions": {
     "target": "esnext"
   }
-}
+}

node/package.json

@@ -4,4 +4,4 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}