#394: Ordering of snippet fields is based on their field definition

CHANGELOG.md

@@ -18,6 +18,7 @@
 - [#385](https://github.com/estruyf/vscode-front-matter/issues/385): If no default value for the draft field is defined, the field value will be set to `true`
 - [#388](https://github.com/estruyf/vscode-front-matter/issues/388): New stop server action has been added to the panel
 - [#390](https://github.com/estruyf/vscode-front-matter/issues/390): Implement another JSON parser in order to be able to parse the `frontmatter.json` file better
+- [#394](https://github.com/estruyf/vscode-front-matter/issues/394): Ordering of snippet fields is based on their field definition
 
 ### ⚡️ Optimizations
 

src/dashboardWebView/components/SnippetsView/SnippetForm.tsx

@@ -79,15 +79,21 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
     const allFields: SnippetField[] = [];
     const snippetFields = snippet.fields || [];
 
-    for (const fieldName of placeholders) {
-      const field = snippetFields.find(f => f.name === fieldName);
-
-      if (field) {
+    // Loop over all fields to check if they are present in the snippet
+    for (const field of snippetFields) {
+      const idx = placeholders.findIndex(fieldName => fieldName === field.name);
+      if (idx > -1) {
         allFields.push({
           ...field,
           value: insertPlaceholderValues(field.default || "")
         });
-      } else {
+      }
+    }
+
+    // Loop over all placeholders to find the ones that are not present in the snippet fields
+    for (const fieldName of placeholders) {
+      const idx = snippetFields.findIndex(field => field.name === fieldName);
+      if (idx === -1) {
         allFields.push({
           name: fieldName,
           title: fieldName,