linted

Caution

DO NOT USE - DOCUMENTATION IS SIGNIFICANTLY OUTDATED AS OF AUGUST 4, 2024

---

ESLint mono-plugin bundler with strict, opinionated defaults for (Stylistic) JavaScript, TypeScript, Svelte, HTML, Tailwind/CSS, JSON, JSONC, YAML, and Mocha.

1. Languages
2. Features
3. Limitation
4. Install
5. Roadmap
6. Rule Logic (Advanced)

Languages

Web

Note

See language support roadmap.

• JavaScript: @stylistic + eslint
• TypeScript: @typescript-eslint + @stylistic + eslint
• Svelte: eslint-plugin-svelte + @typescript-eslint + @stylistic + eslint
• HTML: @html-eslint

Data

• JSON & JSONC: eslint-plugin-jsonc
• YAML: eslint-plugin-yml

Library

• Mocha: eslint-plugin-mocha + @typescript-eslint + @stylistic + eslint

Features

Zero-Dependency

No need to install 17 plugins and 12 parsers: each language's latest plugin is bundled and configured.

Zero-Config

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",

Zero-Arugment API

linted();

Two-Statement eslint.config.js

import linted from "linted";

export default linted();

Total Control via Optional Arguments

• includes (scoped glob patterns)
• ignores (global glob patterns and other options)
• overrides (scoped rule statements)

includes (Scoped)

import linted from "linted";

linted(
  {
    /** includes **/
    js: [
      "scripts/**/*/.{js,mjs}",
      "*.config.js",
    ], /* example: array of glob patterns to lint using JavaScript rules */
    ts: [
      "src/**/*.ts",
      "*.config.ts",
    ],

    // svelte: [],
    // html: [],

    /* ...json, jsonc, yml, */
  },
)

ignores (Global)

import linted from "linted";

linted(
  { /** includes **/ },
  {
    /** ignores **/
    gitignore: true, /* (default) never lint any git-ignored file */
    ignoreArtifacts: true, /* (default) never lint "**/*/package-lock.json" */
    global: [], /* array of glob patterns to never lint */
  },
)

overrides (Scoped)

linted(
  { /** includes **/ },
  { /** ignores **/ },
  {
    /** overrides **/
    overrideJs: {}, /* js rule overrides */
    overrideTs: {
      /* Overrides apply to `ts` scope,
       * but NOT to `js` scope,
       * NOR to `svelte` scope.
       */
      "no-unused-vars": "off", /* example: ESLint base rule */
      "@typescript-eslint/indent": "warn", /* example: TypeScript plugin rule */
    }, /* js rule overrides */

    /* ...overrideTs, overrideSvelte, overrideHtml, overrideJson, overrideJsonc, overrideYml, */
  },
)

Limitation

In TypeScript projects, skipLibCheck must be true.

Enable skipLibCheck

By default, skipLibCheck is false. To set it to true:

tsconfig.json

{
  "compilerOptions": {
    "skipLibCheck": true,
  },
}

...or tsc CLI option

tsc --skipLibCheck

Install

1. Install eslint and linted.

   npm i -D eslint@^8.57 linted

2. Create eslint.config.js in your project root.

3. In eslint.config.js:

   • Import function linted.

     import linted from "linted";

   • Export linted with optional arguments:

     import linted from "linted";
     
     export default linted(
       // ...
     );

---

Roadmap

v11

Tailwind

• Tailwind

• CSS

HTML Embeds

• Embedded TypeScript

• 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?

JSON (Custom Schema Validation)

• JSON Custom Schema Validation

---

Rule Logic (Advanced)

What is scope?

Each scope maps to a unique language:

• js: JavaScript
• ts: TypeScript
• svelte: Svelte
• html: HTML
• json: JSON
• jsonc: JSONC
• yml: YAML

Rules

Each scope supports:

• all base ESLint rules
• all rules from its language's plugins

Default Rules

• Each language has a set of default rules.

Language-Aggregate scope

A language can be an extension of or depend on another language.

For example:

• TypeScript extends JavaScript
• 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 by scope precedence:

• js: js
• ts: js < ts
• svelte: js < ts < svelte
• html: html
• json: json
• jsonc: json < jsonc
• yml: yml

Files

Global Ignores

.gitignore

By default, linted ignores all files in .gitignore. This behavior can be disabled.

package-lock.json

**/*.package-lock.json is always skipped. This cannot be overriden.

ignores

Additional glob patterns supplied if matched by a file will skip linting that file, even if a scope pattern matches the file.

Scoped Includes

Files specified in scope are appended to the following default files:

  {
    js: [
      "{src,static}/**/*.{js,mjs,cjs}",
      "*.{js,mjs,cjs}",
    ],
    ts: [
      "{src,static}/**/*.{ts,mts,cts}",
      "*.{ts,mts,cts}",
    ],
    svelte: ["{src,static}/**/*.svelte"],
    html: [
      "{src,static}/**/*.html",
      "*.html",
    ],
    json: [
      "{src,static}/**/*.json",
      "*.json",
    ],
    jsonc: [
      "tsconfig.json",
      "{src,static}/**/*.jsonc",
      "*.jsonc",
    ],
    yml: [
      ".github/workflows/*.{yml,yaml}",
      "{src,static}/**/*.{yml,yaml}",
      "*.{yml,yaml}",
    ],
  },

Scope Conflict

• If a given file matches more than one scope glob, then the set of all matching scopes' rules are applied to the file.
• If any rule is specified in more than one scope matching a given file, the specifies a rule, then the highest-precedence scope's rule specification wins.

Scope Precedence (low to high)

js
ts
svelte
html
json
jsonc
yml
ignores (global)

Override

Overrides are per-scope.

Example

overrideTs rules apply to files which:

• ✅ ONLY match scope ts.
• ✅ match scope ts and any number of lower precedence scopes (e.g. js).

  [!NOTE] overrideTs rules do NOT apply to files which:

  • TBD

• ❌ match scope ts and at least one higher precedence scope (e.g. svelte), even if the higher precedence scope includes ts language default rules (e.g. svelte includes ts default rules, but NOT overrideTs rules).