### START Record Example

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Shows the format of the initial START record, including the timestamp and workspace folder.

```text
1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
```

--------------------------------

### Install svelte-check Locally

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Install svelte-check as a development dependency in your project.

```bash
npm i svelte-check --save-dev
```

--------------------------------

### Install SCSS Preprocessor Packages

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Install svelte-preprocess and the SCSS transpiler (sass or node-sass) using npm.

```sh
npm i -D svelte-preprocess sass
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Clone the Svelte Language Tools repository and install its dependencies using pnpm. This sets up the development environment.

```shell
git clone git@github.com:sveltejs/language-tools.git
cd language-tools
pnpm install
pnpm bootstrap
```

--------------------------------

### Install svelte-language-server with Yarn 2 PnP

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/README.md

Install the svelte-language-server as a dev dependency when using Yarn 2 PnP.

```bash
yarn add -D svelte-language-server
```

--------------------------------

### Install TypeScript Svelte Plugin

Source: https://github.com/sveltejs/language-tools/blob/master/packages/typescript-plugin/README.md

Install the plugin as a development dependency using npm.

```bash
npm install --save-dev typescript-svelte-plugin
```

--------------------------------

### Install svelte-check Globally

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Install svelte-check and svelte globally for command-line access from any directory. This method is not recommended for project-specific checks.

```bash
npm i svelte-check svelte -g
```

--------------------------------

### Install pnpm Globally

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Install the pnpm package manager globally using npm. This is a prerequisite for managing the monorepo.

```shell
npm i -g pnpm
```

--------------------------------

### Initialize Language Server with Configuration

Source: https://github.com/sveltejs/language-tools/blob/master/packages/language-server/README.md

Example of how to send initialization options, including nested configuration for Svelte plugins, TypeScript, JavaScript, and Prettier, during the language server's initialization phase.

```json
{
    initializationOptions: {
        configuration: {
            svelte: {
                plugin: {
                    css: { enable: false },
                    // ...
                }
            },
            typescript: { /* .. */ },
            javascript: { /* .. */ },
            prettier: { /* .. */ },
            // ...
        }
    }
}
```

--------------------------------

### Run svelte-check Globally

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Execute the svelte-check command globally after installation. Navigate to your project folder first.

```bash
svelte-check
```

--------------------------------

### Deduplicating Preprocessor Configs (svelte.config.js)

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md

Example of how to create a reusable preprocessor configuration function in `svelte.config.js` to avoid duplication with build configurations.

```javascript
// svelte.config.js:
const sveltePreprocess = require('svelte-preprocess');

// using sourceMap as an example, but could be anything you need dynamically
function createPreprocessors(sourceMap) {
    return sveltePreprocess({
        sourceMap
        // ... your settings
    });
}

module.exports = {
    preprocess: createPreprocessors(true),
    createPreprocessors
};
```

--------------------------------

### Update Language Server Configuration

Source: https://github.com/sveltejs/language-tools/blob/master/packages/language-server/README.md

Example of how to update the language server's configuration after initialization, providing settings for Svelte plugins, TypeScript, JavaScript, and Prettier directly.

```json
{
    svelte: {
        plugin: {
            css: { enable: false },
            // ...
        }
    },
    typescript: { /* .. */ },
    javascript: { /* .. */ },
    prettier: { /* .. */ },
    // ...
    }
}
```

--------------------------------

### Svelte Component Example

Source: https://github.com/sveltejs/language-tools/blob/master/docs/internal/overview.md

A basic Svelte component with a script and template section.

```html
<script>
    export let world = 'name';
</script>

<h1>hello {world}</h1>

```

--------------------------------

### Deduplicating Preprocessor Configs (rollup.config.js)

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md

Example of how to import and use the shared preprocessor configuration function from `svelte.config.js` within a `rollup.config.js` file.

```javascript
// rollup.config.js:
// ...

const createPreprocessors = require('./svelte.config').createPreprocessors;
const production = !process.env.ROLLUP_WATCH;

