Coder Social home page Coder Social logo

vuejs / eslint-plugin-vue Goto Github PK

View Code? Open in Web Editor NEW
4.4K 57.0 647.0 5.02 MB

Official ESLint plugin for Vue.js

Home Page: https://eslint.vuejs.org/

License: MIT License

JavaScript 98.43% Vue 0.01% TypeScript 1.56%
vue eslint eslint-plugin npm npm-package npm-module javascript html static-analysis hacktoberfest

eslint-plugin-vue's Introduction

eslint-plugin-vue

NPM version NPM downloads CircleCI License

Official ESLint plugin for Vue.js

๐Ÿ“– Documentation

Please refer to the official website.

โš“ Versioning Policy

This plugin follows Semantic Versioning and ESLint's Semantic Versioning Policy.

๐Ÿ“ฐ Releases

This project uses GitHub Releases.

๐Ÿป Contribution Guide

Contributing is welcome! See the ESLint Vue Plugin Developer Guide.

Working With Rules

Be sure to read the official ESLint guide before you start writing a new rule.

To see what an abstract syntax tree (AST) of your code looks like, you may use AST Explorer. After opening AST Explorer, select Vue as the syntax and vue-eslint-parser as the parser.

The default JavaScript parser must be replaced because Vue.js single file components are not plain JavaScript, but a custom file format. vue-eslint-parser is a replacement parser that generates an enhanced AST with nodes that represent specific parts of the template syntax, as well as the contents of the <script> tag.

To learn more about certain nodes in a produced AST, see the ESTree project page and the vue-eslint-parser AST documentation.

vue-eslint-parser provides a few useful parser services to help traverse the produced AST and access template tokens:

  • context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)
  • context.parserServices.getTemplateBodyTokenStore()

Check out an example rule to see usage of these services.

Be aware that depending on the code samples you write in tests, the RuleTester parser property must be set accordingly (this can be done on a test by test basis). See an example here.

If you're stuck, remember there are many rules available for reference. If you can't find the right solution, don't hesitate to reach out in issues โ€“ we're happy to help!

๐Ÿ”’ License

See the LICENSE file for license rights and limitations (MIT).

eslint-plugin-vue's People

Contributors

43081j avatar aladdin-add avatar amorites avatar antfu avatar armano2 avatar chrisvfritz avatar dev1437 avatar doug-wade avatar edikdeisling avatar floedelmann avatar g-plane avatar itmaga avatar iwanabethatguy avatar lsdsjy avatar maoberlehner avatar michalsnik avatar mussinbenarbia avatar mysticatea avatar ota-meshi avatar posva avatar privatenumber avatar przemkow avatar przemyslawjanpietrzak avatar qmhc avatar sapphi-red avatar tyankatsu0105 avatar waynzh avatar wenfangdu avatar yoyo930021 avatar yyx990803 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eslint-plugin-vue's Issues

Rule Proposal: `vue/no-undef`

Please describe what the rule should do:

no-undef should report a use of undefined variables in templates.
Undefined variables are variables which satisfy all of the following conditions:

  • It's not the allowed global variables.
  • It's not the Vue.js instance members (e.g. $data, $props, ...).
  • It's not $event if it's in v-on directive.
  • It's not defined by both v-for directive and scope attributes.
  • The properties (defined by data, computed, methods, ...) of the custom component don't include it.
    • I guess this has limitations in static analytics ๐Ÿค” .
  • It's not allowed by rule's option.
  • Directive comments like <!-- vue members: foo, bar ,baz --> does not include it.

This would be helpful to catch TypeErrors or typo.

Options

{
    "vue/no-undef": ["error", {
        "knownMembers": ["foo", "bar", "baz"]
    }]
}
  • knownMembers (string[]) ... A list of known properties. Use for properties which are defined by Vue.js plugins.

What category of rule is this? (place an "X" next to just one item)

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

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

<template>
    <!-- vue members: aaa -->
    <div>
        <div>{{ aaa + bbb + ccc }}</div>
        <div>{{ i }}</div><!-- "i" is not defined in this scope. -->
        <ol v-for="i in 5">
            <li :key="i">{{ bbb + k}}</li> <!-- "k" is not defined in this scope. -->
        </ol>
    </div>
</template>
<script>
import other from "./other"
export default {
    props: ["bbb"],
    data() {
        return {
            ccc: 1,
            ...other  // hard to know properties in `other`.
                      // You can declare it by `<!-- vue members: aaa -->`-like comments.
        }
    }
}
</script>

Recommended preset config

Is it possible to integrate eslint-config-vue with this package instead of having separate packages, and then accessing the recommended presets with:

    "extends": ["plugin:vue/recommended"]

Many other eslint plugins follow this convention, including eslint itself.

vue/no-invalid-v-for shouldn't catch slots

Tell us about your environment

  • ESLint Version: 4.1.1
  • eslint-plugin-vue Version: 3.5.0
  • Node Version: 8.1.3
