# svelte/require-store-reactive-access

disallow to use of the store itself as an operand. Need to use $ prefix or get function.

  • ⚙️ This rule is included in "plugin:svelte/recommended".
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

# 📖 Rule Details

This rule disallow to use of the store itself as an operand.
You should access the store value using the $ prefix or the get function.

<script>
  /* eslint svelte/require-store-reactive-access: "error" */
  import { writable, get } from 'svelte/store';
  const storeValue = writable('world');
  const color = writable('red');

  /* ✓ GOOD */
  $: message = `Hello ${$storeValue}`;

  /* ✗ BAD */
  $: message = `Hello ${
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue}`;
</script>

<!-- ✓ GOOD -->
<p>{$storeValue}</p>
<p>{get(storeValue)}</p>

<p class={$storeValue} />
<p style:color={$color} />

<MyComponent prop="Hello {$storeValue}" />
<MyComponent bind:this={$storeValue} />
<MyComponent --style-props={$storeValue} />
<MyComponent {...$storeValue} />

<!-- ✗ BAD -->
<p>{
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue}</p>

<p class={
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue} />
<p style:
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
color />

<MyComponent prop="Hello {
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue}" />
<MyComponent bind:this={
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue} />
<MyComponent --style-props={
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue} />
<MyComponent {...
Use the $ prefix or the get function to access reactive values instead of accessing the raw store. (svelte/require-store-reactive-access)
storeValue} />

This rule checks the usage of store variables only if the store can be determined within a single file. However, when using @typescript-eslint/parser and full type information, this rule uses the type information to determine if the expression is a store.

// fileName: my-stores.ts
import { writable } from 'svelte/store';
export const storeValue = writable('hello');
<script lang="ts">
  /* eslint svelte/require-store-reactive-access: "error" */
  import { storeValue } from './my-stores';
</script>

<!-- ✓ GOOD -->
<p>{$storeValue}</p>

<!-- ✗ BAD -->
<p>{storeValue}</p>

# 🔧 Options

Nothing.

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v2.12.0

# 🔍 Implementation