chore: style formatting and linting fixes (#366)

* chore(formatting-settings): ensure formatting is handled properly

* chore(lint): fix lint errors

* chore(lint): lint css files too

* chore(lint): fix style of src/styles.css

.vscode/settings.json

@@ -1,11 +1,25 @@
 {
-    "editor.tabSize": 2,
-    "typescript.format.semicolons": "remove",
-    "javascript.format.semicolons": "remove",
-    "typescript.suggest.includeAutomaticOptionalChainCompletions": true,
-    "editor.formatOnSave": true,
-    "eslint.codeActionsOnSave.rules": [],
-    "files.exclude": {
-        "package-lock.json": true
-    }
+  "editor.tabSize": 2,
+  "typescript.format.semicolons": "remove",
+  "javascript.format.semicolons": "remove",
+  "typescript.suggest.includeAutomaticOptionalChainCompletions": true,
+  "editor.formatOnSave": false,
+  "eslint.codeActionsOnSave.rules": [],
+  "files.exclude": {
+    "package-lock.json": true
+  },
+  "standard.enable": true,
+  "standard.enableGlobally": false,
+  "standard.run": "onSave",
+  "standard.autoFixOnSave": true,
+  "editor.defaultFormatter": "standard.vscode-standard",
+  "[html]": {
+    "editor.defaultFormatter": "standard.vscode-standard",
+  },
+  "[json]": {
+    "editor.defaultFormatter": "standard.vscode-standard",
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "standard.vscode-standard",
+  }
 }

package.json

@@ -109,7 +109,8 @@
   "scripts": {
     "start": "npm run build && npx -y serve -l 3000 dist",
     "copy-assets": "cp-cli src/index.html dist/index.html && cp-cli src/styles.css dist/styles.css",
-    "lint": "aegir lint",
+    "lint": "aegir lint && npx -y standard && node scripts/beautify.mjs",
+    "lint:fix": "aegir lint --fix && npx -y standard --fix && node scripts/beautify.mjs --fix",
     "release": "aegir release",
     "sw": "node scripts/build-sw.mjs",
     "build": "aegir build && npm run copy-assets && npm run sw",
@@ -133,6 +134,7 @@
     "fetch-ponyfill": "^7.1.0",
     "ipfs": "^0.65.0",
     "ipfs-geoip": "^9.0.0",
+    "js-beautify": "^1.14.7",
     "typescript": "^4.8.4",
     "workbox-build": "6.5.4",
     "workbox-window": "6.5.4"

scripts/beautify.mjs

@@ -0,0 +1,43 @@
+import jsBeautify from 'js-beautify'
+import { promises as fs } from 'fs'
+
+const saveFile = process.argv.slice(2).includes('--fix')
+
+const files = {
+  'src/index.html': jsBeautify.html,
+  'src/styles.css': jsBeautify.css
+}
+
+async function beautificationFn (filePath, fn) {
+  console.log(`Checking ${filePath} formatting...`)
+  const sourceCode = await fs.readFile(filePath, 'utf8')
+
+  console.log(`Beautifying ${filePath}...`)
+  const beautifiedCode = fn(sourceCode, {
+    indent_size: 2,
+    space_in_empty_paren: true,
+    indent_char: ' ',
+    indent_with_tabs: false,
+    editorconfig: false,
+    eol: '\n',
+    end_with_newline: true,
+    indent_level: 0
+  })
+
+  // lint mode.. fail if not beautified
+  if (sourceCode === beautifiedCode) {
+    console.log(`${filePath} is already beautified`)
+    return
+  } else if (!saveFile) {
+    throw new Error(`${filePath} is not beautified`)
+  }
+
+  if (saveFile) {
+    console.log(`Saving beautified ${filePath}`)
+    await fs.writeFile(filePath, beautifiedCode, 'utf8')
+  }
+}
+
+for (const [filePath, fn] of Object.entries(files)) {
+  await beautificationFn(filePath, fn)
+}

scripts/build-sw.mjs

@@ -1,4 +1,4 @@
-import {generateSW} from 'workbox-build';
+import { generateSW } from 'workbox-build'
 
 generateSW({
   globDirectory: 'dist/',
@@ -11,8 +11,8 @@ generateSW({
   runtimeCaching: [
     {
       urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
-      handler: 'NetworkFirst',
+      handler: 'NetworkFirst'
     }
   ],
   swDest: 'dist/sw.js'
-});
+})