├── .gitattributes
├── .gitignore
├── lib
    ├── utils
    │   ├── void-elements.json
    │   ├── svg-elements.json
    │   ├── html-elements.json
    │   └── index.js
    ├── index.js
    ├── recommended.json
    ├── rules
    │   ├── require-component-is.js
    │   ├── no-textarea-mustache.js
    │   ├── require-v-for-key.js
    │   ├── html-no-self-closing.js
    │   ├── no-parsing-error.js
    │   ├── html-quotes.js
    │   ├── v-bind-style.js
    │   ├── v-on-style.js
    │   ├── no-invalid-v-pre.js
    │   ├── no-invalid-v-bind.js
    │   ├── no-invalid-v-once.js
    │   ├── no-invalid-v-cloak.js
    │   ├── no-invalid-v-html.js
    │   ├── no-invalid-v-show.js
    │   ├── no-invalid-v-text.js
    │   ├── html-end-tags.js
    │   ├── no-confusing-v-for-v-if.js
    │   ├── no-duplicate-attributes.js
    │   ├── no-invalid-v-on.js
    │   ├── no-invalid-v-if.js
    │   ├── no-invalid-v-else-if.js
    │   ├── no-invalid-v-else.js
    │   ├── no-invalid-template-root.js
    │   ├── no-invalid-v-for.js
    │   └── no-invalid-v-model.js
    └── rules.js
├── .travis.yml
├── .eslintrc.json
├── docs
    └── rules
    │   ├── no-parsing-error.md
    │   ├── no-textarea-mustache.md
    │   ├── require-component-is.md
    │   ├── no-duplicate-attributes.md
    │   ├── html-no-self-closing.md
    │   ├── no-invalid-v-pre.md
    │   ├── no-invalid-v-once.md
    │   ├── no-invalid-v-cloak.md
    │   ├── require-v-for-key.md
    │   ├── v-bind-style.md
    │   ├── v-on-style.md
    │   ├── no-invalid-v-html.md
    │   ├── no-invalid-v-show.md
    │   ├── no-invalid-v-text.md
    │   ├── html-end-tags.md
    │   ├── no-invalid-v-on.md
    │   ├── html-quotes.md
    │   ├── no-invalid-v-bind.md
    │   ├── no-invalid-v-else.md
    │   ├── no-invalid-template-root.md
    │   ├── no-confusing-v-for-v-if.md
    │   ├── no-invalid-v-if.md
    │   ├── no-invalid-v-else-if.md
    │   ├── no-invalid-v-model.md
    │   └── no-invalid-v-for.md
├── LICENSE
├── package.json
├── tests
    └── lib
    │   └── rules
    │       ├── no-textarea-mustache.js
    │       ├── no-invalid-v-pre.js
    │       ├── no-invalid-v-once.js
    │       ├── no-invalid-v-cloak.js
    │       ├── no-invalid-v-html.js
    │       ├── no-invalid-v-show.js
    │       ├── no-invalid-v-text.js
    │       ├── require-component-is.js
    │       ├── no-duplicate-attributes.js
    │       ├── require-v-for-key.js
    │       ├── html-no-self-closing.js
    │       ├── no-confusing-v-for-v-if.js
    │       ├── no-invalid-v-on.js
    │       ├── no-invalid-v-if.js
    │       ├── v-on-style.js
    │       ├── v-bind-style.js
    │       ├── html-end-tags.js
    │       ├── no-parsing-error.js
    │       ├── no-invalid-v-bind.js
    │       ├── no-invalid-v-else.js
    │       ├── no-invalid-template-root.js
    │       ├── no-invalid-v-else-if.js
    │       ├── no-invalid-v-model.js
    │       ├── html-quotes.js
    │       └── no-invalid-v-for.js
├── tools
    └── update-rules.js
└── README.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.nyc_output
2 | /coverage
3 | /node_modules
4 | /test.*
5 | 


