nuxt/eslint-plugin-nuxt

ESLint plugin for Nuxt.js [WIP]

eslint-plugin-nuxt's Issues

nuxt/eslint-plugin-nuxt vs nuxt/eslint-config and nuxt3 globals

hi there!

i'm wondering what is the difference between nuxt/eslint-plugin-nuxt and nuxt/eslint-config. both seem to be actively developed and have a similar scope. and what's their compatibility with nuxt3?

and would adding of nuxt3's auto-imported globals make sense to add to either of the packages? they currently produce errors with eslint (e.g. 'useRouter' is not defined no-undef).

the current list of globals (as in .nuxt/auto-imports.d.ts) seem to be:

useLazyFetch
useCookie
useMeta
useRoute
useRouter
isVue2
isVue3
defineEmits
defineExpose
defineProps
withCtx
withDefaults
withDirectives
withKeys
withMemo
withModifiers
withScopeId
onActivated
onBeforeMount
onBeforeUnmount
onBeforeUpdate
onDeactivated
onErrorCaptured
onMounted
onRenderTracked
onRenderTriggered
onServerPrefetch
onUnmounted
onUpdated
computed
customRef
isProxy
isReactive
isReadonly
isRef
markRaw
proxyRefs
reactive
readonly
ref
shallowReactive
shallowReadonly
shallowRef
stop
toRaw
toRef
toRefs
triggerRef
unref
watch
watchEffect
effect
effectScope
getCurrentScope
onScopeDispose
defineComponent
defineAsyncComponent
getCurrentInstance
h
inject
nextTick
provide
useAttrs
useCssModule
useCssVars
useSlots
useTransitionState

Rule: no relative import paths / enforce aliases

Warn when you use relative import paths such as '../../components/FooBar.vue'.

This should enforce the @aliase ☺️

vue/v-bind-style not showing warnings on version 0.5

Good day.
With the code

<error-message v-for="param in validationParameters" v-bind:error="!validationState[param]" :key="param" />

the warning and fix for v-bind-style does not trigger on version 0.5. After downgrading the error works again. Default nuxt config.

Rule: `head` has to be a function

It's actually not strictly required but can lead to some issues if the head object in pages and components is a plain object.

Vue 2.7 Composition API Support?

When I add plugin:nuxt/recommended to my .eslintrc.js, I receive all kinds of eslint errors in my vue files that use the composition api. Is there anything needed for the plugin to work with the vue composition api?

'error clear' reported on each template closing tag in all components

with version 2.0.0 of nuxt/eslint-plugin-nuxt I get a error for every component's template closing tag;
the lint errors all look like this:

/home/jo/repos/xxx/xxxxx/components/blog/blogcard.vue
  14:12  error  clear  vue/comment-directive

the reported lines contain the end template tag:

</template>