Please show your full configuration:
module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
  ],
  'parserOptions': {
    'parser': 'babel-eslint',
    'sourceType': 'module',
  },
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  // add your custom rules here
  'rules': {
    'accessor-pairs': 'error',
    'array-callback-return': 'warn',
    'arrow-spacing': ['error', { 'before': true, 'after': true }],
    'block-spacing': ['error', 'always'],
    'brace-style': ['error', '1tbs', { 'allowSingleLine': false }],
    'camelcase': ['error', { 'properties': 'never' }],
    'comma-dangle': ['error', 'always-multiline'],
    'comma-spacing': ['error', { 'before': false, 'after': true }],
    'comma-style': ['error', 'last'],
    'constructor-super': 'error',
    'curly': ['error', 'multi-line'],
    'dot-location': ['error', 'property'],
    'eol-last': 'error',
    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
    'func-call-spacing': ['error', 'never'],
    'handle-callback-err': ['error', '^(err|error)$' ],
    'indent': ['error', 2, { 'SwitchCase': 1 }],
    'key-spacing': ['error', { 'beforeColon': false, 'afterColon': true }],
    'keyword-spacing': ['error', { 'before': true, 'after': true }],
    'new-cap': ['error', { 'newIsCap': true, 'capIsNew': false }],
    'new-parens': 'error',
    'no-array-constructor': 'error',
    'no-caller': 'error',
    'no-class-assign': 'error',
    'no-compare-neg-zero': 'error',
    'no-cond-assign': 'error',
    'no-console': 'off',
    'no-const-assign': 'error',
    'no-constant-condition': ['error', { 'checkLoops': false }],
    'no-control-regex': 'error',
    'no-delete-var': 'error',
    'no-dupe-args': 'error',
    'no-dupe-class-members': 'error',
    'no-dupe-keys': 'error',
    'no-duplicate-case': 'error',
    'no-empty-character-class': 'error',
    'no-empty-pattern': 'error',
    'no-eval': 'error',
    'no-ex-assign': 'error',
    'no-extend-native': 'warn',
    'no-extra-bind': 'error',
    'no-extra-boolean-cast': 'error',
    'no-extra-parens': ['error', 'functions'],
    'no-fallthrough': 'error',
    'no-floating-decimal': 'error',
    'no-func-assign': 'error',
    'no-global-assign': 'error',
    'no-implied-eval': 'error',
    'no-inner-declarations': ['error', 'functions'],
    'no-invalid-regexp': 'error',
    'no-irregular-whitespace': 'error',
    'no-iterator': 'error',
    'no-label-var': 'error',
    'no-labels': ['error', { 'allowLoop': false, 'allowSwitch': false }],
    'no-lone-blocks': 'error',
    'no-mixed-operators': ['error', {
      'groups': [
        ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
        ['&&', '||'],
        ['in', 'instanceof']
      ],
      'allowSamePrecedence': true
    }],
    'no-mixed-spaces-and-tabs': 'error',
    'no-multi-spaces': 'error',
    'no-multi-str': 'error',
    'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0 }],
    'no-negated-in-lhs': 'error',
    'no-new': 'error',
    'no-new-func': 'error',
    'no-new-object': 'error',
    'no-new-require': 'error',
    'no-new-symbol': 'error',
    'no-new-wrappers': 'error',
    'no-obj-calls': 'error',
    'no-octal': 'error',
    'no-octal-escape': 'error',
    'no-path-concat': 'error',
    'no-proto': 'error',
    'no-redeclare': 'error',
    'no-regex-spaces': 'error',
    'no-return-await': 'error',
    'no-self-assign': 'error',
    'no-self-compare': 'error',
    'no-sequences': 'error',
    'no-shadow-restricted-names': 'error',
    'no-sparse-arrays': 'error',
    'no-tabs': 'error',
    'no-template-curly-in-string': 'error',
    'no-this-before-super': 'error',
    'no-throw-literal': 'error',
    'no-trailing-spaces': 'error',
    'no-undef': 'error',
    'no-undef-init': 'error',
    'no-unexpected-multiline': 'error',
    'no-unmodified-loop-condition': 'error',
    'no-unneeded-ternary': ['error', { 'defaultAssignment': false }],
    'no-unreachable': 'error',
    'no-unsafe-finally': 'error',
    'no-unsafe-negation': 'error',
    'no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
    'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
    'no-use-before-define': ['error', { 'functions': false, 'classes': false, 'variables': false }],
    'no-useless-call': 'error',
    'no-useless-computed-key': 'error',
    'no-useless-constructor': 'error',
    'no-useless-escape': 'error',
    'no-useless-rename': 'error',
    'no-useless-return': 'error',
    'no-var': 'error',
    'no-whitespace-before-property': 'error',
    'no-with': 'error',
    'object-property-newline': ['error', { 'allowMultiplePropertiesPerLine': true }],
    'one-var': ['error', { 'initialized': 'never' }],
    'operator-linebreak': ['error', 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
    'padded-blocks': ['error', { 'blocks': 'never', 'switches': 'never', 'classes': 'never' }],
    'prefer-const': 'warn',
    'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
    'rest-spread-spacing': ['error', 'never'],
    'semi': ['error', 'never'],
    'semi-spacing': ['error', { 'before': false, 'after': true }],
    'space-before-blocks': ['error', 'always'],
    'space-before-function-paren': ['error', 'always'],
    'space-in-parens': ['error', 'never'],
    'space-infix-ops': 'error',
    'space-unary-ops': ['error', { 'words': true, 'nonwords': false }],
    'spaced-comment': ['error', 'always', {
      'line': { 'markers': ['*package', '!', '/', ','] },
      'block': { 'balanced': true, 'markers': ['*package', '!', ',', ':', '::', 'flow-include'], 'exceptions': ['*'] }
    }],
    'symbol-description': 'error',
    'template-curly-spacing': ['error', 'never'],
    'template-tag-spacing': ['error', 'never'],
    'unicode-bom': ['error', 'never'],
    'use-isnan': 'error',
    'valid-typeof': ['error', { 'requireStringLiterals': true }],
    'wrap-iife': ['error', 'any', { 'functionPrototypeMethods': true }],
    'yield-star-spacing': ['error', 'both'],
    'yoda': ['error', 'never'],

    // TODO these are buggy rules, need to wait for fix
    'vue/html-no-self-closing': 'off',
    // 'vue/no-duplicate-attributes': 'warn',

    'vue/require-v-for-key': 'off',
    'vue/html-quotes': 'error',
    'vue/v-bind-style': 'error',
    'vue/v-on-style': 'error',
  }
}