export default {
    // ...

    plugins: [
        // ...
        svelte({
            // ...
            preprocess: createPreprocessors(!production)
        })
        // ...
    ]
};
```

--------------------------------

### FAILURE Record Example

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Illustrates the format for a FAILURE record, which indicates a runtime error during the check process.

```text
1590680328921 FAILURE "Connection closed"
```

--------------------------------

### Configure PostCSS plugins with Tailwind CSS

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/other-css-preprocessors.md

Example of a `postcss.config.js` file that includes Tailwind CSS, specifying the path to `tailwind.config.cjs`.

```javascript
const path = require('path');
const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [tailwindcss(path.resolve(__dirname, './tailwind.config.cjs'))]
};
```

--------------------------------

### Svelte Component Example

Source: https://github.com/sveltejs/language-tools/blob/master/README.md

A basic Svelte component demonstrating state, derived state, and event handling. This code is representative of a typical Svelte file.

```html
<script>
    let count = $state(1);

    let doubled = $derived(count * 2);
    let quadrupled = $derived(doubled * 2);

    function handleClick() {
        count += 1;
    }
</script>

<button onclick="{handleClick}">Count: {count}</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>
```

--------------------------------

### COMPLETED Record Example

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Shows the format of the concluding COMPLETED record, summarizing the number of files checked, errors, warnings, and files with problems.

```text
1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
```

--------------------------------

### Svelte to TSX Conversion Example

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte2tsx/README.md

Illustrates the transformation of a simple Svelte component into its TSX equivalent, demonstrating how props and template content are converted.

```svelte
<script>
    export let world = 'name';
</script>

<h1>hello {world}</h1>
```

```tsx
<></>;
function render() {
    let world = 'name';
    <>
        <h1>hello {world}</h1>
    </>;
    return { props: { world }, slots: {}, events: {} };
}

export default class _World_ extends __sveltets_2_createSvelte2TsxComponent(
    __sveltets_2_partial(__sveltets_2_with_any_event(render))
) {}
```

--------------------------------

### Uninstall Old Svelte Extension via Command Line

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/README.md

If you have previously installed the old 'Svelte' extension by James Birtles, uninstall it using the command line.

```bash
code --uninstall-extension JamesBirtles.svelte-vscode
```

--------------------------------

### Add Installed Types to tsconfig.json

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

When using installed types with Svelte, ensure they are included in the 'types' array within your tsconfig.json to prevent TypeScript from ignoring them.

```json
{
    "compilerOptions": {
        // ..
        "types": ["svelte", "..<your installed type>.."]
    }
}
```

--------------------------------

### HTML with SCSS Style Tag

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md

Example of a Svelte component demonstrating the use of `type="text/scss"` on a style tag to indicate SCSS preprocessing.

```html
<div>
    <h1>Hello, world!</h1>
</div>

<style type="text/scss">
    div {
        h1 {
            color: red;
        }
    }
</style>
```

--------------------------------

### Enhancing Svelte HTML Typings for Custom Elements

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Provides an example of how to extend Svelte's intrinsic element typings in a `additional-svelte-typings.d.ts` file to support custom elements and their attributes/events.

```typescript
declare namespace svelteHTML {
    // enhance elements
    interface IntrinsicElements {
        'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
    }
    // enhance attributes
    interface HTMLAttributes<T> {
        // If you want to use on:beforeinstallprompt
        'on:beforeinstallprompt'?: (event: any) => any;
        // If you want to use myCustomAttribute={..} (note: all lowercase)
        mycustomattribute?: any;
        // You can replace any with something more specific if you like
    }
}
```

--------------------------------

### Setting Default Formatter for Svelte Files in VS Code

Source: https://github.com/sveltejs/language-tools/blob/master/docs/README.md

To ensure correct code formatting for Svelte files, configure the default formatter in VS Code's `settings.json`. This example sets the `svelte.svelte-vscode` extension as the default formatter for `[svelte]` files.

```json
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

```

--------------------------------

### Language Server Package Relationships

Source: https://github.com/sveltejs/language-tools/blob/master/docs/internal/overview.md

Illustrates the dependencies between the svelte-vscode extension, the language-server, and svelte2tsx.

```text
svelte-vscode |
              |-> language-server -> svelte2tsx
