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

Question

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

spend-cloud-tom opened this issue 5 months ago · comments

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

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Anthony Fu · Answer 1 · Wed Dec 20 2023 06:56:45 GMT+0800 (China Standard Time)

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 · Answer 2 · Mon Jan 08 2024 16:14:41 GMT+0800 (China Standard Time)

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

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

ysansan · Answer 3 · Wed Jan 24 2024 18:09:56 GMT+0800 (China Standard Time)

我这边也出现了这个问题，好像是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 · Answer 4 · Wed Jan 24 2024 18:30:20 GMT+0800 (China Standard Time)

@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
    }, 
}

ysansan · Answer 5 · Wed Jan 24 2024 18:48:10 GMT+0800 (China Standard Time)

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

ysansan · Answer 6 · Wed Jan 24 2024 18:58:22 GMT+0800 (China Standard Time)

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

usercao · Answer 7 · Thu Jan 25 2024 17:03:57 GMT+0800 (China Standard Time)

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

ysansan · Answer 8 · Fri Jan 26 2024 09:27:05 GMT+0800 (China Standard Time)

@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 · Answer 9 · Fri Jan 26 2024 09:29:20 GMT+0800 (China Standard Time)

@whitexie Is there any solution to using yarn?

ysansan · Answer 10 · Fri Jan 26 2024 09:41:45 GMT+0800 (China Standard Time)

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

usercao · Answer 11 · Fri Jan 26 2024 09:43:09 GMT+0800 (China Standard Time)

@whitexie 👌thanks

Raman Paulau · Answer 12 · Wed Mar 06 2024 05:14:32 GMT+0800 (China Standard Time)

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

sfcBlocks: {
  blocks: {
    styles: false,
  },
},