What did you do? Please include the actual source code causing the issue.

<template v-for="(item, index) of displayedItems">
  <slot name="item" :item="item.data" :item-key="index" :selected="item.selected" :item-index="index" :toggle-selection="handleSelection" />
</template>

What did you expect to happen?

Rule should not catch this one, because putting a key on a slot will cause a template compilation error.

What actually happened? Please include the actual, raw output from ESLint.

error Custom elements in iteration require 'v-bind:key' directives vue/no-invalid-v-for

Parsing error with SVG <use> with xlink:href attribute

Tell us about your environment

  • ESLint Version: 4.1.1
  • eslint-plugin-vue Version: 3.1.3
  • Node Version: 6.9.2

Please show your full configuration:

env:
  browser: true
  es6: true
extends:
  - eslint:recommended
  - plugin:vue/recommended

What did you do? Please include the actual source code causing the issue.

<template>
  <svg class="icon">
    <use xlink:href="#chevron"></use>
  </svg>
</template>

What did you expect to happen?
xlink:href attributes shouldn't cause parsing errors. We are using an SVG sprite built with gulp-svg-sprite for our iconography; this attribute refers to the icon's ID.

What actually happened? Please include the actual, raw output from ESLint.
Received the following Parsing error:

  0:0  error  Parsing error: Cannot read property 'startOffset' of undefined

The error disappears upon removal of the xlink:href attribute.

Invalid root error on Table root

Tell us about your environment

  • ESLint Version: ^3.19.0
  • eslint-plugin-vue Version: ^3.2.0
  • Node Version: v7.9.0

What did you do? Please include the actual source code causing the issue.

<template>
	<table>
		<custom-thead></custom-thead>
	</table>
</template>

What did you expect to happen?
For linting to pass

What actually happened? Please include the actual, raw output from ESLint.
2:2 error The template root requires exactly one element vue/no-invalid-template-root

Add support for v-on="$listeners"

The no-invalid-v-on rule is breaking for the new v-on="$listeners" feature in Vue v2.4.0

Tell us about your environment

  • ESLint Version: v3.19.0
  • eslint-plugin-vue Version: v3.5.1
  • Node Version: v7.9.0

What did you do? Please include the actual source code causing the issue.

<template>
	<div>
		<input v-on="$listeners">
	</div>
</template>

What did you expect to happen?
No warning/errors.

What actually happened? Please include the actual, raw output from ESLint.


WARNING in ./src/components/Input/src/Input.vue

  โœ˜  https://google.com/#q=vue%2Fno-invalid-v-on  'v-on' directives require event names
  src/components/Input/src/Input.vue:12:4
  			v-on="$listeners"

Rule proposition: prop-specificity

A rule to require a certain level of prop specificity could be useful. Two levels of specificity that come to mind:

  1. At least type(s) (e.g. myProp: String or myProp: [String, Number]) - object value for props
  2. At least definition object (e.g. myProp: { type: String }), making it easier to add other restrictions (e.g. required, validate) - requires object value for props and also for any properties on that object

Rule improvement: `no-side-effects-in-computed-properties`

As @armano2 pointed in #58 we should consider supporting few more cases in this rule:

1. Plugins provided by vuejs team, like:

Vue-router

export default {
  computed: {
    foo () {
      this.$router.go(-1)
      this.$router.push({})
      this.$router.replace({})
      return true
    }
  }
}

or Vuex

export default {
  computed: {
    foo () {
      this.$store.commit({}) // Mutations
      this.$store.dispatch('', {}) // Actions
      return true
    }
  }
}

2. Prototype methods

return Array.prototype.unshift.apply(this.object, data) // i know this is invalid
return Object.assign(this.object, data);

There are probably more cases. We should gather them all here in this topic, discuss and choose which one are we going to support. Supporting different cases is good, but too many edge cases - not necessarily. We need to be smart about this.

Style Guide Collaboration

I'm developing an official Vue style guide and although not all rules there will be enforceable through this plugin, I think it makes sense to collaborate here, especially for those rules that are enforceable. Right now, I'm thinking the style guide could serve as the official documentation for any recommended rules in this plugin and these two resources could be published together.

You can see the current progress in this branch, with the live result here. Any feedback/contributions are welcome and rules are not set in stone, so don't panic if you see something you disagree with. ๐Ÿ˜„

I've also not kept up-to-date with the conversation in various issues here, so I apologize if some of it is out of sync with plans you've been making. Please ping me on discussions you think I should know about, or if you'd like my input.

Rule proposition: `no-shared-component-data` must be a function.

When using the data property on a component (i.e. anywhere except on new Vue), the value must be a function that returns an object.

based on style guide

Invalid:

Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})
export default {
  data: {
    foo: 'bar'
  }
}

Valid:

new Vue({
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
new Vue({
  data: {
    foo: 'bar'
  }
})
Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
export default {
  data: function () {
    return {
      foo: 'bar'
    }
  }
}

Message: Use the latest vue-eslint-parser

Tried to use the eslint-plugin-vue@beta, but i'm getting the following error: Use the latest vue-eslint-parser.

Here's my .eslintrc.js:

// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
sourceType: 'module',
parser: 'babel-eslint',
sourceType: 'module',
allowImportExportEverywhere: false
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: ['eslint:recommended',
'plugin:vue/recommended'],
// required to lint *.vue files
plugins: [

],
'settings': {

},
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'camelcase': 2,
'vue/no-invalid-template-root':2
}
}

