feat(no-inspect): add no-inspect rule (#868)

Add rule that warns if `$inspect` is used.

Closes #812

---------

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

Author: mikededo

.changeset/witty-games-mix.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat(no-inspect): add `no-inspect` rule

README.md

@@ -419,6 +419,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-ignored-unsubscribe](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-ignored-unsubscribe/) | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores. |  |
 | [svelte/no-immutable-reactive-statements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-immutable-reactive-statements/) | disallow reactive statements that don't reference reactive values. |  |
 | [svelte/no-inline-styles](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-inline-styles/) | disallow attributes and directives that produce inline styles |  |
+| [svelte/no-inspect](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-inspect/) | Warns against the use of `$inspect` directive |  |
 | [svelte/no-reactive-functions](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-functions/) | it's not necessary to define functions in reactive statements | :bulb: |
 | [svelte/no-reactive-literals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :bulb: |
 | [svelte/no-svelte-internal](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-svelte-internal/) | svelte/internal will be removed in Svelte 6. |  |

docs/rules.md

@@ -56,6 +56,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-ignored-unsubscribe](./rules/no-ignored-unsubscribe.md)                       | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores.                                                  |          |
 | [svelte/no-immutable-reactive-statements](./rules/no-immutable-reactive-statements.md)   | disallow reactive statements that don't reference reactive values.                                                                        |          |
 | [svelte/no-inline-styles](./rules/no-inline-styles.md)                                   | disallow attributes and directives that produce inline styles                                                                             |          |
+| [svelte/no-inspect](./rules/no-inspect.md)                                               | Warns against the use of `$inspect` directive                                                                                             |          |
 | [svelte/no-reactive-functions](./rules/no-reactive-functions.md)                         | it's not necessary to define functions in reactive statements                                                                             | :bulb:   |
 | [svelte/no-reactive-literals](./rules/no-reactive-literals.md)                           | don't assign literal values in reactive statements                                                                                        | :bulb:   |
 | [svelte/no-svelte-internal](./rules/no-svelte-internal.md)                               | svelte/internal will be removed in Svelte 6.                                                                                              |          |

docs/rules/no-inspect.md

@@ -0,0 +1,39 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-inspect'
+description: 'Warns against the use of `$inspect` directive'
+---
+
+# svelte/no-inspect
+
+> Warns against the use of `$inspect` directive
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports usages of `$inspect`.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/no-inspect: "error" */
+  // ✗ BAD
+  $inspect(1);
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-inspect.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-inspect.ts)

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -164,6 +164,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-inner-declarations/
    */
   'svelte/no-inner-declarations'?: Linter.RuleEntry<SvelteNoInnerDeclarations>
+  /**
+   * Warns against the use of `$inspect` directive
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-inspect/
+   */
+  'svelte/no-inspect'?: Linter.RuleEntry<[]>
   /**
    * disallow use of not function in event handler
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/

packages/eslint-plugin-svelte/src/rules/no-inspect.ts

@@ -0,0 +1,31 @@
+import type { TSESTree } from '@typescript-eslint/types';
+
+import { createRule } from '../utils';
+
+export default createRule('no-inspect', {
+	meta: {
+		docs: {
+			description: 'Warns against the use of `$inspect` directive',
+			category: 'Best Practices',
+			// TODO: Enable recommended in major version
+			recommended: false,
+			default: 'warn'
+		},
+		schema: [],
+		messages: {
+			unexpected: 'Do not use $inspect directive'
+		},
+		type: 'suggestion'
+	},
+	create(context) {
+		return {
+			Identifier(node: TSESTree.Identifier) {
+				if (node.name !== '$inspect') {
+					return;
+				}
+
+				context.report({ messageId: 'unexpected', node });
+			}
+		};
+	}
+});

packages/eslint-plugin-svelte/src/utils/rules.ts

@@ -32,6 +32,7 @@ import noIgnoredUnsubscribe from '../rules/no-ignored-unsubscribe';
 import noImmutableReactiveStatements from '../rules/no-immutable-reactive-statements';
 import noInlineStyles from '../rules/no-inline-styles';
 import noInnerDeclarations from '../rules/no-inner-declarations';
+import noInspect from '../rules/no-inspect';
 import noNotFunctionHandler from '../rules/no-not-function-handler';
 import noObjectInTextMustaches from '../rules/no-object-in-text-mustaches';
 import noReactiveFunctions from '../rules/no-reactive-functions';
@@ -97,6 +98,7 @@ export const rules = [
 	noImmutableReactiveStatements,
 	noInlineStyles,
 	noInnerDeclarations,
+	noInspect,
 	noNotFunctionHandler,
 	noObjectInTextMustaches,
 	noReactiveFunctions,

packages/eslint-plugin-svelte/tests/fixtures/rules/no-inspect/invalid/test01-errors.yaml

@@ -0,0 +1,12 @@
+- message: Do not use $inspect directive
+  line: 2
+  column: 3
+  suggestions: null
+- message: Do not use $inspect directive
+  line: 5
+  column: 13
+  suggestions: null
+- message: Do not use $inspect directive
+  line: 8
+  column: 5
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-inspect/invalid/test01-input.svelte

@@ -0,0 +1,10 @@
+<script>
+  $inspect(1);
+  $state(0);
+
+  const a = $inspect(1);
+
+  const _ = () => {
+    $inspect(1);
+  }
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-inspect/valid/test01-input.svelte

@@ -0,0 +1,3 @@
+<script>
+  const _ = $state(1);
+</script>

packages/eslint-plugin-svelte/tests/src/rules/no-inspect.ts

@@ -0,0 +1,12 @@
+import { RuleTester } from '../../utils/eslint-compat';
+import rule from '../../../src/rules/no-inspect';
+import { loadTestCases } from '../../utils/utils';
+
+const tester = new RuleTester({
+	languageOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module'
+	}
+});
+
+tester.run('no-inspect', rule as any, loadTestCases('no-inspect'));