run prettier on all files, setup on save

coderoad · ShMcK · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019
commit 9cb8ba59ddd453292047ceaa4ff5ad78858ede71
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -30,4 +30,6 @@
   "search.exclude": {
     "out": true // set this to false to include "out" folder in search results
   },
+  "prettier.eslintIntegration": true,
+  "editor.formatOnSave": true,
 }
diff --git a/src/editor/ReactWebView.ts b/src/editor/ReactWebView.ts
@@ -6,134 +6,135 @@ import * as path from 'path'
  * Manages React webview panels
  */
 class ReactWebView {
-    // @ts-ignore
-    private panel: vscode.WebviewPanel
-    private extensionPath: string
-    private disposables: vscode.Disposable[] = []
-    private onReceive: any // TODO: properly type
-
-    public constructor(extensionPath: string) {
-        this.extensionPath = extensionPath
-
-        // Create and show a new webview panel
-        this.panel = this.createWebviewPanel(vscode.ViewColumn.Two)
-
-        // Set the webview's initial html content
-        this.panel.webview.html = this.getHtmlForWebview()
-
-        // Listen for when the panel is disposed
-        // This happens when the user closes the panel or when the panel is closed programatically
-        // this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
-
-        // Handle messages from the webview
-        const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action)
-        this.panel.webview.onDidReceiveMessage(onReceive, null, this.disposables)
-
-        // update panel on changes
-        const updateWindows = () => {
-
-            vscode.commands.executeCommand('vscode.setEditorLayout', { orientation: 0, groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }] })
-            this.panel.reveal(vscode.ViewColumn.Two)
-        }
-
-        this.panel.onDidDispose(() => {
-            updateWindows()
-        })
-
-        // this.panel.onDidChangeViewState(() => {
-        //     console.log('onDidChangeViewState')
-        //     updateWindows()
-        // })
-
-        // prevents new panels from going ontop of coderoad panel
-        vscode.window.onDidChangeActiveTextEditor((param) => {
-            if (!param || param.viewColumn !== vscode.ViewColumn.Two) {
-                updateWindows()
-            }
-        })
-        // // prevents moving coderoad panel on top of left panel
-        vscode.window.onDidChangeVisibleTextEditors((param) => {
-            updateWindows()
-        })
-
-        // TODO: prevent window from moving to the left when no windows remain on rights
+  // @ts-ignore
+  private panel: vscode.WebviewPanel
+  private extensionPath: string
+  private disposables: vscode.Disposable[] = []
+  private onReceive: any // TODO: properly type
+
+  public constructor(extensionPath: string) {
+    this.extensionPath = extensionPath
+
+    // Create and show a new webview panel
+    this.panel = this.createWebviewPanel(vscode.ViewColumn.Two)
+
+    // Set the webview's initial html content
+    this.panel.webview.html = this.getHtmlForWebview()
+
+    // Listen for when the panel is disposed
+    // This happens when the user closes the panel or when the panel is closed programatically
+    // this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
+
+    // Handle messages from the webview
+    const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action)
+    this.panel.webview.onDidReceiveMessage(onReceive, null, this.disposables)
+
+    // update panel on changes
+    const updateWindows = () => {
+      vscode.commands.executeCommand('vscode.setEditorLayout', {
+        orientation: 0,
+        groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }],
+      })
+      this.panel.reveal(vscode.ViewColumn.Two)
     }
 
