Merge branch '215-introduce-eslint-prettier' into 'main'

style: introduce eslint and prettier to the webview subproject

See merge request gitlab-org/gitlab-vscode-extension!124

.eslintrc.json

 {
-  "extends": ["airbnb-base", "prettier" ],
-  "plugins": ["import", "prettier"],
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["import"],
   "env": {
     "mocha": true,
     "jest": true
   },
-  "ignorePatterns": [
-    "node_modules/",
-    "src/webview/node_modules/",
-    "src/webview/dist/",
-    ".vscode-test/",
-    "out"
-  ],
+  "ignorePatterns": ["node_modules/", "src/webview/", "out"],
   "rules": {
     "no-console": "off",
     "no-return-await": "off",
     "import/no-unresolved": [
       2,
       {
-        "ignore": ["vscode", "vue", "v-tooltip"]
+        "ignore": ["vscode"]
       }
-    ],
-    "prettier/prettier": ["error"]
+    ]
   },
   "reportUnusedDisableDirectives": true,
   "overrides": [
     {
       "files": ["**/*.ts"],
       "parser": "@typescript-eslint/parser",
-      "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "prettier/@typescript-eslint"
-      ],
+      "extends": ["plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint"],
       "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
@@ -45,7 +35,10 @@
           }
         ],
         "import/prefer-default-export": "off",
-        "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.ts", "test/**/*"]}]
+        "import/no-extraneous-dependencies": [
+          "error",
+          { "devDependencies": ["**/*.test.ts", "test/**/*"] }
+        ]
       },
       "settings": {
         "import/resolver": {
@@ -54,10 +47,7 @@
           }
         }
       },
-      "plugins": [
-        "@typescript-eslint",
-        "prettier"
-      ]
+      "plugins": ["@typescript-eslint"]
     }
   ]
 }

.gitlab-ci.yml

@@ -26,7 +26,8 @@ lint:
   stage: test
   script:
     - npm ci
-    - npm run eslint
+    - cd src/webview && npm ci && cd ../.. # webview dependencies
+    - npm run lint
 
 lint_commit:
   stage: test

.prettierignore

@@ -2,5 +2,5 @@ package-lock.json
 .history
 package.json
 .vscode-test
-src/dist
+src/webview/dist
 out

.vscode/launch.json

@@ -10,14 +10,11 @@
       "args": ["--disable-extensions", "--extensionDevelopmentPath=${workspaceRoot}"],
       "stopOnEntry": false,
       "preLaunchTask": "${defaultBuildTask}"
-
     },
 
     {
       "name": "Unit Tests",
-      "args": [
-        "-i",
-      ],
+      "args": ["-i"],
       "internalConsoleOptions": "openOnSessionStart",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "request": "launch",

package-lock.json

@@ -3374,9 +3374,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
-      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz",
+      "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==",
       "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
@@ -3484,15 +3484,6 @@
         }
       }
     },
-    "eslint-plugin-prettier": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz",
-      "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==",
-      "dev": true,
-      "requires": {
-        "prettier-linter-helpers": "^1.0.0"
-      }
-    },
     "eslint-scope": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
