https://github.com/robole/eslint-config-svelte3-roboleary

ESLint config for Svelte 3 apps
https://github.com/robole/eslint-config-svelte3-roboleary

eslint eslint-svelte lint-svelte svelte

Last synced: about 2 months ago
JSON representation

ESLint config for Svelte 3 apps

• Host: GitHub
• URL: https://github.com/robole/eslint-config-svelte3-roboleary
• Owner: robole
• Created: 2021-10-25T04:29:08.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-08T13:26:17.000Z (over 2 years ago)
• Last Synced: 2024-11-08T06:46:57.649Z (about 2 months ago)
• Topics: eslint, eslint-svelte, lint-svelte, svelte
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/eslint-config-svelte3-roboleary
• Size: 81.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: funding.yml

Awesome Lists containing this project

README

        
# eslint-config-svelte3-roboleary

My ESLint config for linting Svelte 3 apps.

It includes the following:

- My base config [eslint-config-roboleary-base](https://www.npmjs.com/package/eslint-config-roboleary-base) that is based on `eslint-airbnb-config-base`.

- The [eslint-plugin-svelte3](https://www.npmjs.com/package/eslint-plugin-svelte3) config to provide rules specific to Svelte.

## Rules

Most of the custom rules I added are to avoid conflict between `eslint-plugin-svelte3` and `eslint-plugin-import` (which is used in `eslint-airbnb-config-base`).

## Usage

1. Install this package and ESLint as *devDependencies* with the command `npm i -D eslint eslint-config-svelte3-roboleary`.

1. Create an eslint config file in the root of your project directory e.g. *.eslintrc.json*. Add the following:

   ```json

   {

     "extends": ["eslint-config-svelte3-roboleary"]

   }

   ```

   Alternatively, you can put a reference to the config in your *package.json* under the property `eslintConfig`.

1. You can add the following `scripts` to your *package.json* to lint and fix your code from the command-line.

	```json

		"scripts": {

			"lint-js": "npx eslint .",

			"lint-js:fix": "npm run lint -- --fix"

		},

	```

## VS Code configuration

Install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

Add the following to your user settings (*settings.json*), so that svelte files are linted:

```json

"eslint.probe": [

	"javascript",

	"javascriptreact",

	"typescript",

	"vue",

	"svelte"

],

"eslint.validate": [

	"javascript",

	"javascriptreact",

	"typescript",

	"vue",

	"svelte"

]

```

I use the [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) for formatting code. It uses Prettier under the hood. This config ensures that Eslint's rules and Prettier's default rules don't interfere when formatting the code.

I prefer to run linting and formatting as code actions. This way it is possible to run linting and formatting as a series of actions: lint first, then format. To be able to run formatting as a code action you need to install the [Format Code Action extension](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action&ssr=false#review-details).

To lint and format your svelte code on save, you can update your user settings with the following:

```json

"editor.formatOnSave": false,

"[svelte]": {

	"editor.defaultFormatter": "svelte.svelte-vscode"

},

"editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll"],

```