--------------------------------------------------------------------------------
/lib/utils/void-elements.json:
--------------------------------------------------------------------------------
1 | ["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 |   - "4"
 5 |   - "6"
 6 |   - "7"
 7 | before_install:
 8 |   - if [[ `npm --version` == 2* ]]; then npm install -g npm@3; fi
 9 | after_success:
10 |   - npm run codecov
11 | 


--------------------------------------------------------------------------------
/lib/utils/svg-elements.json:
--------------------------------------------------------------------------------
1 | ["svg","animate","circle","clippath","cursor","defs","desc","ellipse","filter","font-face","foreignObject","g","glyph","image","line","marker","mask","missing-glyph","path","pattern","polygon","polyline","rect","switch","symbol","text","textpath","tspan","use","view"]
2 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | module.exports = {
 9 |     configs: {recommended: require("./recommended.json")},
10 |     rules: require("./rules.js"),
11 | }
12 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "root": true,
 3 |     "extends": [
 4 |         "mysticatea",
 5 |         "mysticatea/node",
 6 |         "plugin:eslint-plugin/recommended"
 7 |     ],
 8 |     "plugins": [
 9 |         "eslint-plugin"
10 |     ],
11 |     "rules": {
12 |         "complexity": "off",
13 |         "eslint-plugin/report-message-format": ["error", "^[A-Z].*\\.$"],
14 |         "eslint-plugin/prefer-placeholders": "error",
15 |         "eslint-plugin/consistent-output": "error"
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/docs/rules/no-parsing-error.md:
--------------------------------------------------------------------------------
 1 | # Disallow parsing errors in `<template>` (no-parsing-error)
 2 | 
 3 | This rule reports syntax errors in directives/mustaches of `<template>`.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule tries to parse directives/mustaches in `<template>` by the parser which parses `<script>`.
 8 | Then reports syntax errors if exist.
 9 | 
10 | 👎 Examples of **incorrect** code for this rule:
11 | 
12 | ```html
13 | <template>
14 |     <div>{{message.}}</div>
15 | </template>
16 | ```
17 | 
18 | 👍 Examples of **correct** code for this rule:
19 | 
20 | ```html
21 | <template>
22 |     <div>{{message}}</div>
23 | </template>
24 | ```
25 | 
26 | ## 🔧 Options
27 | 
28 | Nothing.
29 | 


--------------------------------------------------------------------------------
/docs/rules/no-textarea-mustache.md:
--------------------------------------------------------------------------------
 1 | # Disallow mustaches in `<textarea>` (no-textarea-mustache)
 2 | 
 3 | > Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
 4 | >
 5 | > https://vuejs.org/v2/guide/forms.html#Multiline-text
 6 | 
 7 | ## 📖 Rule Details
 8 | 
 9 | This rule reports mustaches in `<textarea>`.
10 | 
11 | 👎 Examples of **incorrect** code for this rule:
12 | 
13 | ```html
14 | <template>
15 |     <textarea>{{message}}</textarea>
16 | </template>
17 | ```
18 | 
19 | 👍 Examples of **correct** code for this rule:
20 | 
21 | ```html
22 | <template>
23 |     <textarea v-model="message"></textarea>
24 | </template>
25 | ```
26 | 
27 | ## 🔧 Options
28 | 
29 | Nothing.
30 | 


--------------------------------------------------------------------------------
/lib/utils/html-elements.json:
--------------------------------------------------------------------------------
1 | ["html","body","base","head","link","meta","style","title","address","article","aside","footer","header","h1","h2","h3","h4","h5","h6","hgroup","nav","section","div","dd","dl","dt","figcaption","figure","hr","img","li","main","ol","p","pre","ul","a","b","abbr","bdi","bdo","br","cite","code","data","dfn","em","i","kbd","mark","q","rp","rt","rtc","ruby","s","samp","small","span","strong","sub","sup","time","u","var","wbr","area","audio","map","track","video","embed","object","param","source","canvas","script","noscript","del","ins","caption","col","colgroup","table","thead","tbody","td","th","tr","button","datalist","fieldset","form","input","label","legend","meter","optgroup","option","output","progress","select","textarea","details","dialog","menu","menuitem","summary","content","element","shadow","template"]
2 | 


--------------------------------------------------------------------------------
/docs/rules/require-component-is.md:
--------------------------------------------------------------------------------
 1 | # Require `v-bind:is` of `<component>` elements (require-component-is)
 2 | 
 3 | > You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute:
 4 | >
 5 | > https://vuejs.org/v2/guide/components.html#Dynamic-Components
 6 | 
 7 | ## 📖 Rule Details
 8 | 
 9 | This rule reports the `<component>` elements which do not have `v-bind:is` attributes.
10 | 
11 | 👎 Examples of **incorrect** code for this rule:
12 | 
13 | ```html
14 | <template>
15 |     <component></component>
16 | </template>
17 | ```
18 | 
19 | 👍 Examples of **correct** code for this rule:
20 | 
21 | ```html
22 | <template>
23 |     <component :is="type"></component>
24 | </template>
25 | ```
26 | 
27 | ## 🔧 Options
28 | 
29 | Nothing.
30 | 


--------------------------------------------------------------------------------
/docs/rules/no-duplicate-attributes.md:
--------------------------------------------------------------------------------
 1 | # Disallow duplicate arguments (no-duplicate-attributes)
 2 | 
 3 | When duplicate arguments exist, only the last one is valid.
 4 | It's possibly mistakes.
 5 | 
 6 | ## 📖 Rule Details
 7 | 
 8 | This rule reports duplicate attributes.
 9 | `v-bind:foo` directives are handled as the attributes `foo`.
10 | 
11 | 👎 Examples of **incorrect** code for this rule:
12 | 
13 | ```html
14 | <template>
15 |     <div foo="abc" :foo="def"></div>
16 | </template>
17 | ```
18 | 
19 | 👍 Examples of **correct** code for this rule:
20 | 
21 | ```html
22 | <template>
23 |     <div foo="abc"></div>
24 |     <div :foo="def"></div>
25 | </template>
26 | ```
27 | 
28 | ## 🔧 Options
29 | 
30 | Nothing.
31 | 
32 | ## TODO: `<div foo foo></div>`
33 | 
34 | `parse5` remove duplicate attributes on the tokenization phase.
35 | Needs investigation to check.
36 | 


--------------------------------------------------------------------------------
/docs/rules/html-no-self-closing.md:
--------------------------------------------------------------------------------
 1 | # Disallow self-closing elements (html-no-self-closing)
 2 | 
 3 | - 🔧 This rule is fixable with `eslint --fix` command.
 4 | 
 5 | Self-closing (e.g. `<br/>`) is syntax of XML/XHTML.
 6 | HTML ignores it.
 7 | 
 8 | ## 📖 Rule Details
 9 | 
10 | This rule reports every self-closing element except XML context.
11 | 
12 | 👎 Examples of **incorrect** code for this rule:
13 | 
14 | ```html
15 | <template>
16 |     <div>
17 |         <img src="./logo.png"/>
18 |     </div>
19 | </template>
20 | ```
21 | 
22 | 👍 Examples of **correct** code for this rule:
23 | 
24 | ```html
25 | <template>
26 |     <div>
27 |         <img src="./logo.png">
28 |         <svg>
29 |             <!-- this is XML context -->
30 |             <rect width="100" height="100" />
31 |         </svg>
32 |     </div>
33 | </template>
34 | ```
35 | 
36 | ## 🔧 Options
37 | 
38 | Nothing.
39 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-pre.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-pre directives (no-invalid-v-pre)
 2 | 
 3 | This rule checks whether every `v-pre` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-pre` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-pre:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-pre.bbb></div>`
11 | - The directive has that attribute value. E.g. `<div v-pre="ccc"></div>`
12 | 
13 | 👎 Examples of **incorrect** code for this rule:
14 | 
15 | ```html
16 | <template>
17 |     <div>
18 |         <div v-pre:aaa></div>
19 |         <div v-pre.bbb></div>
20 |         <div v-pre="ccc"></div>
21 |     </div>
22 | </template>
23 | ```
24 | 
25 | 👍 Examples of **correct** code for this rule:
26 | 
27 | ```html
28 | <template>
29 |     <div>
30 |         <div v-pre></div>
31 |     </div>
32 | </template>
33 | ```
34 | 
35 | ## 🔧 Options
36 | 
37 | Nothing.
38 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-once.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-once directives (no-invalid-v-once)
 2 | 
 3 | This rule checks whether every `v-once` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-once` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-once:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-once.bbb></div>`
11 | - The directive has that attribute value. E.g. `<div v-once="ccc"></div>`
12 | 
13 | 👎 Examples of **incorrect** code for this rule:
14 | 
15 | ```html
16 | <template>
17 |     <div>
18 |         <div v-once:aaa></div>
19 |         <div v-once.bbb></div>
20 |         <div v-once="ccc"></div>
21 |     </div>
22 | </template>
23 | ```
24 | 
25 | 👍 Examples of **correct** code for this rule:
26 | 
27 | ```html
28 | <template>
29 |     <div>
30 |         <div v-once></div>
31 |     </div>
32 | </template>
33 | ```
34 | 
35 | ## 🔧 Options
36 | 
37 | Nothing.
38 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-cloak.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-cloak directives (no-invalid-v-cloak)
 2 | 
 3 | This rule checks whether every `v-cloak` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-cloak` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-cloak:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-cloak.bbb></div>`
11 | - The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
12 | 
13 | 👎 Examples of **incorrect** code for this rule:
14 | 
15 | ```html
16 | <template>
17 |     <div>
18 |         <div v-cloak:aaa></div>
19 |         <div v-cloak.bbb></div>
20 |         <div v-cloak="ccc"></div>
21 |     </div>
22 | </template>
23 | ```
24 | 
25 | 👍 Examples of **correct** code for this rule:
26 | 
27 | ```html
28 | <template>
29 |     <div>
30 |         <div v-cloak></div>
31 |     </div>
32 | </template>
33 | ```
34 | 
35 | ## 🔧 Options
36 | 
37 | Nothing.
38 | 


--------------------------------------------------------------------------------
/docs/rules/require-v-for-key.md:
--------------------------------------------------------------------------------
 1 | # Require `v-bind:key` with `v-for` directives (require-v-for-key)
 2 | 
 3 | When `v-for` is written on custom components, it requires `v-bind:key` at the same time.
 4 | On other elements, it's better that `v-bind:key` is written as well.
 5 | 
 6 | ## 📖 Rule Details
 7 | 
 8 | This rule reports the elements which have `v-for` and do not have `v-bind:key`.
 9 | 
10 | This rule does not report custom components.
11 | It will be reported by [no-invalid-v-for] rule.
12 | 
13 | 👎 Examples of **incorrect** code for this rule:
14 | 
15 | ```html
16 | <template>
17 |     <div>
18 |         <div v-for="x in list"></div>
19 |     </div>
20 | </template>
21 | ```
22 | 
23 | 👍 Examples of **correct** code for this rule:
24 | 
25 | ```html
26 | <template>
27 |     <div>
28 |         <div v-for="x in list" :key="x.id"></div>
29 |     </div>
30 | </template>
31 | ```
32 | 
33 | ## 🔧 Options
34 | 
35 | Nothing.
36 | 
37 | ## 👫 Related rules
38 | 
39 | - [no-invalid-v-for]
40 | 
41 | [no-invalid-v-for]: ./no-invalid-v-for.md
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Toru Nagashima
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/rules/v-bind-style.md:
--------------------------------------------------------------------------------
 1 | # Enforce v-bind directive style (v-bind-style)
 2 | 
 3 | - 🔧 This rule is fixable with `eslint --fix` command.
 4 | 
 5 | This rule enforces `v-bind` directive style which you should use shorthand or long form.
 6 | 
 7 | ## 📖 Rule Details
 8 | 
 9 | 👎 Examples of **incorrect** code for this rule:
10 | 
11 | ```html
12 | <template>
13 |     <div>
14 |         <div v-bind:foo="foo"></div>
15 |     </div>
16 | </template>
17 | ```
18 | 
19 | 👍 Examples of **correct** code for this rule:
20 | 
21 | ```html
22 | <template>
23 |     <div>
24 |         <div :foo="foo"></div>
25 |     </div>
26 | </template>
27 | ```
28 | 
29 | 👎 Examples of **incorrect** code for this rule with `"longform"` option:
30 | 
31 | ```html
32 | <template>
33 |     <div>
34 |         <div :foo="foo"></div>
35 |     </div>
36 | </template>
37 | ```
38 | 
39 | 👍 Examples of **correct** code for this rule with `"longform"` option:
40 | 
41 | ```html
42 | <template>
43 |     <div>
44 |         <div v-bind:foo="foo"></div>
45 |     </div>
46 | </template>
47 | ```
48 | 
49 | ## 🔧 Options
50 | 
51 | - `"shorthand"` (default) ... requires using shorthand.
52 | - `"longform"` ... requires using long form.
53 | 


--------------------------------------------------------------------------------
/docs/rules/v-on-style.md:
--------------------------------------------------------------------------------
 1 | # Enforce v-on directive style (v-on-style)
 2 | 
 3 | - 🔧 This rule is fixable with `eslint --fix` command.
 4 | 
 5 | This rule enforces `v-on` directive style which you should use shorthand or long form.
 6 | 
 7 | ## 📖 Rule Details
 8 | 
 9 | 👎 Examples of **incorrect** code for this rule:
10 | 
11 | ```html
12 | <template>
13 |     <div>
14 |         <div v-on:click="foo"></div>
15 |     </div>
16 | </template>
17 | ```
18 | 
19 | 👍 Examples of **correct** code for this rule:
20 | 
21 | ```html
22 | <template>
23 |     <div>
24 |         <div @click="foo"></div>
25 |     </div>
26 | </template>
27 | ```
28 | 
29 | 👎 Examples of **incorrect** code for this rule with `"longform"` option:
30 | 
31 | ```html
32 | <template>
33 |     <div>
34 |         <div @click="foo"></div>
35 |     </div>
36 | </template>
37 | ```
38 | 
39 | 👍 Examples of **correct** code for this rule with `"longform"` option:
40 | 
41 | ```html
42 | <template>
43 |     <div>
44 |         <div v-on:click="foo"></div>
45 |     </div>
46 | </template>
47 | ```
48 | 
49 | ## 🔧 Options
50 | 
51 | - `"shorthand"` (default) ... requires using shorthand.
52 | - `"longform"` ... requires using long form.
53 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-html.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-html directives (no-invalid-v-html)
 2 | 
 3 | This rule checks whether every `v-html` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-html` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-html:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-html.bbb></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-html></div>`
12 | 
13 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>
20 |         <div v-html></div>
21 |         <div v-html:aaa="foo"></div>
22 |         <div v-html.bbb="foo"></div>
23 |     </div>
24 | </template>
25 | ```
26 | 
27 | 👍 Examples of **correct** code for this rule:
28 | 
29 | ```html
30 | <template>
31 |     <div>
32 |         <div v-html="foo"></div>
33 |     </div>
34 | </template>
35 | ```
36 | 
37 | ## 🔧 Options
38 | 
39 | Nothing.
40 | 
41 | ## 👫 Related rules
42 | 
43 | - [no-parsing-error]
44 | 
45 | 
46 | [no-parsing-error]: no-parsing-error.md
47 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-show.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-show directives (no-invalid-v-show)
 2 | 
 3 | This rule checks whether every `v-show` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-show` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-show:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-show.bbb></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-show></div>`
12 | 
13 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>
20 |         <div v-show></div>
21 |         <div v-show:aaa="foo"></div>
22 |         <div v-show.bbb="foo"></div>
23 |     </div>
24 | </template>
25 | ```
26 | 
27 | 👍 Examples of **correct** code for this rule:
28 | 
29 | ```html
30 | <template>
31 |     <div>
32 |         <div v-show="foo"></div>
33 |     </div>
34 | </template>
35 | ```
36 | 
37 | ## 🔧 Options
38 | 
39 | Nothing.
40 | 
41 | ## 👫 Related rules
42 | 
43 | - [no-parsing-error]
44 | 
45 | 
46 | [no-parsing-error]: no-parsing-error.md
47 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-text.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-text directives (no-invalid-v-text)
 2 | 
 3 | This rule checks whether every `v-text` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-text` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-text:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-text.bbb></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-text></div>`
12 | 
13 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>
20 |         <div v-text></div>
21 |         <div v-text:aaa="foo"></div>
22 |         <div v-text.bbb="foo"></div>
23 |     </div>
24 | </template>
25 | ```
26 | 
27 | 👍 Examples of **correct** code for this rule:
28 | 
29 | ```html
30 | <template>
31 |     <div>
32 |         <div v-text="foo"></div>
33 |     </div>
34 | </template>
35 | ```
36 | 
37 | ## 🔧 Options
38 | 
39 | Nothing.
40 | 
41 | ## 👫 Related rules
42 | 
43 | - [no-parsing-error]
44 | 
45 | 
46 | [no-parsing-error]: no-parsing-error.md
47 | 


--------------------------------------------------------------------------------
/docs/rules/html-end-tags.md:
--------------------------------------------------------------------------------
 1 | # Enforce end tag style (html-end-tags)
 2 | 
 3 | - 🔧 This rule is fixable with `eslint --fix` command.
 4 | 
 5 | This rule enforce the way of end tags.
 6 | 
 7 | - [Void elements] disallow end tags.
 8 | - Other elements require end tags.
 9 | 
10 | ## 📖 Rule Details
11 | 
12 | This rule reports the following elements:
13 | 
14 | - [Void elements] which have end tags.
15 | - Other elements which do not have end tags and are not self-closing.
16 | 
17 | 👎 Examples of **incorrect** code for this rule:
18 | 
19 | ```html
20 | <template>
21 |     <div>
22 |         <div>
23 |         <p>
24 |         <p>
25 |         <input></input>
26 |         <br></br>
27 |     </div>
28 | </template>
29 | ```
30 | 
31 | 👍 Examples of **correct** code for this rule:
32 | 
33 | ```html
34 | <template>
35 |     <div>
36 |         <div></div>
37 |         <p></p>
38 |         <p></p>
39 |         <input>
40 |         <br>
41 |     </div>
42 | </template>
43 | ```
44 | 
45 | ## 🔧 Options
46 | 
47 | Nothing.
48 | 
49 | [Void elements]: https://www.w3.org/TR/html51/syntax.html#void-elements
50 | 
51 | ## TODO: `<br></br>`
52 | 
53 | `parse5` does not recognize the illegal end tags of void elements.
54 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-on.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-on directives (no-invalid-v-on)
 2 | 
 3 | This rule checks whether every `v-on` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-on` directives if the following cases:
 8 | 
 9 | - The directive does not have that event name. E.g. `<div v-on="foo"></div>`
10 | - The directive has invalid modifiers. E.g. `<div v-on:click.bbb="foo"></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-on:click></div>`
12 | 
13 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>
20 |         <div v-on="foo"></div>
21 |         <div v-on:click="foo"></div>
22 |         <div v-on:click.bbb="foo"></div>
23 |     </div>
24 | </template>
25 | ```
26 | 
27 | 👍 Examples of **correct** code for this rule:
28 | 
29 | ```html
30 | <template>
31 |     <div>
32 |         <div v-on:click="foo"></div>
33 |         <div @click="foo"></div>
34 |         <div @click.left.prevent="foo"></div>
35 |     </div>
36 | </template>
37 | ```
38 | 
39 | ## 🔧 Options
40 | 
41 | Nothing.
42 | 
43 | ## 👫 Related rules
44 | 
45 | - [no-parsing-error]
46 | 
47 | 
48 | [no-parsing-error]: no-parsing-error.md
49 | 


--------------------------------------------------------------------------------
/docs/rules/html-quotes.md:
--------------------------------------------------------------------------------
 1 | # Enforce quotes style of HTML attributes (html-quotes)
 2 | 
 3 | You can shoose quotes of HTML attributes from:
 4 | 
 5 | - Double quotes: `<div class="foo">`
 6 | - Single quotes: `<div class='foo'>`
 7 | - No quotes: `<div class=foo>`
 8 | 
 9 | This rule enforces the quotes style of HTML attributes.
10 | 
11 | ## 📖 Rule Details
12 | 
13 | This rule reports the quotes of attributes if it is different to configured quotes.
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>
20 |         <img src='./logo.png'>
21 |         <img src=./logo.png>
22 |     </div>
23 | </template>
24 | ```
25 | 
26 | 👍 Examples of **correct** code for this rule:
27 | 
28 | ```html
29 | <template>
30 |     <div>
31 |         <img src="./logo.png">
32 |     </div>
33 | </template>
34 | ```
35 | 
36 | 👎 Examples of **incorrect** code for this rule with `"single"` option:
37 | 
38 | ```html
39 | <template>
40 |     <div>
41 |         <img src="./logo.png">
42 |         <img src=./logo.png>
43 |     </div>
44 | </template>
45 | ```
46 | 
47 | 👍 Examples of **correct** code for this rule with `"single"` option:
48 | 
49 | ```html
50 | <template>
51 |     <div>
52 |         <img src='./logo.png'>
53 |     </div>
54 | </template>
55 | ```
56 | 
57 | ## 🔧 Options
58 | 
59 | - `"double"` (default) ... requires double quotes.
60 | - `"single"` ... requires single quotes.
61 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-bind.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-bind directives (no-invalid-v-bind)
 2 | 
 3 | This rule checks whether every `v-bind` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-bind` directives if the following cases:
 8 | 
 9 | - The directive does not have that attribute value. E.g. `<div v-bind:aaa></div>`
10 | - The directive has invalid modifiers. E.g. `<div v-bind:aaa.bbb="ccc"></div>`
11 | 
12 | This rule does not report `v-bind` directives which do not have their argument (E.g. `<div v-bind="aaa"></div>`) because it's valid if the attribute value is an object.
13 | 
14 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
15 | 
16 | 👎 Examples of **incorrect** code for this rule:
17 | 
18 | ```html
19 | <template>
20 |     <div>
21 |         <div v-bind></div>
22 |         <div :aaa></div>
23 |         <div v-bind:aaa.bbb="foo"></div>
24 |     </div>
25 | </template>
26 | ```
27 | 
28 | 👍 Examples of **correct** code for this rule:
29 | 
30 | ```html
31 | <template>
32 |     <div>
33 |         <div v-bind="foo"></div>
34 |         <div v-bind:aaa="foo"></div>
35 |         <div :aaa="foo"></div>
36 |         <div :aaa.prop="foo"></div>
37 |     </div>
38 | </template>
39 | ```
40 | 
41 | ## 🔧 Options
42 | 
43 | Nothing.
44 | 
45 | ## 👫 Related rules
46 | 
47 | - [no-parsing-error]
48 | 
49 | 
50 | [no-parsing-error]: no-parsing-error.md
51 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-else.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-else directives (no-invalid-v-else)
 2 | 
 3 | This rule checks whether every `v-else` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-else` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-if="foo"></div><div v-else:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-if="foo"></div><div v-else.bbb></div>`
11 | - The directive has that attribute value. E.g. `<div v-if="foo"></div><div v-else="bar"></div>`
12 | - The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. `<div v-else></div>`
13 | - The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>
20 |         <div v-else="foo"></div>
21 |         <div v-else:aaa></div>
22 |         <div v-else.bbb></div>
23 |     </div>
24 | </template>
25 | ```
26 | 
27 | 👍 Examples of **correct** code for this rule:
28 | 
29 | ```html
30 | <template>
31 |     <div>
32 |         <div v-if="foo"></div>
33 |         <div v-else></div>
34 |     </div>
35 | </template>
36 | ```
37 | 
38 | ## 🔧 Options
39 | 
40 | Nothing.
41 | 
42 | ## 👫 Related rules
43 | 
44 | - [no-invalid-v-if]
45 | - [no-invalid-v-else]
46 | 
47 | 
48 | [no-invalid-v-if]:   no-invalid-v-if.md
49 | [no-invalid-v-else]: no-invalid-v-else.md
50 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-template-root.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid template root (no-invalid-root-element)
 2 | 
 3 | This rule checks whether every template root is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports the template root if the following cases:
 8 | 
 9 | - The root is text. E.g. `<template>hello</template>`.
10 | - The root is multiple elements. E.g. `<template><div>one</div><div>two</div></template>`.
11 | - The root element has `v-for` directives. E.g. `<template><div v-for="x in list">{{x}}</div></template>`.
12 | - The root element has `v-if`/`v-else-if` directives without `v-else` elements. E.g. `<template><div v-if="foo">hello</div></template>`.
13 | - The root element is `<template>` or `<slot>` elements. E.g. `<template><template>hello</template></template>`.
14 | 
15 | 👎 Examples of **incorrect** code for this rule:
16 | 
17 | ```html
18 | <template>
19 |     <div>hello</div>
20 |     <div>hello</div>
21 | </template>
22 | ```
23 | 
24 | ```html
25 | <template>
26 |     abc
27 | </template>
28 | ```
29 | 
30 | ```html
31 | <template>
32 |     <div v-for="x in list"></div>
33 | </template>
34 | ```
35 | 
36 | ```html
37 | <template>
38 |     <div v-if="foo"></div>
39 | </template>
40 | ```
41 | 
42 | 👍 Examples of **correct** code for this rule:
43 | 
44 | ```html
45 | <template>
46 |     <div>abc</div>
47 | </template>
48 | ```
49 | 
50 | ```html
51 | <template>
52 |     <div v-if="foo">abc</div>
53 |     <div v-else>def</div>
54 | </template>
55 | ```
56 | 
57 | ## 🔧 Options
58 | 
59 | Nothing.
60 | 


--------------------------------------------------------------------------------
/lib/recommended.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "parser": "vue-eslint-parser",
 3 |     "env": {
 4 |         "es6": true
 5 |     },
 6 |     "rules": {
 7 |         "@mysticatea/vue/html-end-tags": "error",
 8 |         "@mysticatea/vue/html-no-self-closing": "error",
 9 |         "@mysticatea/vue/html-quotes": "off",
10 |         "@mysticatea/vue/no-confusing-v-for-v-if": "error",
11 |         "@mysticatea/vue/no-duplicate-attributes": "error",
12 |         "@mysticatea/vue/no-invalid-template-root": "error",
13 |         "@mysticatea/vue/no-invalid-v-bind": "error",
14 |         "@mysticatea/vue/no-invalid-v-cloak": "error",
15 |         "@mysticatea/vue/no-invalid-v-else-if": "error",
16 |         "@mysticatea/vue/no-invalid-v-else": "error",
17 |         "@mysticatea/vue/no-invalid-v-for": "error",
18 |         "@mysticatea/vue/no-invalid-v-html": "error",
19 |         "@mysticatea/vue/no-invalid-v-if": "error",
20 |         "@mysticatea/vue/no-invalid-v-model": "error",
21 |         "@mysticatea/vue/no-invalid-v-on": "error",
22 |         "@mysticatea/vue/no-invalid-v-once": "error",
23 |         "@mysticatea/vue/no-invalid-v-pre": "error",
24 |         "@mysticatea/vue/no-invalid-v-show": "error",
25 |         "@mysticatea/vue/no-invalid-v-text": "error",
26 |         "@mysticatea/vue/no-parsing-error": "error",
27 |         "@mysticatea/vue/no-textarea-mustache": "error",
28 |         "@mysticatea/vue/require-component-is": "error",
29 |         "@mysticatea/vue/require-v-for-key": "error",
30 |         "@mysticatea/vue/v-bind-style": "off",
31 |         "@mysticatea/vue/v-on-style": "off"
32 |     }
33 | }


--------------------------------------------------------------------------------
/docs/rules/no-confusing-v-for-v-if.md:
--------------------------------------------------------------------------------
 1 | # Disallow confusing `v-for` and `v-if` on the same element (no-confusing-v-for-v-if)
 2 | 
 3 | > When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
 4 | >
 5 | > https://vuejs.org/v2/guide/list.html#v-for-with-v-if
 6 | 
 7 | So when they exist on the same node, `v-if` directive should use the reference which is to the variables which are defined by the `v-for` directives.
 8 | 
 9 | ## 📖 Rule Details
10 | 
11 | This rule reports the elements which have both `v-for` and `v-if` directives if the following cases:
12 | 
13 | - The `v-if` directive does not use the reference which is to the variables which are defined by the `v-for` directives.
14 | 
15 | In that case, the `v-if` should be written on the wrapper element.
16 | 
17 | 👎 Examples of **incorrect** code for this rule:
18 | 
19 | ```html
20 | <template>
21 |     <div>
22 |         <ol>
23 |             <li v-if="shown" v-for="item in items">{{item.message}}</li>
24 |         </ol>
25 |     </div>
26 | </template>
27 | ```
28 | 
29 | 👍 Examples of **correct** code for this rule:
30 | 
31 | ```html
32 | <template>
33 |     <div>
34 |         <ol>
35 |             <li v-for="item in items" v-if="item.shown">{{item.message}}</li>
36 |         </ol>
37 |     </div>
38 | </template>
39 | ```
40 | 
41 | ```html
42 | <template>
43 |     <div>
44 |         <ol v-if="shown">
45 |             <li v-for="item in items">{{item.message}}</li>
46 |         </ol>
47 |     </div>
48 | </template>
49 | ```
50 | 
51 | ## 🔧 Options
52 | 
53 | Nothing.
54 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-if.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-if directives (no-invalid-v-if)
 2 | 
 3 | This rule checks whether every `v-if` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-if` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-if:aaa="foo"></div>`
10 | - The directive has that modifier. E.g. `<div v-if.bbb="foo"></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-if></div>`
12 | - The directive is on the elements which have `v-else`/`v-else-if` directives. E.g. `<div v-else v-if="foo"></div>`
13 | 
14 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
15 | 
16 | 👎 Examples of **incorrect** code for this rule:
17 | 
18 | ```html
19 | <template>
20 |     <div v-if="foo">
21 |         <div v-if></div>
22 |         <div v-if:aaa="foo"></div>
23 |         <div v-if.bbb="foo"></div>
24 |         <div v-if="foo" v-else></div>
25 |         <div v-if="foo" v-else-if="bar"></div>
26 |     </div>
27 | </template>
28 | ```
29 | 
30 | 👍 Examples of **correct** code for this rule:
31 | 
32 | ```html
33 | <template>
34 |     <div>
35 |         <div v-if="foo"></div>
36 |         <div v-else-if="bar"></div>
37 |         <div v-else></div>
38 |     </div>
39 | </template>
40 | ```
41 | 
42 | ## 🔧 Options
43 | 
44 | Nothing.
45 | 
46 | ## 👫 Related rules
47 | 
48 | - [no-invalid-v-else]
49 | - [no-invalid-v-else-if]
50 | - [no-parsing-error]
51 | 
52 | 
53 | [no-invalid-v-else]:    no-invalid-v-else.md
54 | [no-invalid-v-else-if]: no-invalid-v-else-if.md
55 | [no-parsing-error]:      no-parsing-error.md
56 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-else-if.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-else-if directives (no-invalid-v-else-if)
 2 | 
 3 | This rule checks whether every `v-else-if` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-else-if` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-if="foo"></div><div v-else-if:aaa="bar"></div>`
10 | - The directive has that modifier. E.g. `<div v-if="foo"></div><div v-else-if.bbb="bar"></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-if="foo"></div><div v-else-if></div>`
12 | - The directive is on the elements that the previous element don't have `v-if`/`v-else-if` directives. E.g. `<div v-else-if="bar"></div>`
13 | - The directive is on the elements which have `v-if`/`v-else` directives. E.g. `<div v-if="foo" v-else-if="bar"></div>`
14 | 
15 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
16 | 
17 | 👎 Examples of **incorrect** code for this rule:
18 | 
19 | ```html
20 | <template>
21 |     <div>
22 |         <div v-else-if></div>
23 |         <div v-else-if:aaa="foo"></div>
24 |         <div v-else-if.bbb="foo"></div>
25 |     </div>
26 | </template>
27 | ```
28 | 
29 | 👍 Examples of **correct** code for this rule:
30 | 
31 | ```html
32 | <template>
33 |     <div>
34 |         <div v-if="foo"></div>
35 |         <div v-else-if="bar"></div>
36 |     </div>
37 | </template>
38 | ```
39 | 
40 | ## 🔧 Options
41 | 
42 | Nothing.
43 | 
44 | ## 👫 Related rules
45 | 
46 | - [no-invalid-v-if]
47 | - [no-invalid-v-else]
48 | - [no-parsing-error]
49 | 
50 | 
51 | [no-invalid-v-if]:   no-invalid-v-if.md
52 | [no-invalid-v-else]: no-invalid-v-else.md
53 | [no-parsing-error]:   no-parsing-error.md
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@mysticatea/eslint-plugin-vue",
 3 |   "version": "0.2.0",
 4 |   "description": "Experimental ESLint plugin for Vue.js.",
 5 |   "engines": {
 6 |     "node": ">=4"
 7 |   },
 8 |   "main": "lib/index.js",
 9 |   "files": [
10 |     "lib"
11 |   ],
12 |   "peerDependencies": {
13 |     "eslint": "^3.18.0"
14 |   },
15 |   "dependencies": {
16 |     "vue-eslint-parser": "mysticatea/vue-eslint-parser#v1.1.0-4"
17 |   },
18 |   "devDependencies": {
19 |     "@types/node": "^4.2.6",
20 |     "codecov": "^2.1.0",
21 |     "eslint": "^3.18.0",
22 |     "eslint-config-mysticatea": "^10.0.0",
23 |     "eslint-plugin-eslint-plugin": "^0.7.1",
24 |     "mocha": "^3.2.0",
25 |     "nyc": "^10.2.0",
26 |     "opener": "^1.4.3",
27 |     "rimraf": "^2.6.1"
28 |   },
29 |   "scripts": {
30 |     "_mocha": "_mocha \"tests/lib/**/*.js\" --reporter progress",
31 |     "clean": "rimraf .nyc_output coverage",
32 |     "coverage": "nyc report --reporter lcov && opener ./coverage/lcov-report/index.html",
33 |     "lint": "eslint lib \"tests/lib/**/*.js\"",
34 |     "postversion": "git push && git push --tags",
35 |     "pretest": "npm run lint",
36 |     "preversion": "npm test",
37 |     "test": "nyc npm run _mocha",
38 |     "watch": "npm run _mocha -- --growl --watch",
39 |     "codecov": "nyc report --reporter lcovonly && codecov"
40 |   },
41 |   "repository": {
42 |     "type": "git",
43 |     "url": "git+https://github.com/mysticatea/eslint-plugin-vue-trial.git"
44 |   },
45 |   "keywords": [],
46 |   "author": "Toru Nagashima (https://github.com/mysticatea)",
47 |   "license": "MIT",
48 |   "bugs": {
49 |     "url": "https://github.com/mysticatea/eslint-plugin-vue-trial/issues"
50 |   },
51 |   "homepage": "https://github.com/mysticatea/eslint-plugin-vue-trial#readme"
52 | }
53 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-textarea-mustache.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-textarea-mustache")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-textarea-mustache", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><textarea v-model=\"text\"></textarea></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div><textarea>{{text}}</textarea></div></template>",
39 |             errors: ["Unexpected mustache. Use 'v-model' instead."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div><textarea>{{text}} and {{text}}</textarea></div></template>",
44 |             errors: [
45 |                 "Unexpected mustache. Use 'v-model' instead.",
46 |                 "Unexpected mustache. Use 'v-model' instead.",
47 |             ],
48 |         },
49 |     ],
50 | })
51 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-pre.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-pre")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-pre", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-pre></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div v-pre:aaa></div></template>",
39 |             errors: ["'v-pre' directives require no argument."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div v-pre.aaa></div></template>",
44 |             errors: ["'v-pre' directives require no modifier."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-pre=\"aaa\"></div></template>",
49 |             errors: ["'v-pre' directives require no attribute value."],
50 |         },
51 |     ],
52 | })
53 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-once.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-once")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-once", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-once></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div v-once:aaa></div></template>",
39 |             errors: ["'v-once' directives require no argument."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div v-once.aaa></div></template>",
44 |             errors: ["'v-once' directives require no modifier."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-once=\"aaa\"></div></template>",
49 |             errors: ["'v-once' directives require no attribute value."],
50 |         },
51 |     ],
52 | })
53 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-cloak.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-cloak")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-cloak", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-cloak></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div v-cloak:aaa></div></template>",
39 |             errors: ["'v-cloak' directives require no argument."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div v-cloak.aaa></div></template>",
44 |             errors: ["'v-cloak' directives require no modifier."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-cloak=\"aaa\"></div></template>",
49 |             errors: ["'v-cloak' directives require no attribute value."],
50 |         },
51 |     ],
52 | })
53 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-html.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-html")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-html", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-html=\"foo\"></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div v-html:aaa=\"foo\"></div></template>",
39 |             errors: ["'v-html' directives require no argument."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div v-html.aaa=\"foo\"></div></template>",
44 |             errors: ["'v-html' directives require no modifier."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-html></div></template>",
49 |             errors: ["'v-html' directives require that attribute value."],
50 |         },
51 |     ],
52 | })
53 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-show.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-show")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-show", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-show=\"foo\"></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div v-show:aaa=\"foo\"></div></template>",
39 |             errors: ["'v-show' directives require no argument."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div v-show.aaa=\"foo\"></div></template>",
44 |             errors: ["'v-show' directives require no modifier."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-show></div></template>",
49 |             errors: ["'v-show' directives require that attribute value."],
50 |         },
51 |     ],
52 | })
53 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-text.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-text")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-text", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-text=\"foo\"></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div v-text:aaa=\"foo\"></div></template>",
39 |             errors: ["'v-text' directives require no argument."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div v-text.aaa=\"foo\"></div></template>",
44 |             errors: ["'v-text' directives require no modifier."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-text></div></template>",
49 |             errors: ["'v-text' directives require that attribute value."],
50 |         },
51 |     ],
52 | })
53 | 


