nuxt / eslint Goto Github PK

View Code? Open in Web Editor NEW

468.0 468.0 59.0 6.79 MB

Collection of ESLint-related packages for Nuxt

Home Page: https://eslint.nuxt.com

License: MIT License

JavaScript 13.36% TypeScript 86.25% Vue 0.39%

eslint nuxt

eslint's Introduction

Nuxt

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

It provides a number of features that make it easy to build fast, SEO-friendly, and scalable web applications, including:

Server-side rendering, Static Site Generation, Hybrid Rendering and Edge-Side Rendering
Automatic routing with code-splitting and pre-fetching
Data fetching and state management
SEO Optimization and Meta tags definition
Auto imports of components, composables and utils
TypeScript with zero configuration
Go fullstack with our server/ directory
Extensible with 200+ modules
Deployment to a variety of hosting platforms
...and much more 🚀

🚀 Getting Started
💻 Vue Development
📖 Documentation
🧩 Modules
❤️ Contribute
🏠 Local Development
⛰️ Nuxt 2
🔗 Follow us
⚖️ License

🚀 Getting Started

Use the following command to create a new starter project. This will create a starter project with all the necessary files and dependencies:

npx nuxi@latest init <my-project>

Tip

Discover also nuxt.new: Open a Nuxt starter on CodeSandbox, StackBlitz or locally to get up and running in a few seconds.

Simple, intuitive and powerful, Nuxt lets you write Vue components in a way that makes sense. Every repetitive task is automated, so you can focus on writing your full-stack Vue application with confidence.

Example of an app.vue:

<script setup lang="ts">
useSeoMeta({
  title: 'Meet Nuxt',
  description: 'The Intuitive Vue Framework.'
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style scoped>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

📖 Documentation

We highly recommend you take a look at the Nuxt documentation to level up. It’s a great resource for learning more about the framework. It covers everything from getting started to advanced topics.

🧩 Modules

Discover our list of modules to supercharge your Nuxt project, created by the Nuxt team and community.

❤️ Contribute

We invite you to contribute and help improve Nuxt 💚

Here are a few ways you can get involved:

Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
Suggestions: Have ideas to enhance Nuxt? We'd love to hear them! Check out the contribution guide to share your suggestions.
Questions: If you have questions or need assistance, the getting help guide provides resources to help you out.

🏠 Local Development

Follow the docs to Set Up Your Local Development Environment to contribute to the framework and documentation.

⛰️ Nuxt 2

You can find the code for Nuxt 2 on the 2.x branch and the documentation at v2.nuxt.com.

🔗 Follow us

⚖️ License

MIT

eslint's People

Contributors

Stargazers

Watchers

Forkers

aldarund pimlie kulikala simllll b0jia alexm-aceable doc22940 tettoffensive davidw93 yoyo837 mathieutu dev-ma23 michealy orkhanalikhanov danielroe romanzipp srbarba odanado tombo1818 hacknug rtabulov wwwk baco16g w3ref felixgraf andresespinosapc definiteiymaybe antfu s00d disruptual lirongrong-github brenozuko rzx007 mercs600 pumano adamjedrzejec mathiastejs yutaroman jd1378 mfredx baixiaoyu2997 8statorasubco tricks-gmbh oysterd3 stefanobartoletti krmao seanpm2001 seonghookim melvishniz shingangan zyyv maxdzin sandros94 kingyue737 danielwaltz davidurco robinsmith-source richard-dp chadwickellis

eslint's Issues

Add eslint-plugin-nuxt to default config

/* eslint-disable something */ for entire file not working

When I use "disable something for the entire file", it adds

/* eslint-disable something */
<template>
...

instead of

<!-- eslint-disable something -->
<template>
...

Import from 'vuex' fails in respect to eslint(import/named)

I just created a TS Nuxt app by following the setup instructions.

ESLint is printing me some problems when I want to import interfaces from vuex, such as:
import { GetterTree, ActionTree, MutationTree } from 'vuex';

My ESLint configuration file is as follow:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {
    camelcase: 'off',
    '@typescript-eslint/naming-convention': 'off',

    semi: 'off',
    '@typescript-eslint/semi': ['error']
  }
};

How could I manage to be able to import the existing interfaces from vuex without having to turn off the eslint(import/named) rule?

vuejs/eslint-plugin-vue Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): Error: Cannot find module 'eslint'

I'm having issue running my nuxt app. When I do npm run dev I get this error: Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): Error: Cannot find module 'eslint'. I have tried clearing my cache, npm install and running again but didn't solve my issue. This is my package.json:

{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest"
  },
  "dependencies": {
    "@kevinfaguiar/vue-twemoji-picker": "^5.7.4",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/dotenv": "^1.4.1",
    "aws-amplify": "^3.3.26",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.8.3",
    "hooper": "^0.3.4",
    "moment": "^2.29.1",
    "nuxt": "^2.15.3",
    "pubnub": "^4.30.1",
    "vue-cookie": "^1.1.4"
  },
  "devDependencies": {
    "@nuxtjs/google-fonts": "^1.2.0",
    "@nuxtjs/proxy": "^2.1.0",
    "@vue/test-utils": "^1.1.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "eslint-loader": "^4.0.2",
    "fibers": "^5.0.0",
    "jest": "^26.6.3",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "vue-jest": "^3.0.4",
    "webpack": "^4.46.0"
  }
}

