Enable "prefer-destructuring" in JS files

Partially addresses #47006.
2018-06-16 14:50:13 -07:00 · 2018-06-16 14:50:13 -07:00 · 23cdae8eee
parent d38eb9bb26
commit 23cdae8eee
89 changed files with 167 additions and 161 deletions
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -69,5 +69,3 @@ rules:
      FunctionExpression:
        parameters: 1
        body: 1
-  ## Destructuring: https://eslint.org/docs/rules/prefer-destructuring
-  prefer-destructuring: off
--- a/app/assets/javascripts/ajax_loading_spinner.js
+++ b/app/assets/javascripts/ajax_loading_spinner.js
@ -26,7 +26,7 @@ export default class AjaxLoadingSpinner {
  }

  static toggleLoadingIcon(iconElement) {
-    const classList = iconElement.classList;
+    const { classList } = iconElement;
    classList.toggle(iconElement.dataset.icon);
    classList.toggle('fa-spinner');
    classList.toggle('fa-spin');
--- a/app/assets/javascripts/behaviors/copy_to_clipboard.js
+++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js
@ -52,7 +52,7 @@ export default function initCopyToClipboard() {
   * data types to the intended values.
   */
  $(document).on('copy', 'body > textarea[readonly]', (e) => {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
    if (!clipboardData) return;

    const text = e.target.value;
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@ -321,7 +321,7 @@ export class CopyAsGFM {
  }

  static copyAsGFM(e, transformer) {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
    if (!clipboardData) return;

    const documentFragment = getSelectedFragment();
@ -338,7 +338,7 @@ export class CopyAsGFM {
  }

  static pasteGFM(e) {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
    if (!clipboardData) return;

    const text = clipboardData.getData('text/plain');
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@ -84,7 +84,7 @@ class BalsamiqViewer {
  renderTemplate(preview) {
    const resource = this.getResource(preview.resourceID);
    const name = BalsamiqViewer.parseTitle(resource);
-    const image = preview.image;
+    const { image } = preview;

    const template = PREVIEW_TEMPLATE({
      name,
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@ -12,7 +12,7 @@ export default function loadBalsamiqFile() {

  if (!(viewer instanceof Element)) return;

-  const endpoint = viewer.dataset.endpoint;
+  const { endpoint } = viewer.dataset;

  const balsamiqViewer = new BalsamiqViewer(viewer);
  balsamiqViewer.loadFile(endpoint).catch(onError);
--- a/app/assets/javascripts/blob/stl_viewer.js
+++ b/app/assets/javascripts/blob/stl_viewer.js
@ -5,7 +5,7 @@ export default () => {

  [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
    el.addEventListener('click', (e) => {
-      const target = e.target;
+      const { target } = e;

      e.preventDefault();

--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@ -23,7 +23,7 @@
    },
    methods: {
      removeIssue() {
-        const issue = this.issue;
+        const { issue } = this;
        const lists = issue.getLists();
        const listLabelIds = lists.map(list => list.label.id);

--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@ -121,7 +121,7 @@ export default () => {
        this.filterManager.updateTokens();
      },
      updateDetailIssue(newIssue) {
-        const sidebarInfoEndpoint = newIssue.sidebarInfoEndpoint;
+        const { sidebarInfoEndpoint } = newIssue;
        if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
          newIssue.setFetchingState('subscriptions', true);
          BoardService.getIssueInfo(sidebarInfoEndpoint)
@ -144,7 +144,7 @@ export default () => {
        Store.detail.issue = {};
      },
      toggleSubscription(id) {
-        const issue = Store.detail.issue;
+        const { issue } = Store.detail;
        if (issue.id === id && issue.toggleSubscriptionEndpoint) {
          issue.setFetchingState('subscriptions', true);
          BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
--- a/app/assets/javascripts/boards/stores/modal_store.js
+++ b/app/assets/javascripts/boards/stores/modal_store.js
@ -26,7 +26,7 @@ class ModalStore {

  toggleIssue(issueObj) {
    const issue = issueObj;
-    const selected = issue.selected;
+    const { selected } = issue;

    issue.selected = !selected;

--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@ -81,7 +81,7 @@ export default class Clusters {
  }

  initApplications() {
-    const store = this.store;
+    const { store } = this;
    const el = document.querySelector('#js-cluster-applications');

    this.applications = new Vue({
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@ -122,7 +122,7 @@ export default class ImageFile {
      return $('.swipe.view', this.file).each((function(_this) {
        return function(index, view) {
          var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
          $swipeFrame = $('.swipe-frame', view);
          $swipeWrap = $('.swipe-wrap', view);
          $swipeBar = $('.swipe-bar', view);
@ -159,7 +159,7 @@ export default class ImageFile {
      return $('.onion-skin.view', this.file).each((function(_this) {
        return function(index, view) {
          var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
          $frame = $('.onion-skin-frame', view);
          $frameAdded = $('.frame.added', view);
          $track = $('.drag-track', view);
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@ -281,7 +281,7 @@ export default class CreateMergeRequestDropdown {

    if (event.target === this.branchInput) {
      target = 'branch';
-      value = this.branchInput.value;
+      ({ value } = this.branchInput);
    } else if (event.target === this.refInput) {
      target = 'ref';
      value =
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@ -111,7 +111,7 @@ const DiffNoteAvatars = Vue.extend({
      });
    },
    addNoCommentClass() {
-      const notesCount = this.notesCount;
+      const { notesCount } = this;

      $(this.$el).closest('.js-avatar-container')
        .toggleClass('no-comment-btn', notesCount > 0)
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@ -73,7 +73,7 @@ const JumpToDiscussion = Vue.extend({
        }).toArray();
      };

-      const discussions = this.discussions;
+      const { discussions } = this;

      if (activeTab === 'diffs') {
        discussionsSelector = '.diffs .notes[data-discussion-id]';
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@ -18,7 +18,7 @@ import './components/new_issue_for_discussion';
 export default () => {
  const projectPathHolder =
    document.querySelector('.merge-request') || document.querySelector('.commit-box');
-  const projectPath = projectPathHolder.dataset.projectPath;
+  const { projectPath } = projectPathHolder.dataset;
  const COMPONENT_SELECTOR =
    'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';

--- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
+++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
@ -47,7 +47,7 @@ export default {
  methods: {
    ...mapActions(['toggleDiscussion']),
    getTooltipText(noteData) {
-      let note = noteData.note;
+      let { note } = noteData;

      if (note.length > LENGTH_OF_AVATAR_TOOLTIP) {
        note = truncate(note, LENGTH_OF_AVATAR_TOOLTIP);
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@ -124,7 +124,7 @@ export default {
      const newLineNumber = this.metaData.newPos || 0;
      const offset = newLineNumber - oldLineNumber;
      const bottom = this.isBottom;
-      const fileHash = this.fileHash;
+      const { fileHash } = this;
      const view = this.diffViewType;
      let unfold = true;
      let lineNumber = newLineNumber - 1;
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@ -89,7 +89,7 @@ export default {
      return isLeftExpanded || isRightExpanded;
    },
    getLineCode(line, side) {
-      const lineCode = side.lineCode;
+      const { lineCode } = side;
      if (lineCode) {
        return lineCode;
      }
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@ -292,7 +292,7 @@
        if (this.model &&
          this.model.last_deployment &&
          this.model.last_deployment.deployable) {
-          const deployable = this.model.last_deployment.deployable;
+          const { deployable } = this.model.last_deployment;
          return `${deployable.name} #${deployable.id}`;
        }
        return '';
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@ -146,7 +146,7 @@ export default class EnvironmentsStore {
   * @return {Array}
   */
  updateEnvironmentProp(environment, prop, newValue) {
-    const environments = this.state.environments;
+    const { environments } = this.state;

    const updatedEnvironments = environments.map((env) => {
      const updateEnv = Object.assign({}, env);
@ -161,7 +161,7 @@ export default class EnvironmentsStore {
  }

  getOpenFolders() {
-    const environments = this.state.environments;
+    const { environments } = this.state;

    return environments.filter(env => env.isFolder && env.isOpen);
  }
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@ -35,7 +35,7 @@ export default class DropdownUtils {

    // Remove the symbol for filter
    if (value[0] === filterSymbol) {
-      symbol = value[0];
+      [symbol] = value;
      value = value.slice(1);
    }

@ -162,7 +162,7 @@ export default class DropdownUtils {

  // Determines the full search query (visual tokens + input)
  static getSearchQuery(untilInput = false) {
-    const container = FilteredSearchContainer.container;
+    const { container } = FilteredSearchContainer;
    const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
    const values = [];

@ -220,7 +220,7 @@ export default class DropdownUtils {
  }

  static getInputSelectionPosition(input) {
-    const selectionStart = input.selectionStart;
+    const { selectionStart } = input;
    let inputValue = input.value;
    // Replace all spaces inside quote marks with underscores
    // (will continue to match entire string until an end quote is found if any)
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@ -159,7 +159,7 @@ export default class FilteredSearchDropdownManager {
  load(key, firstLoad = false) {
    const mappingKey = this.mapping[key];
    const glClass = mappingKey.gl;
-    const element = mappingKey.element;
+    const { element } = mappingKey;
    let forceShowList = false;

    if (!mappingKey.reference) {
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@ -235,7 +235,7 @@ export default class FilteredSearchManager {

  checkForEnter(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
-      const selectionStart = this.filteredSearchInput.selectionStart;
+      const { selectionStart } = this.filteredSearchInput;

      e.preventDefault();
      this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
@ -496,7 +496,7 @@ export default class FilteredSearchManager {
          // Replace underscore with hyphen in the sanitizedkey.
          // e.g. 'my_reaction' => 'my-reaction'
          sanitizedKey = sanitizedKey.replace('_', '-');
-          const symbol = match.symbol;
+          const { symbol } = match;
          let quotationsToUse = '';

          if (sanitizedValue.indexOf(' ') !== -1) {
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@ -101,7 +101,7 @@ export default class FilteredSearchVisualTokens {

  static updateLabelTokenColor(tokenValueContainer, tokenValue) {
    const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search');
-    const baseEndpoint = filteredSearchInput.dataset.baseEndpoint;
+    const { baseEndpoint } = filteredSearchInput.dataset;
    const labelsEndpoint = FilteredSearchVisualTokens.getEndpointWithQueryParams(
      `${baseEndpoint}/labels.json`,
      filteredSearchInput.dataset.endpointQueryParams,
@ -215,7 +215,7 @@ export default class FilteredSearchVisualTokens {
  static addFilterVisualToken(tokenName, tokenValue, canEdit) {
    const { lastVisualToken, isLastVisualTokenValid }
      = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
-    const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
+    const { addVisualTokenElement } = FilteredSearchVisualTokens;

    if (isLastVisualTokenValid) {
      addVisualTokenElement(tokenName, tokenValue, false, canEdit);
--- a/app/assets/javascripts/filtered_search/recent_searches_root.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@ -29,7 +29,7 @@ class RecentSearchesRoot {
  }

  render() {
-    const state = this.store.state;
+    const { state } = this.store;
    this.vm = new Vue({
      el: this.wrapperElement,
      components: {
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@ -80,7 +80,7 @@ class GfmAutoComplete {
        let tpl = '/${name} ';
        let referencePrefix = null;
        if (value.params.length > 0) {
-          referencePrefix = value.params[0][0];
+          [[referencePrefix]] = value.params;
          if (/^[@%~]/.test(referencePrefix)) {
            tpl += '<%- referencePrefix %>';
          }
@ -458,7 +458,7 @@ class GfmAutoComplete {
  static isLoading(data) {
    let dataToInspect = data;
    if (data && data.length > 0) {
-      dataToInspect = data[0];
+      [dataToInspect] = data;
    }

    const loadingState = GfmAutoComplete.defaultLoadingData[0];
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@ -613,7 +613,7 @@ GitLabDropdown = (function() {
  };

  GitLabDropdown.prototype.renderItem = function(data, group, index) {
-    var field, fieldName, html, selected, text, url, value, rowHidden;
+    var field, html, selected, text, url, value, rowHidden;

    if (!this.options.renderRow) {
      value = this.options.id ? this.options.id(data) : data.id;
@ -651,7 +651,7 @@ GitLabDropdown = (function() {
      html = this.options.renderRow.call(this.options, data, this);
    } else {
      if (!selected) {
-        fieldName = this.options.fieldName;
+        const { fieldName } = this.options;

        if (value) {
          field = this.dropdown.parent().find(`input[name='${fieldName}'][value='${value}']`);
@ -705,7 +705,8 @@ GitLabDropdown = (function() {

  GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
    const occurrences = fuzzaldrinPlus.match(text, term);
-    const indexOf = [].indexOf;
+    const { indexOf } = [];
+
    return text.split('').map(function(character, i) {
      if (indexOf.call(occurrences, i) !== -1) {
        return "<b>" + character + "</b>";
@ -721,9 +722,9 @@ GitLabDropdown = (function() {
  };

  GitLabDropdown.prototype.rowClicked = function(el) {
-    var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
+    var field, groupName, isInput, selectedIndex, selectedObject, value, isMarking;

-    fieldName = this.options.fieldName;
+    const { fieldName } = this.options;
    isInput = $(this.el).is('input');
    if (this.renderedData) {
      groupName = el.data('group');
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@ -29,7 +29,7 @@ export default () => {
      groupsApp,
    },
    data() {
-      const dataset = this.$options.el.dataset;
+      const { dataset } = this.$options.el;
      const hideProjects = dataset.hideProjects === 'true';
      const store = new GroupsStore(hideProjects);
      const service = new GroupsService(dataset.endpoint);
@ -42,7 +42,7 @@ export default () => {
      };
    },
    beforeMount() {
-      const dataset = this.$options.el.dataset;
+      const { dataset } = this.$options.el;
      let groupFilterList = null;
      const form = document.querySelector(dataset.formSel);
      const filter = document.querySelector(dataset.filterSel);
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@ -30,7 +30,7 @@ export default {
  },
  computed: {
    pathWithEllipsis() {
-      const path = this.file.path;
+      const { path } = this.file;

      return path.length < MAX_PATH_LENGTH
        ? path
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@ -23,6 +23,7 @@
        let { result } = target;

        if (!isText) {
+          // eslint-disable-next-line prefer-destructuring
          result = result.split('base64,')[1];
        }

--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@ -2,7 +2,7 @@ import { computeDiff } from './diff';

 // eslint-disable-next-line no-restricted-globals
 self.addEventListener('message', (e) => {
-  const data = e.data;
+  const { data } = e;

  // eslint-disable-next-line no-restricted-globals
  self.postMessage({
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@ -8,7 +8,7 @@ import { setPageTitle } from '../utils';
 import { viewerTypes } from '../../constants';

 export const closeFile = ({ commit, state, dispatch }, file) => {
-  const path = file.path;
+  const { path } = file;
  const indexOfClosedFile = state.openFiles.findIndex(f => f.key === file.key);
  const fileWasActive = file.active;

--- a/app/assets/javascripts/image_diff/helpers/dom_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/dom_helper.js
@ -2,7 +2,8 @@ export function setPositionDataAttribute(el, options) {
  // Update position data attribute so that the
  // new comment form can use this data for ajax request
  const { x, y, width, height } = options;
-  const position = el.dataset.position;
+  const { position } = el.dataset;
+
  const positionObject = Object.assign({}, JSON.parse(position), {
    x,
    y,
--- a/app/assets/javascripts/image_diff/helpers/utils_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js
@ -40,8 +40,7 @@ export function getTargetSelection(event) {
  const x = event.offsetX;
  const y = event.offsetY;

-  const width = imageEl.width;
-  const height = imageEl.height;
+  const { width, height } = imageEl;

  const actualWidth = imageEl.naturalWidth;
  const actualHeight = imageEl.naturalHeight;
--- a/app/assets/javascripts/issuable/auto_width_dropdown_select.js
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@ -10,7 +10,7 @@ class AutoWidthDropdownSelect {
  }

  init() {
-    const dropdownClass = this.dropdownClass;
+    const { dropdownClass } = this;
    this.$selectElement.select2({
      dropdownCssClass: dropdownClass,
      ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@ -4,7 +4,7 @@ import jobHeader from './components/header.vue';
 import detailsBlock from './components/sidebar_details_block.vue';

 export default () => {
-  const dataset = document.getElementById('js-job-details-vue').dataset;
+  const { dataset } = document.getElementById('js-job-details-vue');
  const mediator = new JobMediator({ endpoint: dataset.endpoint });

  mediator.fetchJob();
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@ -56,7 +56,7 @@ export default class LabelsSelect {
        .map(function () {
          return this.value;
        }).get();
-      const handleClick = options.handleClick;
+      const { handleClick } = options;

      $sidebarLabelTooltip.tooltip();

@ -215,7 +215,7 @@ export default class LabelsSelect {
          }
          else {
            if (label.color != null) {
-              color = label.color[0];
+              [color] = label.color;
            }
          }
          if (color) {
@ -243,7 +243,8 @@ export default class LabelsSelect {
          var $dropdownParent = $dropdown.parent();
          var $dropdownInputField = $dropdownParent.find('.dropdown-input-field');
          var isSelected = el !== null ? el.hasClass('is-active') : false;
-          var title = selected.title;
+
+          var { title } = selected;
          var selectedLabels = this.selected;

          if ($dropdownInputField.length && $dropdownInputField.val().length) {
@ -382,7 +383,7 @@ export default class LabelsSelect {
              }));
            }
            else {
-              var labels = gl.issueBoards.BoardsStore.detail.issue.labels;
+              var { labels } = gl.issueBoards.BoardsStore.detail.issue;
              labels = labels.filter(function (selectedLabel) {
                return selectedLabel.id !== label.id;
              });
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@ -164,7 +164,7 @@ export const scrollToElement = element => {
  if (!(element instanceof $)) {
    $el = $(element);
  }
-  const top = $el.offset().top;
+  const { top } = $el.offset();

  return $('body, html').animate(
    {
@ -203,9 +203,7 @@ export const getSelectedFragment = () => {

 export const insertText = (target, text) => {
  // Firefox doesn't support `document.execCommand('insertText', false, text)` on textareas
-  const selectionStart = target.selectionStart;
-  const selectionEnd = target.selectionEnd;
-  const value = target.value;
+  const { selectionStart, selectionEnd, value } = target;

  const textBefore = value.substring(0, selectionStart);
  const textAfter = value.substring(selectionEnd, value.length);
@ -245,7 +243,8 @@ export const nodeMatchesSelector = (node, selector) => {

  // IE11 doesn't support `node.matches(selector)`

-  let parentNode = node.parentNode;
+  let { parentNode } = node;
+
  if (!parentNode) {
    parentNode = document.createElement('div');
    // eslint-disable-next-line no-param-reassign
@ -281,6 +280,8 @@ export const normalizeCRLFHeaders = headers => {

  headersArray.forEach(header => {
    const keyValue = header.split(': ');
+
+    // eslint-disable-next-line prefer-destructuring
    headersObject[keyValue[0]] = keyValue[1];
  });

--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/app/assets/javascripts/lib/utils/number_utils.js
@ -13,7 +13,7 @@ export function formatRelevantDigits(number) {
  let relevantDigits = 0;
  let formattedNumber = '';
  if (!Number.isNaN(Number(number))) {
-    digitsLeft = number.toString().split('.')[0];
+    [digitsLeft] = number.toString().split('.');
    switch (digitsLeft.length) {
      case 1:
        relevantDigits = 3;
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
@ -156,7 +156,7 @@ import Cookies from 'js-cookie';
        return 0;
      }

-      const files = this.state.conflictsData.files;
+      const { files } = this.state.conflictsData;
      let count = 0;

      files.forEach((file) => {
@ -313,7 +313,7 @@ import Cookies from 'js-cookie';
    },

    isReadyToCommit() {
-      const files = this.state.conflictsData.files;
+      const { files } = this.state.conflictsData;
      const hasCommitMessage = $.trim(this.state.conflictsData.commitMessage).length;
      let unresolved = 0;

--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@ -12,7 +12,7 @@ import syntaxHighlight from '../syntax_highlight';
 export default function initMergeConflicts() {
  const INTERACTIVE_RESOLVE_MODE = 'interactive';
  const conflictsEl = document.querySelector('#conflicts');
-  const mergeConflictsStore = gl.mergeConflicts.mergeConflictsStore;
+  const { mergeConflictsStore } = gl.mergeConflicts;
  const mergeConflictsService = new MergeConflictsService({
    conflictsPath: conflictsEl.dataset.conflictsPath,
    resolveConflictsPath: conflictsEl.dataset.resolveConflictsPath,
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@ -64,7 +64,7 @@ import Notes from './notes';
 /* eslint-enable max-len */

 // Store the `location` object, allowing for easier stubbing in tests
-let location = window.location;
+let { location } = window;

 export default class MergeRequestTabs {
  constructor({ action, setUrl, stubLocation } = {}) {
@ -279,7 +279,7 @@ export default class MergeRequestTabs {

  mountPipelinesView() {
    const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-    const CommitPipelinesTable = gl.CommitPipelinesTable;
+    const { CommitPipelinesTable } = gl;
    this.commitPipelinesTable = new CommitPipelinesTable({
      propsData: {
        endpoint: pipelineTableViewEl.dataset.endpoint,
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@ -41,10 +41,10 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
    } else {
      const unusedColors = _.difference(defaultColorOrder, usedColors);
      if (unusedColors.length > 0) {
-        pick = unusedColors[0];
+        [pick] = unusedColors;
      } else {
        usedColors = [];
-        pick = defaultColorOrder[0];
+        [pick] = defaultColorOrder;
      }
    }
    usedColors.push(pick);
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@ -101,8 +101,8 @@ export default (function() {
  };

  BranchGraph.prototype.buildGraph = function() {
-    var cuday, cumonth, day, j, len, mm, r, ref;
-    r = this.r;
+    var cuday, cumonth, day, j, len, mm, ref;
+    const { r } = this;
    cuday = 0;
    cumonth = "";
    r.rect(0, 0, 40, this.barHeight).attr({
@ -121,7 +121,7 @@ export default (function() {
          font: "12px Monaco, monospace",
          fill: "#BBB"
        });
-        cuday = day[0];
+        [cuday] = day;
      }
      if (cumonth !== day[1]) {
        // Months
@ -129,6 +129,8 @@ export default (function() {
          font: "12px Monaco, monospace",
          fill: "#EEE"
        });
+
+        // eslint-disable-next-line prefer-destructuring
        cumonth = day[1];
      }
    }
@ -169,8 +171,8 @@ export default (function() {
  };

  BranchGraph.prototype.bindEvents = function() {
-    var element;
-    element = this.element;
+    const { element } = this;
+
    return $(element).scroll((function(_this) {
      return function(event) {
        return _this.renderPartialGraph();
@ -207,11 +209,13 @@ export default (function() {
  };

  BranchGraph.prototype.appendLabel = function(x, y, commit) {
-    var label, r, rect, shortrefs, text, textbox, triangle;
+    var label, rect, shortrefs, text, textbox, triangle;
+
    if (!commit.refs) {
      return;
    }
-    r = this.r;
+
+    const { r } = this;
    shortrefs = commit.refs;
    // Truncate if longer than 15 chars
    if (shortrefs.length > 17) {
@ -242,11 +246,8 @@ export default (function() {
  };

  BranchGraph.prototype.appendAnchor = function(x, y, commit) {
-    var anchor, options, r, top;
-    r = this.r;
-    top = this.top;
-    options = this.options;
-    anchor = r.circle(x, y, 10).attr({
+    const { r, top, options } = this;
+    const anchor = r.circle(x, y, 10).attr({
      fill: "#000",
      opacity: 0,
      cursor: "pointer"
@ -262,14 +263,15 @@ export default (function() {
  };

  BranchGraph.prototype.drawDot = function(x, y, commit) {
-    var avatar_box_x, avatar_box_y, r;
-    r = this.r;
+    const { r } = this;
    r.circle(x, y, 3).attr({
      fill: this.colors[commit.space],
      stroke: "none"
    });
-    avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
-    avatar_box_y = y - 10;
+
+    const avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
+    const avatar_box_y = y - 10;
+
    r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
      stroke: this.colors[commit.space],
      "stroke-width": 2
@ -282,10 +284,10 @@ export default (function() {
  };

  BranchGraph.prototype.drawLines = function(x, y, commit) {
-    var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
-    r = this.r;
-    ref = commit.parents;
-    results = [];
+    var arrow, color, i, len, offset, parent, parentCommit, parentX1, parentX2, parentY, route;
+    const { r } = this;
+    const ref = commit.parents;
+    const results = [];

    for (i = 0, len = ref.length; i < len; i += 1) {
      parent = ref[i];
@ -331,11 +333,10 @@ export default (function() {
  };

  BranchGraph.prototype.markCommit = function(commit) {
-    var r, x, y;
    if (commit.id === this.options.commit_id) {
-      r = this.r;
-      x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
-      y = this.offsetY + this.unitTime * commit.time;
+      const { r } = this;
+      const x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+      const y = this.offsetY + this.unitTime * commit.time;
      r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
        fill: "#000",
        "fill-opacity": .5,
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@ -52,7 +52,7 @@ export default class NewBranchForm {

  validate() {
    var errorMessage, errors, formatter, unique, validator;
-    const indexOf = [].indexOf;
+    const { indexOf } = [];

    this.branchNameError.empty();
    unique = function(values, value) {
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@ -311,7 +311,7 @@ export default class Notes {
        },
      })
      .then(({ data }) => {
-        const notes = data.notes;
+        const { notes } = data;
        this.last_fetched_at = data.last_fetched_at;
        this.setPollingInterval(data.notes.length);
        $.each(notes, (i, note) => this.renderNote(note));
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@ -72,7 +72,7 @@ export default {
  },
  mounted() {
    this.fetchNotes();
-    const parentElement = this.$el.parentElement;
+    const { parentElement } = this.$el;

    if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
      parentElement.addEventListener('toggleAward', event => {
--- a/app/assets/javascripts/notes/services/notes_service.js
+++ b/app/assets/javascripts/notes/services/notes_service.js
@ -28,7 +28,7 @@ export default {
  },
  poll(data = {}) {
    const endpoint = data.notesData.notesPath;
-    const lastFetchedAt = data.lastFetchedAt;
+    const { lastFetchedAt } = data;
    const options = {
      headers: {
        'X-Last-Fetched-At': lastFetchedAt ? `${lastFetchedAt}` : undefined,
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@ -96,7 +96,7 @@
        this.enteredUsername = '';
      },
      onSecondaryAction() {
-        const form = this.$refs.form;
+        const { form } = this.$refs;

        form.action = this.blockUserUrl;
        this.$refs.method.value = 'put';
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@ -61,7 +61,7 @@ export default class Todos {
    e.stopPropagation();
    e.preventDefault();

-    const target = e.target;
+    const { target } = e;
    target.setAttribute('disabled', true);
    target.classList.add('disabled');

--- a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors.js
+++ b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors.js
@ -80,10 +80,11 @@ export default (function() {
  };

  ContributorsStatGraph.prototype.redraw_authors = function() {
-    var author_commits, x_domain;
    $("ol").html("");
-    x_domain = ContributorsGraph.prototype.x_domain;
-    author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
+
+    const { x_domain } = ContributorsGraph.prototype;
+    const author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
+
    return _.each(author_commits, (function(_this) {
      return function(d) {
        _this.redraw_author_commit_info(d);
@ -102,7 +103,7 @@ export default (function() {
  };

  ContributorsStatGraph.prototype.change_date_header = function() {
-    const x_domain = ContributorsGraph.prototype.x_domain;
+    const { x_domain } = ContributorsGraph.prototype;
    const formattedDateRange = sprintf(
      s__('ContributorsPage|%{startDate} – %{endDate}'),
      {
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
  const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');

  autoDevOpsSettings.addEventListener('click', event => {
-    const target = event.target;
+    const { target } = event;
    if (target.classList.contains('js-toggle-extra-settings')) {
      autoDevOpsExtraSettings.classList.toggle(
        'hidden',
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@ -10,7 +10,7 @@ import eventHub from './event_hub';
 Vue.use(Translate);

 export default () => {
-  const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
+  const { dataset } = document.querySelector('.js-pipeline-details-vue');

  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });

--- a/app/assets/javascripts/pipelines/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
@ -19,7 +19,7 @@ export default class PipelinesService {

  getPipelines(data = {}) {
    const { scope, page } = data;
-    const CancelToken = axios.CancelToken;
+    const { CancelToken } = axios;

    this.cancelationSource = CancelToken.source();

--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@ -43,7 +43,7 @@ MarkdownPreview.prototype.showPreview = function ($form) {
    this.fetchMarkdownPreview(mdText, url, (function (response) {
      var body;
      if (response.body.length > 0) {
-        body = response.body;
+        ({ body } = response);
      } else {
        body = this.emptyMessage;
      }
--- a/app/assets/javascripts/profile/gl_crop.js
+++ b/app/assets/javascripts/profile/gl_crop.js
@ -85,11 +85,10 @@ import _ from 'underscore';
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
        built: function() {
-          var $image, container, cropBoxHeight, cropBoxWidth;
-          $image = $(this);
-          container = $image.cropper('getContainerData');
-          cropBoxWidth = _this.cropBoxWidth;
-          cropBoxHeight = _this.cropBoxHeight;
+          const $image = $(this);
+          const container = $image.cropper('getContainerData');
+          const { cropBoxWidth, cropBoxHeight } = _this;
+
          return $image.cropper('setCropBoxData', {
            width: cropBoxWidth,
            height: cropBoxHeight,
@ -136,7 +135,7 @@ import _ from 'underscore';
    }

    dataURLtoBlob(dataURL) {
-      var array, binary, i, k, len, v;
+      var array, binary, i, len, v;
      binary = atob(dataURL.split(',')[1]);
      array = [];

--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@ -88,7 +88,7 @@ export default class ProjectFindFile {

  // render result
  renderList(filePaths, searchText) {
-    var blobItemUrl, filePath, html, i, j, len, matches, results;
+    var blobItemUrl, filePath, html, i, len, matches, results;
    this.element.find(".tree-table > tbody").empty();
    results = [];

--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@ -47,7 +47,7 @@
    },
    methods: {
      successCallback(res) {
-        const pipelines = res.data.pipelines;
+        const { pipelines } = res.data;
        if (pipelines.length > 0) {
          // The pipeline entity always keeps the latest pipeline info on the `details.status`
          this.ciStatus = pipelines[0].details.status;
--- a/app/assets/javascripts/projects_dropdown/index.js
+++ b/app/assets/javascripts/projects_dropdown/index.js
@ -31,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
      projectsDropdownApp,
    },
    data() {
-      const dataset = this.$options.el.dataset;
+      const { dataset } = this.$options.el;
      const store = new ProjectsStore();
      const service = new ProjectsService(dataset.userName);

--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/index.js
@ -10,7 +10,7 @@ export default () => new Vue({
    registryApp,
  },
  data() {
-    const dataset = document.querySelector(this.$options.el).dataset;
+    const { dataset } = document.querySelector(this.$options.el);
    return {
      endpoint: dataset.endpoint,
    };
--- a/app/assets/javascripts/registry/stores/actions.js
+++ b/app/assets/javascripts/registry/stores/actions.js
@ -20,7 +20,7 @@ export const fetchList = ({ commit }, { repo, page }) => {
  commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);

  return Vue.http.get(repo.tagsPath, { params: { page } }).then(response => {
-    const headers = response.headers;
+    const { headers } = response;

    return response.json().then(resp => {
      commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
--- a/app/assets/javascripts/smart_interval.js
+++ b/app/assets/javascripts/smart_interval.js
@ -42,8 +42,7 @@ export default class SmartInterval {
  /* public */

  start() {
-    const cfg = this.cfg;
-    const state = this.state;
+    const { cfg, state } = this;

    if (cfg.immediateExecution && !this.isLoading) {
      cfg.immediateExecution = false;
@ -100,7 +99,7 @@ export default class SmartInterval {
  /* private */

  initInterval() {
-    const cfg = this.cfg;
+    const { cfg } = this;

    if (!cfg.lazyStart) {
      this.start();
@ -151,7 +150,7 @@ export default class SmartInterval {
  }

  incrementInterval() {
-    const cfg = this.cfg;
+    const { cfg } = this;
    const currentInterval = this.getCurrentInterval();
    if (cfg.hiddenInterval && !this.isPageVisible()) return;
    let nextInterval = currentInterval * cfg.incrementByFactorOf;
@ -166,7 +165,7 @@ export default class SmartInterval {
  isPageVisible() { return this.state.pageVisibility === 'visible'; }

  stopTimer() {
-    const state = this.state;
+    const { state } = this;

    state.intervalId = window.clearInterval(state.intervalId);
  }
--- a/app/assets/javascripts/test_utils/simulate_drag.js
+++ b/app/assets/javascripts/test_utils/simulate_drag.js
@ -38,14 +38,14 @@ function simulateEvent(el, type, options = {}) {

 function isLast(target) {
  const el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
-  const children = el.children;
+  const { children } = el;

  return children.length - 1 === target.index;
 }

 function getTarget(target) {
  const el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
-  const children = el.children;
+  const { children } = el;

  return (
    children[target.index] ||
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@ -250,7 +250,6 @@ function UsersSelect(currentUser, els, options = {}) {

          let anyUser;
          let index;
-          let j;
          let len;
          let name;
          let obj;
@ -501,7 +500,7 @@ function UsersSelect(currentUser, els, options = {}) {
          if (this.multiSelect) {
            selected = getSelected().find(u => user.id === u);

-            const fieldName = this.fieldName;
+            const { fieldName } = this;
            const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");

            if (field.length) {
@ -553,7 +552,7 @@ function UsersSelect(currentUser, els, options = {}) {
        minimumInputLength: 0,
        query: function(query) {
          return _this.users(query.term, options, function(users) {
-            var anyUser, data, emailUser, index, j, len, name, nullUser, obj, ref;
+            var anyUser, data, emailUser, index, len, name, nullUser, obj, ref;
            data = {
              results: users
            };
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@ -191,7 +191,7 @@ export default {
      if (data.ci_status === this.mr.ciStatus) return;
      if (!data.pipeline) return;

-      const label = data.pipeline.details.status.label;
+      const { label } = data.pipeline.details.status;
      const title = `Pipeline ${label}`;
      const message = `Pipeline ${label} for "${data.title}"`;

@ -211,7 +211,7 @@ export default {
      // `params` should be an Array contains a Boolean, like `[true]`
      // Passing parameter as Boolean didn't work.
      eventHub.$on('SetBranchRemoveFlag', (params) => {
-        this.mr.isRemovingSourceBranch = params[0];
+        [this.mr.isRemovingSourceBranch] = params;
      });

      eventHub.$on('FailedToMerge', (mergeError) => {
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@ -42,7 +42,7 @@ export default {
  },
  methods: {
    onImgLoad() {
-      const contentImg = this.$refs.contentImg;
+      const { contentImg } = this.$refs;

      if (contentImg) {
        this.isZoomable =
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import $ from 'jquery';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';

-const CancelToken = axios.CancelToken;
+const { CancelToken } = axios;
 let axiosSource;

 export default {
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@ -55,7 +55,7 @@
      },
      getItems() {
        const total = this.pageInfo.totalPages;
-        const page = this.pageInfo.page;
+        const { page } = this.pageInfo;
        const items = [];

        if (page > 1) {
--- a/changelogs/unreleased/prefer-destructuring-fix.yml
+++ b/changelogs/unreleased/prefer-destructuring-fix.yml
@ -0,0 +1,5 @@
+---
+title: Enable prefer-structuring in JS files
+merge_request: 19943
+author: gfyoung
+type: other
--- a/spec/javascripts/blob/3d_viewer/mesh_object_spec.js
+++ b/spec/javascripts/blob/3d_viewer/mesh_object_spec.js
@ -26,7 +26,7 @@ describe('Mesh object', () => {
    const object = new MeshObject(
      new BoxGeometry(10, 10, 10),
    );
-    const radius = object.geometry.boundingSphere.radius;
+    const { radius } = object.geometry.boundingSphere;

    expect(radius).not.toBeGreaterThan(4);
  });
@ -35,7 +35,7 @@ describe('Mesh object', () => {
    const object = new MeshObject(
      new BoxGeometry(1, 1, 1),
    );
-    const radius = object.geometry.boundingSphere.radius;
+    const { radius } = object.geometry.boundingSphere;

    expect(radius).toBeLessThan(1);
  });
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@ -16,7 +16,7 @@ describe('Pipelines table in Commits and Merge requests', function () {
  beforeEach(() => {
    mock = new MockAdapter(axios);

-    const pipelines = getJSONFixture(jsonFixtureName).pipelines;
+    const { pipelines } = getJSONFixture(jsonFixtureName);

    PipelinesTable = Vue.extend(pipelinesTable);
    pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
--- a/spec/javascripts/deploy_keys/components/key_spec.js
+++ b/spec/javascripts/deploy_keys/components/key_spec.js
@ -88,7 +88,7 @@ describe('Deploy keys key', () => {
    });

    it('expands all project labels after click', done => {
-      const length = vm.deployKey.deploy_keys_projects.length;
+      const { length } = vm.deployKey.deploy_keys_projects;
      vm.$el.querySelectorAll('.deploy-project-label')[1].click();

      Vue.nextTick(() => {
--- a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
@ -92,7 +92,7 @@ describe('DiffLineGutterContent', () => {
      });

      it('should return discussions for the given lineCode', () => {
-        const lineCode = getDiffFileMock().highlightedDiffLines[1].lineCode;
+        const { lineCode } = getDiffFileMock().highlightedDiffLines[1];
        const component = createComponent({ lineCode, showCommentButton: true });

        setDiscussions(component);
--- a/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js
+++ b/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js
@ -103,7 +103,7 @@ describe('RecentSearchesDropdownContent', () => {
    describe('processedItems', () => {
      it('with items', () => {
        vm = createComponent(propsDataWithItems);
-        const processedItems = vm.processedItems;
+        const { processedItems } = vm;

        expect(processedItems.length).toEqual(2);

@ -122,7 +122,7 @@ describe('RecentSearchesDropdownContent', () => {

      it('with no items', () => {
        vm = createComponent(propsDataWithoutItems);
-        const processedItems = vm.processedItems;
+        const { processedItems } = vm;

        expect(processedItems.length).toEqual(0);
      });
@ -131,13 +131,13 @@ describe('RecentSearchesDropdownContent', () => {
    describe('hasItems', () => {
      it('with items', () => {
        vm = createComponent(propsDataWithItems);
-        const hasItems = vm.hasItems;
+        const { hasItems } = vm;
        expect(hasItems).toEqual(true);
      });

      it('with no items', () => {
        vm = createComponent(propsDataWithoutItems);
-        const hasItems = vm.hasItems;
+        const { hasItems } = vm;
        expect(hasItems).toEqual(false);
      });
    });
--- a/spec/javascripts/filtered_search/recent_searches_root_spec.js
+++ b/spec/javascripts/filtered_search/recent_searches_root_spec.js
@ -15,8 +15,7 @@ describe('RecentSearchesRoot', () => {
      };

      VueSpy = spyOnDependency(RecentSearchesRoot, 'Vue').and.callFake((options) => {
-        data = options.data;
-        template = options.template;
+        ({ data, template } = options);
      });

      RecentSearchesRoot.prototype.render.call(recentSearchesRoot);
--- a/spec/javascripts/gl_field_errors_spec.js
+++ b/spec/javascripts/gl_field_errors_spec.js
@ -18,7 +18,7 @@ describe('GL Style Field Errors', function() {
    expect(this.$form).toBeDefined();
    expect(this.$form.length).toBe(1);
    expect(this.fieldErrors).toBeDefined();
-    const inputs = this.fieldErrors.state.inputs;
+    const { inputs } = this.fieldErrors.state;
    expect(inputs.length).toBe(4);
  });

--- a/spec/javascripts/groups/components/app_spec.js
+++ b/spec/javascripts/groups/components/app_spec.js
@ -67,7 +67,7 @@ describe('AppComponent', () => {
      it('should return list of groups from store', () => {
        spyOn(vm.store, 'getGroups');

-        const groups = vm.groups;
+        const { groups } = vm;
        expect(vm.store.getGroups).toHaveBeenCalled();
        expect(groups).not.toBeDefined();
      });
@ -77,7 +77,7 @@ describe('AppComponent', () => {
      it('should return pagination info from store', () => {
        spyOn(vm.store, 'getPaginationInfo');

-        const pageInfo = vm.pageInfo;
+        const { pageInfo } = vm;
        expect(vm.store.getPaginationInfo).toHaveBeenCalled();
        expect(pageInfo).not.toBeDefined();
      });
@ -293,7 +293,7 @@ describe('AppComponent', () => {
      beforeEach(() => {
        groupItem = Object.assign({}, mockParentGroupItem);
        groupItem.children = mockChildren;
-        childGroupItem = groupItem.children[0];
+        [childGroupItem] = groupItem.children;
        groupItem.isChildrenLoading = false;
        vm.targetGroup = childGroupItem;
        vm.targetParentGroup = groupItem;
--- a/spec/javascripts/groups/components/group_item_spec.js
+++ b/spec/javascripts/groups/components/group_item_spec.js
@ -41,7 +41,7 @@ describe('GroupItemComponent', () => {
    describe('rowClass', () => {
      it('should return map of classes based on group details', () => {
        const classes = ['is-open', 'has-children', 'has-description', 'being-removed'];
-        const rowClass = vm.rowClass;
+        const { rowClass } = vm;

        expect(Object.keys(rowClass).length).toBe(classes.length);
        Object.keys(rowClass).forEach((className) => {
--- a/spec/javascripts/ide/lib/diff/controller_spec.js
+++ b/spec/javascripts/ide/lib/diff/controller_spec.js
@ -63,7 +63,7 @@ describe('Multi-file editor library dirty diff controller', () => {
          [type]: true,
        };

-        const range = getDecorator(change).range;
+        const { range } = getDecorator(change);

        expect(range.startLineNumber).toBe(1);
        expect(range.endLineNumber).toBe(2);
--- a/spec/javascripts/namespace_select_spec.js
+++ b/spec/javascripts/namespace_select_spec.js
@ -22,7 +22,7 @@ describe('NamespaceSelect', () => {
      const dropdown = document.createElement('div');
      // eslint-disable-next-line no-new
      new NamespaceSelect({ dropdown });
-      glDropdownOptions = $.fn.glDropdown.calls.argsFor(0)[0];
+      [glDropdownOptions] = $.fn.glDropdown.calls.argsFor(0);
    });

    it('prevents click events', () => {
@ -43,7 +43,7 @@ describe('NamespaceSelect', () => {
      dropdown.dataset.isFilter = 'true';
      // eslint-disable-next-line no-new
      new NamespaceSelect({ dropdown });
-      glDropdownOptions = $.fn.glDropdown.calls.argsFor(0)[0];
+      [glDropdownOptions] = $.fn.glDropdown.calls.argsFor(0);
    });

    it('does not prevent click events', () => {
--- a/spec/javascripts/notebook/cells/markdown_spec.js
+++ b/spec/javascripts/notebook/cells/markdown_spec.js
@ -14,6 +14,7 @@ describe('Markdown component', () => {
  beforeEach((done) => {
    json = getJSONFixture('blob/notebook/basic.json');

+    // eslint-disable-next-line prefer-destructuring
    cell = json.cells[1];

    vm = new Component({
--- a/spec/javascripts/pipelines/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@ -24,7 +24,7 @@ describe('Pipelines Table Row', () => {
  preloadFixtures(jsonFixtureName);

  beforeEach(() => {
-    const pipelines = getJSONFixture(jsonFixtureName).pipelines;
+    const { pipelines } = getJSONFixture(jsonFixtureName);

    pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
    pipelineWithoutAuthor = pipelines.find(p => p.user === null && p.commit !== null);
--- a/spec/javascripts/pipelines/pipelines_table_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_spec.js
@ -11,7 +11,7 @@ describe('Pipelines Table', () => {
  preloadFixtures(jsonFixtureName);

  beforeEach(() => {
-    const pipelines = getJSONFixture(jsonFixtureName).pipelines;
+    const { pipelines } = getJSONFixture(jsonFixtureName);

    PipelinesTableComponent = Vue.extend(pipelinesTableComp);
    pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
--- a/spec/javascripts/smart_interval_spec.js
+++ b/spec/javascripts/smart_interval_spec.js
@ -87,7 +87,7 @@ describe('SmartInterval', function () {
      setTimeout(() => {
        interval.cancel();

-        const intervalId = interval.state.intervalId;
+        const { intervalId } = interval.state;
        const currentInterval = interval.getCurrentInterval();
        const intervalLowerLimit = interval.cfg.startingInterval;

@ -106,7 +106,7 @@ describe('SmartInterval', function () {

        interval.resume();

-        const intervalId = interval.state.intervalId;
+        const { intervalId } = interval.state;

        expect(intervalId).toBeTruthy();

--- a/spec/javascripts/vue_shared/components/file_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/file_icon_spec.js
@ -74,7 +74,7 @@ describe('File Icon component', () => {
      size: 120,
    });

-    const classList = vm.$el.firstChild.classList;
+    const { classList } = vm.$el.firstChild;
    const containsSizeClass = classList.contains('s120');
    const containsCustomClass = classList.contains('extraclasses');
    expect(containsSizeClass).toBe(true);
--- a/spec/javascripts/vue_shared/components/icon_spec.js
+++ b/spec/javascripts/vue_shared/components/icon_spec.js
@ -44,7 +44,7 @@ describe('Sprite Icon Component', function () {
    });

    it('should properly render img css', function () {
-      const classList = icon.$el.classList;
+      const { classList } = icon.$el;
      const containsSizeClass = classList.contains('s32');
      const containsCustomClass = classList.contains('extraclasses');
      expect(containsSizeClass).toBe(true);
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
@ -51,7 +51,7 @@ describe('User Avatar Image Component', function () {
    });

    it('should properly render img css', function () {
-      const classList = vm.$el.classList;
+      const { classList } = vm.$el;
      const containsAvatar = classList.contains('avatar');
      const containsSizeClass = classList.contains('s99');
      const containsCustomClass = classList.contains(DEFAULT_PROPS.cssClasses);
@ -73,7 +73,7 @@ describe('User Avatar Image Component', function () {
    });

    it('should add lazy attributes', function () {
-      const classList = vm.$el.classList;
+      const { classList } = vm.$el;
      const lazyClass = classList.contains('lazy');

      expect(lazyClass).toBe(true);
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
@ -21,7 +21,7 @@ describe('User Avatar Link Component', function () {
      propsData: this.propsData,
    }).$mount();

-    this.userAvatarImage = this.userAvatarLink.$children[0];
+    [this.userAvatarImage] = this.userAvatarLink.$children;
  });

  it('should return a defined Vue component', function () {