I installed the parser, and upgraded eslint to 4.0, but i'm still getting the error, both in vs code, and at compile time.
image.

vue/order-in-components throws eslint rule schema validation error on custom order

Tell us about your environment
Vue client-side web application, base build from vue-cli, with eslint-plugin-vue@beta added.

  • ESLint Version: 4.2.0
  • eslint-plugin-vue Version: 3.5.0
  • Node Version: 8.0.0

Please show your full configuration:

// http://eslint.org/docs/user-guide/configuring

const OFF = 0
const WARN = 1
const ERROR = 2

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  plugins: [
    'vue',
    'mocha'
  ],
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: [
    'standard',
    'plugin:vue/recommended'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': OFF,
    // allow async-await
    'generator-star-spacing': OFF,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? ERROR : OFF,
    // Set up vue eslint rules, starting from the base vue/recommended set.
    'vue/html-no-self-closing': OFF,
    // 'vue/no-invalid-v-on': OFF,
    'vue/html-quotes': ERROR,
    'vue/no-duplicate-attributes': ERROR,
    'vue/no-template-key': ERROR,
    'vue/order-in-components': [ERROR, {
      order: [
        'name',
        'render',
        'renderError',
        'template',
        'props',
        'propsData',
        'inject',
        'data',
        'computed',
        'watch',
        'methods',
        'provide',
        'directives',
        'filters',
        'parent',
        'extends',
        'mixins',
        'components',
        'LIFECYCLE_HOOKS'
      ]
    }],
    'vue/v-bind-style': ERROR,
    'vue/v-on-style': ERROR,
    "mocha/no-exclusive-tests": ERROR,
    "mocha/no-mocha-arrows": ERROR,
    "mocha/no-global-tests": ERROR,
    "mocha/no-identical-title": ERROR,
    "mocha/no-top-level-hooks": ERROR,
    "mocha/valid-test-description": WARN
  }
}

What did you do? Please include the actual source code causing the issue.
Ran eslint --ext .js,.vue src test/unit/specs with the above configuration.

What did you expect to happen?
For the linter to run the rules and possibly throw a few failures since I've just changed them.

What actually happened? Please include the actual, raw output from ESLint.

$ eslint --ext .js,.vue src test/unit/specs
[object Object]:
	Configuration for rule "vue/order-in-components" is invalid:
	Value "[object Object]" should NOT have more than 0 items.

Error: [object Object]:
	Configuration for rule "vue/order-in-components" is invalid:
	Value "[object Object]" should NOT have more than 0 items.

    at validateRuleOptions (/Users/tom/projects/content-builder/node_modules/eslint/lib/config/config-validator.js:112:15)
    at Object.keys.forEach.id (/Users/tom/projects/content-builder/node_modules/eslint/lib/config/config-validator.js:152:9)
    at Array.forEach (native)
    at validateRules (/Users/tom/projects/content-builder/node_modules/eslint/lib/config/config-validator.js:151:30)
    at Object.validate (/Users/tom/projects/content-builder/node_modules/eslint/lib/config/config-validator.js:206:5)
    at loadFromDisk (/Users/tom/projects/content-builder/node_modules/eslint/lib/config/config-file.js:549:19)
    at Object.load (/Users/tom/projects/content-builder/node_modules/eslint/lib/config/config-file.js:592:20)
    at Config.getLocalConfigHierarchy (/Users/tom/projects/content-builder/node_modules/eslint/lib/config.js:228:44)
    at Config.getConfigHierarchy (/Users/tom/projects/content-builder/node_modules/eslint/lib/config.js:182:43)
    at Config.getConfigVector (/Users/tom/projects/content-builder/node_modules/eslint/lib/config.js:287:21)

To me it looks like the eslint rule validator is taking the provided schema on the rule (which is []) and interpreting that as expecting an empty array, but I only skimmed the validator code fairly cursorily. At the least I can't see any issues with my order-in-components config compared to the documentation.

Suggestion: allow empty attribute value when event modifier is used

More specifically, only stop and prevent should be allowed.

Tell us about your environment

  • ESLint Version: 4.0.0
  • eslint-plugin-vue Version: 3.1.3
  • Node Version: 8

Please show your full configuration:

Vanilla

What did you do? Please include the actual source code causing the issue.

<template>
<el-from @submit.native.prevent></el-form>
</template>

What did you expect to happen?

No error. Since this is illustrated in the official doc. https://vuejs.org/v2/guide/events.html#Event-Modifiers

What actually happened? Please include the actual, raw output from ESLint.

Error. 'v-on' directives require that attribute value .
vuejs/vetur#279

Proposition: Keep configs in the same repo

Hey, I see that currently there are two repositories:

  • eslint-plugin-vue
  • eslint-config-vue

Not everyone knows, but you can actually keep everything in one repository which makes maintaining far easier and releasing new versions less troubleprone (Example configs in eslint-plugin-ember repo).

I also recommend creating two configs:

  • base
  • recommended

This way we can keep all necessary settings in base config, and recommended settings for eslint-plugin-vue in the second file, which will basically extend base config with recommended settings for each new rule.

This will make the configuration even easier:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    // override rules' settings here
  }
}

I'm willing to work on this one if you agree with me.

html-no-self-closing shouldn't be part of the recommended config

What did you expect to happen?

html-no-self-closing should not have been included. I don't see why it should be the default. It's a preference. People used to XHTML won't like that.

What actually happened?

html-no-self-closing was enabled when using plugin:vue/recommended.

Empty :key + v-for breaks eslint vue

Version:
eslint-plugin-vue 3.1.1
eslint: 4.0.0

Minimal template:

<template>
    <div v-for="(item, index) in suggestions" :key></div>
</template>