svelte-check  |
```

--------------------------------

### Run Specific Package Tests

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Navigate to a specific package directory and run its tests.

```sh
cd packages/[package-name]
pnpm test
```

--------------------------------

### Run Snapshot Tests

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/syntaxes/README.md

Execute snapshot tests for the grammar. This command verifies the current grammar against existing test cases.

```bash
pnpm run test
```

--------------------------------

### Configure svelte-check in package.json

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Add a script to your package.json to easily run svelte-check from your project.

```json
{
    // ...
    "scripts": {
        "svelte-check": "svelte-check"
        // ...
    },
    // ...
    "devDependencies": {
        "svelte-check": "..."
        // ...
    }
}
```

--------------------------------

### Run svelte-check Locally

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Execute the svelte-check command using your project's npm scripts.

```bash
npm run svelte-check
```

--------------------------------

### Generate VSCode/Yarn Integration SDKs with Yarn 2 PnP

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/README.md

Generate or update the VSCode/Yarn integration SDKs. This command also sets necessary language server settings for the workspace.

```bash
yarn dlx @yarnpkg/sdks vscode
```

--------------------------------

### Run All Package Tests

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Execute all tests across all packages in the project.

```sh
pnpm test
```

--------------------------------

### Migrating from svelte.JSX to svelteHTML Namespace for Custom Typings

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Demonstrates the migration from the deprecated `svelte.JSX` namespace to the `svelteHTML` namespace for enhancing HTML typings in Svelte projects.

```diff
-declare namespace svelte.JSX {
+declare namespace svelteHTML {
    // enhance elements
    interface IntrinsicElements {
        'my-custom-element': { someattribute: string };
    }
    // enhance attributes
    interface HTMLAttributes<T> {
        // If you want to use on:beforeinstallprompt
-        onbeforeinstallprompt?: (event: any) => any;
+        'on:beforeinstallprompt'?: (event: any) => any;
        // If you want to use myCustomAttribute={..} (note: all lowercase)
        mycustomattribute?: any;
        // You can replace any with something more specific if you like
    }
}
```

--------------------------------

### Build All Packages

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Build all packages within the monorepo. This command compiles the code for all components of the Svelte Language Tools.

```shell
pnpm build
```

--------------------------------

### Link Local Changes with pnpm Overrides

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Configure your project's package.json to use local versions of svelte-check or svelte-language-server for testing.

```jsonc
{
    "pnpm": {
        "overrides": {
            // Test changes to svelte-check:
            "svelte-check": "link:../path/to/language-tools/packages/svelte-check",
            // You only need this if you're testing the changes with an editor other than VS Code:
            "svelte-language-server": "link:../path/to/language-tools/packages/language-server"
        }
    }
}
```

--------------------------------

### Configure svelte.config.js with PostCSS configFilePath

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/other-css-preprocessors.md

If your `svelte.config.js` is not in the workspace root, specify the `configFilePath` for PostCSS preprocessing.

```javascript
import sveltePreprocess from 'svelte-preprocess';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
    preprocess: sveltePreprocess({
        postcss: {
            configFilePath: join(__dirname, 'postcss.config.cjs')
        }
    })
};
```

--------------------------------

### Watch for Changes

Source: https://github.com/sveltejs/language-tools/blob/master/CONTRIBUTING.md

Continuously build packages as changes are detected. This is useful during development to see the effects of your code modifications in real-time.

```shell
pnpm watch
```

--------------------------------

### Configure vitePreprocess for PostCSS

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/other-css-preprocessors.md

Use this configuration in your `svelte.config.js` when using `vitePreprocess` to enable PostCSS support.

```javascript
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default { preprocess: [vitePreprocess()] };
```

--------------------------------

### ERROR and WARNING Records (machine output)

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Illustrates the format for ERROR and WARNING records when using the 'machine' output argument, showing filename, location, and message.

```text
1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
```

```text
1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"
```

--------------------------------

### ERROR and WARNING Records (machine-verbose output)

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md

Demonstrates the detailed format for ERROR and WARNING records with the 'machine-verbose' output argument, including start/end positions, code, and source.

```json
1590680326283 {"type":"ERROR","fn":"codeaction.svelte","start":{"line":1,"character":16},"end":{"line":1,"character":23},"message":"Cannot find module 'blubb' or its corresponding type declarations.","code":2307,"source":"js"}
```

```json
1590680326778 {"type":"WARNING","filename":"imported-file.svelte","start":{"line":0,"character":37},"end":{"line":0,"character":51},"message":"Component has unused export property 'prop'. If it is for external reference only, please consider using `export
const prop`","code":"unused-export-let","source":"svelte"}
```

--------------------------------

### Configuring Base URL for Absolute Path Resolution

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Shows how to configure `baseUrl` in `tsconfig.json` to enable VSCode to find absolute paths for type imports. A restart of the language server may be required.

```json
"compilerOptions": {
    "baseUrl": "."
  }
}
```

--------------------------------

### ESM-style vitePreprocess Configuration

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md

Use this configuration in `svelte.config.js` for projects using ESM, such as SvelteKit, to enable `vitePreprocess`.

```javascript
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
    preprocess: [vitePreprocess()]
};
```

--------------------------------

### Migrating from svelte.JSX to svelte/elements for Component Props

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Shows the migration from using `svelte.JSX.HTMLAttributes` to `svelte/elements` for defining props in a Svelte component that wraps a HTML element.

```diff
import { SvelteComponentTyped } from 'svelte';
+import { HTMLButtonAttributes } from 'svelte/elements';

export MyFancyButton extends SvelteComponentTyped<
-  svelte.JSX.HTMLAttributes<HTMLElement>
+  HTMLButtonAttributes
> {}
```

```diff
<script lang="ts">
+  import { HTMLButtonAttributes } from 'svelte/elements';
-  interface $$Props extends svelte.JSX.HTMLAttributes<HTMLElement> {
+  interface $$Props extends HTMLButtonAttributes {
    foo: string;
  }

  export let foo: string;
</script>

<button {...$$props}>
  <slot />
</button>
```

--------------------------------

### Configure svelte-preprocess for PostCSS

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/other-css-preprocessors.md

Use this configuration in your `svelte.config.js` when using `svelte-preprocess` to enable PostCSS support.

```javascript
import sveltePreprocess from 'svelte-preprocess';
export default { preprocess: sveltePreprocess({ postcss: true }) };
```

--------------------------------

### Documenting Svelte Components with @component Tag

Source: https://github.com/sveltejs/language-tools/blob/master/docs/README.md

Use HTML comments with the @component tag to add documentation to Svelte components. This documentation will appear as docstrings in LSP-compatible editors. Markdown, code blocks, and indentation are supported. Only the last documentation comment before the component's HTML will be used.

```html
<!--
 @component
 Here's some documentation for this component. It will show up on hover for
 JavaScript/TypeScript projects using a LSP-compatible editor such as VSCode or
 Vim/Neovim with coc.nvim.

 - You can use markdown here.
 - You can use code blocks here.
 - JSDoc/TSDoc will be respected by LSP-compatible editors.
 - Indentation will be respected as much as possible.
-->

<!-- @component You can use a single line, too -->

<!-- @component But only the last documentation comment will be used -->

<main>
    <h1>Hello world</h1>
</main>
```

--------------------------------

### ESM-style svelte-preprocess Configuration

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md

Configure `svelte.config.js` using ESM syntax to integrate `svelte-preprocess` for preprocessing.

```javascript
import sveltePreprocess from 'svelte-preprocess';

export default {
    preprocess: sveltePreprocess()
};
```

--------------------------------

### Importing TypeScript Interfaces in Svelte

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Demonstrates the correct syntax for importing TypeScript interfaces within Svelte components when using `svelte-preprocess`.

```typescript
import type { SomeInterface } from './MyModule.ts'
```

--------------------------------

### Typing Svelte Actions for Custom Attributes and Events

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Illustrates how to type a Svelte action to correctly handle custom attributes and events, ensuring proper integration with Svelte's tooling.

```typescript
import type { ActionReturn } from 'svelte/action';

interface Attributes {
	newprop?: string;
	'on:event': (e: CustomEvent<boolean>) => void;
}

export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
  // ...
  return {
    update: (updatedParameter) => {...},
    destroy: () => {...}
  };
}
```

--------------------------------

### Configure prependData with ESM

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Resolve SCSS 'prependData' file paths relative to the svelte.config.js file when using ESM module syntax.

```js
import sveltePreprocess from 'svelte-preprocess';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
    preprocess: sveltePreprocess({
        prependData: `@import '${join(__dirname, 'src/to/variable.scss').replace(/\/g, '/')}';`
    })
};
```

--------------------------------

### Configure prependData with CJS

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Resolve SCSS 'prependData' file paths relative to the svelte.config.js file when using CommonJS module syntax.

```js
const sveltePreprocess = require('svelte-preprocess');
const path = require('path');

module.exports = {
    preprocess: sveltePreprocess({
        prependData: `@import '${path
            .join(__dirname, 'src/to/variable.scss')
            .replace(/\/g, '/')}';`
    })
};
```

--------------------------------

### CJS-style svelte-preprocess Configuration

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md

This CommonJS configuration is suitable for `svelte.config.js` in projects not using ESM, integrating `svelte-preprocess`.

```javascript
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess()
};
```

--------------------------------

### Configure includePaths with ESM

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Resolve SCSS 'includePaths' relative to the svelte.config.js file when using ESM module syntax.

```js
import sveltePreprocess from 'svelte-preprocess';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath());

