-
-
Notifications
You must be signed in to change notification settings - Fork 681
Add mustache-curly-spacing
rule.
#153
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
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
# Enforce spacing on the style of mustache curly brackets. (mustache-curly-spacing) | ||
|
||
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule. | ||
|
||
## :book: Rule Details | ||
|
||
This rule aims to enforce unified spacing of curly brackets. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
:-1: Examples of **incorrect** code for this rule: | ||
|
||
```html | ||
<template> | ||
<div>{{ text }}</div> | ||
</template> | ||
``` | ||
|
||
:+1: Examples of **correct** code for this rule: | ||
|
||
```html | ||
<template> | ||
<div>{{ text }}</div> | ||
</template> | ||
``` | ||
|
||
## :wrench: Options | ||
|
||
Default spacing is set to `always` | ||
|
||
``` | ||
'vue/mustache-curly-spacing': [2, 'always'|'never'] | ||
``` | ||
|
||
### `"always"` - Expect one space between expression and curly brackets. | ||
|
||
:+1: Examples of **correct** code`: | ||
|
||
```html | ||
<template> | ||
<div>{{ text }}</div> | ||
</template> | ||
``` | ||
|
||
:-1: Examples of **incorrect** code`: | ||
|
||
```html | ||
<template> | ||
<div>{{text}}</div> | ||
</template> | ||
``` | ||
|
||
### `"never"` - Expect no spaces between expression and curly brackets. | ||
|
||
:+1: Examples of **correct** code`: | ||
|
||
```html | ||
<template> | ||
<div>{{text}}</div> | ||
</template> | ||
``` | ||
|
||
:-1: Examples of **incorrect** code`: | ||
|
||
```html | ||
<template> | ||
<div>{{ text }}</div> | ||
</template> | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
/** | ||
* @fileoverview Enforce spacing on the style of mustache curly brackets. | ||
* @author Armano | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: 'Enforce spacing on the style of mustache curly brackets.', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
category: 'Stylistic Issues', | ||
recommended: false | ||
}, | ||
fixable: 'whitespace', | ||
schema: [ | ||
{ | ||
enum: ['always', 'never'] | ||
} | ||
] | ||
}, | ||
|
||
create (context) { | ||
const options = context.options[0] | ||
const optSpaces = options !== 'never' | ||
const template = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore() | ||
|
||
// ---------------------------------------------------------------------- | ||
// Helpers | ||
// ---------------------------------------------------------------------- | ||
|
||
function checkTokens (leftToken, rightToken) { | ||
if (leftToken.loc.end.line === rightToken.loc.start.line) { | ||
const spaces = rightToken.loc.start.column - leftToken.loc.end.column | ||
if (optSpaces === (spaces === 0)) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't you think this expression is hard to read?
|
||
context.report({ | ||
node: rightToken, | ||
loc: { | ||
start: leftToken.loc.end, | ||
end: rightToken.loc.start | ||
}, | ||
message: 'Found {{spaces}} whitespaces, {{type}} expected.', | ||
data: { | ||
spaces: spaces === 0 ? 'none' : spaces, | ||
type: optSpaces ? '1' : 'none' | ||
}, | ||
fix: (fixer) => fixer.replaceTextRange([leftToken.range[1], rightToken.range[0]], optSpaces ? ' ' : '') | ||
}) | ||
} | ||
} | ||
} | ||
|
||
// ---------------------------------------------------------------------- | ||
// Public | ||
// ---------------------------------------------------------------------- | ||
|
||
utils.registerTemplateBodyVisitor(context, { | ||
'VExpressionContainer[expression!=null]' (node) { | ||
const tokens = template.getTokens(node, { | ||
includeComments: true, | ||
filter: token => token.type !== 'HTMLWhitespace' // When there is only whitespace between ignore it | ||
}) | ||
|
||
const startToken = tokens.shift() | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do you intentionally mutate There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, i'm taking first and last token from array, checking their types, and i'm using it to compare |
||
if (!startToken || startToken.type !== 'VExpressionStart') return | ||
const endToken = tokens.pop() | ||
if (!endToken || endToken.type !== 'VExpressionEnd') return | ||
|
||
if (tokens.length > 0) { | ||
checkTokens(startToken, tokens[0]) | ||
checkTokens(tokens[tokens.length - 1], endToken) | ||
} else { | ||
checkTokens(startToken, endToken) | ||
} | ||
} | ||
}) | ||
|
||
return { } | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
/** | ||
* @fileoverview Enforce spacing on the style of mustache curly brackets. | ||
* @author Armano | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const rule = require('../../../lib/rules/mustache-curly-spacing') | ||
const RuleTester = require('eslint').RuleTester | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Tests | ||
// ------------------------------------------------------------------------------ | ||
|
||
const ruleTester = new RuleTester({ | ||
parser: 'vue-eslint-parser', | ||
parserOptions: { ecmaVersion: 2015 } | ||
}) | ||
|
||
ruleTester.run('mustache-curly-spacing', rule, { | ||
|
||
valid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '<template></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div></div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template> <div id=" "></div> </template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template> <div :style=" " :class=" foo " v-if=foo ></div> </template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text }}</div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ }}</div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ }}</div></template>', | ||
options: ['always'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{}}</div></template>', | ||
options: ['never'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{text}}</div></template>', | ||
options: ['never'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text }}</div></template>', | ||
options: ['always'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ }}</div></template>', | ||
options: ['always'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ }}</div></template>', | ||
options: ['never'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text }}</div></template>', | ||
options: ['always'] | ||
} | ||
], | ||
|
||
invalid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text}}</div></template>', | ||
output: '<template><div>{{ text }}</div></template>', | ||
options: ['always'], | ||
errors: [{ | ||
message: 'Found none whitespaces, 1 expected.', | ||
type: 'VExpressionEnd' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{text }}</div></template>', | ||
output: '<template><div>{{ text }}</div></template>', | ||
options: ['always'], | ||
errors: [{ | ||
message: 'Found none whitespaces, 1 expected.', | ||
type: 'Identifier' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text}}</div></template>', | ||
output: '<template><div>{{text}}</div></template>', | ||
options: ['never'], | ||
errors: [{ | ||
message: 'Found 1 whitespaces, none expected.', | ||
type: 'Identifier' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{text }}</div></template>', | ||
output: '<template><div>{{text}}</div></template>', | ||
options: ['never'], | ||
errors: [{ | ||
message: 'Found 1 whitespaces, none expected.', | ||
type: 'VExpressionEnd' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{text}}</div></template>', | ||
output: '<template><div>{{ text }}</div></template>', | ||
options: ['always'], | ||
errors: [{ | ||
message: 'Found none whitespaces, 1 expected.', | ||
type: 'Identifier' | ||
}, { | ||
message: 'Found none whitespaces, 1 expected.', | ||
type: 'VExpressionEnd' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text }}</div></template>', | ||
output: '<template><div>{{text}}</div></template>', | ||
options: ['never'], | ||
errors: [{ | ||
message: 'Found 1 whitespaces, none expected.', | ||
type: 'Identifier' | ||
}, { | ||
message: 'Found 1 whitespaces, none expected.', | ||
type: 'VExpressionEnd' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>{{ text }}</div></template>', | ||
output: '<template><div>{{text}}</div></template>', | ||
options: ['never'], | ||
errors: [{ | ||
message: 'Found 3 whitespaces, none expected.', | ||
type: 'Identifier' | ||
}, { | ||
message: 'Found 3 whitespaces, none expected.', | ||
type: 'VExpressionEnd' | ||
}] | ||
} | ||
] | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Regarding rule name I have another proposition:
mustache-interpolation-spacing
. We all know what interpolation is, plus mustache interpolation type is well described in official documentation - this way we should avoid any confusion. What do you think @armano2 @mysticatea ?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@michalsnik I was not sure about the name of this rule, there was many suggestions like: curly-bracket, mustache-curly-spacing, embedded-expression-curly-spacing but i think yours matches at least documentation.