✨ Introduce Prettier Code Formatter

.prettierignore

@@ -0,0 +1,3 @@
+build
+node_modules
+**/*.js

.prettierrc.json

@@ -0,0 +1,28 @@
+{
+	"$schema": "http://json.schemastore.org/prettierrc",
+	"tabWidth": 4,
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": true,
+	"arrowParens": "avoid",
+	"printWidth": 100,
+	"trailingComma": "es5",
+	"bracketSameLine": false,
+	"endOfLine": "auto",
+	"overrides": [
+		{
+			"files": ["**/*.yml", "**/*.yaml"],
+			"options": {
+				"parser": "yaml",
+				"tabWidth": 2,
+				"useTabs": false
+			}
+		},
+		{
+			"files": "**/*.ts",
+			"options": {
+				"parser": "typescript"
+			}
+		}
+	]
+}

.vscode/settings.json

@@ -1,5 +1,9 @@
 {
-  "editor.indentSize": "tabSize",
-  "editor.tabSize": 4,
-  "editor.insertSpaces": false
+	"editor.indentSize": "tabSize",
+	"editor.tabSize": 4,
+	"editor.insertSpaces": false,
+	"editor.formatOnSave": true,
+	// Disable foramtting and error checking of node_modules to reduce clutter and improve performance.
+	"npm.exclude": ["**/node_modules"],
+	"errorLens.excludePatterns": ["**/node_modules/**/*"]
 }

js/animations/molang_editor.ts

@@ -1,21 +1,21 @@
-import { MolangAutocomplete } from "./molang";
+import { MolangAutocomplete } from './molang';
 
 interface MolangEditorOptions {
-	autocomplete_context: MolangAutocomplete.Context
-	text: string
+	autocomplete_context: MolangAutocomplete.Context;
+	text: string;
 }
-export function openMolangEditor(options: MolangEditorOptions, callback: ((result: string) => void)) {
+export function openMolangEditor(options: MolangEditorOptions, callback: (result: string) => void) {
 	interface VueData {
-		text: string
+		text: string;
 	}
 	let dialog = new Dialog('expression_editor', {
 		title: 'menu.text_edit.expression_editor',
 		resizable: true,
 		width: 800,
 		component: {
-			components: {VuePrismEditor},
+			components: { VuePrismEditor },
 			data: {
-				text: options.text
+				text: options.text,
 			},
 			methods: {
 				prettyPrint(this: VueData) {
@@ -25,15 +25,19 @@ export function openMolangEditor(options: MolangEditorOptions, callback: ((resul
 					this.text = this.text.replace(/\n/g, '').replace(/\s{2,}/g, ' ');
 				},
 				findReplace(this: VueData) {
-					this
+					this;
 					let scope = this;
 					new Dialog({
 						id: 'find_replace',
 						title: 'action.find_replace',
 						form: {
-							find: {label: 'dialog.find_replace.find', type: 'text'},
-							replace: {label: 'dialog.find_replace.replace', type: 'text'},
-							regex: {label: 'dialog.find_replace.regex', type: 'checkbox', value: false},
+							find: { label: 'dialog.find_replace.find', type: 'text' },
+							replace: { label: 'dialog.find_replace.replace', type: 'text' },
+							regex: {
+								label: 'dialog.find_replace.regex',
+								type: 'checkbox',
+								value: false,
+							},
 						},
 						onConfirm(form) {
 							if (!form.find) return;
@@ -46,14 +50,14 @@ export function openMolangEditor(options: MolangEditorOptions, callback: ((resul
 								}
 							}
 							scope.text = replace(scope.text);
-						}
+						},
 					}).show();
 				},
 				autocomplete(text: string, position: number) {
 					if (Settings.get('autocomplete_code') == false) return [];
 					let test = options.autocomplete_context.autocomplete(text, position);
 					return test;
-				}
+				},
 			},
 			template: `
 				<div>
@@ -72,19 +76,23 @@ export function openMolangEditor(options: MolangEditorOptions, callback: ((resul
 						:line-numbers="true"
 					/>
 				</div>
-			`
+			`,
 		},
 		onOpen() {
-			let element = document.querySelector('#expression_editor_prism.molang_input') as HTMLElement;
-			element.style.height = (dialog.object.clientHeight - 50) + 'px';
+			let element = document.querySelector(
+				'#expression_editor_prism.molang_input'
+			) as HTMLElement;
+			element.style.height = dialog.object.clientHeight - 50 + 'px';
 		},
 		onResize() {
-			let element = document.querySelector('#expression_editor_prism.molang_input') as HTMLElement;
-			element.style.height = (dialog.object.clientHeight - 50) + 'px';
+			let element = document.querySelector(
+				'#expression_editor_prism.molang_input'
+			) as HTMLElement;
+			element.style.height = dialog.object.clientHeight - 50 + 'px';
 		},
 		onConfirm() {
 			callback(dialog.content_vue.$data.text);
-		}
-	})
+		},
+	});
 	dialog.show();
 }