--------------------------------------------------------------------------------
/lib/rules/require-component-is.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for require-component-is.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VStartTag[id.name='component']"(node) {
27 |             if (!utils.hasDirective(node, "bind", "is")) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "Expected '<component>' elements to have 'v-bind:is' attribute.",
32 |                 })
33 |             }
34 |         },
35 |     })
36 | 
37 |     return {}
38 | }
39 | 
40 | //------------------------------------------------------------------------------
41 | // Rule Definition
42 | //------------------------------------------------------------------------------
43 | 
44 | module.exports = {
45 |     create,
46 |     meta: {
47 |         docs: {
48 |             description: "require `v-bind:is` of `<component>` elements.",
49 |             category: "Best Practices",
50 |             recommended: true,
51 |         },
52 |         fixable: false,
53 |         schema: [],
54 |     },
55 | }
56 | 


--------------------------------------------------------------------------------
/lib/rules/no-textarea-mustache.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-textarea-mustache.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VElement[startTag.id.name='textarea'] VExpressionContainer"(node) {
27 |             if (node.parent.type !== "VElement") {
28 |                 return
29 |             }
30 | 
31 |             context.report({
32 |                 node,
33 |                 loc: node.loc,
34 |                 message: "Unexpected mustache. Use 'v-model' instead.",
35 |             })
36 |         },
37 |     })
38 | 
39 |     return {}
40 | }
41 | 
42 | //------------------------------------------------------------------------------
43 | // Rule Definition
44 | //------------------------------------------------------------------------------
45 | 
46 | module.exports = {
47 |     create,
48 |     meta: {
49 |         docs: {
50 |             description: "disallow mustaches in `<textarea>`.",
51 |             category: "Best Practices",
52 |             recommended: true,
53 |         },
54 |         fixable: false,
55 |         schema: [],
56 |     },
57 | }
58 | 


--------------------------------------------------------------------------------
/tests/lib/rules/require-component-is.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/require-component-is")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("require-component-is", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><component v-bind:is=\"type\"></component></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><component :is=\"type\"></component></template>",
37 |         },
38 |     ],
39 |     invalid: [
40 |         {
41 |             filename: "test.vue",
42 |             code: "<template><component is=\"type\"></component></template>",
43 |             errors: ["Expected '<component>' elements to have 'v-bind:is' attribute."],
44 |         },
45 |         {
46 |             filename: "test.vue",
47 |             code: "<template><component v-foo:is=\"type\"></component></template>",
48 |             errors: ["Expected '<component>' elements to have 'v-bind:is' attribute."],
49 |         },
50 |     ],
51 | })
52 | 


--------------------------------------------------------------------------------
/lib/rules.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | module.exports = {
 9 |     "html-end-tags": require("./rules/html-end-tags"),
10 |     "html-no-self-closing": require("./rules/html-no-self-closing"),
11 |     "html-quotes": require("./rules/html-quotes"),
12 |     "no-confusing-v-for-v-if": require("./rules/no-confusing-v-for-v-if"),
13 |     "no-duplicate-attributes": require("./rules/no-duplicate-attributes"),
14 |     "no-invalid-template-root": require("./rules/no-invalid-template-root"),
15 |     "no-invalid-v-bind": require("./rules/no-invalid-v-bind"),
16 |     "no-invalid-v-cloak": require("./rules/no-invalid-v-cloak"),
17 |     "no-invalid-v-else-if": require("./rules/no-invalid-v-else-if"),
18 |     "no-invalid-v-else": require("./rules/no-invalid-v-else"),
19 |     "no-invalid-v-for": require("./rules/no-invalid-v-for"),
20 |     "no-invalid-v-html": require("./rules/no-invalid-v-html"),
21 |     "no-invalid-v-if": require("./rules/no-invalid-v-if"),
22 |     "no-invalid-v-model": require("./rules/no-invalid-v-model"),
23 |     "no-invalid-v-on": require("./rules/no-invalid-v-on"),
24 |     "no-invalid-v-once": require("./rules/no-invalid-v-once"),
25 |     "no-invalid-v-pre": require("./rules/no-invalid-v-pre"),
26 |     "no-invalid-v-show": require("./rules/no-invalid-v-show"),
27 |     "no-invalid-v-text": require("./rules/no-invalid-v-text"),
28 |     "no-parsing-error": require("./rules/no-parsing-error"),
29 |     "no-textarea-mustache": require("./rules/no-textarea-mustache"),
30 |     "require-component-is": require("./rules/require-component-is"),
31 |     "require-v-for-key": require("./rules/require-v-for-key"),
32 |     "v-bind-style": require("./rules/v-bind-style"),
33 |     "v-on-style": require("./rules/v-on-style"),
34 | }
35 | 


--------------------------------------------------------------------------------
/lib/rules/require-v-for-key.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for require-v-for-key.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='for']"(node) {
27 |             if (!utils.hasDirective(node.parent, "bind", "key") && !utils.isCustomComponent(node.parent)) {
28 |                 context.report({
29 |                     node: node.parent,
30 |                     loc: node.parent.loc,
31 |                     message: "'v-for' directives require 'v-bind:key' directives.",
32 |                 })
33 |             }
34 |         },
35 |     })
36 | 
37 |     return {}
38 | }
39 | 
40 | //------------------------------------------------------------------------------
41 | // Rule Definition
42 | //------------------------------------------------------------------------------
43 | 
44 | module.exports = {
45 |     create,
46 |     meta: {
47 |         docs: {
48 |             description: "require `v-bind:key` with `v-for` directives.",
49 |             category: "Best Practices",
50 |             recommended: true,
51 |         },
52 |         fixable: false,
53 |         schema: [],
54 |     },
55 | }
56 | 


--------------------------------------------------------------------------------
/lib/rules/html-no-self-closing.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for html-no-self-closing.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VStartTag[selfClosing=true]"(node) {
27 |             if (!utils.isSvgElementName(node.id.name)) {
28 |                 const pos = node.range[1] - 2
29 |                 context.report({
30 |                     node,
31 |                     loc: node.loc,
32 |                     message: "Self-closing shuld not be used.",
33 |                     fix: (fixer) => fixer.removeRange([pos, pos + 1]),
34 |                 })
35 |             }
36 |         },
37 |     })
38 | 
39 |     return {}
40 | }
41 | 
42 | //------------------------------------------------------------------------------
43 | // Rule Definition
44 | //------------------------------------------------------------------------------
45 | 
46 | module.exports = {
47 |     create,
48 |     meta: {
49 |         docs: {
50 |             description: "disallow self-closing elements.",
51 |             category: "Best Practices",
52 |             recommended: true,
53 |         },
54 |         fixable: "code",
55 |         schema: [],
56 |     },
57 | }
58 | 


--------------------------------------------------------------------------------
/lib/rules/no-parsing-error.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-parsing-error.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VExpressionContainer[syntaxError!=null]"(node) {
27 |             const message = node.syntaxError.message
28 | 
29 |             context.report({
30 |                 node,
31 |                 loc: node.loc,
32 |                 message: "Parsing error: {{message}}.",
33 |                 data: {
34 |                     message: message.endsWith(".")
35 |                         ? message.slice(0, -1)
36 |                         : message,
37 |                 },
38 |             })
39 |         },
40 |     })
41 | 
42 |     return {}
43 | }
44 | 
45 | //------------------------------------------------------------------------------
46 | // Rule Definition
47 | //------------------------------------------------------------------------------
48 | 
49 | module.exports = {
50 |     create,
51 |     meta: {
52 |         docs: {
53 |             description: "disallow parsing errors in `<template>`.",
54 |             category: "Possible Errors",
55 |             recommended: true,
56 |         },
57 |         fixable: false,
58 |         schema: [],
59 |     },
60 | }
61 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-duplicate-attributes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-duplicate-attributes")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-duplicate-attributes", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div foo :bar baz></div></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><div @click=\"foo\" @click=\"bar\"></div></div></template>",
37 |         },
38 |     ],
39 |     invalid: [
40 |         // {
41 |         //     filename: "test.vue",
42 |         //     code: "<template><div><div foo foo></div></div></template>",
43 |         //     errors: ["Duplicate attribute 'foo'."],
44 |         // },
45 |         {
46 |             filename: "test.vue",
47 |             code: "<template><div><div foo v-bind:foo></div></div></template>",
48 |             errors: ["Duplicate attribute 'foo'."],
49 |         },
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div><div foo :foo></div></div></template>",
53 |             errors: ["Duplicate attribute 'foo'."],
54 |         },
55 |     ],
56 | })
57 | 


--------------------------------------------------------------------------------
/tests/lib/rules/require-v-for-key.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/require-v-for-key")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("require-v-for-key", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div v-for=\"x in list\" v-bind:key=\"x\"></div></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><div v-for=\"x in list\" :key=\"x.foo\"></div></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div><custom-component v-for=\"x in list\"></custom-component></div></template>",
41 |         },
42 |     ],
43 |     invalid: [
44 |         {
45 |             filename: "test.vue",
46 |             code: "<template><div><div v-for=\"x in list\"></div></div></template>",
47 |             errors: ["'v-for' directives require 'v-bind:key' directives."],
48 |         },
49 |         {
50 |             filename: "test.vue",
51 |             code: "<template><div><div v-for=\"x in list\" key=\"100\"></div></div></template>",
52 |             errors: ["'v-for' directives require 'v-bind:key' directives."],
53 |         },
54 |     ],
55 | })
56 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-model.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-model directives (no-invalid-v-model)
 2 | 
 3 | This rule checks whether every `v-model` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-model` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<input v-model:aaa="foo">`
10 | - The directive has the modifiers which are not supported. E.g. `<input v-model.bbb="foo">`
11 | - The directive does not have that attribute value. E.g. `<input v-model>`
12 | - The directive does not have the attribute value which is valid as LHS. E.g. `<input v-model="foo() + bar()">`
13 | - The directive is on unsupported elements. E.g. `<div v-model="foo"></div>`
14 | - The directive is on `<input>` elements which their types are dynamic. E.g. `<input :type="type" v-model="foo">`
15 | - The directive is on `<input>` elements which their types are `file`. E.g. `<input type="file" v-model="foo">`
16 | - The directive's reference is iteration variables. E.g. `<div v-for="x in list"><input type="file" v-model="x"></div>`
17 | 
18 | This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
19 | 
20 | 👎 Examples of **incorrect** code for this rule:
21 | 
22 | ```html
23 | <template>
24 |     <div>
25 |         <input v-model>
26 |         <input v-model:aaa="foo">
27 |         <input v-model.bbb="foo">
28 |         <input v-model="foo + bar">
29 |         <div v-model="foo"></div>
30 |         <div v-for="x in list">
31 |             <input v-model="x">
32 |         </div>
33 |     </div>
34 | </template>
35 | ```
36 | 
37 | 👍 Examples of **correct** code for this rule:
38 | 
39 | ```html
40 | <template>
41 |     <div>
42 |         <input v-model="foo">
43 |         <input v-model.lazy="foo">
44 |         <textarea v-model="foo"></textarea>
45 |         <your-component v-model="foo"></your-component>
46 |         <div v-for="x in list">
47 |             <input v-model="x.name">
48 |         </div>
49 |     </div>
50 | </template>
51 | ```
52 | 
53 | ## 🔧 Options
54 | 
55 | Nothing.
56 | 
57 | ## 👫 Related rules
58 | 
59 | - [no-parsing-error]
60 | 
61 | 
62 | [no-parsing-error]: no-parsing-error.md
63 | 


--------------------------------------------------------------------------------
/tests/lib/rules/html-no-self-closing.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/html-no-self-closing")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("html-no-self-closing", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><svg><path/></svg></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><img></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div><br></div></template>",
41 |         },
42 |     ],
43 |     invalid: [
44 |         {
45 |             filename: "test.vue",
46 |             code: "<template><div><br/></div></template>",
47 |             output: "<template><div><br></div></template>",
48 |             errors: ["Self-closing shuld not be used."],
49 |         },
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div><input/></div></template>",
53 |             output: "<template><div><input></div></template>",
54 |             errors: ["Self-closing shuld not be used."],
55 |         },
56 |         {
57 |             filename: "test.vue",
58 |             code: "<template><div><div/></div></template>",
59 |             output: "<template><div><div></div></template>",
60 |             errors: ["Self-closing shuld not be used."],
61 |         },
62 |     ],
63 | })
64 | 


--------------------------------------------------------------------------------
/lib/rules/html-quotes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for html-quotes.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     const sourceCode = context.getSourceCode()
26 |     const double = context.options[0] !== "single"
27 |     const quoteChar = double ? "\"" : "'"
28 |     const quoteName = double ? "double quotes" : "single quotes"
29 | 
30 |     utils.registerTemplateBodyVisitor(context, {
31 |         "VAttribute[value!=null]"(node) {
32 |             const text = sourceCode.getText(node.value)
33 |             const firstChar = text[0]
34 |             if (firstChar !== quoteChar) {
35 |                 context.report({
36 |                     node: node.value,
37 |                     loc: node.value.loc,
38 |                     message: "Expected to be enclosed by {{kind}}.",
39 |                     data: {kind: quoteName},
40 |                 })
41 |             }
42 |         },
43 |     })
44 | 
45 |     return {}
46 | }
47 | 
48 | //------------------------------------------------------------------------------
49 | // Rule Definition
50 | //------------------------------------------------------------------------------
51 | 
52 | module.exports = {
53 |     create,
54 |     meta: {
55 |         docs: {
56 |             description: "enforce quotes style of HTML attributes.",
57 |             category: "Stylistic Issues",
58 |             recommended: false,
59 |         },
60 |         fixable: false,
61 |         schema: [
62 |             {enum: ["double", "single"]},
63 |         ],
64 |     },
65 | }
66 | 