export default {
    preprocess: sveltePreprocess({ includePaths: [join(__dirname, 'relative/path')] })
};
```

--------------------------------

### Update Snapshots

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/syntaxes/README.md

Update existing snapshots to reflect changes in the grammar. Use this after modifying the grammar to ensure tests pass with the new structure.

```bash
pnpm run test -- --updateSnapshot
```

--------------------------------

### Configure VS Code for Svelte Formatting

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/README.md

Adjust VS Code settings to use the bundled Svelte formatter. This formatter is based on Prettier.

```json
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
   },

```

--------------------------------

### Configure includePaths with CJS

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Resolve SCSS 'includePaths' relative to the svelte.config.js file when using CommonJS module syntax.

```js
const sveltePreprocess = require('svelte-preprocess');
const path = require('path');

module.exports = {
    preprocess: sveltePreprocess({ includePaths: [path.join(__dirname, 'relative/path')] })
};
```

--------------------------------

### Svelte Preprocessor Type Checking Limitation

Source: https://github.com/sveltejs/language-tools/blob/master/docs/internal/overview.md

Demonstrates a scenario where svelte-preprocess might provide incorrect diagnostics due to not having a holistic view of the Svelte file, specifically regarding type checking within templates.

```html
<script lang="ts">
    let a: number = 1;
