chore: Switch default ESLint plugin from eslint-plugin-svelte3 to `…

…eslint-plugin-svelte` (#9749)

close: #9342
close: #6847

---------

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
Co-authored-by: Conduitry <git@chor.date>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

.changeset/curly-moons-sin.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': major
+---
+
+feat: switch default ESLint plugin from `eslint-plugin-svelte3` to `eslint-plugin-svelte`

packages/create-svelte/bin.js

@@ -131,7 +131,7 @@ if (options.types === 'typescript') {
 
 if (options.features.includes('eslint')) {
 	console.log(bold('✔ ESLint'));
-	console.log(cyan('  https://github.com/sveltejs/eslint-plugin-svelte3\n'));
+	console.log(cyan('  https://github.com/sveltejs/eslint-plugin-svelte\n'));
 }
 
 if (options.features.includes('prettier')) {

packages/create-svelte/shared/+eslint+prettier+typescript/.eslintrc.cjs

@@ -1,20 +1,31 @@
 module.exports = {
 	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
 	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
+	plugins: ['@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,
 		es2017: true,
 		node: true
-	}
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
 };

packages/create-svelte/shared/+eslint+prettier-typescript/.eslintrc.cjs

@@ -1,11 +1,10 @@
 module.exports = {
 	root: true,
-	extends: ['eslint:recommended', 'prettier'],
-	plugins: ['svelte3'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,

packages/create-svelte/shared/+eslint+typescript/.eslintrc.cjs

@@ -1,20 +1,30 @@
 module.exports = {
 	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended'
+	],
 	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-	plugins: ['svelte3', '@typescript-eslint'],
+	plugins: ['@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,
 		es2017: true,
 		node: true
-	}
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
 };

packages/create-svelte/shared/+eslint-typescript/.eslintrc.cjs

@@ -1,11 +1,10 @@
 module.exports = {
 	root: true,
-	extends: ['eslint:recommended'],
-	plugins: ['svelte3'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	extends: ['eslint:recommended', 'plugin:svelte/recommended'],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,

packages/create-svelte/shared/+eslint/package.json

@@ -1,6 +1,6 @@
 {
 	"devDependencies": {
 		"eslint": "^8.28.0",
-		"eslint-plugin-svelte3": "^4.0.0"
+		"eslint-plugin-svelte": "^2.26.0"
 	}
 }

packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte

@@ -109,11 +109,11 @@
 	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
 
 	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
-		{#each Array(6) as _, row}
+		{#each Array.from(Array(6).keys()) as row (row)}
 			{@const current = row === i}
 			<h2 class="visually-hidden">Row {row + 1}</h2>
 			<div class="row" class:current>
-				{#each Array(5) as _, column}
+				{#each Array.from(Array(5).keys()) as column (column)}
 					{@const answer = data.answers[row]?.[column]}
 					{@const value = data.guesses[row]?.[column] ?? ''}
 					{@const selected = current && column === data.guesses[row].length}