Releasing 0.1.0

.vscode/settings.json

@@ -1,10 +1,10 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-	"files.exclude": {
-		"out": false // set this to true to hide the "out" folder with the compiled JS files
-	},
-	"search.exclude": {
-		"out": true // set this to false to include "out" folder in search results
-	},
-	"typescript.tsdk": "./node_modules/typescript/lib" // we want to use the TS server from our node_modules folder to control its version
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    "typescript.tsdk": "./node_modules/typescript/lib" // we want to use the TS server from our node_modules folder to control its version
 }

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Change Log
 All notable changes to the "mjml" extension will be documented in this file.
 
+### [0.1.0] (2017-12-14)
+* [new] `MJML: Beautify`: [#8](https://github.com/attilabuti/vscode-mjml/issues/8) Beautify MJML code.
+* [#15](https://github.com/attilabuti/vscode-mjml/pull/15): fixed preview cache issue.
+* Some other improvements.
+
 ### [0.0.9] (2017-10-06)
 * [new] Configuration property `mjml.screenshotWidths`: Screenshot widths.
 * [new] `MJML: Multiple Screenshots`: [#13](https://github.com/attilabuti/vscode-mjml/issues/13) Take multiple screenshots of the rendered MJML document.

README.md

@@ -15,6 +15,7 @@ MJML preview, lint, compile for Visual Studio Code.
 * Send email with Mailjet.
 * Code snippets for MJML. Based on [mjml-syntax](https://github.com/mjmlio/mjml-syntax).
 * Fetch official templates. Based on [mjml-app](https://github.com/mjmlio/mjml-app).
+* Beautify MJML code.
 
 ## It looks like this
 
@@ -40,6 +41,7 @@ The following command is available:
 * **MJML: Copy HTML** Copy the result HTML to clipboard.
 * **MJML: Send Email** Send email with Mailjet.
 * **MJML: Template** Fetch official templates.
+* **MJML: Beautify** or **Format Document** Beautify MJML code.
 
 ## Settings
 
@@ -61,6 +63,7 @@ The following command is available:
 | `mjml.mailFromName` | ` ` | Sender name. |
 | `mjml.mailSubject` | ` ` | Email subject. |
 | `mjml.mailRecipients` | ` ` | Comma separated list of recipients email addresses. |
+| `mjml.beautify` | ` ` | Beautify options ([available options](https://github.com/beautify-web/js-beautify#options)). |
 
 ## Snippets
 
@@ -107,6 +110,11 @@ The following command is available:
 
 ## Change Log
 
+### [0.1.0] (2017-12-14)
+* [new] `MJML: Beautify`: [#8](https://github.com/attilabuti/vscode-mjml/issues/8) Beautify MJML code.
+* [#15](https://github.com/attilabuti/vscode-mjml/pull/15): fixed preview cache issue.
+* Some other improvements.
+
 ### [0.0.9] (2017-10-06)
 * [new] Configuration property `mjml.screenshotWidths`: Screenshot widths.
 * [new] `MJML: Multiple Screenshots`: [#13](https://github.com/attilabuti/vscode-mjml/issues/13) Take multiple screenshots of the rendered MJML document.

package.json

@@ -2,14 +2,15 @@
     "name": "vscode-mjml",
     "displayName": "MJML",
     "description": "MJML preview, lint, compile for Visual Studio Code.",
-    "version": "0.0.9",
+    "version": "0.1.0",
     "publisher": "attilabuti",
     "license": "MIT",
     "readme": "README.md",
     "icon": "images/icon.png",
     "author": {
         "name": "Attila Buti",
-        "url": "www.attilabuti.com"
+        "email": "[email protected]",
+        "url": "https://attilabuti.com"
     },
     "homepage": "https://github.com/attilabuti/vscode-mjml#readme",
     "repository": {
@@ -26,7 +27,8 @@
     "categories": [
         "Other",
         "Linters",
-        "Snippets"
+        "Snippets",
+        "Formatters"
     ],
     "keywords": [
         "vscode",
@@ -46,6 +48,7 @@
         "onCommand:mjml.multipleScreenshots",
         "onCommand:mjml.sendEmail",
         "onCommand:mjml.template",
+        "onCommand:mjml.beautify",
         "onLanguage:mjml"
     ],
     "main": "./out/extension",
@@ -136,6 +139,14 @@
                     "type": "string",
                     "default": "",
                     "description": "Comma separated list of recipients email addresses."
+                },
+                "mjml.beautify": {
+                    "type": "object",
+                    "default": {
+                        "indent_size": 2,
+                        "wrap_attributes_indent_size": 2
+                    },
+                    "description": "Beautify options."
                 }
             }
         },
@@ -178,6 +189,11 @@
                 "command": "mjml.template",
                 "title": "Template",
                 "category": "MJML"
+            },
+            {
+                "command": "mjml.beautify",
+                "title": "Beautify",
+                "category": "MJML"
             }
         ],
         "languages": [
@@ -226,6 +242,7 @@
         "mjml": "^3.3.5",
         "node-fetch": "1.7.3",
         "node-mailjet": "^3.2.1",
-        "webshot": "^0.18.0"
+        "webshot": "^0.18.0",
+        "js-beautify": "^1.7.5"
     }
 }

src/beautify.ts

@@ -0,0 +1,56 @@
+"use strict";
+
+import * as vscode from "vscode";
+
+import * as beautifyJS from "js-beautify";
+
+import helper from "./helper";
+
+export default class Beautify {
+
+    constructor(subscriptions: vscode.Disposable[]) {
+        subscriptions.push(
+            vscode.commands.registerCommand("mjml.beautify", () => {
+                this.beautify();
+            })
+        );
+    }
+
+    private beautify(): void {
+        if (helper.isMJMLFile(vscode.window.activeTextEditor.document)) {
+            vscode.window.activeTextEditor.edit((editBuilder: vscode.TextEditorEdit) => {
+                editBuilder.replace(this.getRange(), this.beautifyHTML());
+            });
+        }
+        else {
+            vscode.window.showWarningMessage("This is not a MJML document!");
+            return;
+        }
+    }
+
+    private beautifyHTML(): any {
+        try {
+            return beautifyJS.html(
+                vscode.window.activeTextEditor.document.getText(),
+                vscode.workspace.getConfiguration("mjml").beautify
+            );
+        } catch (err) {
+            vscode.window.showErrorMessage(err);
+            return;
+        }
+    }
+
+    private getRange(): vscode.Range {
+        let document: vscode.TextDocument = vscode.window.activeTextEditor.document;
+
+        return new vscode.Range(
+            new vscode.Position(0, 0),
+            new vscode.Position(document.lineCount - 1, document.lineAt(document.lineCount - 1).text.length)
+        );
+    }
+
+    public formatDocument(): vscode.TextEdit[] {
+        return [vscode.TextEdit.replace(this.getRange(), this.beautifyHTML())];
+    }
+
+}

src/extension.ts

@@ -6,20 +6,22 @@ import * as childProcess from "child_process";
 
 import * as phantomJS from "phantomjs-prebuilt";
 
-import LintingProvider from "./lintingProvider";
-import PreviewManager from "./previewProvider";
-import ExportHTML from "./exportProvider";
-import CopyHTML from "./copyProvider";
-import Screenshot from "./screenshotProvider";
-import SendEmail from "./emailProvider";
-import Template from "./templateProvider";
+import Beautify from "./beautify";
+import CopyHTML from "./copy";
+import SendEmail from "./email";
+import ExportHTML from "./export";
+import LintingProvider from "./linter";
+import PreviewManager from "./preview";
+import Screenshot from "./screenshot";
+import Template from "./template";
 
+let beautify: Beautify;
+let copyHTML: CopyHTML;
+let sendEmail: SendEmail;
+let exportHTML: ExportHTML;
 let linter: LintingProvider;
 let previewManager: PreviewManager;
-let exportHTML: ExportHTML;
-let copyHTML: CopyHTML;
 let screenshot: Screenshot;
-let sendEmail: SendEmail;
 let template: Template;
 
 export function activate(context: vscode.ExtensionContext) {
@@ -50,7 +52,7 @@ export function activate(context: vscode.ExtensionContext) {
                 screenshot = new Screenshot(context, process.platform, phantomJS.platform, phantomJSBuilt);
             });
         }
-        catch (e) {
+        catch (err) {
             vscode.window.showErrorMessage("MJML couldn't build the propper version of PhantomJS. Restart VSCode in order to try it again.");
             phantomJSBuilt = false;
         }
@@ -63,10 +65,17 @@ export function activate(context: vscode.ExtensionContext) {
         linter = new LintingProvider(context.subscriptions);
     }
 
-    previewManager = new PreviewManager(context);
-    exportHTML = new ExportHTML(context.subscriptions);
+    beautify = new Beautify(context.subscriptions);
+    vscode.languages.registerDocumentFormattingEditProvider('mjml', {
+        provideDocumentFormattingEdits(document: vscode.TextDocument): vscode.TextEdit[] {
+            return beautify.formatDocument();
+        }
+    });
+
     copyHTML = new CopyHTML(context.subscriptions);
     sendEmail = new SendEmail(context.subscriptions);
+    exportHTML = new ExportHTML(context.subscriptions);
+    previewManager = new PreviewManager(context);
     template = new Template(context.subscriptions);
 }
 

src/helper.ts

@@ -50,7 +50,7 @@ export default class Helper {
                 return html.html;
             }
         }
-        catch (e) {
+        catch (err) {
             return;
         }
     }

src/lintingProvider.ts → src/linter.ts

@@ -55,7 +55,7 @@ export default class MJMLLintingProvider {
 
             try {
                 MJMLDocument = documentParser(vscode.window.activeTextEditor.document.getText());
-            } catch (e) {
+            } catch (err) {
                 return;
             }
 
@@ -87,7 +87,7 @@ export default class MJMLLintingProvider {
 
             this.diagnosticCollection.set(textDocument.uri, diagnostics);
         }
-        catch (e) {
+        catch (err) {
             this.diagnosticCollection.set(textDocument.uri, diagnostics);
         }
     }