eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

want: vue/max-line rule, limit the number of lines of code per block

Open axetroy opened this issue 3 years ago • 2 comments

Please describe what the rule should do:

This rule applies to the number of lines of code.

Help people not to write thousands of lines of javascript code in the same file. Split the code to improve maintainability and readability.

What category should the rule belong to?

[ ] Enforces code style (layout) [ ] Warns about a potential error (problem) [x] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <view>
  <view>
</template>

<script>
// There is a very long javascript code here
export default {
 data () {
  return {}
 }
}
</script>

<style>
root {
  long-long-style: none;
}
</style>

Additional context

the rule look like:

rules: {
  "vue/max-line": ['error', {
    // Specify a block of code via lang="xxx"
    // eg.
    // <style lang="sass"><style>
    // sass: 800
 	js: 800,         // limit max line for javascript block
    jsx: 800,
    ts: 800,         // limit max line for typescript block
    tsx: 800,
    html: 1200,      // limit max line for HTML block
    css: 1200        // limit max line for css/sass/scss block
  }]
}

It receives a parameter to specify the maximum length of a certain code block

axetroy avatar Feb 22 '21 08:02 axetroy

It is precisely because there is no such constraint that some novices can write a vue file to 2000+ lines of code, which is really terrible.

axetroy avatar Feb 22 '21 08:02 axetroy

Thank you for suggesting this rule.

I think the rule name "vue/max-lines-per-block" is better so that you can easily understand the meaning of checking the maximum number of lines for each block.

Currently, this plugin can't determine the language actually used, so we find it difficult to determine with lang. I think that it will be limited only by the block name. Also, css doesn't parse, so we can't add the option to skip comments in the <style> block like the max-lines rule.

ota-meshi avatar Mar 10 '21 01:03 ota-meshi