--------------------------------------------------------------------------------
/lib/rules/v-bind-style.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for v-bind-style.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     const shorthand = context.options[0] !== "longform"
26 | 
27 |     utils.registerTemplateBodyVisitor(context, {
28 |         "VAttribute[directive=true][key.name='bind'][key.argument!=null]"(node) {
29 |             if (node.key.shorthand === shorthand) {
30 |                 return
31 |             }
32 | 
33 |             context.report({
34 |                 node,
35 |                 loc: node.loc,
36 |                 message: shorthand
37 |                     ? "Unexpected 'v-bind' before ':'."
38 |                     : "Expected 'v-bind' before ':'.",
39 |                 fix: (fixer) => shorthand
40 |                     ? fixer.removeRange([node.range[0], node.range[0] + 6])
41 |                     : fixer.insertTextBefore(node, "v-bind"),
42 |             })
43 |         },
44 |     })
45 | 
46 |     return {}
47 | }
48 | 
49 | //------------------------------------------------------------------------------
50 | // Rule Definition
51 | //------------------------------------------------------------------------------
52 | 
53 | module.exports = {
54 |     create,
55 |     meta: {
56 |         docs: {
57 |             description: "enforce v-bind directive style.",
58 |             category: "Stylistic Issues",
59 |             recommended: false,
60 |         },
61 |         fixable: "code",
62 |         schema: [
63 |             {enum: ["shorthand", "longform"]},
64 |         ],
65 |     },
66 | }
67 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-confusing-v-for-v-if.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-confusing-v-for-v-if")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-confusing-v-for-v-if", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div v-for=\"x in list\" v-if=\"x\"></div></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><div v-for=\"x in list\" v-if=\"x.foo\"></div></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div><div v-for=\"(x,i) in list\" v-if=\"i%2==0\"></div></div></template>",
41 |         },
42 |         {
43 |             filename: "test.vue",
44 |             code: "<template><div v-if=\"shown\"><div v-for=\"(x,i) in list\"></div></div></template>",
45 |         },
46 |     ],
47 |     invalid: [
48 |         {
49 |             filename: "test.vue",
50 |             code: "<template><div><div v-for=\"x in list\" v-if=\"shown\"></div></div></template>",
51 |             errors: ["This 'v-if' should be moved to the wrapper element."],
52 |         },
53 |         {
54 |             filename: "test.vue",
55 |             code: "<template><div><div v-for=\"x in list\" v-if=\"list.length&gt;0\"></div></div></template>",
56 |             errors: ["This 'v-if' should be moved to the wrapper element."],
57 |         },
58 |     ],
59 | })
60 | 


--------------------------------------------------------------------------------
/lib/rules/v-on-style.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for v-on-style.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     const shorthand = context.options[0] !== "longform"
26 | 
27 |     utils.registerTemplateBodyVisitor(context, {
28 |         "VAttribute[directive=true][key.name='on'][key.argument!=null]"(node) {
29 |             if (node.key.shorthand === shorthand) {
30 |                 return
31 |             }
32 | 
33 |             const pos = node.range[0]
34 |             context.report({
35 |                 node,
36 |                 loc: node.loc,
37 |                 message: shorthand
38 |                     ? "Expected '@' instead of 'v-on:'."
39 |                     : "Expected 'v-on:' instead of '@'.",
40 |                 fix: (fixer) => shorthand
41 |                     ? fixer.replaceTextRange([pos, pos + 5], "@")
42 |                     : fixer.replaceTextRange([pos, pos + 1], "v-on:"),
43 |             })
44 |         },
45 |     })
46 | 
47 |     return {}
48 | }
49 | 
50 | //------------------------------------------------------------------------------
51 | // Rule Definition
52 | //------------------------------------------------------------------------------
53 | 
54 | module.exports = {
55 |     create,
56 |     meta: {
57 |         docs: {
58 |             description: "enforce v-on directive style.",
59 |             category: "Stylistic Issues",
60 |             recommended: false,
61 |         },
62 |         fixable: "code",
63 |         schema: [
64 |             {enum: ["shorthand", "longform"]},
65 |         ],
66 |     },
67 | }
68 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-on.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-on")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-on", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-on:click=\"foo\"></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div @click=\"foo\"></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div @click.prevent.ctrl.left=\"foo\"></div></template>",
41 |         },
42 |         {
43 |             filename: "test.vue",
44 |             code: "<template><div @keydown.27=\"foo\"></div></template>",
45 |         },
46 |     ],
47 |     invalid: [
48 |         {
49 |             filename: "test.vue",
50 |             code: "<template><div v-on=\"foo\"></div></template>",
51 |             errors: ["'v-on' directives require event names."],
52 |         },
53 |         {
54 |             filename: "test.vue",
55 |             code: "<template><div v-on:click.aaa=\"foo\"></div></template>",
56 |             errors: ["'v-on' directives don't support the modifier 'aaa'."],
57 |         },
58 |         {
59 |             filename: "test.vue",
60 |             code: "<template><div v-on:click></div></template>",
61 |             errors: ["'v-on' directives require that attribute value."],
62 |         },
63 |     ],
64 | })
65 | 


--------------------------------------------------------------------------------
/docs/rules/no-invalid-v-for.md:
--------------------------------------------------------------------------------
 1 | # Disallow invalid v-for directives (no-invalid-v-for)
 2 | 
 3 | This rule checks whether every `v-for` directive is valid.
 4 | 
 5 | ## 📖 Rule Details
 6 | 
 7 | This rule reports `v-for` directives if the following cases:
 8 | 
 9 | - The directive has that argument. E.g. `<div v-for:aaa></div>`
10 | - The directive has that modifier. E.g. `<div v-for.bbb></div>`
11 | - The directive does not have that attribute value. E.g. `<div v-for></div>`
12 | - If the element which has the directive is a custom component, the component does not have `v-bind:key` directive. E.g. `<your-component v-for="item in list"></your-component>`
13 | - The `v-bind:key` directive does not use the variables which are defined by the `v-for` directive. E.g. `<div v-for="x in list" :key="foo"></div>`
14 | 
15 | If the element which has the directive is a reserved element, this rule does not report even if the element does not have `v-bind:key` directive because it's not faital error. [require-v-for-key] rule reports it.
16 | 
17 | This rule does not check syntax errors in directives. [no-parsing-error] rule reports it.
18 | The following cases are syntax errors:
19 | 
20 | - The directive's value is not the form `alias in expr`. E.g. `<div v-for="foo"></div>`
21 | - The alias is not LHS. E.g. `<div v-for="foo() in list"></div>`
22 | 
23 | 👎 Examples of **incorrect** code for this rule:
24 | 
25 | ```html
26 | <template>
27 |     <div v-for="x in list">
28 |         <div v-for></div>
29 |         <div v-for:aaa="x in list"></div>
30 |         <div v-for.bbb="x in list"></div>
31 |         <your-component v-for="x in list"></your-component>
32 |         <div is="your-component" v-for="x in list"></div>
33 |         <your-component  v-for="x in list" :key="foo"></your-component>
34 |     </div>
35 | </template>
36 | ```
37 | 
38 | 👍 Examples of **correct** code for this rule:
39 | 
40 | ```html
41 | <template>
42 |     <div>
43 |         <div v-for="x in list"></div>
44 |         <your-component v-for="x in list" :key="x.id"></your-component>
45 |         <div is="your-component" v-for="x in list" :key="x.id"></div>
46 |     </div>
47 | </template>
48 | ```
49 | 
50 | ## 🔧 Options
51 | 
52 | Nothing.
53 | 
54 | ## 👫 Related rules
55 | 
56 | - [require-v-for-key]
57 | - [no-parsing-error]
58 | 
59 | 
60 | [no-parsing-error]: no-parsing-error.md
61 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-pre.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-pre.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='pre']"(node) {
27 |             if (node.key.argument) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-pre' directives require no argument.",
32 |                 })
33 |             }
34 |             if (node.key.modifiers.length > 0) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-pre' directives require no modifier.",
39 |                 })
40 |             }
41 |             if (node.value) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-pre' directives require no attribute value.",
46 |                 })
47 |             }
48 |         },
49 |     })
50 | 
51 |     return {}
52 | }
53 | 
54 | //------------------------------------------------------------------------------
55 | // Rule Definition
56 | //------------------------------------------------------------------------------
57 | 
58 | module.exports = {
59 |     create,
60 |     meta: {
61 |         docs: {
62 |             description: "disallow invalid v-pre directives.",
63 |             category: "Possible Errors",
64 |             recommended: true,
65 |         },
66 |         fixable: false,
67 |         schema: [],
68 |     },
69 | }
70 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-bind.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | const VALID_MODIFIERS = new Set(["prop", "camel"])
19 | 
20 | /**
21 |  * Creates AST event handlers for no-invalid-v-bind.
22 |  *
23 |  * @param {RuleContext} context - The rule context.
24 |  * @returns {object} AST event handlers.
25 |  */
26 | function create(context) {
27 |     utils.registerTemplateBodyVisitor(context, {
28 |         "VAttribute[directive=true][key.name='bind']"(node) {
29 |             for (const modifier of node.key.modifiers) {
30 |                 if (!VALID_MODIFIERS.has(modifier)) {
31 |                     context.report({
32 |                         node,
33 |                         loc: node.key.loc,
34 |                         message: "'v-bind' directives don't support the modifier '{{name}}'.",
35 |                         data: {name: modifier},
36 |                     })
37 |                 }
38 |             }
39 | 
40 |             if (!utils.hasAttributeValue(node)) {
41 |                 context.report({
42 |                     node,
43 |                     loc: node.loc,
44 |                     message: "'v-bind' directives require an attribute value.",
45 |                 })
46 |             }
47 |         },
48 |     })
49 | 
50 |     return {}
51 | }
52 | 
53 | //------------------------------------------------------------------------------
54 | // Rule Definition
55 | //------------------------------------------------------------------------------
56 | 
57 | module.exports = {
58 |     create,
59 |     meta: {
60 |         docs: {
61 |             description: "disallow invalid v-bind directives.",
62 |             category: "Possible Errors",
63 |             recommended: true,
64 |         },
65 |         fixable: false,
66 |         schema: [],
67 |     },
68 | }
69 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-once.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-once.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='once']"(node) {
27 |             if (node.key.argument) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-once' directives require no argument.",
32 |                 })
33 |             }
34 |             if (node.key.modifiers.length > 0) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-once' directives require no modifier.",
39 |                 })
40 |             }
41 |             if (node.value) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-once' directives require no attribute value.",
46 |                 })
47 |             }
48 |         },
49 |     })
50 | 
51 |     return {}
52 | }
53 | 
54 | //------------------------------------------------------------------------------
55 | // Rule Definition
56 | //------------------------------------------------------------------------------
57 | 
58 | module.exports = {
59 |     create,
60 |     meta: {
61 |         docs: {
62 |             description: "disallow invalid v-once directives.",
63 |             category: "Possible Errors",
64 |             recommended: true,
65 |         },
66 |         fixable: false,
67 |         schema: [],
68 |     },
69 | }
70 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-cloak.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-cloak.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='cloak']"(node) {
27 |             if (node.key.argument) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-cloak' directives require no argument.",
32 |                 })
33 |             }
34 |             if (node.key.modifiers.length > 0) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-cloak' directives require no modifier.",
39 |                 })
40 |             }
41 |             if (node.value) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-cloak' directives require no attribute value.",
46 |                 })
47 |             }
48 |         },
49 |     })
50 | 
51 |     return {}
52 | }
53 | 
54 | //------------------------------------------------------------------------------
55 | // Rule Definition
56 | //------------------------------------------------------------------------------
57 | 
58 | module.exports = {
59 |     create,
60 |     meta: {
61 |         docs: {
62 |             description: "disallow invalid v-cloak directives.",
63 |             category: "Possible Errors",
64 |             recommended: true,
65 |         },
66 |         fixable: false,
67 |         schema: [],
68 |     },
69 | }
70 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-html.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-html.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='html']"(node) {
27 |             if (node.key.argument) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-html' directives require no argument.",
32 |                 })
33 |             }
34 |             if (node.key.modifiers.length > 0) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-html' directives require no modifier.",
39 |                 })
40 |             }
41 |             if (!utils.hasAttributeValue(node)) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-html' directives require that attribute value.",
46 |                 })
47 |             }
48 |         },
49 |     })
50 | 
51 |     return {}
52 | }
53 | 
54 | //------------------------------------------------------------------------------
55 | // Rule Definition
56 | //------------------------------------------------------------------------------
57 | 
58 | module.exports = {
59 |     create,
60 |     meta: {
61 |         docs: {
62 |             description: "disallow invalid v-html directives.",
63 |             category: "Possible Errors",
64 |             recommended: true,
65 |         },
66 |         fixable: false,
67 |         schema: [],
68 |     },
69 | }
70 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-show.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-show.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='show']"(node) {
27 |             if (node.key.argument) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-show' directives require no argument.",
32 |                 })
33 |             }
34 |             if (node.key.modifiers.length > 0) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-show' directives require no modifier.",
39 |                 })
40 |             }
41 |             if (!utils.hasAttributeValue(node)) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-show' directives require that attribute value.",
46 |                 })
47 |             }
48 |         },
49 |     })
50 | 
51 |     return {}
52 | }
53 | 
54 | //------------------------------------------------------------------------------
55 | // Rule Definition
56 | //------------------------------------------------------------------------------
57 | 
58 | module.exports = {
59 |     create,
60 |     meta: {
61 |         docs: {
62 |             description: "disallow invalid v-show directives.",
63 |             category: "Possible Errors",
64 |             recommended: true,
65 |         },
66 |         fixable: false,
67 |         schema: [],
68 |     },
69 | }
70 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-text.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-text.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='text']"(node) {
27 |             if (node.key.argument) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-text' directives require no argument.",
32 |                 })
33 |             }
34 |             if (node.key.modifiers.length > 0) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-text' directives require no modifier.",
39 |                 })
40 |             }
41 |             if (!utils.hasAttributeValue(node)) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-text' directives require that attribute value.",
46 |                 })
47 |             }
48 |         },
49 |     })
50 | 
51 |     return {}
52 | }
53 | 
54 | //------------------------------------------------------------------------------
55 | // Rule Definition
56 | //------------------------------------------------------------------------------
57 | 
58 | module.exports = {
59 |     create,
60 |     meta: {
61 |         docs: {
62 |             description: "disallow invalid v-text directives.",
63 |             category: "Possible Errors",
64 |             recommended: true,
65 |         },
66 |         fixable: false,
67 |         schema: [],
68 |     },
69 | }
70 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-if.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-if")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-if", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div v-if=\"foo\"></div></div></template>",
33 |         },
34 |     ],
35 |     invalid: [
36 |         {
37 |             filename: "test.vue",
38 |             code: "<template><div><div v-if=\"foo\" v-else></div></div></template>",
39 |             errors: ["'v-if' and 'v-else' directives can't exist on the same element. You may want 'v-else-if' directives."],
40 |         },
41 |         {
42 |             filename: "test.vue",
43 |             code: "<template><div><div v-if=\"foo\" v-else-if=\"bar\"></div></div></template>",
44 |             errors: ["'v-if' and 'v-else-if' directives can't exist on the same element."],
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div><div v-if:aaa=\"foo\"></div></div></template>",
49 |             errors: ["'v-if' directives require no argument."],
50 |         },
51 |         {
52 |             filename: "test.vue",
53 |             code: "<template><div><div v-if.aaa=\"foo\"></div></div></template>",
54 |             errors: ["'v-if' directives require no modifier."],
55 |         },
56 |         {
57 |             filename: "test.vue",
58 |             code: "<template><div><div v-if></div></div></template>",
59 |             errors: ["'v-if' directives require that attribute value."],
60 |         },
61 |     ],
62 | })
63 | 


--------------------------------------------------------------------------------
/lib/rules/html-end-tags.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for html-end-tags.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         VElement(node) {
27 |             const name = node.startTag.id.name
28 |             const isVoid = utils.isVoidElementName(name)
29 |             const hasEndTag = node.endTag != null
30 | 
31 |             if (isVoid && hasEndTag) {
32 |                 context.report({
33 |                     node: node.endTag,
34 |                     loc: node.endTag.loc,
35 |                     message: "'<{{name}}>' should not have end tag.",
36 |                     data: {name},
37 |                     fix: (fixer) => fixer.remove(node.endTag),
38 |                 })
39 |             }
40 |             if (!isVoid && !hasEndTag) {
41 |                 context.report({
42 |                     node: node.startTag,
43 |                     loc: node.startTag.loc,
44 |                     message: "'<{{name}}>' should have end tag.",
45 |                     data: {name},
46 |                     fix: (fixer) => fixer.insertTextAfter(node, `</${name}>`),
47 |                 })
48 |             }
49 |         },
50 |     })
51 | 
52 |     return {}
53 | }
54 | 
55 | //------------------------------------------------------------------------------
56 | // Rule Definition
57 | //------------------------------------------------------------------------------
58 | 
59 | module.exports = {
60 |     create,
61 |     meta: {
62 |         docs: {
63 |             description: "enforce end tag style.",
64 |             category: "Best Practices",
65 |             recommended: true,
66 |         },
67 |         fixable: "code",
68 |         schema: [],
69 |     },
70 | }
71 | 


--------------------------------------------------------------------------------
/lib/rules/no-confusing-v-for-v-if.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Check whether the given `v-if` node is using the variable which is defined by the `v-for` directive.
20 |  * @param {ASTNode} vIf The `v-if` attribute node to check.
21 |  * @returns {boolean} `true` if the `v-if` is using the variable which is defined by the `v-for` directive.
22 |  */
23 | function isUsingIterationVar(vIf) {
24 |     const element = vIf.parent.parent
25 |     return vIf.value.references.some(reference =>
26 |         element.variables.some(variable =>
27 |             variable.id.name === reference.id.name &&
28 |             variable.kind === "v-for"
29 |         )
30 |     )
31 | }
32 | 
33 | /**
34 |  * Creates AST event handlers for no-confusing-v-for-v-if.
35 |  *
36 |  * @param {RuleContext} context - The rule context.
37 |  * @returns {object} AST event handlers.
38 |  */
39 | function create(context) {
40 |     utils.registerTemplateBodyVisitor(context, {
41 |         "VAttribute[directive=true][key.name='if']"(node) {
42 |             if (utils.hasDirective(node.parent, "for") && !isUsingIterationVar(node)) {
43 |                 context.report({
44 |                     node,
45 |                     loc: node.loc,
46 |                     message: "This 'v-if' should be moved to the wrapper element.",
47 |                 })
48 |             }
49 |         },
50 |     })
51 | 
52 |     return {}
53 | }
54 | 
55 | //------------------------------------------------------------------------------
56 | // Rule Definition
57 | //------------------------------------------------------------------------------
58 | 
59 | module.exports = {
60 |     create,
61 |     meta: {
62 |         docs: {
63 |             description: "disallow confusing `v-for` and `v-if` on the same element.",
64 |             category: "Best Practices",
65 |             recommended: true,
66 |         },
67 |         fixable: false,
68 |         schema: [],
69 |     },
70 | }
71 | 


