feat: support svelte out of box (#483)

Author: JounQin

.changeset/odd-eagles-breathe.md

@@ -0,0 +1,9 @@
+---
+'eslint-plugin-prettier': minor
+---
+
+feat: support svelte out of box
+
+close #472, close #482
+
+We recommend to use [`eslint-plugin-svelte`](https://github.com/ota-meshi/eslint-plugin-svelte) instead of [`eslint-plugin-svelte3`](https://github.com/sveltejs/eslint-plugin-svelte3).

eslint-plugin-prettier.js

@@ -187,19 +187,33 @@ module.exports = {
               // by default.
               // Related ESLint plugins are:
               // 1. `eslint-plugin-graphql` (replacement: `@graphql-eslint/eslint-plugin`)
-              // 2. `eslint-plugin-markdown@1` (replacement: `eslint-plugin-markdown@2+`)
-              // 3. `eslint-plugin-html`
+              // 2. `eslint-plugin-html`
+              // 3. `eslint-plugin-markdown@1` (replacement: `eslint-plugin-markdown@2+`)
+              // 4. `eslint-plugin-svelte3` (replacement: `eslint-plugin-svelte@2+`)
               const parserBlocklist = [null, 'markdown', 'html'];
 
               let inferParserToBabel = parserBlocklist.includes(inferredParser);
 
-              if (
+              switch (inferredParser) {
                 // it could be processed by `@graphql-eslint/eslint-plugin` or `eslint-plugin-graphql`
-                inferredParser === 'graphql' &&
-                // for `eslint-plugin-graphql`, see https://github.com/apollographql/eslint-plugin-graphql/blob/master/src/index.js#L416
-                source.startsWith('ESLintPluginGraphQLFile`')
-              ) {
-                inferParserToBabel = true;
+                case 'graphql': {
+                  if (
+                    // for `eslint-plugin-graphql`, see https://github.com/apollographql/eslint-plugin-graphql/blob/master/src/index.js#L416
+                    source.startsWith('ESLintPluginGraphQLFile`')
+                  ) {
+                    inferParserToBabel = true;
+                  }
+                  break;
+                }
+                // it could be processed by `@ota-meshi/eslint-plugin-svelte`, `eslint-plugin-svelte` or `eslint-plugin-svelte3`
+                case 'svelte': {
+                  // The `source` would be modified by `eslint-plugin-svelte3`
+                  if (!context.parserPath.includes('svelte-eslint-parser')) {
+                    // We do not support `eslint-plugin-svelte3`,
+                    // the users should run `prettier` on `.svelte` files manually
+                    return;
+                  }
+                }
               }
 
               if (inferParserToBabel) {
@@ -223,6 +237,7 @@ module.exports = {
                 'html',
                 'mdx',
                 'angular',
+                'svelte',
               ];
               if (parserBlocklist.includes(inferredParser)) {
                 return;

package.json

@@ -48,8 +48,8 @@
     "@changesets/changelog-github": "^0.4.5",
     "@changesets/cli": "^2.23.0",
     "@graphql-eslint/eslint-plugin": "^2.5.0",
+    "@ota-meshi/eslint-plugin-svelte": "^0.34.1",
     "@typescript-eslint/parser": "^5.29.0",
-    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-mdx": "^1.17.0",
     "eslint-plugin-eslint-plugin": "^4.3.0",
@@ -60,6 +60,7 @@
     "mocha": "^9.2.2",
     "patch-package": "^6.4.7",
     "prettier": "^2.7.1",
+    "svelte": "^3.48.0",
     "vue-eslint-parser": "^8.3.0"
   },
   "resolutions": {

test/fixtures/@ota-meshi/eslint-plugin-svelte/App.svelte

@@ -0,0 +1,5 @@
+<script>
+let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>

test/fixtures/eslint-plugin-svelte3/App.named-blocks.svelte

@@ -0,0 +1,5 @@
+<script>
+let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>

test/fixtures/eslint-plugin-svelte3/App.svelte

@@ -0,0 +1,5 @@
+<script>
+let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>

test/prettier.js

@@ -46,6 +46,21 @@ const eslint = new ESLint({
           'mdx/code-block': true,
         },
       },
+      {
+        files: '**/eslint-plugin-svelte3/*.svelte',
+        plugins: ['svelte3'],
+        processor: 'svelte3/svelte3',
+      },
+      {
+        files: '**/eslint-plugin-svelte3/*.named-blocks.svelte',
+        settings: {
+          'svelte3/named-blocks': true,
+        },
+      },
+      {
+        files: '**/@ota-meshi/eslint-plugin-svelte/*.svelte',
+        extends: ['plugin:@ota-meshi/svelte/recommended'],
+      },
     ],
   },
   useEslintrc: false,
@@ -158,8 +173,8 @@ atGraphqlEslintRuleTester.run('@graphql-eslint/eslint-plugin', rule, {
   ],
 });
 
-// eslint-plugin-graphql handles literal graphql files by tranforming graphql
-// code with a processor, instead of using a parser. Unfortunatly we cant
+// eslint-plugin-graphql handles literal graphql files by transforming graphql
+// code with a processor, instead of using a parser. Unfortunately we cant
 // specify custom processors in a RuleTester, so instead we have write test code
 // that is the result of eslint-plugin-graphql's processing - this is the
 // ESLintPluginGraphQLFile tagged template literal. See
@@ -210,7 +225,7 @@ mdxRuleTester.run('eslint-plugin-mdx', rule, {
   ],
 });
 
-runFixture('mdx', [
+runFixture('*.mdx', [
   [
     {
       column: 33,
@@ -245,6 +260,43 @@ runFixture('mdx', [
   ],
 ]);
 
+runFixture('@ota-meshi/eslint-plugin-svelte/*.svelte', [
+  [
+    {
+      column: 5,
+      endColumn: 13,
+      endLine: 2,
+      fix: {
+        range: [13, 21],
+        text: 'name =',
+      },
+      line: 2,
+      message: 'Replace `·name·=·` with `name·=`',
+      messageId: 'replace',
+      nodeType: null,
+      ruleId: 'prettier/prettier',
+      severity: 2,
+    },
+    {
+      column: 4,
+      endColumn: 7,
+      endLine: 5,
+      fix: {
+        range: [45, 48],
+        text: '>',
+      },
+      line: 5,
+      message: 'Replace `·>·` with `>`',
+      messageId: 'replace',
+      nodeType: null,
+      ruleId: 'prettier/prettier',
+      severity: 2,
+    },
+  ],
+]);
+
+runFixture('eslint-plugin-svelte3/*.svelte', [[], []]);
+
 // ------------------------------------------------------------------------------
 //  Helpers
 // ------------------------------------------------------------------------------
@@ -288,12 +340,18 @@ function getPrettierRcJsFilename(dir, file = 'dummy.js') {
   return path.resolve(__dirname, `./prettierrc/${dir}/${file}`);
 }
 
-async function runFixture(name, asserts) {
+/**
+ *
+ * @param {string} pattern
+ * @param {import('eslint').Linter.LintMessage[]} asserts
+ * @returns {Promise<void>}
+ */
+async function runFixture(pattern, asserts) {
   try {
-    const results = await eslint.lintFiles(`test/fixtures/${name}.*`);
+    const results = await eslint.lintFiles([`test/fixtures/${pattern}`]);
     return assert.deepStrictEqual(
-      asserts,
       results.map(({ messages }) => messages),
+      asserts,
     );
   } catch (err) {
     console.error(err);