Also on the terminal I get this error:

Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):                                  friendly-errors 21:42:49
Error: Cannot find module 'eslint'
Require stack:
- /Users/user/Desktop/Work/frontend copy/node_modules/eslint-loader/dist/getOptions.js
- /Users/user/Desktop/Work/frontend copy/node_modules/eslint-loader/dist/index.js
- /Users/user/Desktop/Work/frontend copy/node_modules/eslint-loader/dist/cjs.js
- /Users/user/Desktop/Work/frontend copy/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js
- /Users/user/Desktop/Work/frontend copy/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/user/Desktop/Work/frontend copy/node_modules/webpack/lib/NormalModule.js
- /Users/user/Desktop/Work/frontend copy/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/user/Desktop/Work/frontend copy/node_modules/webpack/lib/Compiler.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at n (/Users/user/Desktop/Work/frontend copy/node_modules/jiti/dist/v8cache.js:2:2349)
    at getOptions (/Users/user/Desktop/Work/frontend copy/node_modules/eslint-loader/dist/getOptions.js:28:7)
    at Object.loader (/Users/user/Desktop/Work/frontend copy/node_modules/eslint-loader/dist/index.js:17:43)

Anyone knows how to fix it?

Upgrade eslint-plugin-unicorn

Hello
Thank you for the library
Can you please upgrade eslint-plugin-unicorn? (this library uses 28.0.2, but the actual version is 34.0.1)

Because it cause issues with other libraries like this
EvgenyOrekhov/eslint-config-hardcore#318

Nuxt 3 globals reporting errors

Eslint is reporting no-undef errors for global magic functions such as useHead and defineNuxtPlugin

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "plugins": ["simple-import-sort", "import", "package-json"],
  "extends": ["@nuxtjs", "plugin:prettier/recommended"],

  "rules": {
    "no-console": "off",
    "no-debugger": "off"
  }
}

"@nuxtjs/eslint-config": "10.0.0",
"eslint": "8.19.0",

@typescript-eslint/no-unused-vars for variables used in template

Hey Team Nuxt, I'm getting the above errors despite this eslint config and the latest version of @nuxtjs/eslint-config (10.0.0).

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: ['@nuxtjs/typescript', 'prettier'],
  plugins: ['prettier'],
  rules: {},
}

I thought that the vue-parser plugin should be providing the "script-setup-uses-var" functionality that handles this but somehow it doesn't seem to be coming through. Have I missed / misconfigured something?

Simple example page that's offending lint at the moment:

<template lang="pug">
main
  h1 Homepage Title #[Fa(v-show='loading', :icon='["fas", "gear"]', spin)]
</template>

<script setup>
const loading = 'cheese' // <-- lint is convinced this const is unused
</script>

Using this extension with create-nuxt-app results in 'definition for rule ... not found' errors

With a vanilla eslint config (below),

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {},
}

As long as '@nuxtjs/eslint-config-typescript' is included, VS Code shows a bunch of Vue errors:

My package.json is:

{
  "name": "cal",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "^5.12.4",
    "core-js": "^3.8.1",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.12",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.16.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.0",
    "prettier": "^2.2.1"
  }
}

I'm not sure this is the right project, but as it seemed to be the one that impacted the results, I figured I'd start here :) Apologies if I got something basic wrong!

upgrade to eslint 8.0.0

