Format with new lines

app/assets/javascripts/repo/components/repo_commit_section.vue

@@ -72,7 +72,9 @@ export default RepoCommitSection;
         </label>
         <div class="col-md-6">
           <ul class="list-unstyled changed-files">
-            <li v-for="branchPath in branchPaths" :key="branchPath">
+            <li
+              v-for="branchPath in branchPaths"
+              :key="branchPath">
               <span class="help-block">
                 {{branchPath}}
               </span>

app/assets/javascripts/repo/components/repo_file.vue

@@ -43,11 +43,15 @@ const RepoFile = {
     },
 
     fileIndentation() {
-      return { 'margin-left': `${this.file.level * 10}px` };
+      return {
+        'margin-left': `${this.file.level * 10}px`,
+      };
     },
 
     activeFileClass() {
-      return { active: this.activeFile.url === this.file.url };
+      return {
+        active: this.activeFile.url === this.file.url,
+      };
     },
   },
 

app/assets/javascripts/repo/components/repo_file_buttons.vue

@@ -29,14 +29,41 @@ export default RepoFileButtons;
 
 <template>
   <div id="repo-file-buttons">
-    <a :href="activeFile.raw_path" target="_blank" class="btn btn-default raw" rel="noopener noreferrer">{{rawDownloadButtonLabel}}</a>
+    <a
+      :href="activeFile.raw_path"
+      target="_blank"
+      class="btn btn-default raw"
+      rel="noopener noreferrer">
+      {{rawDownloadButtonLabel}}
+    </a>
 
-    <div class="btn-group" role="group" aria-label="File actions">
-      <a :href="activeFile.blame_path" class="btn btn-default blame">Blame</a>
-      <a :href="activeFile.commits_path" class="btn btn-default history">History</a>
-      <a :href="activeFile.permalink" class="btn btn-default permalink">Permalink</a>
+    <div
+      class="btn-group"
+      role="group"
+      aria-label="File actions">
+      <a
+        :href="activeFile.blame_path"
+        class="btn btn-default blame">
+        Blame
+      </a>
+      <a
+        :href="activeFile.commits_path"
+        class="btn btn-default history">
+        History
+      </a>
+      <a
+        :href="activeFile.permalink"
+        class="btn btn-default permalink">
+        Permalink
+      </a>
     </div>
 
-    <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>
+    <a
+      v-if="canPreview"
+      href="#"
+      @click.prevent="rawPreviewToggle"
+      class="btn btn-default preview">
+      {{activeFileLabel}}
+    </a>
   </div>
 </template>

app/assets/javascripts/repo/components/repo_loading_file.vue

@@ -35,22 +35,41 @@ export default RepoLoadingFile;
 </script>
 
 <template>
-  <tr v-if="showGhostLines" class="loading-file">
+  <tr
+    v-if="showGhostLines"
+    class="loading-file">
     <td>
-      <div class="animation-container animation-container-small">
-        <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
+      <div
+        class="animation-container animation-container-small">
+        <div
+          v-for="n in 6"
+          :key="n"
+          :class="lineOfCode(n)">
+        </div>
       </div>
     </td>
 
-    <td v-if="!isMini" class="hidden-sm hidden-xs">
+    <td
+      v-if="!isMini"
+      class="hidden-sm hidden-xs">
       <div class="animation-container">
-        <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
+        <div
+          v-for="n in 6"
+          :key="n"
+          :class="lineOfCode(n)">
+        </div>
       </div>
     </td>
 
-    <td v-if="!isMini" class="hidden-xs">
+    <td
+      v-if="!isMini"
+      class="hidden-xs">
       <div class="animation-container animation-container-small">
-        <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
+        <div
+          v-for="n in 6"
+          :key="n"
+          :class="lineOfCode(n)">
+        </div>
       </div>
     </td>
   </tr>

spec/javascripts/repo/components/repo_file_buttons_spec.js

@@ -31,13 +31,13 @@ describe('RepoFileButtons', () => {
 
     expect(vm.$el.id).toEqual('repo-file-buttons');
     expect(raw.href).toMatch(`/${activeFile.raw_path}`);
-    expect(raw.textContent).toEqual('Raw');
+    expect(raw.textContent.trim()).toEqual('Raw');
     expect(blame.href).toMatch(`/${activeFile.blame_path}`);
-    expect(blame.textContent).toEqual('Blame');
+    expect(blame.textContent.trim()).toEqual('Blame');
     expect(history.href).toMatch(`/${activeFile.commits_path}`);
-    expect(history.textContent).toEqual('History');
-    expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink');
-    expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel);
+    expect(history.textContent.trim()).toEqual('History');
+    expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
+    expect(vm.$el.querySelector('.preview').textContent.trim()).toEqual(activeFileLabel);
   });
 
   it('triggers rawPreviewToggle on preview click', () => {