Expect:
report v-bind directive needs an attribute value.

Actual:
crash.

Cannot read property 'references' of null
TypeError: Cannot read property 'references' of null
    at isUsingIterationVar (node_modules/eslint-plugin-vue/lib/rules/no-invalid-v-for.js:24:32)
    at EventEmitter.VAttribute[directive=true][key.name='for'] (node_modules/eslint-plugin-vue/lib/rules/no-invalid-v-for.js:54:32)
    at emitOne (events.js:120:20)
    at EventEmitter.emit (events.js:210:7)
    at NodeEventGenerator.applySelector (node_modules/eslint/lib/util/node-event-generator.js:265:26)
    at NodeEventGenerator.applySelectors (node_modules/eslint/lib/util/node-event-generator.js:294:22)
    at NodeEventGenerator.enterNode (node_modules/eslint/lib/util/node-event-generator.js:308:14)
    at traverse (node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/lib/traverse-nodes.js:137:15)
    at traverse (node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/lib/traverse-nodes.js:146:21)
    at traverse (node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/lib/traverse-nodes.js:151:13)

eslint-plugin-html v2 compatibility

I am about to release a new major version of eslint-plugin-html and it will not export processors anymore, so this won't work anymore. Of course if you don't change your eslint-plugin-html dependency version everything will be fine, but I don't plan to maintain the v1, and the v2 has long awaited features like the eslint --fix support, which might interest you.

My plugin isn't exposing processors anymore because the current eslint system is too limited (e.i.: doesn't support --fix), and I wanted users to be able to configure the html file extensions they want (most of my plugin PR was about adding new file extensions). Instead, it patches some ESLint functions as soon as it is required. It seems scarry but it already did it from the beginning and it worked correctly since then.

So one solution would be to simply require("eslint-plugin-html"); in your plugin and that's it. .vue files are already considered as HTML by default, but if you want to override the default to only lint .vue files, you can add the following setting in eslint-config-vue:

    "settings": {
        "html/html-extensions": [".vue"],
        "html/xml-extensions": []
    }

See documentation and changelog. I released the v2 as a beta tag, so you can try it with npm i eslint-plugin-html@beta.

Let me know if you have any concern about those changes.

Migrate eslint-plugin-vue-trail to eslint-plugin-vue

We're in the process of moving @mysticatea's eslint-plugin-vue-trial to this repository. Everything is going on on the dev branch.

I'm creating this issue so we can track progress and discuss further things in public (full transparency).

As we discussed eslint-plugin-vue-trial will be a great base for further work and future rules.

Rule proposition: `no-side-effects-in-computed-properties`

This rule would check if there are no side effects inside computed properties.

So this example would throw an error:

export default {
  computed: {
    hello() {
      this.lastName = 'Dolor' // <- error "Unexpected side effect in computed property 'hello'"
      return `Hello ${this.firstName} ${this.lastName}`
    }
  },
  data() {
    return {
      firstName: 'Lorem',
      lastName: 'Ipsum'
    }
  }
}

What do you think @mysticatea @chrisvfritz ?

console.assert Error running on Atom editor

Hello guys! I've been successfully using this plugin with my Vue project directly on CLI, without any issues.

Today I was able to make the linter work on Atom editor with .vue files, but there's an issue with console.assert calls on lib/utils/index.js. Looks like it doesn't have console.assert method for some reason.

console-assert-issue

If I remove those calls from the node_modules file locally, it works like a charm. So, questions:

  1. Are those really necessary?
  2. Is this an linter (atom package) or perhaps Atom issue?

macOS 10.12.5
Atom 1.18.0
Atom Plugins:
linter 2.2.0
linter-eslint 8.2.1

Vue lint rules not being applied beyond entry point (not traversing subdirectories).

To help out othersโ€ฆ I spent more hours on this than I care to countโ€ฆ for those trying to setup auto ESlinting with webpack 3.x eslint-plugin-vue v3.x, eslint-friendly-formatter v3.x and eslint-html-plugin v3.x, read on (note Iโ€™m using Sublime Text 3):

If I comment out .vue from eslint-plugin-html settings everything seems to work:

to help others, in the .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  plugins: [
        'html',
  ],
  settings: {
        // if you have .vue active for eslint-html-plugin settings
        // linting will not progress through all subdirectories
        // it conflicts with eslint-plugin-vue (latest v3.5.0)
        // it will stop at the main entry point.
        "html/html-extensions": [".html", /* ".vue" */],  // consider .html files as XML
        "html/report-bad-indent": "error",
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended' // or 'plugin:vue/base'
  ],
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    'comma-dangle': ['error', 'always-multiline'],
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'no-unused-vars': ['warn'],
    'no-console': 0,
    'vue/order-in-components': [2, {
      order: [
        ['name', 'delimiters', 'functional', 'model'],
        ['components', 'directives', 'filters'],
        ['parent', 'mixins', 'extends', 'provide', 'inject'],
        'el',
        'template',
        'props',
        'propsData',
        'data',
        'computed',
        'watch',
        'lifecycle_hooks',
        'methods',
        'render',
        'renderError'
      ]
    }] // END order
  },
};

in the ignore file:

# ESlint #
##########
/tmp/**
test.js
webpack.config.js
/webpack.config.js
**/webpack.config.js
in the webpack config:

in the webpack config

// within rules

{
      enforce: 'pre', // with this eslint will not process files done by babel-loader
      test: /\.(vue|js)$/, // /\.js$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,
      options: {
        emitWarning: true,
        // community formatter
        formatter: require('eslint-friendly-formatter'),
        // cache: DEVELOPMENT,        
        fix: true, // Set to true for eslint autofixing
        // quite: true, // Process report errors only and ignore warnings
      },
    }, {
        test: /\.vue$/,
        loader: 'vue-loader', // Used for Vue Templates. Also Hot Module Replacement only works with .vue files
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },

Compatibility with ESLint 4

Hi, eslint-plugin-html author here. ESLint released its v4, and I released a v3 of my plugin to support it.

I've got some users who are using the vue plugin reporting issues because the html plugin version is fixed to v2. Would you mind changing the html plugin version to v3?

As I understand, you are planing to move away from the html plugin. I don't mind, but I think that in the meantime, users should be allowed to upgrade to ESLint v4.

Does not support `--fix`

โฏ echo "const a = 'single+semi';" > foobar.js
โฏ ./node_modules/.bin/eslint --fix foobar.js

  1:7  error  'a' is assigned a value but never used  no-unused-vars

โœ– 1 problem (1 error, 0 warnings)

โฏ cat foobar.js
const a = "single+semi"
โฏ ccat test.vue
<template>
  <div v-on:click.prevent="activateTab()" v-bind:class="{ active: active }">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'tab-link',
    data() {
      return {
        storeRegistered: false,
      };
    },
    computed: {
      active() {
        const tab = this.tabs[this.tabGroup];
        const tabName = this.tabName;
        const forceActive = this.forceActive;
        const activeTabName = tab.activeTabName;
        const isActive = !!((tab && activeTabName === tabName) || forceActive);
        return isActive;
      },
      tabs() {
        return this.$store.getters.getTabs;
      },
    },
    props: {
      isDefaultTab: {
        type: Boolean,
      },
      tabGroup: {
        type: String,
        required: true,
      },
      tabName: {
        type: String,
        required: true,
      },
    },
    created() {
      const tab = {};

      tab[this.tabGroup] = {
        activeTabName: this.isDefaultTab ? this.tabName : '',
      };

      if (!this.storeRegistered) {
        this.$store.dispatch('REGISTER_TAB', tab);
        this.storeRegistered = true;
      }
    },
    methods: {
      activateTab() {
        this.$store.dispatch('SET_ACTIVE_TAB', { tabGroup: this.tabGroup, tabName: this.tabName });
      },
    },
  };
</script>

โฏ ./node_modules/.bin/eslint --fix test.vue

   9:11  warning  Strings must use doublequote  quotes
  13:8   warning  Extra semicolon               semi
  17:21  error    Unallowed use of `this`       fp/no-this
  17:31  error    Unallowed use of `this`       fp/no-this
  17:45  warning  Extra semicolon               semi
  18:25  error    Unallowed use of `this`       fp/no-this
  18:37  warning  Extra semicolon               semi
  19:29  error    Unallowed use of `this`       fp/no-this
  19:45  warning  Extra semicolon               semi
  20:48  warning  Extra semicolon               semi
  21:79  warning  Extra semicolon               semi
  22:24  warning  Extra semicolon               semi
  25:16  error    Unallowed use of `this`       fp/no-this
  25:43  warning  Extra semicolon               semi
  42:21  warning  Extra semicolon               semi
  44:11  error    Unallowed use of `this`       fp/no-this
  45:24  error    Unallowed use of `this`       fp/no-this
  45:44  error    Unallowed use of `this`       fp/no-this
  45:59  warning  Strings must use doublequote  quotes
  46:8   warning  Extra semicolon               semi
  48:12  error    Unallowed use of `this`       fp/no-this
  49:9   error    Unallowed use of `this`       fp/no-this
  49:30  warning  Strings must use doublequote  quotes
  49:50  warning  Extra semicolon               semi
  50:9   error    Unallowed use of `this`       fp/no-this
  50:36  warning  Extra semicolon               semi
  55:9   error    Unallowed use of `this`       fp/no-this
  55:30  warning  Strings must use doublequote  quotes
  55:60  error    Unallowed use of `this`       fp/no-this
  55:84  error    Unallowed use of `this`       fp/no-this
  55:99  warning  Extra semicolon               semi
  58:4   warning  Extra semicolon               semi

โœ– 32 problems (14 errors, 18 warnings)

Eslint-plugin-vue goes crazy on normal js but not working in vue files

Tell us about your environment

Please show your full configuration:

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // required to lint *.vue files
  plugins: [
    'html',
    'vue'
  ],
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  // add your custom rules here
  'rules': {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    'no-undef': 'off',
    'quotes': ['warn', 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }],
    'semi': ['warn', 'always']
  }
}

What did you do? Please include the actual source code causing the issue.
A bunch of eslint-plugin-vue rules gets triggered in a normal js file, which is actually a mixin file I used for my global object for state management.

import store from './store';

export default {
  data () {
    return {
      //...
    };
  },
  computed: {
    //...
  },
  methods: {
    //...
  }
};

What did you expect to happen?
eslint-plugin-vue is only triggered in *.vue files, or just wonder if there is a way to disable just the eslint-plugin-vue rules on normal .js

What actually happened? Please include the actual, raw output from ESLint.
Eslint-plugin-vue goes crazy in Atom on normal js
image

but not actually working in vue files (note I took the key out of the v-for, and I actually have v-for and v-if in the same component.)
image

Add rules and documentation

Hi! ๐Ÿ˜Š

We've been using Vue for a while and we have the need of an extended version of this plugin. Basically we need something like https://github.com/yannickcr/eslint-plugin-react for Vue ๐Ÿ‘

We have a couple of rules that I think other people could benefit from them - they are based on eslint-plugin-react:

Maybe we are missing some stuff that could help us! Suggestions are welcome ๐Ÿ˜Š

I am more than happy to put together a PR with these rules, but I wanted to check first what you think or if anyone else feels the need for them :)