now i get the following error messages:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @nuxtjs/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^8.0.0" from the root project
npm ERR!   peer eslint@">=7.5.0" from @babel/[email protected]
npm ERR!   node_modules/@babel/eslint-parser
npm ERR!     @babel/eslint-parser@"^7.12.16" from [email protected]
npm ERR!     node_modules/eslint-template-visitor
npm ERR!       eslint-template-visitor@"^2.2.2" from [email protected]
npm ERR!       node_modules/eslint-plugin-unicorn
npm ERR!         eslint-plugin-unicorn@"^28.0.2" from @nuxtjs/[email protected]
npm ERR!         node_modules/@nuxtjs/eslint-config
npm ERR!   18 more (@nuxtjs/eslint-module, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^7.27.0" from @nuxtjs/[email protected]
npm ERR! node_modules/@nuxtjs/eslint-config
npm ERR!   dev @nuxtjs/eslint-config@"=6.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^7.27.0" from @nuxtjs/[email protected]
npm ERR!   node_modules/@nuxtjs/eslint-config
npm ERR!     dev @nuxtjs/eslint-config@"=6.0.1" from the root project

# npm resolution error report

2021-10-10T05:18:56.471Z

While resolving: [email protected]
Found: [email protected]
node_modules/eslint
  dev eslint@"^8.0.0" from the root project

Could not resolve dependency:
peer eslint@"^7.27.0" from @nuxtjs/[email protected]
node_modules/@nuxtjs/eslint-config
  dev @nuxtjs/eslint-config@"=6.0.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "eslint",
    "version": "8.0.0",
    "whileInstalling": {
      "name": "cc",
      "version": "2.0.0-19",
      "path": "/home/tgc/dev/app"
    },
    "location": "node_modules/eslint",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "dev",
        "name": "eslint",
        "spec": "^8.0.0",
        "from": {
          "location": "/home/tgc/dev/app"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "dev",
    "name": "eslint",
    "spec": "^8.0.0",
    "from": {
      "location": "/home/tgc/dev/app"
    }
  },
  "edge": {
    "type": "peer",
    "name": "eslint",
    "spec": "^7.27.0",
    "error": "INVALID",
    "from": {
      "name": "@nuxtjs/eslint-config",
      "version": "6.0.1",
      "whileInstalling": {
        "name": "cc",
        "version": "2.0.0-19",
        "path": "/home/tgc/dev/app"
      },
      "location": "node_modules/@nuxtjs/eslint-config",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "dev",
          "name": "@nuxtjs/eslint-config",
          "spec": "=6.0.1",
          "from": {
            "location": "/home/tgc/dev/app"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

'no-undef' error when using type annotation of 'HTMLCollectionOf'

My repogitory

https://github.com/tobigumo/nuxt-eslint-error

This repository is the smallest sample created from create-nuxt-app

Error details

I've added a type annotation of 'HTMLCollectionOf'.

let elements: HTMLCollectionOf<Element>

https://github.com/tobigumo/nuxt-eslint-error/blob/361e0542210bc9d0da033bbf6005359b8f94bc2c/pages/index.vue#L33

and I got a 'no-undef' error

  # npm run lint
  33:15  error  'HTMLCollectionOf' is not defined                    no-undef

Package versions

{
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.1",
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.12",
    "@nuxt/typescript-build": "^2.0.4",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.18.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.5.0"
  }
}

Upgrade eslint-plugin-import dependency

Currently the eslint-plugin-import dependency is pinned at 2.19.1, which means we can't even upgrade it ourselves if we wanted to. It'd be great if this could (at the very least) be changed to ^2.19.1, so that it can be upgraded to a newer version that has important bugfixes.

please support airbnb!!! :(

im using airbnb for the past year and i found it "more beautifull" than other
and for trends its far better
https://www.npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-standard

Unmet peer dependency "typescript" with version 2.0.0

I'm using the @nuxtjs/eslint-config package for my Nuxt application, and with the 2.0 version I'm getting this warning now:

warning "@nuxtjs/eslint-config > eslint-plugin-jest > @typescript-eslint/experimental-utils > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

Which is weird since this is not the typescript version of the config.

Upgrade @typescript-eslint to Version 4

Since @nuxt/typescript package already updated its typescript version to 4 when I run my project I got the following warning:

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <3.10.0

YOUR TYPESCRIPT VERSION: 4.0.2

Please only submit bug reports when using the officially supported version.

=============

Remove jest dependency

Currently eslint-plugin-jest is a dependency. It seems you are assuming that everyone who uses nuxt must want to use jest. Otherwise it's hard to imagine making jest a hard dependency of using nuxt's eslint config.

Or am I missing something here?

Disable multi-word rule for files in subdirectories

It doesn't handle the case when page components are in test/fixture/... for example.
Also why does it apply to .js and .ts extensions? I would think that it should only apply to .vue?

Originally posted by @rchl in #190 (comment)

Scope typescript settings to *.ts files

In:
https://github.com/nuxt/eslint-config/blob/dc55bbf218c8627d3c4ef73656a32730dd2a9d3c/packages/eslint-config-typescript/index.js#L1-L12

all typescript-specific settings should be in an override block and scoped to *.ts extension:

    overrides: [
        {
            files: ['*.ts'],
            plugins: ['@typescript-eslint'],
            parserOptions: {
              parser: '@typescript-eslint/parser'
            },
            rules: {
              '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }]
            }
    ],

One of the many reasons why it should be so is that when enabling some typescript rules, like @typescript-eslint/no-unused-vars, you are supposed to disable eslint's own no-unused-vars rule (see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md#options) and you don't want to do that in general, only for *.ts.

Also, current way overrides parserOptions.parser which it would ideally not do for all file types since other might want to use babel-parser rather (although I haven't found specific issues with current solution).

Environment key "jest/globals" is unknown

I'm getting this error on a fresh install of create-nuxt-app with linting tools of eslint and prettier enabled

> eslint --ext .js,.vue --ignore-path .gitignore . "--fix"

Error: .eslintrc.js » @nuxtjs/eslint-config-typescript » @nuxtjs/eslint-config:
        Environment key "jest/globals" is unknown

    at /home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/shared/config-validator.js:169:19
    at Array.forEach (<anonymous>)
    at validateEnvironment (/home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/shared/config-validator.js:163:30)
    at validateConfigArray (/home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/shared/config-validator.js:334:9)
    at CascadingConfigArrayFactory._finalizeConfigArray (/home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:417:13)
    at CascadingConfigArrayFactory.getConfigArrayForFile (/home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:271:21)
    at FileEnumerator._iterateFilesRecursive (/home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/cli-engine/file-enumerator.js:396:49)
    at _iterateFilesRecursive.next (<anonymous>)
    at FileEnumerator.iterateFiles (/home/kdjs8967/nuxtjs-test/node_modules/eslint/lib/cli-engine/file-enumerator.js:251:49)
    at iterateFiles.next (<anonymous>)

The .eslintrc.js is the default one

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
  plugins: [
    'prettier'
  ],
  // add your custom rules here
  rules: {
  }
}

Typescript: Fails on Vue interfaces

@nuxt/auth dev branch is failing CI after a yarn upgrade because of typescript errors: https://github.com/nuxt-community/auth-module/runs/1509932138

The project is using @nuxtjs/eslint-config-typescript and some of the lines it's failing on are directly recommended by Vue:

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

@typescript-eslint/no-unused-vars and no-unused-vars

I have this basic ESLint config

module.exports = {
  'root': true,
  'env': {
    'browser': true,
    'node': true
  },
  'extends': [
    '@nuxtjs/eslint-config-typescript',
  ]
}

and this Vue file

<template>
  <div />
</template>

<script lang="ts">
const a = 0
export default {}
</script>

but when I try to lint this file I get an error both from @typescript-eslint/no-unused-vars and no-unused-vars when I only should be getting one from @typescript-eslint/no-unused-vars

6:7  error  'a' is assigned a value but never used  @typescript-eslint/no-unused-vars
6:7  error  'a' is assigned a value but never used  no-unused-vars

"vue/require-component-is" false positive

I'm getting a false positive for the "vue/require-component-is" rule.
Component:

<template>
  <Component
    :is="component"
    v-if="component"
    v-bind="{ ...$attrs, $scopedSlots }"
  />
</template>

Error:

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

My editors linter handles the rule correctly(no error), but when running the code, it complains no matter what i try.

Someone else had this problem: vuejs/eslint-plugin-vue#869

Nuxt 3: `plugin:vue/vue3-recommended` instead of `plugin:vue/recommended`

Is this the right package to use with ESLint for Nuxt 3 development? I keep seeing Vue 2-related errors which are most likely due to the following rule plugin:vue/recommended.

Parsing error on jsx.

Hi folks,

I have a parsing issue with some jsx:

My script tag has lang="jsx", my eslint config is the following:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
  ],
}

Do you have any idea of what could be the problem?

Thanks!

Non-null assertion

Hi, I have a nuxt+typescript project and I'm getting this error:

error Parsing error: Unexpected token
4 | @component
5 | class ProductComponent extends Vue {
6 | @prop(Object) product!: Object
__ | ________________________^
7 | }
8 |
9 | export default ProductComponent

my tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/": [
"./"
],
"@/": [
"./"
]
},
"types": [
"@types/node",
"@nuxt/types"
],
"experimentalDecorators": true,
"resolveJsonModule": true
},
"exclude": [
"node_modules"
]
}