@@ -3897,12 +3888,6 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
-    "fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
-    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -9018,15 +9003,6 @@
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
-    "prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "requires": {
-        "fast-diff": "^1.1.2"
-      }
-    },
     "pretty-format": {
       "version": "25.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",

package.json

@@ -507,16 +507,17 @@
   },
   "scripts": {
     "vscode:prepublish": "npm run compile",
+    "postinstall": "cd src/webview && npm install",
     "compile": "tsc -p ./",
     "watch": "tsc -watch -p ./",
     "test-unit": "jest",
     "test-integration": "npm run compile && node ./out/test/runTest.js",
     "create-test-workspace": "npm run compile && node ./scripts/create_workspace_for_test_debugging.js",
     "test": "npm run test-unit && npm run test-integration",
-    "eslint": "eslint --ext .js --ext .ts .",
-    "autofix": "eslint --fix . && prettier --write '**/*.{js,json}'",
+    "lint": "eslint --ext .js --ext .ts . && prettier --check '**/*.{js,ts,vue,json}' && cd src/webview && npm run lint",
+    "autofix": "eslint --fix . && prettier --write '**/*.{js,ts,vue,json}' && cd src/webview && npm run autofix",
     "publish": "vsce publish",
-    "webview": "cd src/webview ; npm install ; npm run watch",
+    "webview": "cd src/webview && npm run watch",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
   },
   "devDependencies": {
@@ -531,9 +532,8 @@
     "conventional-changelog-cli": "^2.0.34",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-prettier": "^3.1.2",
     "jest": "^26.4.2",
     "mocha": "^7.0.1",
     "msw": "^0.21.2",

src/webview/.eslintrc.json

+{
+  "root": true,
+  "extends": ["airbnb-base", "prettier", "plugin:vue/strongly-recommended"],
+  "plugins": ["import", "vue"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".vue"]
+      }
+    }
+  },
+  "globals": {
+    "acquireVsCodeApi": "readonly"
+  },
+  "env": {
+    "jest": true,
+    "es6": true
+  },
+  "ignorePatterns": ["node_modules", "dist"],
+  "rules": {
+    "no-console": "off",
+    "no-return-await": "off",
+    "import/extensions": ["error", "never"],
+    "vue/max-attributes-per-line": "off",
+    "vue/html-indent": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/html-self-closing": "off"
+  },
+  "reportUnusedDisableDirectives": true
+}

src/webview/package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "node_modules/.bin/vue-cli-service serve",
-    "build": "node_modules/.bin/vue-cli-service build",
-    "watch": "node_modules/.bin/vue-cli-service build --watch",
-    "test:unit": "node_modules/.bin/vue-cli-service test:unit"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "watch": "vue-cli-service build --watch",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "eslint --ext .js --ext .vue .",
+    "autofix": "eslint --ext .js --ext .vue --fix ."
   },
   "dependencies": {
     "markdown-it": "^10.0.0",
@@ -21,6 +23,11 @@
     "@vue/cli-service": "^4.4.6",
     "@vue/test-utils": "^1.1.0",
     "chai": "^4.2.0",
+    "eslint": "^7.13.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"

src/webview/src/App.vue

@@ -6,7 +6,7 @@ import CommentForm from './components/CommentForm';
 const vscode = acquireVsCodeApi();
 
 export default {
-  name: 'app',
+  name: 'App',
   data() {
     return {
       isLoading: false,
@@ -35,7 +35,7 @@ export default {
       command: 'appReady',
     });
   },
-}
+};
 </script>
 
 <template>
