eslint-plugin-vue
eslint-plugin-vue copied to clipboard
want: vue/max-line rule, limit the number of lines of code per block
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
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.
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.