my .eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'@nuxtjs',
'plugin:nuxt/recommended',
'@nuxtjs/eslint-config-typescript'
],
// add your custom rules here
rules: {
"no-console": "off"
}
}

my package.json has these packages:
"dependencies": {
"@nuxtjs/axios": "^5.6.0",
"@nuxtjs/pwa": "^3.0.0-0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.1",
"nuxt": "^2.9.2",
"nuxt-property-decorator": "^2.4.0"
},
"devDependencies": {
"@nuxt/typescript-build": "^0.2.8",
"@nuxtjs/eslint-config": "^1.1.2",
"@nuxtjs/eslint-config-typescript": "^0.1.3",
"@nuxtjs/eslint-module": "^1.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-plugin-nuxt": ">=0.4.3",
"vuex-module-decorators": "^0.10.1"
}

I can't use the non-null assertion. How can I fix this problem?
This configuration was made following the instructions in https://typescript.nuxtjs.org

Thanks.

Yarn 2 support

Hello,

It seems that this package doesn't support yarn 2 "berry".
Everything work fine until I upragded to new version.

It throws me this error each time I edit a file :

Failed to load plugin 'import' declared in '.eslintrc.js » @nuxtjs/eslint-config': Your application tried to access eslint-plugin-import, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: eslint-plugin-import (via "eslint-plugin-import")
Required by: E:...

Require stack:

E:..._placeholder_.js
Referenced from: E:....yarn$$virtual@nuxtjs-eslint-config-virtual-c4c57aa23b\0\[email protected]\node_modules@nuxtjs\eslint-config\index.js

I din't find a workaround on this problem.

I am using Visual studio Code (Configured Yarn to be the packet manager)

eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

package.json

{
  "name": "...",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.5",
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "autoprefixer": "^9",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.18.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.5.0",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@*"
  }
}

Thank you for your help on this subject, maybe I am just doing something wrong ...

nuxt and airbnb code style

How can i use nuxt.js with airbnb code style?
https://www.npmjs.com/package/eslint-config-airbnb-base

There is a conflict with eslint-config-airbnb-base and @nuxtjs/eslint-config.
Because It has a standard js code style as dependencies.

It's would be nice to make separate nuxt-eslint-config package without hard coded standard code style.

This is my .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'airbnb-base',
    'plugin:nuxt/recommended',
  ],
  // add your custom rules here
  rules: {
    // from https://github.com/nuxt/eslint-config/blob/master/index.js
    'import/no-unresolved': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
  },
  settings: {
    'import/core-modules': [
      // for disable "'vue' should be listed in the project's dependencies" error
      'vue',
    ],
  },
};

and this is my devDependencies from package.json:

  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "eslint": "^5.15.1",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "jest": "^24.1.0",
    "nodemon": "^1.18.9",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-jest": "^3.0.3"
  }

Disable multiword-rule for error.vue

Nuxt 3 added support for error.vue in the source directory. https://v3.nuxtjs.org/docs/usage/error-handling#rendering-an-error-page

This is caught by ESLint:

I think this file should be ignored in the same manner in which app.vue is not caught by this rule.

Another possible solution would be to add this specific file to the rule overrides as done in #190 (although this assumes that error.vue never changes from this point forward).

Getting `error Parsing error: Unexpected token .` when using optional chaining

I use optional chaining in one of my .js files and it worked fine until last few days and I cannot figure out what might have caused it to break. Even more strange is the fact the project compiles fine on Heroku.

Module Error (from ./node_modules/eslint-loader/dist/cjs.js):                                 friendly-errors 16:50:32

/Users/davidfilat/GitHub/moldovacrestina-ssr-app/store/resources.js
  36:50  error  Parsing error: Unexpected token .

✖ 1 problem (1 error, 0 warnings)

                                                                                              friendly-errors 16:50:32
 @ ./.nuxt/store.js 39:22-54 43:4-48:6 43:72-48:5
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

