npm package: @lcbase/eslint-config-svelte
Description: Shared Eslint Svelte config
Author: @lcbase
Latest version: 0.5.7

# Eslint Config for the Svelte Project

This package provides Eslint's Config for the Svelte Project.

> **Note 1**: Only support the new [Eslint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new).

> **Note 2**: This config is using the [Airbnb eslint config](https://www.npmjs.com/package/eslint-config-airbnb).

## Usage

#### 1. Install package

```sh
pnpm add -D @lcbase/eslint-config-svelte eslint
```

#### 2. Add config to your `eslint.config.js`. Please read more about [Eslint Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new)

```js
import { baseSvelteConfig } from '@lcbase/eslint-config-svelte';

export default baseSvelteConfig;
```

#### 3. Add script to your `package.json`.

```json
{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,svelte}\"",
    "lint:fix": "pnpm lint"
  }
}
```

#### 4. Combine with [@lcbase/prettier-config-svelte](https://www.npmjs.com/package/@lcbase/prettier-config-svelte) packages

```sh
pnpm add -D prettier @lcbase/prettier-config-svelte
```

```json
{
  "prettier": "@lcbase/prettier-config-svelte",
  "scripts": {
    "lint": "eslint \"src/**/*.{js,svelte}\"",
    "lint:fix": "pnpm lint",
    "prettify": "prettier src --check",
    "prettify:fix": "prettier src --write",
    "format": "pnpm prettify:fix && pnpm lint:fix"
  }
}
```

#### 5. Configuration your `VScode`.

In root your project's folder. Create `.vscode` folder with structure:

```sh
.vscode
  - settings.json
```

```js
{
  "eslint.experimental.useFlatConfig": true,
  // if mono-repo remove below line comment
  // "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }],
  "eslint.options": {
    "overrideConfigFile": "eslint.config.js"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "eslint.validate": ["javascript", "javascriptreact", "svelte"],
  "prettier.documentSelectors": ["**/*.svelte"]
}
```

#### 6. Setup git hooks

- Install packages and global setup `husky`, `lint-staged`.

```sh
pnpm add -D husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
```

- Add the following to your `package.json`:

```json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,cjs,mjs,jsx,cjsx,mjsx,ts,mts,cts,tsx,mtsx,ctsx}": ["pnpm format"],
    "*.{json,css,md,html}": ["pnpm prettify:fix"]
  }
}
```

## Extends

You can extends this config by:

```js
import { extendBaseSvelteConfig } from '@lcbase/eslint-config-svelte';

const config = extendBaseSvelteConfig({
  files: (Linter.FlatConfigFileSpec | Linter.FlatConfigFileSpec[])[] | undefined, // files that you want to lint
  extendConfig: Linter.FlatConfig | Linter.FlatConfig[] | undefined, // your override extends config here
  svelteConfig: Linter.FlatConfig; // your override extends svelte config here
});

export default config;
```