New Rule vue/sort-keys

[loren138]

This rule creates a version of sort-keys which is compatible with order-in-components.

This addresses the issue raised in #286 as well fulfilling the request in #601.

[loren138]

EsLint 6.7.0 changes eslintignore parsing. The previous one seems to have ignored the whole folder which I'm now explicitly doing. Otherwise, you get errors about eslint-plugin-ignore not being installed when running npm run lint after a clean install.

[ota-meshi]

Thank you for this PR.

Could you change to ignore the following Vue component options?

• props.xxx
  e.g.

  props: {
    foo: {
      type: String,
      default: 'foo'
    }
  }

• computed.xxx
  e.g.

  computed: {
    foo: {
      get() {},
      set(foo) {}
    }
  }

• watch.xxx
  e.g.

  watch: {
    foo: {
      handler() {},
      deep: true,
    }
  }

• directives.xxx
  e.g.

  directives: {
    focus: {
      bind() {},
      inserted() {}
    }
  }

• components.xxx

• mixins[*].xxx

• extends

• inject.xxx

• model
  e.g.

  model: {
    prop: 'checked',
    event: 'change'
  }

[loren138]

Hi,
I'm not sure I completely understand your request.

My goal was to make sure all the props, computed, data, methods, etc are in alphabetical order while allowing the component order to be set by vue/order-in-components.

That would make this example invalid

props: {
  foo: {
    type: String,
    default: 'foo'
  }
}

it would have to have default before type

props: {
  foo: {
    default: 'foo',
    type: String
  }
}

The main goal, however, was to make this invalid:

props: {
  foo: {
    default: 'foo',
    type: String
  },
  bar: {
    default: 'foo',
    type: String
  },
}

and require it to have bar before foo:

props: {
  bar: {
    default: 'foo',
    type: String
  },
  foo: {
    default: 'foo',
    type: String
  }
}

[ota-meshi]

Hi! @loren138 .

It doesn't exist now, but we may add rules to enforce the order of props definition in the future. This already has an issue open #541.

I think we need to ignore the some options in the Vue component so that they don't conflict when adding new rules.

[loren138]

In that case, what things would be enforced by this rule? Can you give an example of something that you think would be invalid (while also ignoring all the things you mentioned above)?

[ota-meshi]

I think rule #541 will report an error with the following code:

props: {
  foo: {
    default: 'foo',
    type: String // The `type` property should come before the `default` property.
  },
}

The following code is valid:

props: {
  foo: {
    type: String,
    default: 'foo'
  },
}

The following code does not report an error with rule #541.
However, the vue/sort-keys rule reports an error.

props: {
  foo: { },
  bar: { },
}

[loren138]

Got it, I'll work on that change.

[loren138]

@ota-meshi I think the latest commit addresses your comments. I made what to ignore configurable in case people don't want to use any of the new rules or want to force alphabetical order until those are ready.

[ota-meshi]

Thank you for changing this PR:smile:

I have some requests.

[ota-meshi]

Vue component objects may not be top-level objects. Excluding it with hasUpper can cause false positives.

const obj = {
  foo() {
    Vue.component('my-component', {
      name: 'app',
      data() {}
    })
  }
}

[ota-meshi]

It may false negatives if the objects are not chained.

export default {
  computed: {
    foo () {
      return {
        b,
        a
      }
    }
  }
}

[ota-meshi]

Could you added properties be included in the example?

[loren138]

@ota-meshi Thanks for catching those issues. They are fixed now. Let me know if you see anymore.

[loren138]

@ota-meshi Any further comments on this PR?

[ota-meshi]

@loren138 sorry, but I haven't checked it yet.
I'm a little busy now, so please wait.

[ota-meshi]

Thank you for the change! I'm sorry to have kept you waiting.

I found a typo. It looks good to me except for this.

[ota-meshi]

Thank you!