Zero-config ESLint flat config factory for (strict, agglutinative) entire-stack formatting and linting: TypeScript, JavaScript, Svelte, HTML, (Tailwind) CSS, Jest, JSON(C), and sadly YAML.
- JavaScript:
eslint
+@stylistic
- TypeScript: +
@typescript-eslint
- Svelte: +
eslint-plugin-svelte
- HTML: +
@html-eslint
See language support roadmap.
- Scope (i.e. files to lint)
- Optional: override rules
import linted from "linted";
export default [
...new linted(
{ // Scope (i.e. files to lint)
js: ["*.config.js"],
ts: ["*.config.ts", "src/**/*.ts"],
svelte: ["src/**/*.svelte"],
},
)
.configs,
];
// ...Scope (i.e. files to lint)
},
{ // Optional: Override
overrideTs: {
// Turns it off in "ts" scope,
// but NOT in "js" scope,
// NOR in "svelte" scope.
"no-unused-vars": "off", // JS base rule
// "@typescript-eslint/ ..., or TS plugin rule
},
overrideSvelte: {
// ... JS, TS, or Svelte plugin rules
},
},
)
.configs,
];
No need to install 17 plugins and 12 parsers: each language's latest plugin is bundled and configured.
No need to remember each plugin's parserOptions
; you won't have to do this just to enable Svelte linting:
// lint TypeScript blocks in Svelte
plugins: {
"@stylistic": stylistic,
"@typescript-eslint": ts,
svelte,
},
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parser: svelteParser,
parserOptions: {
parser: tsParser,
ecmaVersion: "latest",
sourceType: "module",
project: "tsconfig.json",
extraFileExtensions: [".svelte"],
},
},
processor: "svelte/svelte"
If linting TypeScript
files, skipLibCheck
must be disabled.
- This compromise was required to enable linting
jest
files. - Installing
jest
even without the linter seems to break strictTypeScript
projects (needs verification). - Issue #30 tracks investigating if feasible to enable
jest
linting without disablingskipLibCheck
.
{
"compilerOptions": {
"skipLibCheck": false,
},
}
tsc --skipLibCheck
-
npm i -D eslint@^8.57 linted@^12.1
-
Create
eslint.config.js
in your root directory. -
In
eslint.config.js
:-
Import
linted
.import linted from "linted";
-
Create a new instance of
linted
, with arguments:new linted( { // Scope (i.e. files to lint) js: ["*.config.js"], // glob pattern array ts: ["*.config.ts", "src/**/*.ts"], svelte: [ // ... ], // ...jest, html, css, jsonc, json, yml }, { // Optional: Override overrideJs: { // ...same rule schema as ESLint }, // ...overrideTs, overrideSvelte, overrideJest, // overrideHtml, overrideCss, overrideJsonc, // overrideJson, overrideYml }, )
-
Export member
configs
from the new instance oflinted
, which is ESLint's flat config. e.g.import linted from "linted"; export default [ ...new linted( // ... ) .configs, ];
-
-
Embedded CSS
-
Svelte Interaction TBD
-
.svelte-embedded HTML (on top of Svelte HTML rules)
-
.html files in Svelte projects (e.g. title not required)
-
Should Svelte-Linter handle all .html / HTML-embedded linting for Svelte projects, and HTML-Linter only handles non-Svelte projects?
-
-
If a file matches more than one scope glob, the set of all scopes' rules are applied to the file.
-
If any rule within that combined set is specified in more than one scope, then the highest-precedence scope's rule specification wins.
Scope precedence (low to high):
js
ts
svelte
html
jest
jsonc
json
yml
-
Each scope maps to a unique language.
-
Each language has a set of default rules.
-
A given language can be an extension of or depend on another language. For example, TypeScript extends JavaScript, while Svelte depends on TypeScript (which extends JavaScript). For such a language, its scope's default rules are aggregated with the default rules of extended or consumed languages, using the same precedence order as that of scope.
-
js: .js
-
ts: .js, .ts
-
svelte: .js, .ts, .svelte
-
jest: .js, .ts, (.spec).ts
-
html: .html
-
jsonc: .json (JSON), .json (JSONC)
-
json: .json (JSON)
-
yml: .y(a)ml
Overrides are per-scope.
overrideTs
rules apply to files that:
-
✅ ONLY match scope
ts
. -
✅ match scope
ts
and any number of lower precedence scopes (e.g.js
).
overrideTs
rules do NOT apply to files that:
- ❌ match scope
ts
and at least one higher precedence scope (e.g.svelte
), even if the higher precedence scope includests
language default rules (e.g.svelte
includests
default rules, but NOToverrideTs
rules).