Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add vue/array-bracket-newline rule #1326

Merged
merged 2 commits into from Oct 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -325,6 +325,7 @@ The following rules extend the rules provided by ESLint itself and apply them to

| Rule ID | Description | |
|:--------|:------------|:---|
| [vue/array-bracket-newline](./array-bracket-newline.md) | enforce linebreaks after opening and before closing array brackets | :wrench: |
| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets | :wrench: |
| [vue/arrow-spacing](./arrow-spacing.md) | enforce consistent spacing before and after the arrow in arrow functions | :wrench: |
| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block | :wrench: |
Expand Down
25 changes: 25 additions & 0 deletions docs/rules/array-bracket-newline.md
@@ -0,0 +1,25 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/array-bracket-newline
description: enforce linebreaks after opening and before closing array brackets
---
# vue/array-bracket-newline
> enforce linebreaks after opening and before closing array brackets

- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.

This rule is the same rule as core [array-bracket-newline] rule but it applies to the expressions in `<template>`.

## :books: Further Reading

- [array-bracket-newline]

[array-bracket-newline]: https://eslint.org/docs/rules/array-bracket-newline

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/array-bracket-newline.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/array-bracket-newline.js)

<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/array-bracket-newline)</sup>
1 change: 1 addition & 0 deletions lib/configs/no-layout-rules.js
Expand Up @@ -5,6 +5,7 @@
*/
module.exports = {
rules: {
'vue/array-bracket-newline': 'off',
'vue/array-bracket-spacing': 'off',
'vue/arrow-spacing': 'off',
'vue/block-spacing': 'off',
Expand Down
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -7,6 +7,7 @@

module.exports = {
rules: {
'array-bracket-newline': require('./rules/array-bracket-newline'),
'array-bracket-spacing': require('./rules/array-bracket-spacing'),
'arrow-spacing': require('./rules/arrow-spacing'),
'attribute-hyphenation': require('./rules/attribute-hyphenation'),
Expand Down
11 changes: 11 additions & 0 deletions lib/rules/array-bracket-newline.js
@@ -0,0 +1,11 @@
/**
* @author Yosuke Ota
*/
'use strict'

const { wrapCoreRule } = require('../utils')

// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
module.exports = wrapCoreRule('array-bracket-newline', {
skipDynamicArguments: true
})
108 changes: 108 additions & 0 deletions tests/lib/rules/array-bracket-newline.js
@@ -0,0 +1,108 @@
/**
* @author Yosuke Ota
*/
'use strict'

const RuleTester = require('eslint').RuleTester
const rule = require('../../../lib/rules/array-bracket-newline')

const tester = new RuleTester({
parser: require.resolve('vue-eslint-parser'),
parserOptions: { ecmaVersion: 2015 }
})

tester.run('array-bracket-newline', rule, {
valid: [
'<template><div :attr="[a]" /></template>',
'<template><div :attr="[\na,\nb,\nc\n]" /></template>',
{
code: '<template><div :attr="[a]" /></template>',
options: ['never']
},
{
code: '<template><div :attr="[\na\n]" /></template>',
options: ['always']
},
'<template><div :[attr]="a" /></template>',
{
code: '<template><div :[attr]="a" /></template>',
options: ['always']
},
'<template><div :[[attr]]="a" /></template>',
{
code: '<template><div :[[attr]]="a" /></template>',
options: ['always']
}
],
invalid: [
{
code: '<template><div :attr="[\na]" /></template>',
output: '<template><div :attr="[a]" /></template>',
errors: ["There should be no linebreak after '['."]
},
{
code: '<template><div :attr="[a\n]" /></template>',
output: '<template><div :attr="[a]" /></template>',
errors: ["There should be no linebreak before ']'."]
},
{
code: '<template><div :attr="[\na\n]" /></template>',
output: '<template><div :attr="[a]" /></template>',
errors: [
"There should be no linebreak after '['.",
"There should be no linebreak before ']'."
]
},
{
code: '<template><div :attr="[\na]" /></template>',
options: ['never'],
output: '<template><div :attr="[a]" /></template>',
errors: ["There should be no linebreak after '['."]
},
{
code: '<template><div :attr="[a\n]" /></template>',
options: ['never'],
output: '<template><div :attr="[a]" /></template>',
errors: ["There should be no linebreak before ']'."]
},
{
code: '<template><div :attr="[\na\n]" /></template>',
options: ['never'],
output: '<template><div :attr="[a]" /></template>',
errors: [
"There should be no linebreak after '['.",
"There should be no linebreak before ']'."
]
},
{
code: '<template><div :attr="[\na]" /></template>',
options: ['always'],
output: '<template><div :attr="[\na\n]" /></template>',
errors: ["A linebreak is required before ']'."]
},
{
code: '<template><div :attr="[a\n]" /></template>',
options: ['always'],
output: '<template><div :attr="[\na\n]" /></template>',
errors: ["A linebreak is required after '['."]
},
{
code: '<template><div :attr="[a]" /></template>',
options: ['always'],
output: '<template><div :attr="[\na\n]" /></template>',
errors: [
"A linebreak is required after '['.",
"A linebreak is required before ']'."
]
},
{
code: '<template><div :[[attr]]="[a]" /></template>',
options: ['always'],
output: '<template><div :[[attr]]="[\na\n]" /></template>',
errors: [
"A linebreak is required after '['.",
"A linebreak is required before ']'."
]
}
]
})