--------------------------------------------------------------------------------
/lib/rules/no-duplicate-attributes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Get the name of the given attribute node.
20 |  * @param {ASTNode} attribute The attribute node to get.
21 |  * @returns {string} The name of the attribute.
22 |  */
23 | function getName(attribute) {
24 |     if (!attribute.directive) {
25 |         return attribute.key.name
26 |     }
27 |     if (attribute.key.name === "bind") {
28 |         return attribute.key.argument || null
29 |     }
30 |     return null
31 | }
32 | 
33 | /**
34 |  * Creates AST event handlers for no-duplicate-attributes.
35 |  *
36 |  * @param {RuleContext} context - The rule context.
37 |  * @returns {object} AST event handlers.
38 |  */
39 | function create(context) {
40 |     const names = new Set()
41 | 
42 |     utils.registerTemplateBodyVisitor(context, {
43 |         "VStartTag"() {
44 |             names.clear()
45 |         },
46 |         "VAttribute"(node) {
47 |             const name = getName(node)
48 |             if (name == null) {
49 |                 return
50 |             }
51 | 
52 |             if (names.has(name)) {
53 |                 context.report({
54 |                     node,
55 |                     loc: node.loc,
56 |                     message: "Duplicate attribute '{{name}}'.",
57 |                     data: {name},
58 |                 })
59 |             }
60 |             names.add(name)
61 |         },
62 |     })
63 | 
64 |     return {}
65 | }
66 | 
67 | //------------------------------------------------------------------------------
68 | // Rule Definition
69 | //------------------------------------------------------------------------------
70 | 
71 | module.exports = {
72 |     create,
73 |     meta: {
74 |         docs: {
75 |             description: "disallow duplicate arguments.",
76 |             category: "Best Practices",
77 |             recommended: true,
78 |         },
79 |         fixable: false,
80 |         schema: [],
81 |     },
82 | }
83 | 


--------------------------------------------------------------------------------
/tests/lib/rules/v-on-style.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/v-on-style")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("v-on-style", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-on=\"foo\"></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div @foo=\"foo\"></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div @foo=\"foo\"></div></template>",
41 |             options: ["shorthand"],
42 |         },
43 |         {
44 |             filename: "test.vue",
45 |             code: "<template><div v-on:foo=\"foo\"></div></template>",
46 |             options: ["longform"],
47 |         },
48 |     ],
49 |     invalid: [
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div v-on:foo=\"foo\"></div></template>",
53 |             output: "<template><div @foo=\"foo\"></div></template>",
54 |             errors: ["Expected '@' instead of 'v-on:'."],
55 |         },
56 |         {
57 |             filename: "test.vue",
58 |             options: ["shorthand"],
59 |             code: "<template><div v-on:foo=\"foo\"></div></template>",
60 |             output: "<template><div @foo=\"foo\"></div></template>",
61 |             errors: ["Expected '@' instead of 'v-on:'."],
62 |         },
63 |         {
64 |             filename: "test.vue",
65 |             options: ["longform"],
66 |             code: "<template><div @foo=\"foo\"></div></template>",
67 |             output: "<template><div v-on:foo=\"foo\"></div></template>",
68 |             errors: ["Expected 'v-on:' instead of '@'."],
69 |         },
70 |     ],
71 | })
72 | 


--------------------------------------------------------------------------------
/tests/lib/rules/v-bind-style.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/v-bind-style")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("v-bind-style", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-bind=\"foo\"></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div :foo=\"foo\"></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div :foo=\"foo\"></div></template>",
41 |             options: ["shorthand"],
42 |         },
43 |         {
44 |             filename: "test.vue",
45 |             code: "<template><div v-bind:foo=\"foo\"></div></template>",
46 |             options: ["longform"],
47 |         },
48 |     ],
49 |     invalid: [
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div v-bind:foo=\"foo\"></div></template>",
53 |             output: "<template><div :foo=\"foo\"></div></template>",
54 |             errors: ["Unexpected 'v-bind' before ':'."],
55 |         },
56 |         {
57 |             filename: "test.vue",
58 |             options: ["shorthand"],
59 |             code: "<template><div v-bind:foo=\"foo\"></div></template>",
60 |             output: "<template><div :foo=\"foo\"></div></template>",
61 |             errors: ["Unexpected 'v-bind' before ':'."],
62 |         },
63 |         {
64 |             filename: "test.vue",
65 |             options: ["longform"],
66 |             code: "<template><div :foo=\"foo\"></div></template>",
67 |             output: "<template><div v-bind:foo=\"foo\"></div></template>",
68 |             errors: ["Expected 'v-bind' before ':'."],
69 |         },
70 |     ],
71 | })
72 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-on.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | const VALID_MODIFIERS = new Set([
19 |     "stop", "prevent", "capture", "self", "ctrl", "shift", "alt", "meta",
20 |     "native", "once", "left", "right", "middle", "passive", "esc", "tab",
21 |     "enter", "space", "up", "left", "right", "down", "delete",
22 | ])
23 | 
24 | /**
25 |  * Creates AST event handlers for no-invalid-v-on.
26 |  *
27 |  * @param {RuleContext} context - The rule context.
28 |  * @returns {object} AST event handlers.
29 |  */
30 | function create(context) {
31 |     utils.registerTemplateBodyVisitor(context, {
32 |         "VAttribute[directive=true][key.name='on']"(node) {
33 |             if (!node.key.argument) {
34 |                 context.report({
35 |                     node,
36 |                     loc: node.loc,
37 |                     message: "'v-on' directives require event names.",
38 |                 })
39 |             }
40 |             for (const modifier of node.key.modifiers) {
41 |                 if (!VALID_MODIFIERS.has(modifier) && !Number.isInteger(parseInt(modifier, 10))) {
42 |                     context.report({
43 |                         node,
44 |                         loc: node.loc,
45 |                         message: "'v-on' directives don't support the modifier '{{modifier}}'.",
46 |                         data: {modifier},
47 |                     })
48 |                 }
49 |             }
50 |             if (!utils.hasAttributeValue(node)) {
51 |                 context.report({
52 |                     node,
53 |                     loc: node.loc,
54 |                     message: "'v-on' directives require that attribute value.",
55 |                 })
56 |             }
57 |         },
58 |     })
59 | 
60 |     return {}
61 | }
62 | 
63 | //------------------------------------------------------------------------------
64 | // Rule Definition
65 | //------------------------------------------------------------------------------
66 | 
67 | module.exports = {
68 |     create,
69 |     meta: {
70 |         docs: {
71 |             description: "disallow invalid v-on directives.",
72 |             category: "Possible Errors",
73 |             recommended: true,
74 |         },
75 |         fixable: false,
76 |         schema: [],
77 |     },
78 | }
79 | 


--------------------------------------------------------------------------------
/tests/lib/rules/html-end-tags.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/html-end-tags")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("html-end-tags", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div></div></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><p></p></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div><br></div></template>",
41 |         },
42 |         {
43 |             filename: "test.vue",
44 |             code: "<template><div><input></div></template>",
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div><img></div></template>",
49 |         },
50 |     ],
51 |     invalid: [
52 |         // {
53 |         //     filename: "test.vue",
54 |         //     code: "<template><div><hr></hr></div></template>",
55 |         //     errors: ["'<hr>' should not have end tag."],
56 |         // },
57 |         // {
58 |         //     filename: "test.vue",
59 |         //     code: "<template><div><img></img></div></template>",
60 |         //     errors: ["'<img>' should not have end tag."],
61 |         // },
62 |         // {
63 |         //     filename: "test.vue",
64 |         //     code: "<template><div><input></input></div></template>",
65 |         //     errors: ["'<input>' should not have end tag."],
66 |         // },
67 |         {
68 |             filename: "test.vue",
69 |             code: "<template><div><div></div></template>",
70 |             output: "<template><div><div></div></div></template>",
71 |             errors: ["'<div>' should have end tag."],
72 |         },
73 |         {
74 |             filename: "test.vue",
75 |             code: "<template><div><p></div></template>",
76 |             output: "<template><div><p></p></div></template>",
77 |             errors: ["'<p>' should have end tag."],
78 |         },
79 |     ],
80 | })
81 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-if.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-if.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='if']"(node) {
27 |             if (utils.hasDirective(node.parent, "else")) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-if' and 'v-else' directives can't exist on the same element. You may want 'v-else-if' directives.",
32 |                 })
33 |             }
34 |             if (utils.hasDirective(node.parent, "else-if")) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-if' and 'v-else-if' directives can't exist on the same element.",
39 |                 })
40 |             }
41 |             if (node.key.argument) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-if' directives require no argument.",
46 |                 })
47 |             }
48 |             if (node.key.modifiers.length > 0) {
49 |                 context.report({
50 |                     node,
51 |                     loc: node.loc,
52 |                     message: "'v-if' directives require no modifier.",
53 |                 })
54 |             }
55 |             if (!utils.hasAttributeValue(node)) {
56 |                 context.report({
57 |                     node,
58 |                     loc: node.loc,
59 |                     message: "'v-if' directives require that attribute value.",
60 |                 })
61 |             }
62 |         },
63 |     })
64 | 
65 |     return {}
66 | }
67 | 
68 | //------------------------------------------------------------------------------
69 | // Rule Definition
70 | //------------------------------------------------------------------------------
71 | 
72 | module.exports = {
73 |     create,
74 |     meta: {
75 |         docs: {
76 |             description: "disallow invalid v-if directives.",
77 |             category: "Possible Errors",
78 |             recommended: true,
79 |         },
80 |         fixable: false,
81 |         schema: [],
82 |     },
83 | }
84 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-parsing-error.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-parsing-error")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-parsing-error", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template>a b c</template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template>{{a + b + c}}</template>",
37 |         },
38 |     ],
39 |     invalid: [
40 |         {
41 |             filename: "test.vue",
42 |             code: "<template>{{a b c}}</template>",
43 |             errors: ["Parsing error: Unexpected token b."],
44 |         },
45 |         {
46 |             filename: "test.vue",
47 |             code: "<template><div>{{a b c}}</div></template>",
48 |             errors: ["Parsing error: Unexpected token b."],
49 |         },
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div v-show=\"a b c\">hello</div></template>",
53 |             errors: ["Parsing error: Unexpected token b."],
54 |         },
55 |         {
56 |             filename: "test.vue",
57 |             code: "<template><div v-show=\"a;b;\">hello</div></template>",
58 |             errors: ["Parsing error: Unexpected token ;."],
59 |         },
60 |         {
61 |             filename: "test.vue",
62 |             code: "<template><div>{{ }}</div></template>",
63 |             errors: ["Parsing error: Expected an expression but got no code."],
64 |         },
65 |         {
66 |             filename: "test.vue",
67 |             code: "<template><div v-show=\"\">hello</div></template>",
68 |             errors: ["Parsing error: Expected an expression but got no code."],
69 |         },
70 |         {
71 |             filename: "test.vue",
72 |             code: "<template><div v-show=>hello</div></template>",
73 |             errors: ["Parsing error: Expected an expression but got no code."],
74 |         },
75 |         {
76 |             filename: "test.vue",
77 |             code: "<template><div v-for=\"foo\">hello</div></template>",
78 |             errors: ["Parsing error: Unexpected token )."],
79 |         },
80 |         {
81 |             filename: "test.vue",
82 |             code: "<template><div v-for=\"foo() in list\">hello</div></template>",
83 |             errors: ["Parsing error: Assigning to rvalue."],
84 |         },
85 |     ],
86 | })
87 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-bind.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-bind")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-bind", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div v-bind:aaa=\"bbb\"></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div v-bind:aaa='bbb'></div></template>",
37 |         },
38 |         {
39 |             filename: "test.vue",
40 |             code: "<template><div v-bind:aaa=bbb></div></template>",
41 |         },
42 |         {
43 |             filename: "test.vue",
44 |             code: "<template><div v-bind=\"bbb\"></div></template>",
45 |         },
46 |         {
47 |             filename: "test.vue",
48 |             code: "<template><div v-bind:aaa.prop='bbb'></div></template>",
49 |         },
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div v-bind:aaa.camel='bbb'></div></template>",
53 |         },
54 |         {
55 |             filename: "test.vue",
56 |             code: "<template><div :aaa=\"bbb\"></div></template>",
57 |         },
58 |         {
59 |             filename: "test.vue",
60 |             code: "<template><div :aaa='bbb'></div></template>",
61 |         },
62 |         {
63 |             filename: "test.vue",
64 |             code: "<template><div :aaa=bbb></div></template>",
65 |         },
66 |         {
67 |             filename: "test.vue",
68 |             code: "<template><div :aaa.prop='bbb'></div></template>",
69 |         },
70 |         {
71 |             filename: "test.vue",
72 |             code: "<template><div :aaa.camel='bbb'></div></template>",
73 |         },
74 |     ],
75 |     invalid: [
76 |         {
77 |             filename: "test.vue",
78 |             code: "<template><div v-bind></div></template>",
79 |             errors: ["'v-bind' directives require an attribute value."],
80 |         },
81 |         {
82 |             filename: "test.vue",
83 |             code: "<template><div v-bind:aaa></div></template>",
84 |             errors: ["'v-bind' directives require an attribute value."],
85 |         },
86 |         {
87 |             filename: "test.vue",
88 |             code: "<template><div :aaa.unknown='bbb'></div></template>",
89 |             errors: ["'v-bind' directives don't support the modifier 'unknown'."],
90 |         },
91 |     ],
92 | })
93 | 


