First install the necessary dependencies:
npm i @typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint \
eslint-config-airbnb-typescript \
eslint-config-prettier \
eslint-plugin-eslint-comments \
eslint-plugin-import \
eslint-plugin-promise \
eslint-plugin-svelte3 \
prettier \
--save-dev
Then create 3 files in your app's root folder:
1st file: .eslintrc.js
:
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
parserOptions: {
tsconfigRootDir: __dirname,
project: ["./tsconfig.json"],
},
rules: {
"import/no-extraneous-dependencies": ["error", { devDependencies: true }],
"import/no-mutable-exports": 0,
"no-labels": 0,
"no-restricted-syntax": 0,
},
plugins: ["@typescript-eslint", "svelte3"],
extends: [
"airbnb-typescript",
"plugin:@typescript-eslint/recommended",
"plugin:eslint-comments/recommended",
"plugin:promise/recommended",
"prettier",
"prettier/@typescript-eslint",
],
overrides: [
{
files: ["**/*.svelte"],
processor: "svelte3/svelte3",
},
],
};
2nd file: .prettierrc
- sample content:
{
"singleQuote": true,
"trailingComma": "all",
"useTabs": true,
"tabWidth": 4,
"printWidth": 100,
"overrides": [
{
"files": "*.ts",
"options": {
"parser": "typescript"
}
}
]
}
3rd file: .eslintignore
:
node_modules
That's all 🤓
Top comments (7)
Hello Markus, thank you for the tutorial. I'm still having some issues with typescript code lint in
.svelte
files. Javascript is being parsed correctly in.svelte
files and typescript is being parsed correctly in.ts
files, as expected. Maybe you know what is the problem. I removed theairbnb-typescript
plugin,parserOptions.tsconfigRootDir
, andparserOptions.project
because, with them, the linting was not working, maybe there is the issue..eslintrc.js
.prettierrc.js
tsconfig.json
Have you figured out how to get this working (eslint for typescritpt in svelte files) ?
Not yet, sorry. I decided to work without ESLint for now.
Why we install react dependencies?
You're right, you don't need
eslint-plugin-jsx-a11y
,eslint-plugin-react
andeslint-plugin-react-hooks
.I only installed them to get rid of the npm-warnings that otherwise appear:
I removed them in the
npm install
command above.Ok, make sense!
Thank you Markus for sharing, but sadly I wasn't able to make it work.
Do you have any updates?