I use Node 14 on my device and here is my package.json the eslint configuration is the default one that comes with nuxt.js.

"dependencies": {
    "@babel/runtime-corejs2": "^7.9.6",
    "@nuxtjs/axios": "^5.10.3",
    "@nuxtjs/device": "^1.2.7",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/localtunnel": "^1.1.3",
    "@nuxtjs/proxy": "^1.3.3",
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "body-scroll-lock": "^3.0.2",
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.13.0",
    "cross-env": "^7.0.2",
    "dayjs": "^1.8.26",
    "express": "^4.17.1",
    "font-awesome": "^4.7.0",
    "he": "^1.2.0",
    "jquery": "^3.5.0",
    "nuxt": "^2.12.2",
    "plyr": "~3.5.10",
    "popper.js": "1.16.1",
    "vue-plyr": "^6.0.4"
  },
  "devDependencies": {
    "@nuxtjs/color-mode": "^1.0.0",
    "@nuxtjs/eslint-config": "^2.0.2",
    "@nuxtjs/eslint-module": "^1.2.0",
    "@nuxtjs/stylelint-module": "^3.2.2",
    "@vue/test-utils": "^1.0.0-beta.33",
    "babel-jest": "^25.5.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-nuxt": ">=0.5.2",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "4.2.5",
    "jest": "^25.5.4",
    "lint-staged": "^10.2.2",
    "nodemon": "^2.0.3",
    "postcss-hexrgba": "^2.0.0",
    "postcss-nested": "^4.2.1",
    "postcss-preset-env": "^6.7.0",
    "postcss-responsive-type": "^1.0.0",
    "postcss-url": "^8.0.0",
    "prettier": "^2.0.5",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.3.3",
    "stylelint-config-prettier": "^8.0.1",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-order": "^4.0.0",
    "stylelint-prettier": "^1.1.2",
    "stylelint-scss": "^3.17.1",
    "ts-jest": "^25.4.0",
    "vue-jest": "^4.0.0-0"
  }

Dependency Dashboard

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

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

chore(deps): update all non-major dependencies (@nuxt/devtools, @nuxt/image, @stylistic/eslint-plugin, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @typescript-eslint/scope-manager, @typescript-eslint/types, @typescript-eslint/utils, vue)
chore(deps): lock file maintenance

Open

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

Detected dependencies

github-actions

.github/workflows/autofix.yml

actions/checkout v4

actions/setup-node v4

autofix-ci/action ea32e3a12414e6d3183163c3424a7d7a8631ad84

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

codecov/codecov-action v4

.github/workflows/release.yml

actions/checkout v4

actions/setup-node v4

npm

docs/package.json

@iconify-json/ph ^1.1.12

@iconify-json/simple-icons ^1.1.99

@nuxt/content ^2.12.1

@nuxt/devtools 1.0.8

@nuxt/fonts ^0.6.1

@nuxt/image 1.4.0

@nuxt/ui-pro ^1.1.0

@nuxthq/studio ^1.0.13

@nuxtjs/plausible ^1.0.0

@vueuse/core ^10.9.0

@vueuse/nuxt ^10.9.0

nuxt ^3.11.2

nuxt-og-image ^3.0.0-rc.52

package.json

@nuxt/test-utils ^3.12.0

@types/eslint ^8.56.9

@types/node ^20.12.7

bumpp ^9.4.0

eslint ^9.0.0

typescript ^5.4.5

vitest ^1.5.0

vue ^3.4.21

pnpm 8.15.7

packages-legacy/nuxt2-eslint-config-typescript/package.json

@nuxtjs/eslint-config ^12.0.0

@typescript-eslint/eslint-plugin ^7.6.0

@typescript-eslint/parser ^7.6.0

eslint-import-resolver-typescript ^3.6.1

eslint-plugin-import ^2.29.1

eslint-plugin-vue ^9.25.0

typescript ^5.4.5

eslint ^8.57.0

packages-legacy/nuxt2-eslint-config/package.json

eslint-config-standard ^17.1.0

eslint-plugin-import ^2.29.1

eslint-plugin-n ^17.2.1

eslint-plugin-promise ^6.1.1

eslint-plugin-unicorn ^52.0.0

eslint-plugin-vue ^9.25.0

local-pkg ^0.5.0

eslint ^8.57.0

packages/eslint-config/package.json

@eslint/js ^9.0.0

@rushstack/eslint-patch ^1.10.2

@stylistic/eslint-plugin ^1.7.0

@typescript-eslint/eslint-plugin ^7.6.0

@typescript-eslint/parser ^7.6.0

eslint-config-flat-gitignore ^0.1.5

eslint-flat-config-utils ^0.2.3

eslint-plugin-import-x ^0.5.0

eslint-plugin-jsdoc ^48.2.3

eslint-plugin-unicorn ^52.0.0

eslint-plugin-vue ^9.25.0

globals ^15.0.0

pathe ^1.1.2

tslib ^2.6.2

vue-eslint-parser ^9.4.2

@types/eslint ^8.56.9

eslint ^9.0.0

typescript ^5.4.5

eslint ^8.57.0 || ^9.0.0

packages/eslint-plugin/package.json

@typescript-eslint/types ^7.6.0

@typescript-eslint/utils ^7.6.0

eslint ^8.57.0 || ^9.0.0

packages/module/package.json

@eslint/config-inspector ^0.4.6

@nuxt/devtools-kit ^1.1.5

@nuxt/kit ^3.11.2

chokidar ^3.6.0

eslint-flat-config-utils ^0.2.3

eslint-typegen ^0.2.3

