Please write rule name what you want to improve: require-g-image-src

How are the rules improved?

Vue accepts passing an object directly to v-bind. It would be cool to support it besides passing props directly.

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

// This should be accepted
<g-image v-bind="{ src: '' }" />

// This should be accepted or give a warning
<g-image v-bind="computed" />
<g-image v-bind="method(something)" />

// This should give an error
<g-image v-bind="{}" />

Additional context
I'm not sure if you could check the returned object from computed properties and methods. If that's possible that should be accepted as mentioned on comment.

Now, this repo's main branch is develop.
But I don't know about this strategy's merit.
So, I'd like to change main branch.

1. Delete develop branch
2. We can checkout from master branch

Please write rule name what you want to improve:
require-g-link-to

How are the rules improved?:
Gridsome's g-link can use href.

<g-link href="http://www.example.com">sample</g-link>
👇
<a href="http://www.example.com" target="_blank" rel="noopener">sample</a>

Now g-link requires to. However if it has href, should work g-link.

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

// All correct
<template>
  <div>
    <g-link to="/" class="foo">link is here</g-link>
    <g-link href="http://www.example.com" class="foo">link is here</g-link>
  </div>
</template>

Additional context

Please describe what the rule should do:

g-link is required 'to'.
When 'to' is not exist, display error message.

What category should the rule belong to?

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

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

<template>
    <g-link
    class="foo"
    exact
  >
</template>

This would be correct:

<template>
  <g-link
    to="/"
    class="foo"
    exact
  >
</template>

<template>
  <g-link
    :to="to.path"
    class="foo"
    exact
  >
</template>

Additional context

Please write rule name what you want to improve: format-query-block

How are the rules improved?: Rules should allow queries to be indented one level inside their block.

Provide 2-3 code examples that this rule should warn about:
This is valid right now:

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

This is valid NOT right now:

<static-query>
  query {
    metadata {
      siteName
    }
  }
</static-query>

Additional context
VSCode allows you to collapse/fold blocks based on indentation. If this isn't allowed, anything inside static-query or page-query will be visible.

I was just trying out Yarn 2 to see if there were any major issues with Gridsome and got this warning:

eslint-plugin-gridsome@npm:1.4.0 doesn't provide eslint@^5.0.0 || ^6.0.0 requested by vue-eslint-parser@npm:6.0.5

Guessing eslint should be listed either in dependencies or peerDependencies? 🤔

Thanks for the contributor of eslint-plugin-gridsome.
I want to pay respect for guys.

https://allcontributors.org/

https://github.com/gridsome/eslint-plugin-gridsome/blob/develop/.github/workflows/test.yml#L34-L35

tests/fixture is no longer used.

Please describe what the rule should do:

What category should the rule belong to?

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

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

<template>
  <g-image
  class="foo"
  width="300"
  />
</template>

This would be correct:

<template>
  <g-image
  :src="foo.bar.src"
  class="foo"
  width="300"
  />
</template>

<template>
  <g-image
  src="/path/foo.jpg"
  class="foo"
  width="300"
  />
</template>

Additional context

Tell us about your environment

• ESLint version: 8.25.0
• eslint-plugin-�gridsome version: 1.6.2
• Node version: 16

Please show your full configuration:

module.exports = {
  parser: 'vue-eslint-parser',
  extends: [
    'standard',
    'plugin:gridsome/recommended',
    'plugin:vue/vue3-recommended'
  ],
}

What did you do?

eslint --ext .js,.vue src/file.vue

What actually happened?

Oops! Something went wrong! :(

ESLint: 8.26.0

TypeError: Failed to load plugin 'gridsome' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null
Referenced from: /home/manu/dev/project/.eslintrc.js
    at Object.<anonymous> (/home/manu/dev/project/node_modules/.pnpm/@[email protected]_wyqvi574yv7oiwfeinomdzmc3m/node_modules/@typescript-eslint/experimental-utils/dist/ts-eslint/CLIEngine.js:12:34)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/manu/dev/project/node_modules/.pnpm/@[email protected]_wyqvi574yv7oiwfeinomdzmc3m/node_modules/@typescript-eslint/experimental-utils/dist/ts-eslint/index.js:14:14)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
 ELIFECYCLE  Command failed with exit code 2.

Downgrade to v7 fixes the problem

• rule test
• node version tests 10,12,14
• Use Ship.js for release product
• Add develop branch
• Add netlify preview branch to develop

https://github.com/gridsome/eslint-plugin-gridsome/blob/develop/package.json#L82