--------------------------------------------------------------------------------
/tools/update-rules.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const fs = require("fs")
13 | const path = require("path")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Main
17 | //------------------------------------------------------------------------------
18 | 
19 | const ROOT = path.resolve(__dirname, "../lib/rules")
20 | const README = path.resolve(__dirname, "../README.md")
21 | const RULES_JS = path.resolve(__dirname, "../lib/rules.js")
22 | const RECOMMENDED_JSON = path.resolve(__dirname, "../lib/recommended.json")
23 | const STAR = "⭐️"
24 | const PEN = "✒️"
25 | const CATEGORIES = ["Possible Errors", "Best Practices", "Stylistic Issues"]
26 | const TABLE_PLACE_HOLDER = /<!--RULES_TABLE_START-->[\s\S]*<!--RULES_TABLE_END-->/
27 | 
28 | const ruleNames = fs.readdirSync(ROOT)
29 |     .filter(file => path.extname(file) === ".js")
30 |     .map(file => path.basename(file, ".js"))
31 | 
32 | const rules = new Map(
33 |     ruleNames.map(name => [
34 |         name,
35 |         require(path.join(ROOT, name)),
36 |     ])
37 | )
38 | 
39 | const RULE_TABLE = CATEGORIES.map(category => `### ${category}
40 | 
41 | |    | Rule ID | Description |
42 | |:---|:--------|:------------|
43 | ${
44 |     Array.from(rules.entries())
45 |         .filter(entry => entry[1].meta.docs.category === category)
46 |         .map(entry => {
47 |             const name = entry[0]
48 |             const meta = entry[1].meta
49 |             const mark = `${meta.docs.recommended ? STAR : ""}${meta.fixable ? PEN : ""}`
50 |             const link = `[${name}](./docs/rules/${name}.md)`
51 |             const description = meta.docs.description || "(no description)"
52 |             return `| ${mark} | ${link} | ${description} |`
53 |         })
54 |         .join("\n")
55 | }
56 | `).join("\n")
57 | 
58 | const RULES_JS_CONTENT = `/**
59 |  * @author Toru Nagashima
60 |  * @copyright 2017 Toru Nagashima. All rights reserved.
61 |  * See LICENSE file in root directory for full license.
62 |  */
63 | "use strict"
64 | 
65 | module.exports = {
66 | ${ruleNames.map(name => `    "${name}": require("./rules/${name}"),`).join("\n")}
67 | }
68 | `
69 | 
70 | const recommendedConf = {
71 |     parser: "vue-eslint-parser",
72 |     env: {es6: true},
73 |     rules: Array.from(rules.entries())
74 |         .reduce((obj, entry) => {
75 |             const name = entry[0]
76 |             const recommended = entry[1].meta.docs.recommended
77 |             obj[`@mysticatea/vue/${name}`] = recommended ? "error" : "off"
78 |             return obj
79 |         }, {}),
80 | }
81 | 
82 | fs.writeFileSync(
83 |     README,
84 |     fs.readFileSync(README, "utf8").replace(
85 |         TABLE_PLACE_HOLDER,
86 |         `<!--RULES_TABLE_START-->\n${RULE_TABLE}\n<!--RULES_TABLE_END-->`
87 |     )
88 | )
89 | fs.writeFileSync(
90 |     RULES_JS,
91 |     RULES_JS_CONTENT
92 | )
93 | fs.writeFileSync(
94 |     RECOMMENDED_JSON,
95 |     JSON.stringify(recommendedConf, null, 4)
96 | )
97 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-else-if.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-else-if.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='else-if']"(node) {
27 |             if (!utils.prevElementHasIf(node.parent.parent)) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive.",
32 |                 })
33 |             }
34 |             if (utils.hasDirective(node.parent, "if")) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-else-if' and 'v-if' directives can't exist on the same element.",
39 |                 })
40 |             }
41 |             if (utils.hasDirective(node.parent, "else")) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-else-if' and 'v-else' directives can't exist on the same element.",
46 |                 })
47 |             }
48 |             if (node.key.argument) {
49 |                 context.report({
50 |                     node,
51 |                     loc: node.loc,
52 |                     message: "'v-else-if' directives require no argument.",
53 |                 })
54 |             }
55 |             if (node.key.modifiers.length > 0) {
56 |                 context.report({
57 |                     node,
58 |                     loc: node.loc,
59 |                     message: "'v-else-if' directives require no modifier.",
60 |                 })
61 |             }
62 |             if (!utils.hasAttributeValue(node)) {
63 |                 context.report({
64 |                     node,
65 |                     loc: node.loc,
66 |                     message: "'v-else-if' directives require that attribute value.",
67 |                 })
68 |             }
69 |         },
70 |     })
71 | 
72 |     return {}
73 | }
74 | 
75 | //------------------------------------------------------------------------------
76 | // Rule Definition
77 | //------------------------------------------------------------------------------
78 | 
79 | module.exports = {
80 |     create,
81 |     meta: {
82 |         docs: {
83 |             description: "disallow invalid v-else-if directives.",
84 |             category: "Possible Errors",
85 |             recommended: true,
86 |         },
87 |         fixable: false,
88 |         schema: [],
89 |     },
90 | }
91 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-else.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const utils = require("../utils")
13 | 
14 | //------------------------------------------------------------------------------
15 | // Helpers
16 | //------------------------------------------------------------------------------
17 | 
18 | /**
19 |  * Creates AST event handlers for no-invalid-v-else.
20 |  *
21 |  * @param {RuleContext} context - The rule context.
22 |  * @returns {object} AST event handlers.
23 |  */
24 | function create(context) {
25 |     utils.registerTemplateBodyVisitor(context, {
26 |         "VAttribute[directive=true][key.name='else']"(node) {
27 |             if (!utils.prevElementHasIf(node.parent.parent)) {
28 |                 context.report({
29 |                     node,
30 |                     loc: node.loc,
31 |                     message: "'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive.",
32 |                 })
33 |             }
34 |             if (utils.hasDirective(node.parent, "if")) {
35 |                 context.report({
36 |                     node,
37 |                     loc: node.loc,
38 |                     message: "'v-else' and 'v-if' directives can't exist on the same element. You may want 'v-else-if' directives.",
39 |                 })
40 |             }
41 |             if (utils.hasDirective(node.parent, "else-if")) {
42 |                 context.report({
43 |                     node,
44 |                     loc: node.loc,
45 |                     message: "'v-else' and 'v-else-if' directives can't exist on the same element.",
46 |                 })
47 |             }
48 |             if (node.key.argument) {
49 |                 context.report({
50 |                     node,
51 |                     loc: node.loc,
52 |                     message: "'v-else' directives require no argument.",
53 |                 })
54 |             }
55 |             if (node.key.modifiers.length > 0) {
56 |                 context.report({
57 |                     node,
58 |                     loc: node.loc,
59 |                     message: "'v-else' directives require no modifier.",
60 |                 })
61 |             }
62 |             if (utils.hasAttributeValue(node)) {
63 |                 context.report({
64 |                     node,
65 |                     loc: node.loc,
66 |                     message: "'v-else' directives require no attribute value.",
67 |                 })
68 |             }
69 |         },
70 |     })
71 | 
72 |     return {}
73 | }
74 | 
75 | //------------------------------------------------------------------------------
76 | // Rule Definition
77 | //------------------------------------------------------------------------------
78 | 
79 | module.exports = {
80 |     create,
81 |     meta: {
82 |         docs: {
83 |             description: "disallow invalid v-else directives.",
84 |             category: "Possible Errors",
85 |             recommended: true,
86 |         },
87 |         fixable: false,
88 |         schema: [],
89 |     },
90 | }
91 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-else.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-else")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-else", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div v-if=\"foo\"></div><div v-else></div></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if=\"foo\"></div><div v-else></div></div></template>",
37 |         },
38 |     ],
39 |     invalid: [
40 |         {
41 |             filename: "test.vue",
42 |             code: "<template v-else><div></div></template>",
43 |             errors: ["'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."],
44 |         },
45 |         {
46 |             filename: "test.vue",
47 |             code: "<template><div v-else></div></template>",
48 |             errors: ["'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."],
49 |         },
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div><div v-else></div></div></template>",
53 |             errors: ["'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."],
54 |         },
55 |         {
56 |             filename: "test.vue",
57 |             code: "<template><div><div></div><div v-else></div></div></template>",
58 |             errors: ["'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."],
59 |         },
60 |         {
61 |             filename: "test.vue",
62 |             code: "<template><div><div if=\"foo\"></div><div v-else></div></div></template>",
63 |             errors: ["'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."],
64 |         },
65 |         {
66 |             filename: "test.vue",
67 |             code: "<template><div><div v-if=\"foo\"></div><div></div><div v-else></div></div></template>",
68 |             errors: ["'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."],
69 |         },
70 |         {
71 |             filename: "test.vue",
72 |             code: "<template><div><div v-if=\"foo\"></div><div v-else v-if=\"bar\"></div></div></template>",
73 |             errors: ["'v-else' and 'v-if' directives can't exist on the same element. You may want 'v-else-if' directives."],
74 |         },
75 |         {
76 |             filename: "test.vue",
77 |             code: "<template><div><div v-if=\"foo\"></div><div v-else v-else-if=\"foo\"></div></div></template>",
78 |             errors: ["'v-else' and 'v-else-if' directives can't exist on the same element."],
79 |         },
80 |         {
81 |             filename: "test.vue",
82 |             code: "<template><div><div v-if=\"foo\"></div><div v-else:aaa></div></div></template>",
83 |             errors: ["'v-else' directives require no argument."],
84 |         },
85 |         {
86 |             filename: "test.vue",
87 |             code: "<template><div><div v-if=\"foo\"></div><div v-else.aaa></div></div></template>",
88 |             errors: ["'v-else' directives require no modifier."],
89 |         },
90 |         {
91 |             filename: "test.vue",
92 |             code: "<template><div><div v-if=\"foo\"></div><div v-else=\"foo\"></div></div></template>",
93 |             errors: ["'v-else' directives require no attribute value."],
94 |         },
95 |     ],
96 | })
97 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-template-root.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const RuleTester = require("eslint").RuleTester
 13 | const rule = require("../../../lib/rules/no-invalid-template-root")
 14 | 
 15 | //------------------------------------------------------------------------------
 16 | // Tests
 17 | //------------------------------------------------------------------------------
 18 | 
 19 | const tester = new RuleTester({
 20 |     parser: "vue-eslint-parser",
 21 |     parserOptions: {ecmaVersion: 2015},
 22 | })
 23 | 
 24 | tester.run("no-invalid-template-root", rule, {
 25 |     valid: [
 26 |         {
 27 |             filename: "test.vue",
 28 |             code: "",
 29 |         },
 30 |         {
 31 |             filename: "test.vue",
 32 |             code: "<template><div>abc</div></template>",
 33 |         },
 34 |         {
 35 |             filename: "test.vue",
 36 |             code: "<template>\n    <div>abc</div>\n</template>",
 37 |         },
 38 |         {
 39 |             filename: "test.vue",
 40 |             code: "<template>\n    <!-- comment -->\n    <div>abc</div>\n</template>",
 41 |         },
 42 |         {
 43 |             filename: "test.vue",
 44 |             code: "<template>\n    <!-- comment -->\n    <div v-if=\"foo\">abc</div>\n    <div v-else>abc</div>\n</template>",
 45 |         },
 46 |         {
 47 |             filename: "test.vue",
 48 |             code: "<template>\n    <!-- comment -->\n    <div v-if=\"foo\">abc</div>\n    <div v-else-if=\"bar\">abc</div>\n    <div v-else>abc</div>\n</template>",
 49 |         },
 50 |     ],
 51 |     invalid: [
 52 |         {
 53 |             filename: "test.vue",
 54 |             code: "<template>\n</template>",
 55 |             errors: ["The template root requires exactly one element."],
 56 |         },
 57 |         {
 58 |             filename: "test.vue",
 59 |             code: "<template><div></div><div></div></template>",
 60 |             errors: ["The template root requires exactly one element."],
 61 |         },
 62 |         {
 63 |             filename: "test.vue",
 64 |             code: "<template>\n    <div></div>\n    <div></div>\n</template>",
 65 |             errors: ["The template root requires exactly one element."],
 66 |         },
 67 |         {
 68 |             filename: "test.vue",
 69 |             code: "<template>{{a b c}}</template>",
 70 |             errors: ["The template root requires an element rather than texts."],
 71 |         },
 72 |         {
 73 |             filename: "test.vue",
 74 |             code: "<template><div></div>aaaaaa</template>",
 75 |             errors: ["The template root requires an element rather than texts."],
 76 |         },
 77 |         {
 78 |             filename: "test.vue",
 79 |             code: "<template>aaaaaa<div></div></template>",
 80 |             errors: ["The template root requires an element rather than texts."],
 81 |         },
 82 |         {
 83 |             filename: "test.vue",
 84 |             code: "<template><div v-for=\"x in list\"></div></template>",
 85 |             errors: ["The template root disallows 'v-for' directives."],
 86 |         },
 87 |         {
 88 |             filename: "test.vue",
 89 |             code: "<template><div v-if=\"foo\"></div></template>",
 90 |             errors: ["The template root requires the next element which has 'v-else' directives if it has 'v-if' directives."],
 91 |         },
 92 |         {
 93 |             filename: "test.vue",
 94 |             code: "<template><div v-if=\"foo\"></div><div v-else-if=\"bar\"></div></template>",
 95 |             errors: ["The template root requires the next element which has 'v-else' directives if it has 'v-if' directives."],
 96 |         },
 97 |         {
 98 |             filename: "test.vue",
 99 |             code: "<template><slot></slot></template>",
100 |             errors: ["The template root disallows '<slot>' elements."],
101 |         },
102 |         {
103 |             filename: "test.vue",
104 |             code: "<template><template></template></template>",
105 |             errors: ["The template root disallows '<template>' elements."],
106 |         },
107 |     ],
108 | })
109 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-else-if.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Toru Nagashima
 3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
 4 |  * See LICENSE file in root directory for full license.
 5 |  */
 6 | "use strict"
 7 | 
 8 | //------------------------------------------------------------------------------
 9 | // Requirements
10 | //------------------------------------------------------------------------------
11 | 
12 | const RuleTester = require("eslint").RuleTester
13 | const rule = require("../../../lib/rules/no-invalid-v-else-if")
14 | 
15 | //------------------------------------------------------------------------------
16 | // Tests
17 | //------------------------------------------------------------------------------
18 | 
19 | const tester = new RuleTester({
20 |     parser: "vue-eslint-parser",
21 |     parserOptions: {ecmaVersion: 2015},
22 | })
23 | 
24 | tester.run("no-invalid-v-else-if", rule, {
25 |     valid: [
26 |         {
27 |             filename: "test.vue",
28 |             code: "",
29 |         },
30 |         {
31 |             filename: "test.vue",
32 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if=\"foo\"></div></div></template>",
33 |         },
34 |         {
35 |             filename: "test.vue",
36 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if=\"foo\"></div><div v-else-if=\"foo\"></div></div></template>",
37 |         },
38 |     ],
39 |     invalid: [
40 |         {
41 |             filename: "test.vue",
42 |             code: "<template v-else-if=\"foo\"><div></div></template>",
43 |             errors: ["'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."],
44 |         },
45 |         {
46 |             filename: "test.vue",
47 |             code: "<template><div v-else-if=\"foo\"></div></template>",
48 |             errors: ["'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."],
49 |         },
50 |         {
51 |             filename: "test.vue",
52 |             code: "<template><div><div v-else-if=\"foo\"></div></div></template>",
53 |             errors: ["'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."],
54 |         },
55 |         {
56 |             filename: "test.vue",
57 |             code: "<template><div><div></div><div v-else-if=\"foo\"></div></div></template>",
58 |             errors: ["'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."],
59 |         },
60 |         {
61 |             filename: "test.vue",
62 |             code: "<template><div><div if=\"foo\"></div><div v-else-if=\"foo\"></div></div></template>",
63 |             errors: ["'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."],
64 |         },
65 |         {
66 |             filename: "test.vue",
67 |             code: "<template><div><div v-if=\"foo\"></div><div></div><div v-else-if=\"foo\"></div></div></template>",
68 |             errors: ["'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."],
69 |         },
70 |         {
71 |             filename: "test.vue",
72 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if=\"foo\" v-if=\"bar\"></div></div></template>",
73 |             errors: ["'v-else-if' and 'v-if' directives can't exist on the same element."],
74 |         },
75 |         {
76 |             filename: "test.vue",
77 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if=\"foo\" v-else></div></div></template>",
78 |             errors: ["'v-else-if' and 'v-else' directives can't exist on the same element."],
79 |         },
80 |         {
81 |             filename: "test.vue",
82 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if:aaa=\"foo\"></div></div></template>",
83 |             errors: ["'v-else-if' directives require no argument."],
84 |         },
85 |         {
86 |             filename: "test.vue",
87 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if.aaa=\"foo\"></div></div></template>",
88 |             errors: ["'v-else-if' directives require no modifier."],
89 |         },
90 |         {
91 |             filename: "test.vue",
92 |             code: "<template><div><div v-if=\"foo\"></div><div v-else-if></div></div></template>",
93 |             errors: ["'v-else-if' directives require that attribute value."],
94 |         },
95 |     ],
96 | })
97 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-model.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const RuleTester = require("eslint").RuleTester
 13 | const rule = require("../../../lib/rules/no-invalid-v-model")
 14 | 
 15 | //------------------------------------------------------------------------------
 16 | // Tests
 17 | //------------------------------------------------------------------------------
 18 | 
 19 | const tester = new RuleTester({
 20 |     parser: "vue-eslint-parser",
 21 |     parserOptions: {ecmaVersion: 2015},
 22 | })
 23 | 
 24 | tester.run("no-invalid-v-model", rule, {
 25 |     valid: [
 26 |         {
 27 |             filename: "test.vue",
 28 |             code: "",
 29 |         },
 30 |         {
 31 |             filename: "test.vue",
 32 |             code: "<template><input v-model=\"foo\"></template>",
 33 |         },
 34 |         {
 35 |             filename: "test.vue",
 36 |             code: "<template><input type=\"text\" v-model.lazy=\"foo\"></template>",
 37 |         },
 38 |         {
 39 |             filename: "test.vue",
 40 |             code: "<template><input type=\"number\" v-model.number=\"foo\"></template>",
 41 |         },
 42 |         {
 43 |             filename: "test.vue",
 44 |             code: "<template><input type=\"password\" v-model.trim=\"foo\"></template>",
 45 |         },
 46 |         {
 47 |             filename: "test.vue",
 48 |             code: "<template><input type=\"checkbox\" v-model=\"foo.bar\"></template>",
 49 |         },
 50 |         {
 51 |             filename: "test.vue",
 52 |             code: "<template><input type=\"radio\" v-model=\"foo\"></template>",
 53 |         },
 54 |         {
 55 |             filename: "test.vue",
 56 |             code: "<template><textarea v-model=\"foo\"></textarea></template>",
 57 |         },
 58 |         {
 59 |             filename: "test.vue",
 60 |             code: "<template><select v-model=\"foo\"></select></template>",
 61 |         },
 62 |         {
 63 |             filename: "test.vue",
 64 |             code: "<template><your-component v-model=\"foo\"></your-component></template>",
 65 |         },
 66 |         {
 67 |             filename: "test.vue",
 68 |             code: "<template><div><div v-for=\"x in list\"><input v-model=\"x.foo\"></div></div></template>",
 69 |         },
 70 |     ],
 71 |     invalid: [
 72 |         {
 73 |             filename: "test.vue",
 74 |             code: "<template><div v-model=\"foo\"></div></template>",
 75 |             errors: ["'v-model' directives aren't supported on <div> elements."],
 76 |         },
 77 |         {
 78 |             filename: "test.vue",
 79 |             code: "<template><input v-model:aaa=\"foo\"></template>",
 80 |             errors: ["'v-model' directives require no argument."],
 81 |         },
 82 |         {
 83 |             filename: "test.vue",
 84 |             code: "<template><input v-model.aaa=\"foo\"></template>",
 85 |             errors: ["'v-model' directives don't support the modifier 'aaa'."],
 86 |         },
 87 |         {
 88 |             filename: "test.vue",
 89 |             code: "<template><input v-model></template>",
 90 |             errors: ["'v-model' directives require that attribute value."],
 91 |         },
 92 |         {
 93 |             filename: "test.vue",
 94 |             code: "<template><input v-model=\"a + b\"></template>",
 95 |             errors: ["'v-model' directives require the attribute value which is valid as LHS."],
 96 |         },
 97 |         {
 98 |             filename: "test.vue",
 99 |             code: "<template><input :type=\"a\" v-model=\"b\"></template>",
100 |             errors: ["'v-model' directives don't support dynamic input types."],
101 |         },
102 |         {
103 |             filename: "test.vue",
104 |             code: "<template><input v-bind:type=\"a\" v-model=\"b\"></template>",
105 |             errors: ["'v-model' directives don't support dynamic input types."],
106 |         },
107 |         {
108 |             filename: "test.vue",
109 |             code: "<template><input type=\"file\" v-model=\"b\"></template>",
110 |             errors: ["'v-model' directives don't support 'file' input type."],
111 |         },
112 |         {
113 |             filename: "test.vue",
114 |             code: "<template><div><div v-for=\"x in list\"><input v-model=\"x\"></div></div></template>",
115 |             errors: ["'v-model' directives cannot update the iteration variable 'x' itself."],
116 |         },
117 |     ],
118 | })
119 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-template-root.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const utils = require("../utils")
 13 | 
 14 | //------------------------------------------------------------------------------
 15 | // Helpers
 16 | //------------------------------------------------------------------------------
 17 | 
 18 | /**
 19 |  * Creates AST event handlers for no-invalid-template-root.
 20 |  *
 21 |  * @param {RuleContext} context - The rule context.
 22 |  * @returns {object} AST event handlers.
 23 |  */
 24 | function create(context) {
 25 |     const sourceCode = context.getSourceCode()
 26 | 
 27 |     return {
 28 |         Program(program) {
 29 |             const node = program.templateBody
 30 |             if (node == null) {
 31 |                 return
 32 |             }
 33 | 
 34 |             const rootElements = []
 35 |             let extraText = null
 36 |             let extraElement = null
 37 |             let vIf = false
 38 |             for (const child of node.children) {
 39 |                 if (child.type === "VElement") {
 40 |                     if (rootElements.length === 0) {
 41 |                         rootElements.push(child)
 42 |                         vIf = utils.hasDirective(child.startTag, "if")
 43 |                     }
 44 |                     else if (vIf && utils.hasDirective(child.startTag, "else-if")) {
 45 |                         rootElements.push(child)
 46 |                     }
 47 |                     else if (vIf && utils.hasDirective(child.startTag, "else")) {
 48 |                         rootElements.push(child)
 49 |                         vIf = false
 50 |                     }
 51 |                     else {
 52 |                         extraElement = child
 53 |                     }
 54 |                 }
 55 |                 else if (sourceCode.getText(child).trim() !== "") {
 56 |                     extraText = child
 57 |                 }
 58 |             }
 59 | 
 60 |             if (extraText != null) {
 61 |                 context.report({
 62 |                     node: extraText,
 63 |                     loc: extraText.loc,
 64 |                     message: "The template root requires an element rather than texts.",
 65 |                 })
 66 |             }
 67 |             else if (extraElement != null) {
 68 |                 context.report({
 69 |                     node: extraElement,
 70 |                     loc: extraElement.loc,
 71 |                     message: "The template root requires exactly one element.",
 72 |                 })
 73 |             }
 74 |             else if (rootElements.length === 0) {
 75 |                 context.report({
 76 |                     node,
 77 |                     loc: node.loc,
 78 |                     message: "The template root requires exactly one element.",
 79 |                 })
 80 |             }
 81 |             else {
 82 |                 for (const element of rootElements) {
 83 |                     const tag = element.startTag
 84 |                     const name = tag.id.name
 85 | 
 86 |                     if (name === "template" || name === "slot") {
 87 |                         context.report({
 88 |                             node: tag,
 89 |                             loc: tag.loc,
 90 |                             message: "The template root disallows '<{{name}}>' elements.",
 91 |                             data: {name},
 92 |                         })
 93 |                     }
 94 |                     if (utils.hasDirective(tag, "for")) {
 95 |                         context.report({
 96 |                             node: tag,
 97 |                             loc: tag.loc,
 98 |                             message: "The template root disallows 'v-for' directives.",
 99 |                         })
100 |                     }
101 |                 }
102 |                 if (vIf) {
103 |                     const tag = rootElements[0].startTag
104 |                     context.report({
105 |                         node: tag,
106 |                         loc: tag.loc,
107 |                         message: "The template root requires the next element which has 'v-else' directives if it has 'v-if' directives.",
108 |                     })
109 |                 }
110 |             }
111 |         },
112 |     }
113 | }
114 | 
115 | //------------------------------------------------------------------------------
116 | // Rule Definition
117 | //------------------------------------------------------------------------------
118 | 
119 | module.exports = {
120 |     create,
121 |     meta: {
122 |         docs: {
123 |             description: "disallow invalid template root.",
124 |             category: "Possible Errors",
125 |             recommended: true,
126 |         },
127 |         fixable: false,
128 |         schema: [],
129 |     },
130 | }
131 | 