find-up ^7.0.0

get-port-please ^3.1.2

mlly ^1.6.1

pathe ^1.1.2

unimport ^3.7.1

@nuxt/module-builder ^0.5.5

@nuxt/schema ^3.11.2

@typescript-eslint/scope-manager ^7.6.0

eslint-webpack-plugin ^4.1.0

nuxt ^3.11.2

vite-plugin-eslint2 ^4.4.0

eslint ^8.57.0 || ^9.0.0

eslint-webpack-plugin ^4.1.0

vite-plugin-eslint2 ^4.4.0

playground/package.json

nuxt ^3.11.2

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

"Moderate" npm vulnerability in hosted-git-info dependency

See: https://npmjs.com/advisories/1677

Upgrading from 9.x to 10.x introduces error within VS Code: typescript with invalid interface loaded as resolver

When I upgrade @nuxtjs/eslint-config-typescript to 10.0.0, I see this error in VS Code:

Relevant config:

  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    '@nuxtjs/eslint-config-typescript',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],

Error: Failed to load config "developit" to extend from.

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended'
  ]
}

package.json

{
  "name": "client",
  "version": "1.1.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "graphql-codegen --config codegen.yml && node ./schemaQuery.js",
    "generate-server": "graphql-codegen --config codegen_server.yml && node ./schemaQuery.js",
    "generate-nuxt": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/types": "^2.15.4",
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/tailwindcss": "^4.0.3",
    "@nuxtjs/vuetify": "^2.0.0-beta.2",
    "graphql-tag": "^2.12.3",
    "nuxt": "^2.15.4",
    "vee-validate": "^3.4.5",
    "vue-server-renderer": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
    "@graphql-codegen/cli": "^1.21.4",
    "@graphql-codegen/schema-ast": "^1.18.2",
    "@graphql-codegen/typescript": "^1.22.0",
    "@graphql-codegen/typescript-operations": "^1.17.16",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@vue/test-utils": "^1.2.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "core-js": "^3.11.2",
    "eslint": "^7.16.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "jest": "^26.5.0",
    "js-cookie": "^2.2.1",
    "nuxt-i18n": "^6.26.0",
    "postcss": "^8.2.9",
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
    "ts-jest": "^26.4.1",
    "vue-class-component": "^7.2.6",
    "vue-jest": "^3.0.4",
    "vue-property-decorator": "^9.1.2",
    "vuetify": "^2.4.11"
  }
}

nuxt.config.ts

import colors from 'vuetify/es5/util/colors'

export default {
  telemetry: true,
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  ssr: true,
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  loading: { color: '#413dff' },
  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/apollo-init',
    '~/plugins/filters',
    '~/plugins/utils',
    '~/plugins/vuetify'
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/vuetify',
    ['nuxt-i18n', i18n || {
      lazy: true,
      langDir: 'lang/',
      defaultLocale: 'en',
      locales: [
        { code: 'en', file: 'en.ts' }
      ]
    }]
  ],
  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/apollo',
  ],

  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {},
  apollo: {
    includeNodeModules: true,
    clientConfigs: {
      default: '~/plugins/apollo.ts'
    }
  },
  router: {
    middleware: ['check-auth']
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    treeShake: true,
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  },
  build: {
    analyze: process.client,
    parallel: true,
    transpile: [
      'vee-validate/dist/rules'
    ],
    babel: {
      plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]]
    }
  }
}

node: v14.16.1
typesctipt: 4.2.4

When yarn run dev, I get the following error:

ERROR Error: Failed to load config "developit" to extend from. 17:11:36
Referenced from: /home/victor/PycharmProjects/eleden/client/node_modules/@babel/preset-modules/package.json