from a quick look at the code (https://github.com/vuejs/eslint-plugin-vue/blob/80b8983118cc08cf473642c05413bcb930c93613/lib/rules/comment-directive.js#L340) it looks to me that the message clear gets reported to the post process to say that no error was found, however... I'm not sure if this is an issue with eslint-plugin-nuxt or exlint-plugin-vue directly? please advise

vue/require-component-is false positive

According to #65 and vuejs/eslint-plugin-vue#869

I upgrade my package but still encounter the same error message.

eslint: 6.7.2
eslint-plugin-nuxt: 0.5.0
eslint-plugin-vue: 6.0.1
vue-eslint-parser: 7.0.0

../component.vue
  2:3  error  Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is
✖ 1 problem (1 error, 0 warnings)

Even I reinstall eslint-plugin-nuxt and upgrade eslint-plugin-vue to 6.1.2, the issue still exists.

Rule: No asyncData/fetch in layout components (or anything except page components)

Auto-imports marked as "is not defined" in Nuxt 3 .js files

Hello!

I'm using Nuxt 3 but I prefer writing composables, plugins, utils, etc. in .js files rather than .ts since I don't want to use TypeScript.

Whenever I use auto-imported Vue or Nuxt functions, like ref or reactive, or even defineNuxtPlugin, eslint shows a warning that they are not defined, even though my application runs properly. This does not happen if I switch my files to .ts

Does anybody else have this issue? How can I fix this?

Add Core Web Vital rules to `plugin:nuxt/recommended` (RFC)

eslint-plugin-nuxt does a great job introducing Nuxt.js-specific rules to a developer's ESLint workflow. This RFC proposes adding additional rules that are also aimed to enforce useful defaults but with a focus to improving Core Web Vitals.

The rules proposed to be added to the plugin:nuxt/recommended config are as follows:

• no-html-link-for-pages: Disallow usage of HTML <a> tag to navigate to internal links (i.e. use <NuxtLink> to navigate to other pages)
• no-sync-scripts: Disallow synchronous scripts (i.e. use asyncData/fetch for component or page level data)
• no-unwanted-polyfillio: Disallow inclusion of duplicate polyfills through Polyfill.io that already supported by Nuxt.js

All these rules can be set to error within the recommended configuration of the plugin. In addition, the following rules can also be added as part of this proposal but will turned off by default:

• no-img-element: Disallow usage of HTML <img> tag for images (i.e. use <nuxt-img> instead)

Any feedback will be appreciated! Will love to hear more suggestions of rules that can be added as well as if any of these do not make sense for whatever reason :)

---

Note: All of these same rules have been added to eslint-plugin-next to provide a similar set of default checks for Next.js and the feedback has been overwhelmingly positive. It would be great to see something alike that Nuxt.js developers can use!

Further reading: web.dev/conformance

Rule: validate export keys in Vuex files

To avoid sth. like export const stat or export const store instead of export const state, we could lint the exports of the Vuex files in /store and check against a whitelist of keys.

Update eslint-plugin-vue dependency

Latest release adds a lot of interesting things

https://github.com/vuejs/eslint-plugin-vue/releases

Make sure that `nuxt.config.ts` is also supported by default

I have noticed that nuxt.config.ts is not supported by https://github.com/nuxt/eslint-plugin-nuxt/blob/master/docs/rules/no-cjs-in-config.md

And this is sad. I understand that I can provide config name as an option: but people will forget about it 100% of the time.

We can change the configuration here: https://github.com/nuxt/eslint-plugin-nuxt/blob/master/lib/rules/no-cjs-in-config.js#L28

There might be different rules that do the same thing.

Default 'npx create-nuxt-app' prohibits VS Code ES-Lint errors/ feedback in editor

Default installation of Nuxt with npx create-nuxt-app my-app works fine, except Visual Studio Code does not show the ES-Lint errors. The normal vue projects in my workspace work just fine with proper error and warnings in the editor. The Terminal shows proper errors/warnings when recompiling.

For the .eslintrc.js and all others I use the default. As warnings/errors in normal vue app work just fine, I suppose I have all required modules installed (dbaeumer.vscode-eslint and octref.vetur)

Error: Cannot find module '@nuxtjs/eslint-module'

After creating a fresh nuxt app using the create-nuxt-app and selecting the express framework, i am unable to deploy the app to google app engine. When i attempt to deploy the app as is, i encounted this error: "Error: Cannot find module '@nuxtjs/eslint-module'". The problem goes away when i move the @nuxtjs/eslint-modul and @nuxtjs/esling-config from devDependencies to dependencies in package.json.

Could anyone please give me on a hint on what might be the problem? I have tryed everything i could find on google with no luck. Thanks!

eslint-plugin-vueにVue3のバージョンがあるので、追加する

https://eslint.vuejs.org/user-guide/

Rule: order of nuxt.config.js keys

Similar to the vue/order-in-components rule, an order for the config keys of nuxt.config.js would be neat.

Missing peer dependency `eslint`

When using yarn v2, I get the following warning:

$ yarn
➤ YN0002: │ eslint-plugin-nuxt@npm:2.0.0 doesn't provide eslint (p4e478), requested by vue-eslint-parser
➤ YN0002: │ eslint-plugin-nuxt@npm:2.0.0 doesn't provide eslint (pe0984), requested by eslint-plugin-vue

Getting more information on the hash:

$ yarn explain peer-requirements p4e478
➤ YN0000: eslint-plugin-nuxt@npm:2.0.0 doesn't provide eslint, breaking the following requirements:
➤ YN0000: vue-eslint-parser@npm:7.4.1 [2a062] → >=5.0.0 ✘

$ yarn explain peer-requirements pe0984
➤ YN0000: eslint-plugin-nuxt@npm:2.0.0 doesn't provide eslint, breaking the following requirements:
➤ YN0000: eslint-plugin-vue@npm:7.5.0 [2a062] → ^6.2.0 || ^7.0.0 ✘

I am not sure what the right thing to do here is. eslint is already specified in devDependencies and as far as I know you can't specify a dependency again in peer.

Rule: vue/comment-directive

Hi everyone, I've caught an error about clear of vue/comment-directive after upgrading from version 1.0.0 to version 2.0.0.

10:12  error  clear  vue/comment-directive

Versions

• nuxt v2.14.7
• node v14.15.0
• eslint-plugin-nuxt v2.0.0

Which packages are necessary when using ESLint and Nuxt?

Currently, I have 5 different ESLint related packages in my devDependencies that all seemingly are used for a different purpose:

"@nuxtjs/eslint-config": "^3.0.0",
"@nuxtjs/eslint-module": "^2.0.0",
"eslint-plugin-nuxt": "^1.0.0",
"babel-eslint": "^10.1.0",
"eslint": "7.1.0",

Are any of these superfluous, meaning that they're unnecessarily included by me when they're already dependent on one another?

It seems:

• eslint-config is in charge of "extends": ["@nuxtjs"]
• eslint-module is in charge of buildModules: ['@nuxtjs/eslint-module']
• eslint-plugin-nuxt is in charge of "extends": ['plugin:nuxt/recommended']
• babel-eslint is in charge of parserOptions: {parser: 'babel-eslint'}
• and eslint is the base prerequisite

Is there a move towards conslidation between these different packages with eslint-plugin-nuxt? Just curious what the rationale is and/or what the optimal way to include everything with a Nuxt project is.

TypeError: Cannot read property 'range' of null

eslint failed at this:

const loadComp = name => import(`components/${name}/${name}.vue`)

Error log:

e:\lib_project\test-nuxt-eslint>npm run lint

> [email protected] lint e:\lib_project\test-nuxt-eslint
> eslint --ext .js,.vue --ignore-path .gitignore .