What do you think @yyx990803 @chrisvfritz ? (Not sure If I am mentioning everyone I should)

Rule proposition: order-in-components

As I mentioned in #10, I think that creating separate issue for each rule proposition has many benefits, so this is my first proposition:

Rule name: order-in-components
Description: Keep order of properties in components according to https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#ordering

Gitlab's style guide lists all properties, I would however consider grouping lifecycle hooks in order to make it simpler, like so:

  • name
  • props
  • mixins
  • data
  • components
  • computedProps
  • methods
  • lifecycle hooks

Introducing order rule we can make sure that every component is written in exactly the same way, which would make it more readable and consistent across codebase.

This rule should be configurable, so that anyone can amend proposed order in .eslintrc.

Error using JSX

Software: vscode 1.11.0
OS: macOS

Hi, I followed your instruction on README file, but I got this error.

screen shot 2017-04-06 at 2 34 35 pm

Here's my eslint config

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: ['vue', 'standard'],
  // required to lint *.vue files
  plugins: [
    'vue',
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-use-before-define': 0
  }
}

Any solution please

Parser fails for template with inline SVG containing a viewBox attribute

Tell us about your environment

  • ESLint Version: 4.0.0
  • eslint-plugin-vue Version: 3.1.3
  • Node Version: 8.0.0

Please show your full configuration:
Vanilla

What did you do? Please include the actual source code causing the issue.

<template>
  <div>
    <svg viewBox="0 0 40 40"></svg>
  </div>
</template>

What did you expect to happen?
No error reported.

What actually happened? Please include the actual, raw output from ESLint.

0:0 error Parsing error: Cannot read property 'startOffset' of undefined

vuejs/vetur#291

Rule proposition: No async in computed property functions

A common issue that beginners run into is relying on async code in a computed property function, even though we warn about it in the docs. This might not be possible to identify 100% of the time, but it would be nice for the linter to warn about:

  • async/await
  • passing a function as a function argument (covers promises and callbacks)

Am I missing any cases where either of the above would actually be valid inside a computed property function?

v-bind:a.sync is reported

<ui-period-picker :start.sync="startDate" :end.sync="endDate" />

Expected

No error.

Happening

Produces the 'v-bind' directives don't support the modifier 'sync' error.

Conflict with the eslint-plugin-html

  • version: 3.5.1
  • vue-cli: 2.8.2
// Copy from webpack-template
extends: 'airbnb-base',
plugins: [
  'html'
],

After adding the plugin to extends, as below, eslint has no effect on the js in the vue single file component.

// Copy from webpack-template
extends: [
  'airbnb-base',
  'plugin:vue/recommended',
],
plugins: [
  'html'
],

ไธ็ฎ—bugๅง๏ผŸ remove html ๆ’ไปถๅฐฑๅฅฝไบ†ใ€‚

some files ignored?

Tell us about your environment

  • ESLint Version: 4.1.1
  • eslint-plugin-vue Version: 3.3.0
  • Node Version: 8.1.2

Please show your full configuration:

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended" // or 'plugin:vue/base'
  ],
  "rules": {
    // override/add rules' settings here
    "vue/html-no-self-closing": "error",
    "vue/require-v-for-key": "error"
  }
}

What did you do? Please include the actual source code causing the issue.

  • productos.vue: eslint does not work at all for <template> section, but does for <script>.
  • atributos.vue: eslint works perfectly.

What did you expect to happen?

I am using the VS Code ESLint extension and I expect to see Vue template errors while typing.

What actually happened? Please include the actual, raw output from ESLint.

Some files display such errors, others don't even though ESLint does show errors for the <script> section.

Relevant: vuejs/vetur#235.

Rule Proposition: `name` property casing

Per feedback in #77 (comment):

Rule proposition:

name property casing

Define a style for the name property casing for consistency purposes:

Configuration

'vue/name-casing': ['camelCase'|'kebab-case'|'PascalCase']

camelCase
{
  name: 'myComponent'
}
kebab-case
{
  name: 'my-component'
}
PascalCase
{
  name: 'MyComponent'
}

cc @armano2

html-no-self-closing: Ignore components option

I think it is pretty common in Vue templates (for example inside .vue files, not in HTML page) to write self-closing component, for example: <ui-dropdown :options="options" />. It also don't cause any potential issue since the component will be rendered in HTML even before being put in the DOM thanks to the template compiler.

It would be nice if the recommended config had an option set to the html-no-self-closing rule to ignore non-HTML tags.

This should then be reported:

<div />
<ui-dropdown />

This shouldn't be reported:

<div></div>
<ui-dropdown />

Parsing error: Cannot read property 'startOffset' of null

Tell us about your environment

  • **ESLint Version:4.1.1
  • **eslint-plugin-vue Version:3.2.0
  • **Node Version:6.10.2

Please show your full configuration:


'env': {
        'browser': true
    },
    'extends': [
        'plugin:vue/base'
    ],


What did you do? Please include the actual source code causing the issue.

<table>
  <tr>
    <td>

	{{message}}		
   </td>			
  </tr>
</table>


What did you expect to happen?
tbody ๏ผŸ

What actually happened? Please include the actual, raw output from ESLint.

Rule proposition: `no-dupe-keys`.

There is many fields in vue instance/component where we can specify properties visible inside component, data, props, computed, methods.
Invalid Code:

export default {
  props: ['foo'],
  props: {
    foo: String  
  },
  computed: {
    foo () {
    }
  },
  data() {
    return {
      foo: null
    }
  },
  data: {
    foo: null
  },
  methods: {
    foo () {
    }
  }
}