Referenced from: node_modules/@babel/preset-modules/package.json
at configInvalidError (node_modules/@eslint/eslintrc/lib/config-array-factory.js:290:9)
at ConfigArrayFactory._loadExtendedShareableConfig (node_modules/@eslint/eslintrc/lib/config-array-factory.js:883:23)
at ConfigArrayFactory._loadExtends (node_modules/@eslint/eslintrc/lib/config-array-factory.js:781:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (node_modules/@eslint/eslintrc/lib/config-array-factory.js:720:25)
at _normalizeObjectConfigDataBody.next ()
at ConfigArrayFactory._normalizeObjectConfigData (node_modules/@eslint/eslintrc/lib/config-array-factory.js:665:20)
at _normalizeObjectConfigData.next ()
at ConfigArrayFactory.loadInDirectory (node_modules/@eslint/eslintrc/lib/config-array-factory.js:511:28)
at CascadingConfigArrayFactory._loadConfigInAncestors (node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:379:46)
at CascadingConfigArrayFactory._loadConfigInAncestors (node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:398:20)

Could you tell me, please, what could be the problem?

Correct eslintrc.js

Environment

Operating System: Darwin
Node Version: v16.13.1
Nuxt Version: 2.16.0-27358576.777a4b7f
Package Manager: [email protected]
Builder: webpack
User Config: srcDir, ssr, dev, alias, image, generate, head, typescript, publicRuntimeConfig, privateRuntimeConfig, css, loading, loadingIndicator, plugins, components, buildModules, modules, apollo, proxy, axios, vuetify, build, bridge
Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
Build Modules: [email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxt/[email protected]

Reproduction

Describe the bug

I am currently extending '@nuxtjs/eslint-config-typescript',
which is forcing me to install "@nuxt/typescript-build": "^2.1.0",

I believe nuxt-bridge already has this covered but I can't seem to find a documentation on the proper eslint config

Thank you

Additional context

No response

Logs

No response

Nuxt-Link should not be considered a Block-Element

Using a list of nuxt-links like

            ... 
            <template
              v-for="(location,idx) in locationsFirst"
            >
              <nuxt-link :key="location.slug" :to="{name:'locations-loc', params:{loc: location.slug}}" class="inline underline hover:no-underline hover:text-red-600 hover:bg-red-100 transition duration-500">
                {{ location.city }}</nuxt-link>{{ ++idx!==locationsFirst.length?', ':'' }}
            </template>
            und
            <nuxt-link
              v-if="locations.length"
              :to="{name:'locations-loc', params:{loc: locationsLast.slug}}"
              class="underline hover:no-underline hover:text-black hover:bg-blue-200 transition duration-1000"
            >{{ locationsLast.city }}
            </nuxt-link>

Where it should look like link1, link2, link3 and link4 will look like link1 , link2 , link3 and link4 where the commas get off by one char because linter is forcing line breaks inside nuxt-links.

Order in components

Hey all!
Vue's ESlint config includes the rule 'order in components' (recommended).

Of course, it doesn't include custom properties from nuxt. Maybe we could extend that rule in nuxt's config?
This is how I extend the rule in some projects:

// Enforce order in components
"vue/order-in-components": [
  "error",
  {
    order: [
      // Side effects
      "el",

      // Global awareness
      "name",
      "key",
      "parent",

      // Component type
      "functional",

      // Template modifiers
      ["delimiters", "comments"],

      // Template dependencies
      ["components", "directives", "filters"],

      // Composition
      "extends",
      "mixins",

      // Page validation
      "beforeRouteEnter",
      "beforeRouteUpdate",
      "beforeRouteLeave",
      "middleware",
      "validate",

      // Interface
      "inheritAttrs",
      "model",
      ["props", "propsData"],

      // Local state
      "fetch",
      "asyncData",
      "data",
      "computed",

      // Events
      "watch",
      "watchQuery",
      "LIFECYCLE_HOOKS",

      // Non-reactive properties
      "methods",
      "i18n",
      "head",

      // Rendering
      "layout",
      ["template", "render"],
      "renderError",
      "transition",
      "loading",
      "scrollToTop",
    ],
  },
],

🐛 eslint vue/multi-word-component-names naming limitation for routes

Versions

nuxt: v2.15.8
node: v14.15.1

Reproduction

I tried to add a codesandbox link but this is an error during build that would not show on console

Steps to reproduce

Create nuxt app
Create a single word component, either in /layouts, /components or /pages
Check build error, it says error Component name "name" should always be multi-word

What is Expected?

For example if I create pages/home.vue or pages/home/index.vue then I should be able to go to http://localhost:3000/home according to the docs

Also according to docs I should be able to create layouts/default.vue

What is actually happening?

During build it shows the error I mentioned before

If I rename my component to VHome.vue then it works but it's not ideal since that changes my route too

Current workaround

I changed my Nuxt version to v2.15.7 and it worked, it built and the routes were how I wanted. However if I upgrade to the latest version of Nuxt, I can go to .eslintrc.js and set:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
  plugins: [],
  // 🚨 IMPORTANT: this is the config that fixes it at the moment
  rules: {
    "vue/multi-word-component-names": ["error", {
      "ignores": ["default", "home"]
    }]
  },
}

However this is not convenient because I have to put the name of every single file in the array

💖 Thank you for taking the time to review this, lmk if I can provide more information

Conflicts on ESLint version with eslint-config-standard

Hi everyone,

From the version 8.0.0, we got an issue that you can also see in the CI of this project, but yarn is not really verbose about it in contrary of npm:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN   dev eslint@"^8.11.0" from the root project
npm WARN   16 more (@nuxtjs/eslint-config, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.12.1" from [email protected]
npm WARN node_modules/eslint-config-standard
npm WARN   eslint-config-standard@"^16.0.3" from @nuxtjs/[email protected]
npm WARN   node_modules/@nuxtjs/eslint-config

I think it is because the version of eslint-config-standard does not match the version 8 of ESLint. Has anyone got this issue ?

[typscript: no-useless-constructor] For constructor with parameter

Using extends: ['@nuxtjs/eslint-config-typescript'] with no further plugins or extensions enabled, the following code

export default class AuthService {
  constructor (private prisma: PrismaClient) { }
}

produces a "Useless constructor no-useless-constructor" error.

This error disappears with the plain typescript config:

parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],

add some eslint rules from plugin-unicorn

Hey 👋

Just found https://github.com/sindresorhus/eslint-plugin-unicorn
might be a nice addition! Will experiment a little ;)

Should use vue/script-indent

When using typescript eslint for some reason the indent rules are wrong and look as such:

<script>
import x from y;
import z from o;

  @Component()
export default class foo extends Vue {
  private bar: Bar;
}
</script>

Using the vue script indent rule fixes it, like so:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
  ],
  rules: {
    indent: "off",
    'vue/script-indent': ['error', 2, {
      baseIndent: 1
    }]
  }
}

Specifying Globals is not working

I want to set Specifying Globals in .eslintrc.js file, but it is not working.
Specifying Globals - ESLint document: https://eslint.org/docs/user-guide/configuring#specifying-globals

This is my setting:

// .eslintrc.js
module.exports = {
	root: true,
	env: {
		browser: true,
		node: true
	},
	parserOptions: {
		parser: 'babel-eslint'
	},
	extends: [
		'@nuxtjs',
		'plugin:nuxt/recommended'
	],
	// add your custom rules here
	rules: {
		semi: [2, 'never'],
		'indent': [2, 'tab'],
		'no-tabs': 0,
		'no-console': 'off',
		'vue/max-attributes-per-line': 'off'
	},
	globals: {
		TweenMax: false,
		TimelineLite: false
	}
}

When I use them in .vue file, example:

console.log(TweenMax)

And always show error:

error  'TweenMax' is not defined  no-undef

How should I do?

Package version:
nuxt: 2.11.0
@nuxtjs/eslint-config: 1.1.2
@nuxtjs/eslint-module: 1.1.0

Identifier 'I_Query' namespace is not in camel case

I want to disable this eslint rule for namespaces. How can I do it? Thanks.

export namespace I_Query {
  export interface Result extends _Result {}
  export interface CreateMutationFunArgs extends _CreateMutationFunArgs {}
}

version
"@nuxtjs/eslint-config-typescript": "1.0.0"

Lint rule for line breaks :thinking:

Some consisting spaces (or at least removing multiple line breaks) would be nice I'd say.

Also maybe: line break before return

Async method 'asyncData' has no 'await' expression

When official examples recommends something like this:

export default {
  async asyncData ({ params }) {
    const { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

Then official eslint config should not report it as error.

Get import/named errors when using TypeScript

I get an import/named error when I run eslint for the following code.

https://github.com/odan-sandbox/nuxt-eslint-error-sandbox/blob/main/plugins/my.ts

import Vue, { PropType } from 'vue'

/Users/odan/source/github.com/odan-sandbox/nuxt-eslint-error-sandbox/plugins/my.ts
   3:15  error    PropType not found in 'vue'   import/named
  25:53  warning  Unexpected console statement  no-console

The .eslintrc.js that I used is as follows This is unchanged from what yarn create-app nuxt generated.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {},
}

This problem can be solved by setting import/parsers and import/resolver.
ref: https://github.com/odan-sandbox/nuxt-eslint-error-sandbox/blob/main/.eslintrc.with-resolver.js

I believe that these settings should be added to https://github.com/nuxt/eslint-config/blob/master/packages/eslint-config-typescript/index.js.

Failed to load plugin 'unicorn'

I'm getting the following warning on a new Nuxt installation (using npx create-nuxt-app)

WARN Compiled with 1 warnings
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load plugin 'unicorn' declared in '.eslintrc.js » @nuxtjs/eslint-config': Invalid regular expression: /(?<before>(?:^|[^\\])(?:\\\\)*)\\(?<data>x[\da-f]
{2}|u[\da-f]{4}|u{[\da-f]+})/: Invalid group

Any thoughts on troubleshooting?

eslint 6 compatibility

Hi, there,

eslint-plugin-vue 6.0.0 just released, solved the incompatible issue with eslint 6.0. Could you please also upgrade? Thanks!

vue parsing error

[Steps]

Install @nuxtjs/eslint-config-typescript: "^6.0.1" and @typescript-eslint/eslint-plugin: "^4.28.1"
Extends in eslint configuration file
extends: [
'@nuxtjs/eslint-config-typescript',
'plugin:@typescript-eslint/recommended',
]
[Currrent]
Generate vue parsing error(ref screen shote attach here

[Expect]

Should parse .vue file also

Failed to load plugin 'unicorn'

Error message got:

Error: Failed to load plugin 'unicorn' declared in '.eslintrc.js » @nuxtjs/eslint-config': Invalid version: "2"

Here's a part of the package.json for the eslint related libraries:

    "eslint": "^7.30.0",
    "eslint-plugin-import": "^2.23.3",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",

Tried node v10.x, v12.x and v14.x with clearing cache with no success.
Full error message on terminal when run yarn lint command:

Error: Failed to load plugin 'unicorn' declared in '.eslintrc.js » @nuxtjs/eslint-config': Invalid version: "2"
    at Object.fixVersionField (/proj_path/node_modules/normalize-package-data/lib/fixer.js:191:13)
    at /proj_path/node_modules/normalize-package-data/lib/normalize.js:32:38
    at Array.forEach (<anonymous>)
    at normalize (/proj_path/node_modules/normalize-package-data/lib/normalize.js:31:15)
    at AsyncFunction.module.exports.sync (/proj_path/node_modules/read-pkg/index.js:37:36)
    at AsyncFunction.module.exports.sync (/proj_path/node_modules/read-pkg-up/index.js:27:24)
    at Object.<anonymous> (/proj_path/node_modules/eslint-plugin-unicorn/rules/expiring-todo-comments.js:20:33)
    at Module._compile (/proj_path/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The "parser" configuration option should be in the root of the .eslintrc.js file

I was going through the eslint docs and it seems to imply that the parser key should be a root element in the .eslintrc.js file. Right now that key is a child of the the parserOptions key https://github.com/nuxt/create-nuxt-app/blob/8adf4ce7fcabcdf1952e81e650386f9a9a6ae1da/packages/cna-template/template/_.eslintrc.js#L9

nuxt / eslint Goto Github PK

eslint's Introduction

Nuxt

Table of Contents

eslint's People

Contributors

Stargazers

Watchers

Forkers

eslint's Issues

My repogitory

Error details

Package versions

Edited/Blocked

Open

Detected dependencies

Environment

Reproduction

Describe the bug

Additional context

Logs

Versions

Reproduction

Steps to reproduce

What is Expected?

What is actually happening?

Current workaround

Error message got:

Recommend Projects

Recommend Topics

Recommend Org