--------------------------------------------------------------------------------
/tests/lib/rules/html-quotes.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const RuleTester = require("eslint").RuleTester
 13 | const rule = require("../../../lib/rules/html-quotes")
 14 | 
 15 | //------------------------------------------------------------------------------
 16 | // Tests
 17 | //------------------------------------------------------------------------------
 18 | 
 19 | const tester = new RuleTester({
 20 |     parser: "vue-eslint-parser",
 21 |     parserOptions: {ecmaVersion: 2015},
 22 | })
 23 | 
 24 | tester.run("html-quotes", rule, {
 25 |     valid: [
 26 |         {
 27 |             filename: "test.vue",
 28 |             code: "",
 29 |         },
 30 |         {
 31 |             filename: "test.vue",
 32 |             code: "<template><div class=\"foo\"></div></template>",
 33 |         },
 34 |         {
 35 |             filename: "test.vue",
 36 |             code: "<template><div :class=\"foo\"></div></template>",
 37 |         },
 38 |         {
 39 |             filename: "test.vue",
 40 |             code: "<template><div class=\"foo\"></div></template>",
 41 |             options: ["double"],
 42 |         },
 43 |         {
 44 |             filename: "test.vue",
 45 |             code: "<template><div :class=\"foo\"></div></template>",
 46 |             options: ["double"],
 47 |         },
 48 |         {
 49 |             filename: "test.vue",
 50 |             code: "<template><div class='foo'></div></template>",
 51 |             options: ["single"],
 52 |         },
 53 |         {
 54 |             filename: "test.vue",
 55 |             code: "<template><div :class='foo'></div></template>",
 56 |             options: ["single"],
 57 |         },
 58 |     ],
 59 |     invalid: [
 60 |         {
 61 |             filename: "test.vue",
 62 |             code: "<template><div class=foo></div></template>",
 63 |             errors: ["Expected to be enclosed by double quotes."],
 64 |         },
 65 |         {
 66 |             filename: "test.vue",
 67 |             code: "<template><div class='foo'></div></template>",
 68 |             errors: ["Expected to be enclosed by double quotes."],
 69 |         },
 70 |         {
 71 |             filename: "test.vue",
 72 |             code: "<template><div :class=foo></div></template>",
 73 |             errors: ["Expected to be enclosed by double quotes."],
 74 |         },
 75 |         {
 76 |             filename: "test.vue",
 77 |             code: "<template><div :class='foo'></div></template>",
 78 |             errors: ["Expected to be enclosed by double quotes."],
 79 |         },
 80 |         {
 81 |             filename: "test.vue",
 82 |             code: "<template><div :class=foo+\"bar\"></div></template>",
 83 |             errors: ["Expected to be enclosed by double quotes."],
 84 |         },
 85 |         {
 86 |             filename: "test.vue",
 87 |             code: "<template><div class=foo></div></template>",
 88 |             options: ["double"],
 89 |             errors: ["Expected to be enclosed by double quotes."],
 90 |         },
 91 |         {
 92 |             filename: "test.vue",
 93 |             code: "<template><div class='foo'></div></template>",
 94 |             options: ["double"],
 95 |             errors: ["Expected to be enclosed by double quotes."],
 96 |         },
 97 |         {
 98 |             filename: "test.vue",
 99 |             code: "<template><div :class=foo></div></template>",
100 |             options: ["double"],
101 |             errors: ["Expected to be enclosed by double quotes."],
102 |         },
103 |         {
104 |             filename: "test.vue",
105 |             code: "<template><div :class='foo'></div></template>",
106 |             options: ["double"],
107 |             errors: ["Expected to be enclosed by double quotes."],
108 |         },
109 |         {
110 |             filename: "test.vue",
111 |             code: "<template><div :class=foo+\"bar\"></div></template>",
112 |             options: ["double"],
113 |             errors: ["Expected to be enclosed by double quotes."],
114 |         },
115 |         {
116 |             filename: "test.vue",
117 |             code: "<template><div class=foo></div></template>",
118 |             options: ["single"],
119 |             errors: ["Expected to be enclosed by single quotes."],
120 |         },
121 |         {
122 |             filename: "test.vue",
123 |             code: "<template><div class=\"foo\"></div></template>",
124 |             options: ["single"],
125 |             errors: ["Expected to be enclosed by single quotes."],
126 |         },
127 |         {
128 |             filename: "test.vue",
129 |             code: "<template><div :class=foo></div></template>",
130 |             options: ["single"],
131 |             errors: ["Expected to be enclosed by single quotes."],
132 |         },
133 |         {
134 |             filename: "test.vue",
135 |             code: "<template><div :class=\"foo\"></div></template>",
136 |             options: ["single"],
137 |             errors: ["Expected to be enclosed by single quotes."],
138 |         },
139 |         {
140 |             filename: "test.vue",
141 |             code: "<template><div :class=foo+'bar'></div></template>",
142 |             options: ["single"],
143 |             errors: ["Expected to be enclosed by single quotes."],
144 |         },
145 |     ],
146 | })
147 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-for.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const utils = require("../utils")
 13 | 
 14 | //------------------------------------------------------------------------------
 15 | // Helpers
 16 | //------------------------------------------------------------------------------
 17 | 
 18 | /**
 19 |  * Check whether the given attribute is using the variables which are defined by `v-for` directives.
 20 |  * @param {ASTNode} node The attribute node to check.
 21 |  * @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
 22 |  */
 23 | function isUsingIterationVar(node) {
 24 |     const references = node.value.references
 25 |     const variables = node.parent.parent.variables
 26 | 
 27 |     return references.some(reference =>
 28 |         variables.some(variable =>
 29 |             variable.id.name === reference.id.name &&
 30 |             variable.kind === "v-for"
 31 |         )
 32 |     )
 33 | }
 34 | 
 35 | /**
 36 |  * Creates AST event handlers for no-invalid-v-for.
 37 |  *
 38 |  * @param {RuleContext} context - The rule context.
 39 |  * @returns {object} AST event handlers.
 40 |  */
 41 | function create(context) {
 42 |     const sourceCode = context.getSourceCode()
 43 | 
 44 |     utils.registerTemplateBodyVisitor(context, {
 45 |         "VAttribute[directive=true][key.name='for']"(node) {
 46 |             const vBindKey = utils.getDirective(node.parent, "bind", "key")
 47 |             if (utils.isCustomComponent(node.parent) && vBindKey == null) {
 48 |                 context.report({
 49 |                     node,
 50 |                     loc: node.loc,
 51 |                     message: "'v-for' directives on custom elements require 'v-bind:key' directives.",
 52 |                 })
 53 |             }
 54 |             if (vBindKey != null && !isUsingIterationVar(vBindKey)) {
 55 |                 context.report({
 56 |                     node: vBindKey,
 57 |                     loc: vBindKey.loc,
 58 |                     message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.",
 59 |                 })
 60 |             }
 61 | 
 62 |             if (node.key.argument) {
 63 |                 context.report({
 64 |                     node,
 65 |                     loc: node.loc,
 66 |                     message: "'v-for' directives require no argument.",
 67 |                 })
 68 |             }
 69 |             if (node.key.modifiers.length > 0) {
 70 |                 context.report({
 71 |                     node,
 72 |                     loc: node.loc,
 73 |                     message: "'v-for' directives require no modifier.",
 74 |                 })
 75 |             }
 76 |             if (!utils.hasAttributeValue(node)) {
 77 |                 context.report({
 78 |                     node,
 79 |                     loc: node.loc,
 80 |                     message: "'v-for' directives require that attribute value.",
 81 |                 })
 82 |                 return
 83 |             }
 84 | 
 85 |             const expr = node.value.expression
 86 |             if (expr == null) {
 87 |                 return
 88 |             }
 89 |             if (expr.type !== "VForExpression") {
 90 |                 context.report({
 91 |                     node: node.value,
 92 |                     loc: node.value.loc,
 93 |                     message: "'v-for' directives require the special syntax '<alias> in <expression>'.",
 94 |                 })
 95 |                 return
 96 |             }
 97 | 
 98 |             const lhs = expr.left
 99 |             const value = lhs[0]
100 |             const key = lhs[1]
101 |             const index = lhs[2]
102 | 
103 |             if (value === null) {
104 |                 context.report({
105 |                     node: value || expr,
106 |                     loc: value && value.loc,
107 |                     message: "Invalid alias ''.",
108 |                 })
109 |             }
110 |             if (key !== undefined && (!key || key.type !== "Identifier")) {
111 |                 context.report({
112 |                     node: key || expr,
113 |                     loc: key && key.loc,
114 |                     message: "Invalid alias '{{text}}'.",
115 |                     data: {text: key ? sourceCode.getText(key) : ""},
116 |                 })
117 |             }
118 |             if (index !== undefined && (!index || index.type !== "Identifier")) {
119 |                 context.report({
120 |                     node: index || expr,
121 |                     loc: index && index.loc,
122 |                     message: "Invalid alias '{{text}}'.",
123 |                     data: {text: index ? sourceCode.getText(index) : ""},
124 |                 })
125 |             }
126 |         },
127 |     })
128 | 
129 |     return {}
130 | }
131 | 
132 | //------------------------------------------------------------------------------
133 | // Rule Definition
134 | //------------------------------------------------------------------------------
135 | 
136 | module.exports = {
137 |     create,
138 |     meta: {
139 |         docs: {
140 |             description: "disallow invalid v-for directives.",
141 |             category: "Possible Errors",
142 |             recommended: true,
143 |         },
144 |         fixable: false,
145 |         schema: [],
146 |     },
147 | }
148 | 


--------------------------------------------------------------------------------
/lib/rules/no-invalid-v-model.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const utils = require("../utils")
 13 | 
 14 | //------------------------------------------------------------------------------
 15 | // Helpers
 16 | //------------------------------------------------------------------------------
 17 | 
 18 | const VALID_MODIFIERS = new Set(["lazy", "number", "trim"])
 19 | 
 20 | /**
 21 |  * Check whether the given node is valid or not.
 22 |  * @param {ASTNode} node The start tag node to check.
 23 |  * @returns {boolean} `true` if the node is valid.
 24 |  */
 25 | function isValidElement(node) {
 26 |     const name = node.id.name
 27 |     return (
 28 |         name === "input" ||
 29 |         name === "select" ||
 30 |         name === "textarea" ||
 31 |         (
 32 |             name !== "keep-alive" &&
 33 |             name !== "slot" &&
 34 |             name !== "transition" &&
 35 |             name !== "transition-group" &&
 36 |             utils.isCustomComponent(node)
 37 |         )
 38 |     )
 39 | }
 40 | 
 41 | /**
 42 |  * Check whether the given node can be LHS.
 43 |  * @param {ASTNode} node The node to check.
 44 |  * @returns {boolean} `true` if the node can be LHS.
 45 |  */
 46 | function isLhs(node) {
 47 |     return node != null && (
 48 |         node.type === "Identifier" ||
 49 |         node.type === "MemberExpression"
 50 |     )
 51 | }
 52 | 
 53 | /**
 54 |  * Get the variable by names.
 55 |  * @param {string} name The variable name to find.
 56 |  * @param {ASTNode} leafNode The node to look up.
 57 |  * @returns {Variable|null} The found variable or null.
 58 |  */
 59 | function getVariable(name, leafNode) {
 60 |     let node = leafNode
 61 | 
 62 |     while (node != null) {
 63 |         const variables = node.variables
 64 |         const variable = variables && variables.find(v => v.id.name === name)
 65 | 
 66 |         if (variable != null) {
 67 |             return variable
 68 |         }
 69 | 
 70 |         node = node.parent
 71 |     }
 72 | 
 73 |     return null
 74 | }
 75 | 
 76 | /**
 77 |  * Creates AST event handlers for no-invalid-v-model.
 78 |  *
 79 |  * @param {RuleContext} context - The rule context.
 80 |  * @returns {object} AST event handlers.
 81 |  */
 82 | function create(context) {
 83 |     utils.registerTemplateBodyVisitor(context, {
 84 |         "VAttribute[directive=true][key.name='model']"(node) {
 85 |             if (!isValidElement(node.parent)) {
 86 |                 context.report({
 87 |                     node,
 88 |                     loc: node.loc,
 89 |                     message: "'v-model' directives aren't supported on <{{name}}> elements.",
 90 |                     data: node.parent.id,
 91 |                 })
 92 |             }
 93 |             if (node.parent.id.name === "input") {
 94 |                 if (utils.hasDirective(node.parent, "bind", "type")) {
 95 |                     context.report({
 96 |                         node,
 97 |                         loc: node.loc,
 98 |                         message: "'v-model' directives don't support dynamic input types.",
 99 |                         data: node.parent.id,
100 |                     })
101 |                 }
102 |                 if (utils.hasAttribute(node.parent, "type", "file")) {
103 |                     context.report({
104 |                         node,
105 |                         loc: node.loc,
106 |                         message: "'v-model' directives don't support 'file' input type.",
107 |                         data: node.parent.id,
108 |                     })
109 |                 }
110 |             }
111 |             if (node.key.argument) {
112 |                 context.report({
113 |                     node,
114 |                     loc: node.loc,
115 |                     message: "'v-model' directives require no argument.",
116 |                 })
117 |             }
118 |             for (const modifier of node.key.modifiers) {
119 |                 if (!VALID_MODIFIERS.has(modifier)) {
120 |                     context.report({
121 |                         node,
122 |                         loc: node.loc,
123 |                         message: "'v-model' directives don't support the modifier '{{name}}'.",
124 |                         data: {name: modifier},
125 |                     })
126 |                 }
127 |             }
128 |             if (!utils.hasAttributeValue(node)) {
129 |                 context.report({
130 |                     node,
131 |                     loc: node.loc,
132 |                     message: "'v-model' directives require that attribute value.",
133 |                 })
134 |             }
135 |             if (node.value) {
136 |                 if (!isLhs(node.value.expression)) {
137 |                     context.report({
138 |                         node,
139 |                         loc: node.loc,
140 |                         message: "'v-model' directives require the attribute value which is valid as LHS.",
141 |                     })
142 |                 }
143 | 
144 |                 for (const reference of node.value.references) {
145 |                     const id = reference.id
146 |                     if (id.parent.type === "MemberExpression") {
147 |                         continue
148 |                     }
149 | 
150 |                     const elementNode = node.parent.parent
151 |                     const variable = getVariable(id.name, elementNode)
152 |                     if (variable != null) {
153 |                         context.report({
154 |                             node,
155 |                             loc: node.loc,
156 |                             message: "'v-model' directives cannot update the iteration variable 'x' itself.",
157 |                         })
158 |                     }
159 |                 }
160 |             }
161 |         },
162 |     })
163 | 
164 |     return {}
165 | }
166 | 
167 | //------------------------------------------------------------------------------
168 | // Rule Definition
169 | //------------------------------------------------------------------------------
170 | 
171 | module.exports = {
172 |     create,
173 |     meta: {
174 |         docs: {
175 |             description: "disallow invalid v-model directives.",
176 |             category: "Possible Errors",
177 |             recommended: true,
178 |         },
179 |         fixable: false,
180 |         schema: [],
181 |     },
182 | }
183 | 


