question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Object.keys + sort in 'no-side-effects-in-computed-properties'

See original GitHub issue

Tell us about your environment

  • ESLint Version: 4.12.0
  • eslint-plugin-vue Version: 4.0.0-beta.4
  • Node Version: 8.8.1

Please show your full configuration:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: ['airbnb-base', 'plugin:vue/recommended'],
  // check if imports actually resolve
  'settings': {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  'rules': {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      'js': 'never',
      'vue': 'never'
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      'optionalDependencies': ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-confusing-arrow': 'off',

    // VUE
    'vue/max-attributes-per-line': [2, {
      'singleline': 3,
      'multiline': {
        'max': 1,
        'allowFirstLine': false
      }
    }],
    'no-param-reassign': [
      'error',
      {
        'props': true,
        'ignorePropertyModificationsFor': [
          'state',
          'acc',
          'e',
          'ctx',
          'req',
          'request',
          'res',
          'response',
          'result',
        ]
      }
    ],
  }
}

What did you do? Please include the actual source code causing the issue.

computed: {
  first() {
    return {};
  },
  second() {
    return Object.keys(this.first).sort();
  },
},

What did you expect to happen?

sort changes the array in place, but Object.keys is creating a new array so I think it shouldn’t be considered as a side effect.

What actually happened? Please include the actual, raw output from ESLint.

  ✘  https://google.com/#q=vue%2Fno-side-effects-in-computed-properties  Unexpected side effect in "second" computed property            
  src/components/TRPreviewList.vue:68:14
        return Object.keys(this.first).sort();
                ^

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
nash403commented, Feb 13, 2018

I had the same issue with the es6 spread operator: return [...this.myArray].sort().

1reaction
frandioxcommented, Feb 1, 2018

I also saw another false positive with something like return [this.something].shift(); or return [this.a, this.b, this.c].sort().shift();.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Is there a way to sort/order keys in JavaScript objects?
One thing you could do is use Object.keys() , and sort the Array, ... The function returns an object with sorted keys inserted...
Read more >
Sort the Keys of an Object in JavaScript | bobbyhadz
To sort the keys of an object, use the `Object.keys()` method to get an array of the object's keys. Call the `sort()` method...
Read more >
Sort JS object keys - Visual Studio Marketplace
This is a VS code extension to alphabetically sort the keys in selected js objects keys in your code. It supports: The latest...
Read more >
How to Sort JavaScript Object by Key - W3docs
In this tutorial, we will share a very simple and functional method to sort an array of objects by key. Here is a...
Read more >
sort-keys - ESLint - Pluggable JavaScript Linter
This rule checks all property definitions of object expressions and verifies that all variables are sorted alphabetically.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found