Add ESLint plugin migration to svelte-migrate

[hyunbinseo]

Describe the bug

Projects created with create-svelte@3 packages include eslint-plugin-svelte3@4, which is not compatible with Svelte 4 as of now. If svelte-migrate svelte-4 is run in these projects, it later causes an npm installation error.

Suggestions:

1. Emphasize users to run npm i after the migration is completed.
2. If the project includes eslint-plugin-svelte@4, warn users in the log.
3. If the project includes one of the pre-provided .eslintrc.cjs (which is unaltered), replace the plugin and override the existing ESLint config file.

Reproduction

# Initialize a create-svelte@3 project
npm create svelte@3
npm i

# Migrate to Svelte 4 using the CLI
npx svelte-migrate@latest svelte-4

# Install the updated dependencies
# Reference the Logs section
npm i # npm WARN is printed
npm i # npm ERR! is printed

Logs

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: create-svelte-3.3.1@0.0.1
npm WARN Found: svelte@3.59.2
npm WARN node_modules/svelte
npm WARN   dev svelte@"^4.0.0" from the root project
npm WARN   7 more (@sveltejs/kit, @sveltejs/vite-plugin-svelte, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer svelte@"^3.2.0" from eslint-plugin-svelte3@4.0.0
npm WARN node_modules/eslint-plugin-svelte3
npm WARN   dev eslint-plugin-svelte3@"^4.0.0" from the root project

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: eslint-plugin-svelte3@4.0.0
npm ERR! Found: svelte@4.0.0
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.0.0" from the root project
npm ERR!   peer svelte@"^3.54.0 || ^4.0.0-next.0" from @sveltejs/kit@1.20.5
npm ERR!   node_modules/@sveltejs/kit
npm ERR!     dev @sveltejs/kit@"^1.20.4" from the root project
npm ERR!     peer @sveltejs/kit@"^1.0.0" from @sveltejs/adapter-auto@2.1.0
npm ERR!     node_modules/@sveltejs/adapter-auto
npm ERR!       dev @sveltejs/adapter-auto@"^2.0.0" from the root project
npm ERR!   5 more (@sveltejs/vite-plugin-svelte, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.2.0" from eslint-plugin-svelte3@4.0.0
npm ERR! node_modules/eslint-plugin-svelte3
npm ERR!   dev eslint-plugin-svelte3@"^4.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: svelte@3.59.2
npm ERR! node_modules/svelte
npm ERR!   peer svelte@"^3.2.0" from eslint-plugin-svelte3@4.0.0
npm ERR!   node_modules/eslint-plugin-svelte3
npm ERR!     dev eslint-plugin-svelte3@"^4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

System Info

System:
  OS: macOS 13.4
  CPU: (10) arm64 Apple M1 Pro
  Memory: 105.44 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
  npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
Browsers:
  Chrome: 114.0.5735.133
  Firefox: 114.0.2
  Safari: 16.5

Severity

annoyance

Additional Information

No response

[hyunbinseo]

For manual migration,

1. Install the official ESLint plugin.

npm rm eslint-plugin-svelte3
npm i eslint-plugin-svelte -D

2. Replace the existing .eslintrc.cjs file.

// JavaScript Project

module.exports = {
  root: true,
  extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte']
  },
  env: {
    browser: true,
    es2017: true,
    node: true
  }
};

// TypeScript Project

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:svelte/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte']
  },
  env: {
    browser: true,
    es2017: true,
    node: true
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  ]
};

[dummdidumm]

I'm honestly not sure if this can be automigrated, given that the setups could be vastly different. But we certainly could add a documentation entry to https://svelte.dev/docs/v4-migration-guide and link to it from the migration script - it's not strictly a breaking change within Svelte itself, but related to it.