Let’s be pretty.

package.json

@@ -229,7 +229,7 @@
     "eslint": "eslint --max-warnings 0 --ext .js .",
     "format": "prettier --write '**/*.{js,json}'",
     "publish": "vsce publish",
-    "webview": "cd src/webview && yarn build --watch"
+    "webview": "cd src/webview ; yarn build --watch"
   },
   "devDependencies": {
     "@types/mocha": "^5.2.5",

src/gitlab_service.js

@@ -379,9 +379,13 @@ async function fetchDiscussions(issuable) {
 
   try {
     const type = issuable.sha ? 'merge_requests' : 'issues';
-    discussions = await fetch(`/projects/${issuable.project_id}/${type}/${issuable.iid}/discussions?sort=asc`);
+    discussions = await fetch(
+      `/projects/${issuable.project_id}/${type}/${issuable.iid}/discussions?sort=asc`,
+    );
   } catch (e) {
-    vscode.window.showInformationMessage('GitLab Workflow: Failed to fetch discussions for this issuable.');
+    vscode.window.showInformationMessage(
+      'GitLab Workflow: Failed to fetch discussions for this issuable.',
+    );
   }
 
   return discussions;
@@ -390,7 +394,7 @@ async function fetchDiscussions(issuable) {
 // TODO: Remove project fetch
 async function renderMarkdown(markdown) {
   let rendered = { html: markdown };
-  const [ major ] = version.split('.');
+  const [major] = version.split('.');
 
   if (parseInt(major, 10) < 11) {
     return markdown;
@@ -403,12 +407,12 @@ async function renderMarkdown(markdown) {
       project: project.path_with_namespace,
       gfm: 'true', // Needs to be a string for the API
     });
-  } catch(e) {
+  } catch (e) {
     return markdown;
   }
 
   return rendered.html;
-};
+}
 
 exports.fetchUser = fetchUser;
 exports.fetchIssuesAssignedToMe = fetchIssuesAssignedToMe;

src/sidebar_tree_item.js

@@ -8,7 +8,7 @@ class SidebarTreeItem extends vscode.TreeItem {
       this.command = {
         command: 'gl.showRichContent',
         arguments: [data],
-      }
+      };
     }
   }
 }

src/webview/babel.config.js

 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+  presets: ['@vue/app'],
+};

src/webview/postcss.config.js

 module.exports = {
   plugins: {
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+};

src/webview/src/assets/icons.js

 export default {
-  gitLabLogo: '<svg aria-hidden="true" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>',
-  chevronDown:'<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>',
-  chevronRight: '<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>',
-}
+  gitLabLogo:
+    '<svg aria-hidden="true" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>',
+  chevronDown:
+    '<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>',
+  chevronRight:
+    '<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>',
+};

src/webview/src/main.js

-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import App from './App.vue';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App)
-}).$mount('#app')
+  render: h => h(App),
+}).$mount('#app');

src/webview/vue.config.js

 module.exports = {
   filenameHashing: false,
-}
+};

src/webview_controller.js

@@ -5,9 +5,9 @@ const gitLabService = require('./gitlab_service');
 
 let context = null;
 
-const addDeps = (ctx) => {
+const addDeps = ctx => {
   context = ctx;
-}
+};
 
 const getNonce = () => {
   let text = '';
@@ -18,7 +18,7 @@ const getNonce = () => {
   }
 
   return text;
-}
+};
 
 const getResources = () => {
   const paths = {
@@ -26,22 +26,22 @@ const getResources = () => {
     vendorUri: 'src/webview/dist/js/chunk-vendors.js',
     styleUri: 'src/webview/dist/css/app.css',
     devScriptUri: 'src/webview/dist/app.js',
-  }
+  };
 
-  Object.keys(paths).forEach((key) => {
+  Object.keys(paths).forEach(key => {
     const uri = vscode.Uri.file(path.join(context.extensionPath, paths[key]));
 
     paths[key] = uri.with({ scheme: 'vscode-resource' });
   });
 
   return paths;
-}
+};
 
 const getIndexPath = () => {
-  const isDev = !(fs.existsSync(path.join(context.extensionPath, 'src/webview/dist/js/app.js')));
+  const isDev = !fs.existsSync(path.join(context.extensionPath, 'src/webview/dist/js/app.js'));
 
   return isDev ? 'src/webview/public/dev.html' : 'src/webview/public/index.html';
-}
+};
 
 const replaceResources = () => {
   const { appScriptUri, vendorUri, styleUri, devScriptUri } = getResources();
@@ -53,18 +53,16 @@ const replaceResources = () => {
     .replace('{{vendorUri}}', vendorUri)
     .replace('{{appScriptUri}}', appScriptUri)
     .replace('{{devScriptUri}}', devScriptUri);
-}
+};
 
-const createPanel = (issuable) => {
+const createPanel = issuable => {
   const title = `${issuable.title.slice(0, 20)}...`;
 
   return vscode.window.createWebviewPanel('glWorkflow', title, vscode.ViewColumn.One, {
     enableScripts: true,
-    localResourceRoots: [
-      vscode.Uri.file(path.join(context.extensionPath, 'src')),
-    ]
+    localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'src'))],
   });
-}
+};
 
 async function create(issuable) {
   const panel = createPanel(issuable);
@@ -74,7 +72,7 @@ async function create(issuable) {
   const discussions = await gitLabService.fetchDiscussions(issuable);
 
   panel.webview.postMessage({ type: 'issuableFetch', issuable, discussions });
-  panel.webview.onDidReceiveMessage(async (message) => {
+  panel.webview.onDidReceiveMessage(async message => {
     if (message.command === 'renderMarkdown') {
       let rendered = await gitLabService.renderMarkdown(message.markdown);
       rendered = rendered.replace(/ src=".*" alt/gim, ' alt').replace(/" data-src/gim, '" src');