TypeError: Cannot read property 'range' of null
Occurred while linting e:\lib_project\test-nuxt-eslint\pages\index.vue:35
    at SourceCode.getTokenBefore (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\source-code\token-store\index.js:298:18)
    at checkSpacingBefore (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\rules\template-curly-spacing.js:60:42)
    at TemplateElement (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\rules\template-curly-spacing.js:119:17)
    at listeners.(anonymous function).forEach.listener (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\linter\safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\linter\node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\linter\node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\linter\node-event-generator.js:297:14)
    at CodePathAnalyzer.enterNode (e:\lib_project\test-nuxt-eslint\node_modules\eslint\lib\linter\code-path-analysis\code-path-analyzer.js:634:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint: `eslint --ext .js,.vue --ignore-path .gitignore .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

For more detail, please look at this repo: https://github.com/Miaoxingren/test-nuxt-eslint.

Rule: No require/module.exports in nuxt.config.js

Rule: don't use timers

• setInterval/setTimeout in beforeCreate/created/asyncData

Incompatible version of vue-eslint-parser.

eslint-plugin-vue currently depends on vue-eslint-parser@^5.0.0, however this plugin depends on vue-eslint-parser@^6.0.2. This version mismatch causes issues with at least one of eslint-plugin-vue's rules (vue/attributes-order).

[email protected] made a breaking change to one of the AST nodes.

detect using route path as key to asyncData/fetch

Example: nuxt/nuxt#15580

nuxt/no-this-in-fetch-data is now ok

With the new fetch() API https://nuxtjs.org/api/pages-fetch

It looks like this is now ok to use in the fetch method?

Rule: No faulty exports for store modules

Avoid things like export const mutators in store modules by.

Might be hard to lint and should only be applied to files not in nuxtignore (not sure if that is possible though)

Rule: nuxt.config.js top key order

Hey 👋

A rule idea: Order keys in nuxt.config.js by something. maybe alphabetically, maybe how it "makes sense" (like https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/order-in-components.js)?

Misleading rule nuxt/require-func-head

This is not required or recommended at all, its perfectly fine for the head to be an object within a component if you just want to type your title/description locally. That makes this rule a bit misleading imo.

nuxt/require-func-head doesnt work with factories

This nuxt/require-func-head rule doesnt detect factories. Im using a head factory method which only returns a function when its needed.

So I need the code to be:

head: createHead({})

but instead this rule transforms it into

head() {
  return createHead({})
}

which wont work if createHead returns an fn itself (which is most cases)

Rule: no baseUrl

Related: nuxt-community/axios-module#134

Typo: baseUrl(wrong) / baseURL (right)

Expected '<component>' elements to have 'v-bind:is' attribute vue/require-component-is

maybe update something for fix this error ?
they say use eslint-plugin-vue@6
vuejs/eslint-plugin-vue#869 (comment)

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@nuxtjs)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (eslint, eslint-config-standard, eslint-plugin-import, eslint-plugin-n, eslint-plugin-promise, eslint-plugin-vue, husky, jest, lint-staged, semver, vue-eslint-parser, yarn)
• chore(deps): update actions/cache action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update devdependency eslint-plugin-n to v16
• chore(deps): update devdependency husky to v9
• chore(deps): update devdependency lint-staged to v15
• chore(deps): update yarn to v4
• chore(deps): lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yaml

• actions/setup-node v3
• actions/cache v2

npm

package.json

• eslint-plugin-vue ^9.4.0
• semver ^7.3.7
• vue-eslint-parser ^9.0.3
• eslint ^8.23.0
• eslint-config-standard ^17.0.0
• eslint-plugin-import ^2.26.0
• eslint-plugin-n ^15.2.5
• eslint-plugin-promise ^6.0.1
• eslint-plugin-standard ^5.0.0
• husky ^8.0.1
• jest ^29.0.1
• lint-staged ^13.0.3
• pinst ^3.0.0
• standard-version ^9.3.2
• yarn 3.2.3

---

• Check this box to trigger a request for Renovate to run again on this repository

Rule: store state must be a function

Disable `vue/multi-word-component-names`

This rule conflicts with routing system, It should be disabled by default at least for components in pages directory.

Warn for fixable issues

Currently nuxt/recommended throws errors for fixable issues.

I think it should instead throw a warning, so development can continue. Errors should only be for problems that affect compilation.

Rule: Warn for deprecated fetch method

It'd be very nice if the eslint plugin could print out a warning when using fetch with arguments, which is then using the "old" fetch call that is deprecated.

`ref` is not defined Nuxt 3

Apparently this was the only way I got this configuration to work. Is the README wrong?

(deleted; Gihhub stumbled)

eslint 6 compatible version release

I've noticed in code you have already support eslint 6, but not yet released. Please release asap. Thanks!

Incorrect eslint error when upgrade to 0.5.0

Please look at this repo: https://github.com/Miaoxingren/test-nuxt-eslint. Downgrade eslint-plugin-nuxt to @0.4.3 solved the problem.