Also there is few reserved names witch should not be overridden by vue instance:

  • properties: $data, $props, $el, $options, $parent, $root, $children, $slots, $scopedSlots, $refs, $isServer, $attrs, $listeners
  • methods: $watch, $set, $delete, $on, $once, $off, $emit, $mount, $forceUpdate, $nextTick, $destroy .....

also user should be able to specify his own reserved names to remove conflicts with used plugins.

Don't require key with v-for on template tags

  • ESLint Version: 3.19.0
  • eslint-plugin-vue Version: 3.1.3
  • Node Version: 7.9.0

What did you do? Please include the actual source code causing the issue.

<template>
	<div>
		<template v-for="crumb in crumbArr" :key="crumb">
			<custom-el :crumb="crumb" />
		</template>
	</div>
</template>

What did you expect to happen?
For it to work.

What actually happened? Please include the actual, raw output from ESLint.
No ESLint error. Vue error: <template> cannot be keyed. Place the key on real elements instead.

Rule proposition: Template Indentation

It would be great to have the ability of having only one style for the template/render function HTML, by enforcing an indentation style.

It could be configured by setting the option to tab for tabs or a positive number for spaces.

Proposal:

  1. For tabs 'vue/indent': 'tab'
<application>
	<component />
</application>
  1. For 2 spaces: 'vue/indent': 2
<application>
  <component />
</application>
  1. No indentation: 'vue/indent': 0
<application>
<component />
</application>

Rule proposition: Maximum number of props per line

We often struggle to read templates with a different number of props per line.

This rule would limit the maximum number of props on a single line can to improve readability.
There should also be the possibility to disable this rule when a tag has only one prop.

Proposal
'vue/max-props-per-line': {max: Number, when: 'always|multiline'}

The default could be: 'vue/max-props-per-line': {max: 1, when: 'always'}

  1. Enforcing one prop per line always 'vue/max-props-per-line': {max: 1, when: 'always'}
<component 
  prop="something"
  foo="bar"
  />

<component
  prop="something"
  />
  1. Enforcing one prop per line only when it has multilines it would accept: 'vue/max-props-per-line': {max: 1, when: 'multiline'}
<component prop="something" foo="bar" />

<component
  prop="something"
  foo="bar" 
  />

Suggestion: relax `invalid-template-root` for `v-if`

Tell us about your environment

  • ESLint Version: 4.0.0
  • eslint-plugin-vue Version: 3.1.2
  • Node Version: 8.0.0

Conditionally empty template root can be acceptable. For example, in a list item component, if an item is empty/undefined, empty template root represents skipping render.

The reason behind it is that we can encapsulate null check in the component, so we can pass empty value to the component.

vue-hackernews also employs such strategy.
https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/components/Comment.vue#L2

<template>
  <li v-if="comment" class="comment">
  </li>
</template>

Rule Proposition: Props Casing

Per feedback in #77 (comment):

Rule proposition:

Props Casing

Define a style for the props casing in templates

We (at GitLab) often see inconsistency in the way we provide props through templates:

<component myProp="prop"></component>

or

<component my-prop="prop"></component>

Configuration

'vue/props-casing': ['camelCase'|'kebab-case'|'PascalCase']

camelCase
<component myProp="prop"></component>
kebab-case
<component my-prop="prop"></component>
PascalCase
<component MyProp="prop"></component>

cc @armano2

vue/no-parsing-error: comma-separated methods

Hi,

my installed eslint packages are the following:

[email protected]
vue-eslint-parser@^1.1.0-7
[email protected]
[email protected]
eslint-scope@^3.7.1
[email protected]
eslint@^4.0.0
[email protected]
eslint-scope@^3.7.1`

my config file contains:

"extends": [
      "plugin:vue/recommended"
  ],

The following lines of HTML

<a title="upload file" href="" class="button" @click.prevent="setUploadType('DIR'); showModal('uploadFile')">
            <i class="fa fa-fw fa-lg fa-cloud-upload" aria-hidden="true"></i>
</a>

are producing this error:

32:79 error Parsing error: Unexpected token ; vue/no-parsing-error

Calling two methods in one @click is working and seems to be valid javascript.
So maybe this is a bug in this rule.

Vue files eslint errors detected, can't be fixed via --fix

I have a project with some .js files and some .vue files.

I recently upgraded the linting rules and while I successfully applied to .js files, im having trouble doing the same with the .vue ones.

running eslint ... src/... *.vue detects all the 'errors', mostly indent, single quotes and semicolons. If i try to run the same command with --fix, it does nothing.

Is there some kind of limitation to this ? unfortunately it is a big project and i get over 5000 errors, so to do this manually would be too much.

And i would think my configuration is fine because the linter is finding the errors to begin with on all .vue files.

As a side note, I use ATOM, and have it setup so that it highlights any eslint errors i have. For some reason, on vue files, the errors are not highlighted.

Self closing elements break v-if rules

Self-closing elements break the following rules:

  • vue/no-invalid-template-root
  • vue/no-invalid-v-else-if
  • vue/no-invalid-v-else

Expected

This should not be reported:

<template>
  <c1 v-if="1" />
  <c2 v-else-if="1" />
  <c3 v-else />
</template>

Happening

This works:

<template>
  <c1 v-if="1"></c1>
  <c2 v-else-if="1"></c2>
  <c3 v-else></c3>
</template>

This doesn't:

<template>
  <c1 v-if="1" />
  <c2 v-else-if="1" />
  <c3 v-else />
</template>

Here are the report messages:

  26:3  error  The template root requires the next element which has 'v-else' directives if it has 'v-if' directives     vue/no-invalid-template-root
  27:7  error  'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive  vue/no-invalid-v-else-if
  28:7  error  'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive        vue/no-invalid-v-else

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.