@@ -44,7 +44,9 @@ export default {
       Fetching issuable details and discussions. This may take a while.
       <br />
       If it doesn't work, please
-      <a href="https://gitlab.com/gitlab-org/gitlab-vscode-extension/issues/new">create an issue.</a>
+      <a href="https://gitlab.com/gitlab-org/gitlab-vscode-extension/issues/new" class="hello"
+        >create an issue.</a
+      >
     </p>
     <template v-else>
       <issuable-details :issuable="issuable" />

src/webview/src/components/CommentForm.vue

@@ -21,7 +21,9 @@ export default {
   },
   methods: {
     getNoteType() {
-      return this.issuable.sha ? { type: 'merge_request', path: 'merge_requests' } : { type: 'issue', path: 'issues' };
+      return this.issuable.sha
+        ? { type: 'merge_request', path: 'merge_requests' }
+        : { type: 'issue', path: 'issues' };
     },
     addComment() {
       const { issuable, note, command } = this;
@@ -50,7 +52,7 @@ export default {
 
 <template>
   <div class="main-comment-form">
-    <textarea v-model="note" placeholder="Write a comment..."></textarea>
+    <textarea v-model="note" placeholder="Write a comment..." />
     <button @click="addComment" :disabled="isSaving || !note.length">
       {{ buttonTitle }}
     </button>
@@ -92,7 +94,7 @@ export default {
     cursor: pointer;
 
     &:disabled {
-      opacity: .9;
+      opacity: 0.9;
       cursor: default;
     }
 

src/webview/src/components/Date.vue

 <script>
-
 const moment = require('moment-timezone');
-moment.tz.setDefault(Intl.DateTimeFormat().resolvedOptions().timeZone);
 
+moment.tz.setDefault(Intl.DateTimeFormat().resolvedOptions().timeZone);
 
 export default {
   props: {
@@ -20,10 +19,9 @@ export default {
     },
   },
 };
-
 </script>
 <template>
-  <span v-tooltip="{ content: formatedDate, placement: 'top'}">
+  <span v-tooltip="{ content: formatedDate, placement: 'top' }">
     {{ dateAgo }}
   </span>
 </template>
@@ -49,7 +47,7 @@ export default {
     z-index: 1;
   }
 
-  &[x-placement^="top"] {
+  &[x-placement^='top'] {
     margin-bottom: 5px;
 
     .tooltip-arrow {
@@ -64,7 +62,7 @@ export default {
     }
   }
 
-  &[x-placement^="bottom"] {
+  &[x-placement^='bottom'] {
     margin-top: 5px;
 
     .tooltip-arrow {
@@ -79,7 +77,7 @@ export default {
     }
   }
 
-  &[x-placement^="right"] {
+  &[x-placement^='right'] {
     margin-left: 5px;
 
     .tooltip-arrow {
@@ -94,7 +92,7 @@ export default {
     }
   }
 
-  &[x-placement^="left"] {
+  &[x-placement^='left'] {
     margin-right: 5px;
 
     .tooltip-arrow {
@@ -112,13 +110,13 @@ export default {
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity 0.15s, visibility 0.15s;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity 0.15s;
   }
 }
 </style>

src/webview/src/components/Discussion.vue

@@ -48,26 +48,13 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="{ collapsed: !isRepliesVisible }"
-    class="discussion"
-  >
+  <div :class="{ collapsed: !isRepliesVisible }" class="discussion">
     <note :noteable="initialDiscussion" />
-    <div
-      v-if="hasReplies"
-      @click="toggleReplies"
-      class="toggle-widget"
-    >
-      <span
-        class="chevron"
-        v-html="toggleRepliesIcon"></span> {{ toggleRepliesText }}
+    <div v-if="hasReplies" @click="toggleReplies" class="toggle-widget">
+      <span class="chevron" v-html="toggleRepliesIcon" /> {{ toggleRepliesText }}
     </div>
     <template v-if="isRepliesVisible">
-      <note
-        v-for="note in replies"
-        :key="note.id"
-        :noteable="note"
-      />
+      <note v-for="note in replies" :key="note.id" :noteable="note" />
     </template>
   </div>
 </template>

src/webview/src/components/IssuableDetails.vue

@@ -49,7 +49,7 @@ export default {
     window.addEventListener('message', event => {
       if (event.data.type === 'markdownRendered') {
         const { ref, object, markdown } = event.data;
-        if (object == 'issuable' && ref == this.issuable.id) {
+        if (object === 'issuable' && ref === this.issuable.id) {
           this.issuable.markdownRenderedOnServer = true;
           this.issuable.description = markdown;
         }
@@ -62,17 +62,11 @@ export default {
 <template>
   <div class="issuable-details">
     <div class="header">
-      <span
-        :class="{ [issuable.state]: true }"
-        class="state"
-      >{{ stateText }}</span>
+      <span :class="{ [issuable.state]: true }" class="state">{{ stateText }}</span>
       <span class="capitalize"> opened</span>
-      <date :date='issuable.created_at' />
+      <date :date="issuable.created_at" />
       by
-      <user-avatar
-        :user="issuable.author"
-        :show-handle="false"
-      />
+      <user-avatar :user="issuable.author" :show-handle="false" />
       <a :href="issuable.web_url" class="view-link">
         Open in GitLab
       </a>
@@ -80,10 +74,7 @@ export default {
     <div class="title">
       <h2>{{ issuable.title }}</h2>
     </div>
-    <div
-      class="description"
-      v-html="description"
-    ></div>
+    <div class="description" v-html="description" />
   </div>
 </template>
 
@@ -121,11 +112,11 @@ export default {
       font-size: 12px;
 
       &.opened {
-        background-color: #2A9D3F;
+        background-color: #2a9d3f;
       }
 
       &.closed {
-        background-color: #1D64C9;
+        background-color: #1d64c9;
       }
     }
   }

src/webview/src/components/IssuableDiscussions.vue

@@ -25,8 +25,9 @@ export default {
         }
 
         return Note;
-      } else if (discussion.label) {
-          return LabelNote;
+      }
+      if (discussion.label) {
+        return LabelNote;
       }
 
       return Discussion;

src/webview/src/components/LabelNote.vue

@@ -21,12 +21,14 @@ export default {
       return this.noteable.user;
     },
     note() {
-      if(this.noteable.body === '') {
-        const action = this.noteable.action == 'add' ? 'added': 'removed';
-        this.noteable.body = action + ' ~' + this.noteable.label.name + ' label';
+      if (this.noteable.body === '') {
+        const action = this.noteable.action === 'add' ? 'added' : 'removed';
+        // FIXME: disabling rule to limit changes to production code when introducing eslint
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.noteable.body = `${action} ~${this.noteable.label.name} label`;
       }
       return this.noteable;
-    }
+    },
   },
   created() {
     this.icon = icons.label;
@@ -38,11 +40,13 @@ export default {
   <li class="note label-note">
     <div class="timeline-entry-inner">
       <div class="timelineIcon">
-        <span class="avatar" v-html="icon"></span>
+        <span class="avatar" v-html="icon" />
       </div>
       <div class="timelineContent">
         <div class="note-header">
-          <user-avatar :user="author" :show-avatar="false" style="margin-right: 2px;" /> <note-body :note="note" style="margin-right: 2px;" /> · <date :date="noteable.created_at"  style="margin-left: 2px;" />
+          <user-avatar :user="author" :show-avatar="false" style="margin-right: 2px;" />
+          <note-body :note="note" style="margin-right: 2px;" /> ·
+          <date :date="noteable.created_at" style="margin-left: 2px;" />
         </div>
       </div>
     </div>
@@ -52,10 +56,10 @@ export default {
 <style lang="scss">
 .label-note {
   border: none;
-  padding-bottom:4px;
-  padding-left:20px;
-  padding-right:20px;
-  padding-top:4px;
+  padding-bottom: 4px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 4px;
   position: static;
 
   &:last-child {

src/webview/src/components/Note.vue

 <script>
 import UserAvatar from './UserAvatar';
-import NoteBody from './NoteBody'
+import NoteBody from './NoteBody';
 import Date from './Date';
 
 export default {
@@ -9,7 +9,7 @@ export default {
     noteable: {
       type: Object,
       required: true,
-    }
+    },
   },
   components: {
     UserAvatar,
@@ -28,11 +28,13 @@ export default {
   <li class="note">
     <div class="timeline-entry-inner">
       <div class="timelineIcon">
-        <user-avatar :user="author" :size="40" :showUsername="false" />
+        <user-avatar :user="author" :size="40" :show-username="false" />
       </div>
       <div class="timelineContent">
         <div class="note-header">
-          <user-avatar :user="author" :size="40" :showAvatar="false" style="margin-right: 2px;" /> · <date :date='noteable.created_at' style="margin-left: 2px;" />
+          <user-avatar :user="author" :size="40" :show-avatar="false" style="margin-right: 2px;" />
+          ·
+          <date :date="noteable.created_at" style="margin-left: 2px;" />
         </div>
         <note-body :note="noteable" />
       </div>

src/webview/src/components/NoteBody.vue

@@ -26,7 +26,7 @@ export default {
     window.addEventListener('message', event => {
       if (event.data.type === 'markdownRendered') {
         const { ref, object, markdown } = event.data;
-        if (object == 'note' && ref == this.note.id) {
+        if (object === 'note' && ref === this.note.id) {
           this.note.markdownRenderedOnServer = true;
           this.note.body = markdown;
         }
@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div class="note-body">
-    <div class="body" v-html="renderedNoteBody"></div>
+    <div class="body" v-html="renderedNoteBody" />
   </div>
 </template>
 

src/webview/src/components/SystemNote.vue

@@ -25,88 +25,90 @@ export default {
     this.icon = icons.gitLabLogo;
     this.multiLine = false;
     this.firstLine = '';
-    if(this.noteable.body.match(/commit/)) {
+    if (this.noteable.body.match(/commit/)) {
       this.icon = icons.commit;
     }
-    if(this.noteable.body.match(/moved/)) {
+    if (this.noteable.body.match(/moved/)) {
       this.icon = icons.arrow_right;
     }
-    if(this.noteable.body.match(/description/)) {
+    if (this.noteable.body.match(/description/)) {
       this.icon = icons.pencil_square;
     }
-    if(this.noteable.body.match(/merge/)) {
+    if (this.noteable.body.match(/merge/)) {
       this.icon = icons.git_merge;
     }
-    if(this.noteable.body.match(/merged/)) {
+    if (this.noteable.body.match(/merged/)) {
       this.icon = icons.git_merge;
     }
-    if(this.noteable.body.match(/opened/)) {
+    if (this.noteable.body.match(/opened/)) {
       this.icon = icons.issue_open;
     }
-    if(this.noteable.body.match(/closed/)) {
+    if (this.noteable.body.match(/closed/)) {
       this.icon = icons.issue_close;
     }
-    if(this.noteable.body.match(/time estimate/)) {
+    if (this.noteable.body.match(/time estimate/)) {
       this.icon = icons.timer;
     }
-    if(this.noteable.body.match(/time spent/)) {
+    if (this.noteable.body.match(/time spent/)) {
       this.icon = icons.timer;
     }
-    if(this.noteable.body.match(/assigned/)) {
+    if (this.noteable.body.match(/assigned/)) {
       this.icon = icons.user;
     }
-    if(this.noteable.body.match(/title/)) {
+    if (this.noteable.body.match(/title/)) {
       this.icon = icons.pencil_square;
     }
-    if(this.noteable.body.match(/task/)) {
+    if (this.noteable.body.match(/task/)) {
       this.icon = icons.task_done;
     }
-    if(this.noteable.body.match(/label/)) {
+    if (this.noteable.body.match(/label/)) {
       this.icon = icons.label;
     }
-    if(this.noteable.body.match(/mentioned in/)) {
+    if (this.noteable.body.match(/mentioned in/)) {
       this.icon = icons.comment_dots;
     }
-    if(this.noteable.body.match(/branch/)) {
+    if (this.noteable.body.match(/branch/)) {
       this.icon = icons.fork;
     }
-    if(this.noteable.body.match(/confidential/)) {
+    if (this.noteable.body.match(/confidential/)) {
       this.icon = icons.eye_slash;
     }
-    if(this.noteable.body.match(/visible/)) {
+    if (this.noteable.body.match(/visible/)) {
       this.icon = icons.eye;
     }
-    if(this.noteable.body.match(/milestone/)) {
+    if (this.noteable.body.match(/milestone/)) {
       this.icon = icons.clock;
     }
-    if(this.noteable.body.match(/discussion/)) {
+    if (this.noteable.body.match(/discussion/)) {
       this.icon = icons.comment;
     }
-    if(this.noteable.body.match(/outdated/)) {
+    if (this.noteable.body.match(/outdated/)) {
       this.icon = icons.pencil_square;
     }
-    if(this.noteable.body.match(/pinned/)) {
+    if (this.noteable.body.match(/pinned/)) {
       this.icon = icons.thumbtack;
     }
-    if(this.noteable.body.match(/duplicate/)) {
+    if (this.noteable.body.match(/duplicate/)) {
       this.icon = icons.issue_duplicate;
     }
-    if(this.noteable.body.match(/locked/)) {
+    if (this.noteable.body.match(/locked/)) {
       this.icon = icons.lock;
     }
-    if(this.noteable.body.match(/unlocked/)) {
+    if (this.noteable.body.match(/unlocked/)) {
       this.icon = icons.lock_open;
     }
-    if(this.noteable.body.match(/due date/)) {
+    if (this.noteable.body.match(/due date/)) {
       this.icon = icons.calendar;
     }
-    if(this.noteable.body.match(/Compare with/)) {
+    if (this.noteable.body.match(/Compare with/)) {
       this.icon = icons.timeline;
-      let body = this.noteable.body;
-      let lines = body.split('\n');
+      const { body } = this.noteable;
+      const lines = body.split('\n');
+      // FIXME: disabling rule to limit changes to production code when introducing eslint
+      // eslint-disable-next-line prefer-destructuring
       this.firstLine = lines[0];
-      lines.splice(0,1);
-      this.noteable.body = lines.join('\n')
+      lines.splice(0, 1);
+      this.noteable.body = lines.join('\n');
       this.multiLine = true;
     }
   },
@@ -117,17 +119,20 @@ export default {
   <li class="note system-note">
     <div class="timeline-entry-inner">
       <div class="timelineIcon">
-        <span v-html="icon"></span>
+        <span v-html="icon" />
       </div>
       <div class="timelineContent" v-if="multiLine">
         <div class="note-header">
-          <user-avatar :user="author" :show-avatar="false" style="margin-right: 2px;" /> {{firstLine}} <date :date='noteable.created_at' style="margin-left: 2px;" />
+          <user-avatar :user="author" :show-avatar="false" style="margin-right: 2px;" />
+          {{ firstLine }} <date :date="noteable.created_at" style="margin-left: 2px;" />
         </div>
         <note-body :note="noteable" style="margin-left: 25px;" />
       </div>
       <div class="timelineContent" v-if="!multiLine">
         <div class="note-header">
-          <user-avatar :user="author" :show-avatar="false" style="margin-right: 2px;" /> <note-body :note="noteable" style="margin-right: 2px;" /> · <date :date="noteable.created_at" style="margin-left: 2px;" />
+          <user-avatar :user="author" :show-avatar="false" style="margin-right: 2px;" />
+          <note-body :note="noteable" style="margin-right: 2px;" /> ·
+          <date :date="noteable.created_at" style="margin-left: 2px;" />
         </div>
       </div>
     </div>
@@ -137,10 +142,10 @@ export default {
 <style lang="scss">
 .system-note {
   border: none;
-  padding-bottom:4px;
-  padding-left:20px;
-  padding-right:20px;
-  padding-top:4px;
+  padding-bottom: 4px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 4px;
   position: static;
 
   &:last-child {

src/webview/src/components/UserAvatar.vue

@@ -41,17 +41,8 @@ export default {
 
 <template>
   <span>
-    <component
-      :is="showLink?'a':'span'"
-      :href="user.web_url"
-      target="_blank"
-    >
-      <img
-        v-if="showAvatar"
-        :src="user.avatar_url"
-        :class="sizeClass"
-        class="avatar"
-      />
+    <component :is="showLink ? 'a' : 'span'" :href="user.web_url" target="_blank">
+      <img v-if="showAvatar" :src="user.avatar_url" :class="sizeClass" class="avatar" />
       <span v-if="showUsername" class="author">
         <strong> {{ user.name }}</strong>
         <span v-if="showHandle"> @{{ user.username }}</span>

src/webview/src/main.js

 import Vue from 'vue';
 import VTooltip from 'v-tooltip';
-import App from './App.vue';
+import App from './App';
 
 Vue.config.productionTip = false;
 Vue.use(VTooltip);

tsconfig.json

@@ -9,7 +9,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true,
+    "strict": true
   },
   "exclude": ["src/webview"],
   "include": ["src/**/*", "test/**/*"]