Eslint Config Svelte

ShaneLucy

Eslint, Airbnb, Typescript, Svelte & Prettier Configuration

An eslint configuration that integrates the following into one package for easy installation and setup:

Assumptions

You have typescript installed
You have a tsconfig.json in your project root
You have installed a version of Node greater than 8
You have installed npm version 7 or greater

Installation

If you aren't using npm version 7 or greater you will have to manually install these dependencies:

eslint

prettier

prettier-plugin-svelte

@typescript-eslint/eslint-plugin

Copy everything inside the peer dependencies object here and paste it into your dev dependencies object. This will ensure you have the correct versions installed

Install with npm

npm install --save-dev eslint-config-typescript-airbnb-prettier-svelte

Setup

Create a .eslintrc.js file in your project root

touch .eslintrc.js

Paste the following into .eslintrc.js

module.exports = {
  extends: "typescript-airbnb-prettier-svelte",
};

Add the following commands into the scripts object in your package.json

"lint": "prettier --write . && eslint src/**",
"lint-fix": "prettier --write . && eslint src/** --fix"

An example scripts object might look like this

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "serve": "vite preview",
  "lint": "prettier --write . && eslint src/**",
  "lint-fix": "prettier --write . && eslint src/** --fix"
},

Create an .eslintignore in your project root

touch .eslintignore

Paste the following into .eslintignore

.eslintrc.js
node_modules/**

Create an .prettierignore in your project root

touch .prettierignore

Paste the following into .prettierignore

node_modules/**

Usage

npm run lint

Or to make eslint auto fix any issues it's capable of fixing

npm run lint-fix

Customisation

This eslint config can be altered and extended by editing .eslintrc.js

Prettier can be altered and extended by creating and modifying .prettierrc

Top categories