Nuxt3：如何配置eslint？

Question

Nuxt3：如何配置eslint

npx nuxi init nuxt3-app

Answer 1

如果您使用的是 typescript，
你可以添加@nuxtjs/eslint-config-typescript作為開發依賴

並創建.eslintrc

{
  "extends": [
    "@nuxtjs/eslint-config-typescript"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "off"
    ]
  }
}

---

如果不使用 typescript，
在@nuxtjs/eslint-config-typescript 中添加@nuxtjs/eslint-config @nuxtjs/eslint-config-typescript

並創建.eslintrc

{
  "extends": [
    "@nuxtjs"
  ],
}

---

有關 nuxt linter 的更多詳細信息，請訪問： https://github.com/nuxt/eslint-config

Answer 2

安裝以下庫。

- @nuxtjs/eslint-config
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser    
- eslint
- eslint-config-standard
- eslint-config-standard-with-typescript
- eslint-plugin-import
- eslint-plugin-n
- eslint-plugin-promise
- eslint-plugin-vue

其中一些由 eslint 默認安裝。

然后在你的.eslintrc.js文件中

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/base',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'standard'
  ],
  parser: 'vue-eslint-parser',
  overrides: [],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
}