bug: An import declaration can only be used at the top level of a module

[cn2156]

In 1.65, ESLint find problems "An import declaration can only be used at the top level of a module."
but in 1.64.2, ESLint not found any problems

The code is:

import { useRouter } from "vue-router";
const router = useRouter();

import OtherView from './OtherView.vue'

ESLint
v2.2.2
Released on
2015/11/16 19:58:32
Last updated
2022/1/13 17:49:56
Identifier
dbaeumer.vscode-eslint

Version: 1.65.0 (Universal)
Commit: b5205cc8eb4fbaa726835538cd82372cc0222d43
Date: 2022-03-02T11:11:20.886Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.3.0

Version: 1.64.2 (Universal)
Commit: f80445acd5a3dadef24aa209168452a3d97cc326
Date: 2022-02-09T22:00:58.347Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.3.0

Please clone the project: https://github.com/cn2156/vue3-for-test-eslint, then read the README.md to show the details.

[yaegassy]

ESlint issue has nothing to do with volar.

Check the eslint extension or eslint-plugin-vue documentation and issue. If you do not find the cause, please report the issue.

[cn2156]

If I use vetur or not installed volar, the tips not occure.

[yaegassy]

If neither volar nor vetur is installed, VSCode probably cannot recognize *.vue files as vue files. Check the VSCode documentation and issue.

[cn2156]

I create a project by npm init vue@latest, with ESLint and Prettier, without typescript.

.eslintrc.cjs: comment all extends

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    // 'plugin:vue/vue3-strongly-recommended',
    // 'eslint:recommended',
    // '@vue/eslint-config-prettier',
  ],
  env: {
    // 'vue/setup-compiler-macros': true,
  },
}

In App.vue: add test code

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

const test = 'xxxx'

import TheNew from './components/TheNew.vue'
</script>

The lint error occured

[yaegassy]

I create a project by npm init vue@latest, with ESLint and Prettier, without typescript.

Check the create-vue documentation and issue.

[cn2156]

I try vue3-eslint-stylelint-demo, write codes and got the same lint tips.
read eslint-plugin-vue document,but could not find any topics.

On eslint-plugin-vue Online Playground, the lint is passed.

[johnsoncodehk]

You need to move imports at the top.

import { useRouter } from "vue-router";
import OtherView from './OtherView.vue';

const router = useRouter();

[johnsoncodehk]

Duplicate of #897

[cn2156]

Why in vscode 1.64.2, the lint was passed? It is a bug of vscode ?