How to use eslint-plugin-vue - 10 common examples

create (context) {
    return VueUtils.defineTemplateBodyVisitor(context, {
      "VElement" (node) {
        const options = context.options[0] || {};
        const componentOptions = options.components || [];
        const typesToValidate = ['label'].concat(componentOptions);
        const nodeType = utils.getElementType(node);

        // Only check 'label' elements and custom types.
        if (typesToValidate.indexOf(nodeType) === -1) {
          return;
        }
        const required = options.required || { every: ['nesting', 'id'] };
        const allowChildren = options.allowChildren || false;
        if (!isValid(node, required, allowChildren)) {
          context.report({
            node,
            message: errorMessage,

function create(context) {
  return utils.executeOnVue(context, obj => {
    const filePath = context.getFilename();

    // Skip if not .vue file
    if (!filePath.endsWith('vue')) {
      return;
    }

    const node = obj.properties.find(
      item => item.type === 'Property' && item.key.name === 'name' && item.value.type === 'Literal'
    );

    // Components require a name
    if (!node) {
      context.report({
        message: 'Component is missing a component name',
        loc: {

getElementType (node) { // return tagName
    assert(node && node.type === 'VElement');
    if (utils.hasAttribute(node, 'is')) {
      return this.getAttributeValue(node, 'is');
    } else if (utils.hasDirective(node, 'bind', 'is')) {
      return 'component';
    }
    return node.rawName;
  },
  isHiddenFromScreenReader (node) {

const postcssPresetEnv = require("postcss-preset-env")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

// Shim for `src/versions.js`
const VERSIONS = `export default ${JSON.stringify({
    "vue-eslint-demo": {
        repo: "mysticatea/vue-eslint-demo",
        version: require("./package.json").version,
    },
    eslint: {
        repo: "eslint/eslint",
        version: require("eslint/package.json").version,
    },
    "eslint-plugin-vue": {
        repo: "vuejs/eslint-plugin-vue",
        version: require("eslint-plugin-vue/package.json").version,
    },
    "vue-eslint-parser": {
        repo: "mysticatea/vue-eslint-parser",
        version: require("vue-eslint-parser/package.json").version,
    },
    "babel-eslint": {
        repo: "babel/babel-eslint",
        version: require("babel-eslint/package.json").version,
    },
    "typescript-eslint-parser": {
        repo: "eslint/typescript-eslint-parser",
        version: require("typescript-eslint-parser/package.json").version,
    },
    typescript: {
        repo: "Microsoft/typescript",
        version: require("typescript/package.json").version,

{
      // These files are used in README.md.
      files: ["readme-comments*.js"],
      rules: {
        "prettier/prettier": "off",
      },
    },
    {
      // TypeScript.
      files: ["*.ts"],
      parser: "@typescript-eslint/parser",
    },
    {
      // Vue `

getAttribute (node, attr) {
    return utils.getAttribute(node, attr) || this.getDirective(node, 'bind', attr);  // todo eslint-plugin-vue util.getDirective 稳定后换回
  },
  getDirective (node, name, argument) {

getElementType (node) { // return tagName
    assert(node && node.type === 'VElement');
    if (utils.hasAttribute(node, 'is')) {
      return this.getAttributeValue(node, 'is');
    } else if (utils.hasDirective(node, 'bind', 'is')) {
      return 'component';
    }
    return node.rawName;
  },
  isHiddenFromScreenReader (node) {

"VAttribute[directive=true][key.name.name='on'][key.argument.name='click']" (node) {
        const requiredEvents = ['keydown', 'keyup', 'keypress'];
        const element = node.parent.parent;
        if (VueUtils.isCustomComponent(element)) {
          return;
        } else if (
          utils.isHiddenFromScreenReader(element)
          || utils.isPresentationRole(element)
        ) {
          return;
        // } else if (isInteractiveElement(type, props)) {  // todo
        //   return;
        } else if (utils.hasAnyEvent(element, requiredEvents)) {
          return;
        }

        // Visible, non-interactive elements with click handlers require one keyboard event listener.
        context.report({
          node,
          message: errorMessage,

create (context) {
    return VueUtils.defineTemplateBodyVisitor(context, {
      "VAttribute" (node) {
        const name = utils.getAttributeName(node);
        if (name) {
          const normalizedName = name.toLowerCase();
          if (normalizedName.indexOf('aria-') !== 0) {
            return;
          }
          const isValid = [...aria.keys()].indexOf(normalizedName) > -1;
          if (isValid) {
            return
          }
          context.report({
            node,
            message: `${name}: This attribute is an invalid ARIA attribute.`
          });
        }

remove(unusedVuexProperties, property => {
        return argName === property.name;
      });
    }),
    utils.executeOnRootTemplateEnd(() => {
      if (unusedVuexProperties.length) {
        utils.reportUnusedVuexProperties(context, unusedVuexProperties);
      }
    })
  );

  return Object.assign(
    {},
    initialize,
    eslintPluginVueUtils.defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor)
  );
};