--------------------------------------------------------------------------------
/tests/lib/rules/no-invalid-v-for.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Requirements
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const RuleTester = require("eslint").RuleTester
 13 | const rule = require("../../../lib/rules/no-invalid-v-for")
 14 | 
 15 | //------------------------------------------------------------------------------
 16 | // Tests
 17 | //------------------------------------------------------------------------------
 18 | 
 19 | const tester = new RuleTester({
 20 |     parser: "vue-eslint-parser",
 21 |     parserOptions: {ecmaVersion: 2015},
 22 | })
 23 | 
 24 | tester.run("no-invalid-v-for", rule, {
 25 |     valid: [
 26 |         {
 27 |             filename: "test.vue",
 28 |             code: "",
 29 |         },
 30 |         {
 31 |             filename: "test.vue",
 32 |             code: "<template><div><div v-for=\"x in list\"></div></div></template>",
 33 |         },
 34 |         {
 35 |             filename: "test.vue",
 36 |             code: "<template><div><div v-for=\"x of list\"></div></div></template>",
 37 |         },
 38 |         {
 39 |             filename: "test.vue",
 40 |             code: "<template><div><div v-for=\"(x, i, k) in list\"></div></div></template>",
 41 |         },
 42 |         {
 43 |             filename: "test.vue",
 44 |             code: "<template><div><div v-for=\"(x, i, k) of list\"></div></div></template>",
 45 |         },
 46 |         {
 47 |             filename: "test.vue",
 48 |             code: "<template><div><div v-for=\"({id, name}, i, k) of list\"></div></div></template>",
 49 |         },
 50 |         {
 51 |             filename: "test.vue",
 52 |             code: "<template><div><div v-for=\"([id, name], i, k) of list\"></div></div></template>",
 53 |         },
 54 |         {
 55 |             filename: "test.vue",
 56 |             code: "<template><div><your-component v-for=\"x in list\" :key=\"x.id\"></your-component></div></template>",
 57 |         },
 58 |         {
 59 |             filename: "test.vue",
 60 |             code: "<template><div><div is=\"your-component\" v-for=\"x in list\" :key=\"x.id\"></div></div></template>",
 61 |         },
 62 |         {
 63 |             filename: "test.vue",
 64 |             code: "<template><div><div :is=\"your-component\" v-for=\"x in list\" :key=\"x.id\"></div></div></template>",
 65 |         },
 66 |     ],
 67 |     invalid: [
 68 |         {
 69 |             filename: "test.vue",
 70 |             code: "<template><div><div v-for:aaa=\"x in list\"></div></div></template>",
 71 |             errors: ["'v-for' directives require no argument."],
 72 |         },
 73 |         {
 74 |             filename: "test.vue",
 75 |             code: "<template><div><div v-for.aaa=\"x in list\"></div></div></template>",
 76 |             errors: ["'v-for' directives require no modifier."],
 77 |         },
 78 |         {
 79 |             filename: "test.vue",
 80 |             code: "<template><div><div v-for></div></div></template>",
 81 |             errors: ["'v-for' directives require that attribute value."],
 82 |         },
 83 |         {
 84 |             filename: "test.vue",
 85 |             code: "<template><div><div v-for=\"(,a,b) in list\"></div></div></template>",
 86 |             errors: ["Invalid alias ''."],
 87 |         },
 88 |         {
 89 |             filename: "test.vue",
 90 |             code: "<template><div><div v-for=\"(a,,b) in list\"></div></div></template>",
 91 |             errors: ["Invalid alias ''."],
 92 |         },
 93 |         {
 94 |             filename: "test.vue",
 95 |             code: "<template><div><div v-for=\"(a,b,,) in list\"></div></div></template>",
 96 |             errors: ["Invalid alias ''."],
 97 |         },
 98 |         {
 99 |             filename: "test.vue",
100 |             code: "<template><div><div v-for=\"(a,{b,c}) in list\"></div></div></template>",
101 |             errors: ["Invalid alias '{b,c}'."],
102 |         },
103 |         {
104 |             filename: "test.vue",
105 |             code: "<template><div><div v-for=\"(a,b,{c,d}) in list\"></div></div></template>",
106 |             errors: ["Invalid alias '{c,d}'."],
107 |         },
108 |         {
109 |             filename: "test.vue",
110 |             code: "<template><div><your-component v-for=\"x in list\"></your-component></div></template>",
111 |             errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."],
112 |         },
113 |         {
114 |             filename: "test.vue",
115 |             code: "<template><div><div is=\"your-component\" v-for=\"x in list\"></div></div></template>",
116 |             errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."],
117 |         },
118 |         {
119 |             filename: "test.vue",
120 |             code: "<template><div><div :is=\"your-component\" v-for=\"x in list\"></div></div></template>",
121 |             errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."],
122 |         },
123 |         {
124 |             filename: "test.vue",
125 |             code: "<template><div><div v-bind:is=\"your-component\" v-for=\"x in list\"></div></div></template>",
126 |             errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."],
127 |         },
128 |         {
129 |             filename: "test.vue",
130 |             code: "<template><div><div v-for=\"x in list\" :key=\"100\"></div></div></template>",
131 |             errors: ["Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."],
132 |         },
133 |         {
134 |             filename: "test.vue",
135 |             code: "<template><div><custom-component v-for=\"x in list\" :key=\"100\"></custom-component></div></template>",
136 |             errors: ["Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."],
137 |         },
138 |         {
139 |             filename: "test.vue",
140 |             code: "<template><div><div v-for=\"x in list\" :key=\"foo\"></div></div></template>",
141 |             errors: ["Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."],
142 |         },
143 |         {
144 |             filename: "test.vue",
145 |             code: "<template><div><custom-component v-for=\"x in list\" :key=\"foo\"></custom-component></div></template>",
146 |             errors: ["Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."],
147 |         },
148 |     ],
149 | })
150 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # @mysticatea/eslint-plugin-vue
  2 | 
  3 | [![npm version](https://img.shields.io/npm/v/%40mysticatea%2Feslint-plugin-vue.svg)](https://www.npmjs.com/package/@mysticatea/eslint-plugin-vue)
  4 | [![Downloads/month](https://img.shields.io/npm/dm/%40mysticatea%2Feslint-plugin-vue.svg)](http://www.npmtrends.com/%40mysticatea%2Feslint-plugin-vue)
  5 | [![Build Status](https://travis-ci.org/mysticatea/eslint-plugin-vue-trial.svg?branch=master)](https://travis-ci.org/mysticatea/eslint-plugin-vue-trial)
  6 | [![Coverage Status](https://codecov.io/gh/mysticatea/eslint-plugin-vue-trial/branch/master/graph/badge.svg)](https://codecov.io/gh/mysticatea/eslint-plugin-vue-trial)
  7 | [![Dependency Status](https://david-dm.org/mysticatea/eslint-plugin-vue-trial.svg)](https://david-dm.org/mysticatea/eslint-plugin-vue-trial)
  8 | 
  9 | ❗️ This plugin has been merged to the official [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) as 3.0.0. Please use that. ❗️
 10 | 
 11 | Experimental ESLint plugin for Vue.js.
 12 | 
 13 | ## 💿 Installation
 14 | 
 15 | Use [npm](https://www.npmjs.com/).
 16 | 
 17 | ```
 18 | > npm install --save-dev eslint @mysticatea/eslint-plugin-vue
 19 | ```
 20 | 
 21 | - Requires Node.js `^4.0.0 || >=6.0.0`
 22 | - Requires ESLint `>=3.18.0`
 23 | 
 24 | ## 📖 Usage
 25 | 
 26 | Write `.eslintrc.*` file to configure rules. See also: http://eslint.org/docs/user-guide/configuring
 27 | 
 28 | **.eslintrc.json** (An example)
 29 | 
 30 | ```json
 31 | {
 32 |     "plugins": ["@mysticatea/vue"],
 33 |     "extends": ["eslint:recommended", "plugin:@mysticatea/vue/recommended"],
 34 |     "rules": {
 35 |         "@mysticatea/vue/html-quotes": ["error", "double"],
 36 |         "@mysticatea/vue/v-bind-style": ["error", "shorthand"],
 37 |         "@mysticatea/vue/v-on-style": ["error", "shorthand"]
 38 |     }
 39 | }
 40 | ```
 41 | 
 42 | ## 💡 Rules
 43 | 
 44 | - ⭐️ the mark of a recommended rule.
 45 | - ✒️ the mark of a fixable rule.
 46 | 
 47 | <!--RULES_TABLE_START-->
 48 | ### Possible Errors
 49 | 
 50 | |    | Rule ID | Description |
 51 | |:---|:--------|:------------|
 52 | | ⭐️ | [no-invalid-template-root](./docs/rules/no-invalid-template-root.md) | disallow invalid template root. |
 53 | | ⭐️ | [no-invalid-v-bind](./docs/rules/no-invalid-v-bind.md) | disallow invalid v-bind directives. |
 54 | | ⭐️ | [no-invalid-v-cloak](./docs/rules/no-invalid-v-cloak.md) | disallow invalid v-cloak directives. |
 55 | | ⭐️ | [no-invalid-v-else-if](./docs/rules/no-invalid-v-else-if.md) | disallow invalid v-else-if directives. |
 56 | | ⭐️ | [no-invalid-v-else](./docs/rules/no-invalid-v-else.md) | disallow invalid v-else directives. |
 57 | | ⭐️ | [no-invalid-v-for](./docs/rules/no-invalid-v-for.md) | disallow invalid v-for directives. |
 58 | | ⭐️ | [no-invalid-v-html](./docs/rules/no-invalid-v-html.md) | disallow invalid v-html directives. |
 59 | | ⭐️ | [no-invalid-v-if](./docs/rules/no-invalid-v-if.md) | disallow invalid v-if directives. |
 60 | | ⭐️ | [no-invalid-v-model](./docs/rules/no-invalid-v-model.md) | disallow invalid v-model directives. |
 61 | | ⭐️ | [no-invalid-v-on](./docs/rules/no-invalid-v-on.md) | disallow invalid v-on directives. |
 62 | | ⭐️ | [no-invalid-v-once](./docs/rules/no-invalid-v-once.md) | disallow invalid v-once directives. |
 63 | | ⭐️ | [no-invalid-v-pre](./docs/rules/no-invalid-v-pre.md) | disallow invalid v-pre directives. |
 64 | | ⭐️ | [no-invalid-v-show](./docs/rules/no-invalid-v-show.md) | disallow invalid v-show directives. |
 65 | | ⭐️ | [no-invalid-v-text](./docs/rules/no-invalid-v-text.md) | disallow invalid v-text directives. |
 66 | | ⭐️ | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>`. |
 67 | 
 68 | ### Best Practices
 69 | 
 70 | |    | Rule ID | Description |
 71 | |:---|:--------|:------------|
 72 | | ⭐️✒️ | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style. |
 73 | | ⭐️✒️ | [html-no-self-closing](./docs/rules/html-no-self-closing.md) | disallow self-closing elements. |
 74 | | ⭐️ | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element. |
 75 | | ⭐️ | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplicate arguments. |
 76 | | ⭐️ | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>`. |
 77 | | ⭐️ | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements. |
 78 | | ⭐️ | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives. |
 79 | 
 80 | ### Stylistic Issues
 81 | 
 82 | |    | Rule ID | Description |
 83 | |:---|:--------|:------------|
 84 | |  | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes. |
 85 | | ✒️ | [v-bind-style](./docs/rules/v-bind-style.md) | enforce v-bind directive style. |
 86 | | ✒️ | [v-on-style](./docs/rules/v-on-style.md) | enforce v-on directive style. |
 87 | 
 88 | <!--RULES_TABLE_END-->
 89 | 
 90 | ## ⚙ Configs
 91 | 
 92 | This plugin provides `plugin:@mysticatea/vue/recommended` preset config.
 93 | This preset config:
 94 | 
 95 | - adds `parser: "vue-eslint-parser"`
 96 | - enables rules which are given ⭐️ in the above table.
 97 | 
 98 | ## ⚓️ Semantic Versioning Policy
 99 | 
100 | `@mysticatea/eslint-plugin-vue` follows [semantic versioning](http://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
101 | 
102 | - Patch release (intended to not break your lint build)
103 |     - A bug fix in a rule that results in it reporting fewer errors.
104 |     - Improvements to documentation.
105 |     - Non-user-facing changes such as refactoring code, adding, deleting, or modifying tests, and increasing test coverage.
106 |     - Re-releasing after a failed release (i.e., publishing a release that doesn't work for anyone).
107 | - Minor release (might break your lint build)
108 |     - A bug fix in a rule that results in it reporting more errors.
109 |     - A new rule is created.
110 |     - A new option to an existing rule is created.
111 |     - An existing rule is deprecated.
112 | - Major release (likely to break your lint build)
113 |     - A support for old Node version is dropped.
114 |     - A support for old ESLint version is dropped.
115 |     - An existing rule is changed in it reporting more errors.
116 |     - An existing rule is removed.
117 |     - An existing option of a rule is removed.
118 |     - An existing config is updated.
119 | 
120 | ## 📰 Changelog
121 | 
122 | - [GitHub Releases](https://github.com/mysticatea/eslint-plugin-vue-trial/releases)
123 | 
124 | ## 💎 Contributing
125 | 
126 | Welcome contributing!
127 | 
128 | Please use GitHub's Issues/PRs.
129 | 
130 | ### Development Tools
131 | 
132 | - `npm test` runs tests and measures coverage.
133 | - `npm run coverage` shows the coverage result of `npm test` command.
134 | - `npm run clean` removes the coverage result of `npm test` command.
135 | 


--------------------------------------------------------------------------------
/lib/utils/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Toru Nagashima <https://github.com/mysticatea>
  3 |  * @copyright 2017 Toru Nagashima. All rights reserved.
  4 |  * See LICENSE file in root directory for full license.
  5 |  */
  6 | "use strict"
  7 | 
  8 | //------------------------------------------------------------------------------
  9 | // Helpers
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | const HTML_ELEMENT_NAMES = new Set(require("./html-elements.json"))
 13 | const SVG_ELEMENT_NAMES = new Set(require("./svg-elements.json"))
 14 | const VOID_ELEMENT_NAMES = new Set(require("./void-elements.json"))
 15 | 
 16 | //------------------------------------------------------------------------------
 17 | // Exports
 18 | //------------------------------------------------------------------------------
 19 | 
 20 | module.exports = {
 21 |     /**
 22 |      * Register the given visitor to parser services.
 23 |      * If the parser service of `vue-eslint-parser` was not found,
 24 |      * this generates a warning.
 25 |      *
 26 |      * @param {RuleContext} context The rule context to use parser services.
 27 |      * @param {object} visitor The visitor.
 28 |      * @returns {void}
 29 |      */
 30 |     registerTemplateBodyVisitor(context, visitor) {
 31 |         if (context.parserServices.registerTemplateBodyVisitor == null) {
 32 |             context.report({
 33 |                 loc: {line: 1, column: 0},
 34 |                 message: "Use the latest vue-eslint-parser.",
 35 |             })
 36 |             return
 37 |         }
 38 |         context.parserServices.registerTemplateBodyVisitor(context, visitor)
 39 |     },
 40 | 
 41 |     /**
 42 |      * Get the token store of template bodies.
 43 |      * If the parser service of `vue-eslint-parser` was not found,
 44 |      * this generates a warning.
 45 |      *
 46 |      * @param {RuleContext} context The rule context to use parser services.
 47 |      * @returns {TokenStore} The gotten token store.
 48 |      */
 49 |     getTemplateBodyTokenStore(context) {
 50 |         if (context.parserServices.getTemplateBodyTokenStore == null) {
 51 |             context.report({
 52 |                 loc: {line: 1, column: 0},
 53 |                 message: "Use the latest vue-eslint-parser.",
 54 |             })
 55 |             return null
 56 |         }
 57 |         return context.parserServices.getTemplateBodyTokenStore(context)
 58 |     },
 59 | 
 60 |     /**
 61 |      * Check whether the given node is the root element or not.
 62 |      * @param {ASTNode} node The element node to check.
 63 |      * @returns {boolean} `true` if the node is the root element.
 64 |      */
 65 |     isRootElement(node) {
 66 |         console.assert(node && node.type === "VElement")
 67 | 
 68 |         return (
 69 |             node.parent.type === "Program" ||
 70 |             node.parent.parent.type === "Program"
 71 |         )
 72 |     },
 73 | 
 74 |     /**
 75 |      * Get the previous sibling element of the given element.
 76 |      * @param {ASTNode} node The element node to get the previous sibling element.
 77 |      * @returns {ASTNode|null} The previous sibling element.
 78 |      */
 79 |     prevSibling(node) {
 80 |         console.assert(node && node.type === "VElement")
 81 |         let prevElement = null
 82 | 
 83 |         for (const siblingNode of (node.parent && node.parent.children) || []) {
 84 |             if (siblingNode === node) {
 85 |                 return prevElement
 86 |             }
 87 |             if (siblingNode.type === "VElement") {
 88 |                 prevElement = siblingNode
 89 |             }
 90 |         }
 91 | 
 92 |         return null
 93 |     },
 94 | 
 95 |     /**
 96 |      * Check whether the given start tag has specific directive.
 97 |      * @param {ASTNode} node The start tag node to check.
 98 |      * @param {string} name The attribute name to check.
 99 |      * @param {string} [value] The attribute value to check.
100 |      * @returns {boolean} `true` if the start tag has the directive.
101 |      */
102 |     hasAttribute(node, name, value) {
103 |         console.assert(node && node.type === "VStartTag")
104 |         return node.attributes.some(a =>
105 |             !a.directive &&
106 |             a.key.name === name &&
107 |             (
108 |                 value === undefined ||
109 |                 (a.value != null && a.value.value === value)
110 |             )
111 |         )
112 |     },
113 | 
114 |     /**
115 |      * Check whether the given start tag has specific directive.
116 |      * @param {ASTNode} node The start tag node to check.
117 |      * @param {string} name The directive name to check.
118 |      * @param {string} [argument] The directive argument to check.
119 |      * @returns {boolean} `true` if the start tag has the directive.
120 |      */
121 |     hasDirective(node, name, argument) {
122 |         console.assert(node && node.type === "VStartTag")
123 |         return node.attributes.some(a =>
124 |             a.directive &&
125 |             a.key.name === name &&
126 |             (argument === undefined || a.key.argument === argument)
127 |         )
128 |     },
129 | 
130 |     /**
131 |      * Check whether the given attribute has their attribute value.
132 |      * @param {ASTNode} node The attribute node to check.
133 |      * @returns {boolean} `true` if the attribute has their value.
134 |      */
135 |     hasAttributeValue(node) {
136 |         console.assert(node && node.type === "VAttribute")
137 |         return (
138 |             node.value != null &&
139 |             (node.value.expression != null || node.value.syntaxError != null)
140 |         )
141 |     },
142 | 
143 |     /**
144 |      * Get the attribute which has the given name.
145 |      * @param {ASTNode} node The start tag node to check.
146 |      * @param {string} name The attribute name to check.
147 |      * @param {string} [value] The attribute value to check.
148 |      * @returns {ASTNode} The found attribute.
149 |      */
150 |     getAttribute(node, name, value) {
151 |         console.assert(node && node.type === "VStartTag")
152 |         return node.attributes.find(a =>
153 |             !a.directive &&
154 |             a.key.name === name &&
155 |             (
156 |                 value === undefined ||
157 |                 (a.value != null && a.value.value === value)
158 |             )
159 |         )
160 |     },
161 | 
162 |     /**
163 |      * Get the directive which has the given name.
164 |      * @param {ASTNode} node The start tag node to check.
165 |      * @param {string} name The directive name to check.
166 |      * @param {string} [argument] The directive argument to check.
167 |      * @returns {ASTNode} The found directive.
168 |      */
169 |     getDirective(node, name, argument) {
170 |         console.assert(node && node.type === "VStartTag")
171 |         return node.attributes.find(a =>
172 |             a.directive &&
173 |             a.key.name === name &&
174 |             (argument === undefined || a.key.argument === argument)
175 |         )
176 |     },
177 | 
178 |     /**
179 |      * Check whether the previous sibling element has `if` or `else-if` directive.
180 |      * @param {ASTNode} node The element node to check.
181 |      * @returns {boolean} `true` if the previous sibling element has `if` or `else-if` directive.
182 |      */
183 |     prevElementHasIf(node) {
184 |         console.assert(node && node.type === "VElement")
185 | 
186 |         const prev = this.prevSibling(node)
187 |         return (
188 |             prev != null &&
189 |             prev.startTag.attributes.some(a =>
190 |                 a.directive &&
191 |                 (a.key.name === "if" || a.key.name === "else-if")
192 |             )
193 |         )
194 |     },
195 | 
196 |     /**
197 |      * Check whether the given node is a custom component or not.
198 |      * @param {ASTNode} node The start tag node to check.
199 |      * @returns {boolean} `true` if the node is a custom component.
200 |      */
201 |     isCustomComponent(node) {
202 |         console.assert(node && node.type === "VStartTag")
203 | 
204 |         const name = node.id.name
205 |         return (
206 |             !(this.isHtmlElementName(name) || this.isSvgElementName(name)) ||
207 |             this.hasAttribute(node, "is") ||
208 |             this.hasDirective(node, "bind", "is")
209 |         )
210 |     },
211 | 
212 |     /**
213 |      * Check whether the given name is a HTML element name or not.
214 |      * @param {string} name The name to check.
215 |      * @returns {boolean} `true` if the name is a HTML element name.
216 |      */
217 |     isHtmlElementName(name) {
218 |         console.assert(typeof name === "string")
219 | 
220 |         return HTML_ELEMENT_NAMES.has(name.toLowerCase())
221 |     },
222 | 
223 |     /**
224 |      * Check whether the given name is a SVG element name or not.
225 |      * @param {string} name The name to check.
226 |      * @returns {boolean} `true` if the name is a SVG element name.
227 |      */
228 |     isSvgElementName(name) {
229 |         console.assert(typeof name === "string")
230 | 
231 |         return SVG_ELEMENT_NAMES.has(name.toLowerCase())
232 |     },
233 | 
234 |     /**
235 |      * Check whether the given name is a void element name or not.
236 |      * @param {string} name The name to check.
237 |      * @returns {boolean} `true` if the name is a void element name.
238 |      */
239 |     isVoidElementName(name) {
240 |         console.assert(typeof name === "string")
241 | 
242 |         return VOID_ELEMENT_NAMES.has(name.toLowerCase())
243 |     },
244 | }
245 | 


--------------------------------------------------------------------------------