search

antfu / eslint-config

Anthony's ESLint config preset
https://eslint-config.antfu.me/
MIT License
4k stars 441 forks source link

Linter rules seem to not work with Vue 2.x projects #367

Closed spend-cloud-tom closed 10 months ago

spend-cloud-tom commented 10 months ago

Describe the bug

I'm running the config @ 2.3.x on a project using vue@2.7.15, this runs fine. Whenever I update the config to 2.4.x I'm getting these errors, which I believe have to do with a template parser mismatch.

[...]/src/pages/x.vue
  0:0  error  Preprocessing error: Cannot read properties of undefined (reading 'styles')`

This is my config:

const antfu = require('@antfu/eslint-config').default

module.exports = antfu(
  {
    vue: true,
    vueVersion: 2,
    typescript: false,
    css: true,
  },
  {
    ignores: [
      'docker-compose.dev.yml',
      'src/init/pendo.js',
      'src/main-test.js',
      'src/utils/pin.js',
    ],
  },
  {
    files: ['**/*'],
    rules: {
      'node/prefer-global/process': 'off',
    },
  },
  {
    files: ['tasks/**/*'],
    rules: {
      'no-console': 'off',
    },
  },
  {
    files: ['src/**/*.spec.js', 'src/test-utils/**/*', '**/stub*.js', '**/__mocks__/**/*'],
    languageOptions: {
      globals: {
        afterAll: 'readonly',
        afterEach: 'readonly',
        beforeAll: 'readonly',
        beforeEach: 'readonly',
        describe: 'readonly',
        expect: 'readonly',
        it: 'readonly',
        jest: 'readonly',
        test: 'readonly',
      },
    },
  },
  {
    files: ['**/*.vue'],
    rules: {
      'vue/component-definition-name-casing': ['error', 'kebab-case'],
      'vue/component-name-in-template-casing': ['error', 'kebab-case'],
      'vue/custom-event-name-casing': ['error', 'kebab-case', { ignores: [] }],
      'vue/no-deprecated-events-api': 'off',
      'vue/no-deprecated-router-link-tag-prop': 'off',
      'vue/no-deprecated-v-bind-sync': 'off',
      'vue/no-deprecated-v-on-native-modifier': 'off',
      'vue/no-unused-refs': 'off',
      'vue/no-v-for-template-key-on-child': 'off',
      'vue/require-explicit-emits': 'off',
      'vue/v-on-event-hyphenation': 'off',
      'vue/no-deprecated-dollar-scopedslots-api': 'off',
    },
  },
  {
    files: ['sc-overview-filter-field.vue'],
    rules: {
      '@typescript-eslint/no-invalid-this': 'off',
    },
  },
  {
    files: ['src/__mocks__/**/*'],
    rules: {
      'no-useless-call': 'off',
      'import/export': 'off',
    },
  },
  {
    files: ['src/utils/**/*'],
    rules: {
      'eslint-comments/no-unlimited-disable': 'off',
    },
  },
  {
    files: ['src/test-utils/**/*'],
    rules: {
      'no-useless-call': 'off',
      'import/export': 'off',
    },
  },
  {
    files: ['tests/e2e/**/*'],
    rules: {
      'padding-line-between-statements': 'off',
    },
  },
  {
    files: ['src/pages/application-management/organization/structure.vue'],
    rules: {
      'no-invalid-this': 'off',
    },
  },
)

Reproduction

Use linter config 2.4.x on a vue 2 project

System Info

Node v20.10.0, Ubuntu 22.04, vue 2.17.5

Used Package Manager

npm

Validations

antfu commented 10 months ago

We temporarily closed this due to the lack of enough information. We could not identify whether it was a bug or a userland misconfiguration with the given info. Please provide a minimal reproduction to reopen the issue. Thanks.

Why reproduction is required

usercao commented 9 months ago

image

export default antfu(
  {
    vueVersion: 2,
  },
)

There is indeed this issue, please lock the 2.3.4 version.

whitexie commented 9 months ago

我这边也出现了这个问题，好像是eslint-processor-vue-blocks 引起的

vscode 日志: 

2024-01-24T10:08:11.658Z eslint:flat-eslint Searching for eslint.config.js
2024-01-24T10:08:11.658Z eslint:flat-eslint Loading config from /Users/xxxxx/temp/eslint-issues-367/eslint.config.js
2024-01-24T10:08:11.658Z eslint:flat-eslint Config file URL is file:///Users/xxxxx/temp/eslint-issues-367/eslint.config.js
2024-01-24T10:08:11.718Z eslint:flat-eslint Lint /Users/xxxxx/temp/eslint-issues-367/src/components/TheWelcome.vue
2024-01-24T10:08:11.718Z eslint:linter Linting code for /Users/xxxxx/temp/eslint-issues-367/src/components/TheWelcome.vue (pass 1)
2024-01-24T10:08:11.718Z eslint:linter Verify
2024-01-24T10:08:11.718Z eslint:linter With flat config: /Users/xxxxx/temp/eslint-issues-367/src/components/TheWelcome.vue
2024-01-24T10:08:11.718Z eslint:linter Apply the processor: { meta: { name: 'merged-processor:eslint-plugin-vue+eslint-processor-vue-blocks' }, supportsAutofix: true, preprocess: [Function: preprocess], postprocess: [Function: postprocess] }
2024-01-24T10:08:11.718Z eslint:linter Preprocessing error: Cannot read properties of undefined (reading 'styles')
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.preprocess (file:///Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint-processor-vue-blocks@0.1.1_eslint@8.56.0/node_modules/eslint-processor-vue-blocks/dist/index.mjs:73:20)
    at /Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint-merge-processors@0.1.0_eslint@8.56.0/node_modules/eslint-merge-processors/dist/index.cjs:14:46
    at Array.flatMap (<anonymous>)
    at preprocess (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint-merge-processors@0.1.0_eslint@8.56.0/node_modules/eslint-merge-processors/dist/index.cjs:13:25)
    at Linter._verifyWithFlatConfigArrayAndProcessor (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/linter.js:1479:22)
    at Linter._verifyWithFlatConfigArray (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/linter.js:1848:25)
    at Linter.verify (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/linter.js:1433:65)
    at Linter.verifyAndFix (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/linter.js:2068:29)
    at verifyText (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/eslint/flat-eslint.js:474:48)
    at FlatESLint.lintText (/Users/xxxxx/temp/eslint-issues-367/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/eslint/flat-eslint.js:957:26)
2024-01-24T10:08:11.719Z eslint:linter Generating fixed text for /Users/xxxxx/temp/eslint-issues-367/src/components/TheWelcome.vue (pass 1)
2024-01-24T10:08:11.719Z eslint:source-code-fixer Applying fixes
2024-01-24T10:08:11.719Z eslint:source-code-fixer shouldFix parameter was false, not attempting fixes
2024-01-24T10:08:11.719Z eslint:flat-eslint Linting complete in: 60ms

eslint.config.js ：

const antfu = require('@antfu/eslint-config').default

module.exports = antfu({
  vue: {
    // 设置成false就不会报错
    sfcBlocks: true,
    vueVersion: 2,
  },
})

复现demo: https://github.com/whitexie/eslint-issues-367

我的环境：

  System:
    OS: macOS 14.2.1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
    pnpm: 7.19.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 119.0.6045.105
    Safari: 17.2.1
usercao commented 9 months ago

@antfu @whitexie It's useless if you set it like this, the settings in formatters still won't take effect.

{
    vue: {
      vueVersion: 2,
      sfcBlocks: false,
    },
    formatters: {
      css: true, // Not effective
      html: true, // Not effective
      markdown: 'prettier', // Not effective
    }, 
}
whitexie commented 9 months ago

@usercao 有安装eslint-plugin-format吗？ formatters 依赖它

whitexie commented 9 months ago

@antfu eslint-processor-vue-blocks 对于@vue/compiler-sfc 的依赖版本是3.3以上， 但是本地引用的是@vue/compiler-sfc@2.7.16版本。

image
usercao commented 9 months ago

@whitexie Installing eslint-plugin-format does not work.

whitexie commented 9 months ago

@usercao 如果是.vue中的style，需要将sfcBlocks 设置为true； 但eslint-processor-vue-blocks 依赖@vue/compiler-sfc的3.3以上版本；

我从yarn迁移到pnpm之后，pnpm可以解决这个依赖冲突的问题。

删除node_modules， 在项目根路径下创建.npmrc, 写入： 

auto-install-peers=true

重新安装依赖就可以了。

usercao commented 9 months ago

@whitexie Is there any solution to using yarn?

whitexie commented 9 months ago

不知道哈，没找到相关解决办法。

usercao commented 9 months ago

@whitexie 👌thanks

romansp commented 8 months ago

This configuration seem to help to avoid this error by ignoring styles block.

sfcBlocks: {
  blocks: {
    styles: false,
  },
},
LOUSANPANG commented 4 months ago

@whitexie Is there any solution to using yarn?

It seems to be solved with PNPM

sonofmagic commented 2 months ago

Here I give a yarn solution. In package.json , add:

  "resolutions": {
    "**/eslint-processor-vue-blocks/@vue/compiler-sfc": "^3.3.0"
  }

Then the problem is solved. @usercao