Editor Setup

Tooling to improve the developer experience when working with SwictWC.

IntelliSense for VS Code

Modify settings.json of your VSCode like this:

🇺🇸

{
  "html.customData": ["./packages/ui/web-components.html-data/en.json"]
}

Linting

Highlighting errors and potential bugs in your HTML markup.

npm

npm i -D eslint@latest @eslint/js@latest @swiftwc/eslint-plugin@latest

Add this to your ESLint configuration file:

Modify eslint.config.js like this:

🇺🇸

import html from "@html-eslint/eslint-plugin";
import parser from "@html-eslint/parser";
import swiftwc from "@swiftwc/eslint-plugin/html/en";

export default [
  {
    files: ["**/*.html"],
    languageOptions: {
      parser,
    },
    plugins: {
      html,
      swiftwc,
    },
    language: "html/html",
    rules: {
      ...swiftwc.configs.recommended.rules,
      // 👇🏻 customize above rules here
    },
  },
];

@html-eslint/eslint-plugin and @html-eslint/parser are required for linting HTML files

They are used to understand your code before applying any rules.

npm i -D @html-eslint/eslint-plugin @html-eslint/parser