-    public createOrShow(column: number): void {
-        // If we already have a panel, show it.
-        // Otherwise, create a new panel.
-        if (this.panel && this.panel.webview) {
-            this.panel.reveal(column)
-        } else {
-            this.panel = this.createWebviewPanel(column)
-        }
+    this.panel.onDidDispose(() => {
+      updateWindows()
+    })
+
+    // this.panel.onDidChangeViewState(() => {
+    //     console.log('onDidChangeViewState')
+    //     updateWindows()
+    // })
+
+    // prevents new panels from going ontop of coderoad panel
+    vscode.window.onDidChangeActiveTextEditor(param => {
+      if (!param || param.viewColumn !== vscode.ViewColumn.Two) {
+        updateWindows()
+      }
+    })
+    // // prevents moving coderoad panel on top of left panel
+    vscode.window.onDidChangeVisibleTextEditors(param => {
+      updateWindows()
+    })
+
+    // TODO: prevent window from moving to the left when no windows remain on rights
+  }
+
+  public createOrShow(column: number): void {
+    // If we already have a panel, show it.
+    // Otherwise, create a new panel.
+    if (this.panel && this.panel.webview) {
+      this.panel.reveal(column)
+    } else {
+      this.panel = this.createWebviewPanel(column)
     }
-
-    private createWebviewPanel(column: number): vscode.WebviewPanel {
-        const viewType = 'CodeRoad'
-        const title = 'CodeRoad'
-        const config = {
-            // Enable javascript in the webview
-            enableScripts: true,
-            // And restric the webview to only loading content from our extension's `media` directory.
-            localResourceRoots: [vscode.Uri.file(path.join(this.extensionPath, 'build'))],
-            // prevents destroying the window when it is in the background
-            retainContextWhenHidden: true,
-        }
-        return vscode.window.createWebviewPanel(viewType, title, column, config)
+  }
+
+  private createWebviewPanel(column: number): vscode.WebviewPanel {
+    const viewType = 'CodeRoad'
+    const title = 'CodeRoad'
+    const config = {
+      // Enable javascript in the webview
+      enableScripts: true,
+      // And restric the webview to only loading content from our extension's `media` directory.
+      localResourceRoots: [vscode.Uri.file(path.join(this.extensionPath, 'build'))],
+      // prevents destroying the window when it is in the background
+      retainContextWhenHidden: true,
     }
-
-    private getNonce(): string {
-        let text = ''
-        const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-        for (let i = 0; i < 32; i++) {
-            text += possible.charAt(Math.floor(Math.random() * possible.length))
-        }
-        return text
+    return vscode.window.createWebviewPanel(viewType, title, column, config)
+  }
+
+  private getNonce(): string {
+    let text = ''
+    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    for (let i = 0; i < 32; i++) {
+      text += possible.charAt(Math.floor(Math.random() * possible.length))
     }
-
-    public async postMessage(action: CR.Action): Promise<void> {
-        // Send a message to the webview webview.
-        // You can send any JSON serializable data.
-        const success = await this.panel.webview.postMessage(action)
-        if (!success) {
-            throw new Error(`Message post failure: ${JSON.stringify(action)}`)
-        }
+    return text
+  }
+
+  public async postMessage(action: CR.Action): Promise<void> {
+    // Send a message to the webview webview.
+    // You can send any JSON serializable data.
+    const success = await this.panel.webview.postMessage(action)
+    if (!success) {
+      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
     }
+  }
 
-    public dispose(): void {
-        // Clean up our resources
-        this.panel.dispose()
+  public dispose(): void {
+    // Clean up our resources
+    this.panel.dispose()
 
-        while (this.disposables.length) {
-            const x = this.disposables.pop()
-            if (x) {
-                x.dispose()
-            }
-        }
+    while (this.disposables.length) {
+      const x = this.disposables.pop()
+      if (x) {
+        x.dispose()
+      }
     }
-
-    private getHtmlForWebview(): string {
-
-        // eslint-disable-next-line
-        const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
-        const mainScript = manifest.files['main.js']
-        // grab first chunk
-        const chunk = Object.keys(manifest.files).filter(f => f.match(/^static\/js\/.+\.js$/))[0]
-        const chunkScript = manifest.files[chunk]
-        const mainStyle = manifest.files['main.css']
-
-        const scriptPathOnDisk = vscode.Uri.file(path.join(this.extensionPath, 'build', mainScript))
-        const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' })
-        const chunkPathOnDisk = vscode.Uri.file(path.join(this.extensionPath, 'build', chunkScript))
-        const chunkUri = chunkPathOnDisk.with({ scheme: 'vscode-resource' })
-        const stylePathOnDisk = vscode.Uri.file(path.join(this.extensionPath, 'build', mainStyle))
-        const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' })
-
-        // Use a nonce to whitelist which scripts can be run
-        const [n1, n2, n3] = [1, 2, 3].map(this.getNonce)
-
-        return `<!DOCTYPE html>
+  }
+
+  private getHtmlForWebview(): string {
+    // eslint-disable-next-line
+    const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
+    const mainScript = manifest.files['main.js']
+    // grab first chunk
+    const chunk = Object.keys(manifest.files).filter(f => f.match(/^static\/js\/.+\.js$/))[0]
+    const chunkScript = manifest.files[chunk]
+    const mainStyle = manifest.files['main.css']
+
+    const scriptPathOnDisk = vscode.Uri.file(path.join(this.extensionPath, 'build', mainScript))
+    const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' })
+    const chunkPathOnDisk = vscode.Uri.file(path.join(this.extensionPath, 'build', chunkScript))
+    const chunkUri = chunkPathOnDisk.with({ scheme: 'vscode-resource' })
+    const stylePathOnDisk = vscode.Uri.file(path.join(this.extensionPath, 'build', mainStyle))
+    const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' })
+
+    // Use a nonce to whitelist which scripts can be run
+    const [n1, n2, n3] = [1, 2, 3].map(this.getNonce)
+
+    return `<!DOCTYPE html>
 			<html lang="en">
                 <head>
                     <meta charset="utf-8">
@@ -143,7 +144,9 @@ class ReactWebView {
                     <link rel="manifest" href="./manifest.json" />
                     <link rel="stylesheet" type="text/css" href="${styleUri}">
                     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
-                    <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
+                    <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({
+                      scheme: 'vscode-resource',
+                    })}/">
                     <style></style>
                 </head>
 
@@ -155,7 +158,7 @@ class ReactWebView {
                     <script nonce="${n3}" src="${scriptUri}"></script>
                 </body>
             </html>`
-    }
+  }
 }
 
 export default ReactWebView