</script>
{a}
```

--------------------------------

### Configure tsconfig.json for TypeScript Svelte Plugin

Source: https://github.com/sveltejs/language-tools/blob/master/packages/typescript-plugin/README.md

Add the plugin configuration to your tsconfig.json or jsconfig.json to enable Svelte intellisense features within TS/JS files. Optional settings like 'enabled' and 'assumeIsSvelteProject' can be customized.

```json
{
    "compilerOptions": {
        ...
        "plugins": [{
            "name": "typescript-svelte-plugin",
            // the following options can be set additionally; they are optional; their default values are listed here
            "enabled": true, // enables this plugin
            "assumeIsSvelteProject": false // if true, skip detection and always assume it's a Svelte project
        }]
    }
}
```

--------------------------------

### Specify SCSS in Style Tag (lang attribute)

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Use the 'lang' attribute in the style tag as an alternative to specify SCSS content for syntax highlighting and preprocessing.

```html
<style lang="scss">
    header {
        h1 {
            color: purple;
        }
    }
</style>
```

--------------------------------

### Specify SCSS in Style Tag (type attribute)

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

Use the 'type' attribute in the style tag to indicate SCSS content for syntax highlighting and preprocessing.

```html
<style type="text/scss">
    header {
        h1 {
            color: purple;
        }
    }