-    "*.js": [
+    "*.ts": [

Please describe what the rule should do:

Right now adding an empty line between a fragment and a query results in the plugin warning you about it. I don't have a strong opinion about this but I feel like there might be no need to flag it as long as it's just one empty line between code blocks.

Do you have any examples of graphql code where they enforce the no-empty-lines style or otherwise? What do you think?

I don't have any app with lots of fragments and queries so it's not a real issue for me but I feel it could be for other users or become one once core adds support for more graphql-related stuff.

What category should the rule belong to?

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

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

This is what the correct code looks like as of v1.4.0:

<page-query>
  fragment RankingParts on TourRanking {
    id
    rankings: data {
      rank
      nickname
      score
      badge: pin_badge_image_url
      ranking_started_at
      ranking_finished_at
    }
  }
  query($id: ID, $prevId: ID, $nextId: ID) {
    ranking: tourRanking(id: $id) {
      ...RankingParts
    }
    next: tourRanking(id: $prevId) {
      ...RankingParts
    }
    prev: tourRanking(id: $nextId) {
      ...RankingParts
    }
  }
</page-query>

This is what it could look like:

<page-query>
  fragment RankingParts on TourRanking {
    id
    rankings: data {
      rank
      nickname
      score
      badge: pin_badge_image_url
      ranking_started_at
      ranking_finished_at
    }
  }

  query($id: ID, $prevId: ID, $nextId: ID) {
    ranking: tourRanking(id: $id) {
      ...RankingParts
    }
    next: tourRanking(id: $prevId) {
      ...RankingParts
    }
    prev: tourRanking(id: $nextId) {
      ...RankingParts
    }
  }
</page-query>

Hey!

Ran yarn add eslint-plugin-gridsome --dev and got :
[email protected]: The engine "node" is incompatible with this module. Expected version "^10.13.0 || ^12.0.0 || ^14.0.0". Got "13.11.0"

Why isn't Node 13 included in engines ?

"engines": {
  "node": "^10.13.0 || ^12.0.0 || ^14.0.0"
}

Thanks!

Now we use yarn.
However, npm is as fast as yarn.
In addition, npm can use command npm ci. It can install node_modules speedy on CI.
That's why I want to use npm insted of yarn.

I fix it soon

@hacknug
Thanks you for your advice and report issue all the time.
So, I want to add you to the contributors list in README.md.
How about you?
If you mind, run this script and create PR:

npx all-contributors add hacknug .....

You can check usage more https://allcontributors.org/docs/ja/cli/usage#all-contributors-add

Add support of vueIndentScriptAndStyle for <static-query> and <page-query>. This rule let you ignore the first level of indentation in <script> and <style> tags and seem not to be respected by the format-query-block rule.

What should be possible:

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

What is enforced by the format-query-block:

<static-query>
  query {
    metadata {
      siteName
    }
  }
</static-query>

• https://github.com/vuejs/eslint-plugin-vue/blob/master/tools/update-lib-configs.js
• https://github.com/vuejs/eslint-plugin-vue/blob/master/tools/update-lib-index.js

Please write rule name what you want to improve:
format-query-block

How are the rules improved?:
Prettier will supports custom block since v2.1.0
prettier/prettier#8023

So, this rule not necessary anymore.

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

Additional context

Add config gridsome/recommended

I read the documentation and I have created my file .eslintrc.js and added the following config:

module.exports = {
    env: {
      node: true,
      es6: true
    },
    plugins: ["gridsome"],
    rules: {
      "gridsome/format-query-block": "error",
      "gridsome/require-g-image-src": "error",
      "gridsome/require-g-link-to": "error"
    },
    parser: "vue-eslint-parser"
  }

But I want to combine it with the following config:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

First of all, can I combine both? And, if so, then what should I read, because the documentation was really small for the plugin.

Tell us about your environment

• ESLint version: 5.16.0
• eslint-plugin-�gridsome version: 1.2.5
• Node version: 10.8.0

Please show your full configuration:

const path = require('path');

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'airbnb-base',
    'plugin:vue/recommended',
    'plugin:gridsome/recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/html-indent': ['error', 2],
    'vue/no-v-html': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['^~', path.resolve(__dirname, './src')]
        ],
        extensions: ['.js', '.vue']
      }
    }
  },
  plugins: [
    'gridsome'
  ]
};

What did you do?

<g-link
  class="post-card__link"
  v-bind:to="post.path"
>
  Link
</g-link>

What did you expect to happen?
The rule should have passed without issue.

What actually happened?

33:7  warning  Expected '<g-link>' elements to have 'v-bind:to' or 'to'     gridsome/require-g-link-to

Additional Comments
I'm setting up ESLint on a clean install of the Gridsome starter blog. Whether I do v-bind:to="" or :to="" it throws the error. I've also tried commenting out both my other configurations I'm extending (AirBnB and vue/recommended) and it still shows the error.

It only appears to work when I just use the normal to="", which isn't what I need.

• Add Hygen
• Enable create AST log by vue-eslint-parser
• Add new Rule for README.md used script

Please write rule name what you want to improve:

How are the rules improved?:
filename is not match pathsForBrowserfileOption

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

Additional context

I think using vue-eslint-editor.
https://github.com/mysticatea/vue-eslint-editor

See:

• https://future-architect.github.io/eslint-plugin-vue-scoped-css/playground/
• vue-eslint-demo

• engines in package.json

Please describe what the rule should do:
This rule reports when using process.env without prefix GRIDSOME in browser.

What category should the rule belong to?

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

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

export default {
  data () {
    return {
      items: []
    }
  },
  async mounted () {
    // error!!!!!!!!!!!!!!!!  cuz without prefix `GRIDSOME`
    const res = await axios.get(process.env.API_URL)
    this.items = res.data
  }
}

Additional context

incorrect pattern and correct pattern are reversed

docs site with vuepress.
See: https://kazupon.github.io/eslint-plugin-vue-i18n/