</style>
```

--------------------------------

### TypeScript Definition File for Svelte Component

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Define type definitions for Svelte component props, events, and slots using `SvelteComponentTyped`. Place this file alongside your `.svelte` component (e.g., `Foo.svelte.d.ts`).

```typescript
import { SvelteComponentTyped } from 'svelte';

export interface FooProps {
    propA: string;
    // ...
}

export interface FooEvents {
    click: MouseEvent;
    customEvent: CustomEvent<boolean>;
}

export interface FooSlots {
    default: { slotValue: string };
    named: { slotValue: string };
}

export default class Foo extends SvelteComponentTyped<FooProps, FooEvents, FooSlots> {}
```

--------------------------------

### Typing Reactive Assignments (Alternative)

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

An alternative way to type reactive assignments by directly assigning the type to the reactive declaration, avoiding the need for a separate variable declaration.

```typescript
let show: boolean = !!data.someKey;
```

--------------------------------

### Troubleshooting File Watcher Exclusion in VS Code

Source: https://github.com/sveltejs/language-tools/blob/master/docs/README.md

If Svelte does not recognize updates in TS/JS files, check your `settings.json` for `files.watcherExclude`. If set to `"**/*": true`, it will prevent the language server from detecting file updates.

```json
"files.watcherExclude": {
  "**/*": true,
}
```

--------------------------------

### Customizing Svelte Syntax Highlighting in VS Code

Source: https://github.com/sveltejs/language-tools/blob/master/docs/README.md

Adjust the syntax highlighting for Svelte files in VS Code by customizing `editor.tokenColorCustomizations` in your `settings.json`. This allows you to change the foreground color of specific Svelte scopes.

```json
{
    "editor.tokenColorCustomizations": {
        "[<Name of your theme>]": {
            "textMateRules": [
                {
                    "settings": {
                        "foreground": "#569CD6", // any color you like
                    },
                    "scope": "support.class.component.svelte" // scope name you want to adjust highlighting for
                }
            ],
        }
    }
}
```

--------------------------------

### Enable TypeScript in Svelte Script Tags

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Add the `lang="ts"` attribute to your script tags to enable TypeScript processing within Svelte components.

```html
<script lang="ts">
    export let name: string;
</script>
```

--------------------------------

### Typing Component Events with createEventDispatcher

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Type the `createEventDispatcher` invocation to ensure type safety when dispatching custom events from a Svelte component. This helps catch errors if incorrect event names or types are used.

```html
<script lang="ts">
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher<{ 
        /**
         * you can also add docs
         */
        checked: boolean; // Will translate to `CustomEvent<boolean>`
        hello: string;
    }>();

    // ...
</script>
```

--------------------------------

### Typing Reactive Assignments in TypeScript

Source: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md

Explicitly declare the type of a variable before its reactive assignment (`$:`) to avoid 'implicitly has type 'any'' errors in TypeScript.

```html
<script lang="ts">
    export let data: { someKey: string | null };

    let show: boolean; // <--- added above the reactive assignment
    $: show = !!data.someKey; // <-- `show` now has type `boolean`
</script>

{#if show}hey{/if}
```

--------------------------------

### Transformed Svelte to TSX

Source: https://github.com/sveltejs/language-tools/blob/master/docs/internal/overview.md

The result of transforming a Svelte component into TypeScript/JavaScript using svelte2tsx.

```tsx
<></>;
function render() {
    // -- the transformed script:
    let world = 'name';
    // -- the transformed template
    async () => {
        {
            svelteHTML.createElement('h1', {});
            world;
        }
    };
    // -- obtained props, slots and events,
    //    to get intellisense for this component in other components
    return { props: { world }, slots: {}, events: {} };
}
// -- generate a class
export default class _World_ extends createSvelte2TsxComponent(__sveltets_2_partial(render)) {}

```

--------------------------------

### svelte2tsx Function Signature

Source: https://github.com/sveltejs/language-tools/blob/master/packages/svelte2tsx/README.md

Defines the type signature for the svelte2tsx function, which takes Svelte source code as a string and returns a TSX code string along with a source map.

```typescript
type SvelteCompiledToTsx = {
    code: string;
    map: import('magic-string').SourceMap;
};

export default function svelte2tsx(svelte: string): SvelteCompiledToTsx;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.