@knime/eslint-config

@knime/eslint-config

This repository contains an ESLint ruleset for typical KNIME frontend projects. Rules cover simple JavaScript/TypeScript setups as well as Vue/Nuxt projects and common test scenarios with Vitest.

Also it contains configs for Stylelint, lintstaged and a Git hook to format commit messages.

Code formatting is supposed to be handled via Prettier.

Development

Prerequisites

• Install Node.js, see version in package.json.

Newer versions may also work, but have not been tested.

Installation

To install the @knime/eslint-config package, you can use npm:

npm install @knime/eslint-config -D

Linting

The different ESLint profiles contained herein can also be linted by running

npm run lint

Using the ESLint profiles in your project

Projects need to specify the following devDependencies in their package.json files, but none of the required additional plugins:

• ESlint
• Stylelint
• Prettier

Basic config for JS projects

The following code block should give an understanding of a commonly used setup in your eslint.config.js file:

import knimeVue3Config from "@knime/eslint-config/vue3.js"

export default = [
  ...knimeVue3Config,
  {
    globals: {
      consola: true,
    }
  },
  // [...]
];

Config for projects that use TypeScript

import knimeVue3TSConfig from "@knime/eslint-config/vue3-typescript.js";

export default [
  ...knimeVue3TSConfig(),
  {
    globals: {
      consola: true,
    },
  },
  // [...]
];

Notice that the default export is a function instead of a configuration object. This function takes an optional argument of a path to a tsconfig. Supplying a tsconfig will give you a config that extends the base TS config with some typed rules. Configs that make use of this are:

• typescript.js
• vue3-typescript.js
• nuxt3.js

If you want to make use of typed linting it might make sense to create a separate tsconfig.eslint.json which only includes files that should get linted and be as small and focused as possible.

Linting in Nuxt projects

Nuxt offers an Eslint module to build project aware configs. If you want to use Eslint in a Nuxt project add the Eslint module to Nuxt. By default, this module installs the JS, TS and Vue plugins with their recommended rules. This is already covered by the config exported in @knime/eslint-config/nuxt3.js so make sure to have this in the nuxt config:

defineNuxtConfig({
  modules: ["@nuxt/eslint"],
  eslint: {
    config: {
      standalone: false,
    },
  },
});

The Eslint config file then looks something like this:

import withNuxt from "./.nuxt/eslint.config.mjs";
import knimeNuxtConfig from "@knime/eslint-config/nuxt3.js";

export default withNuxt([
  ...knimeNuxtConfig(),
  // your other configs here
]);

Using Stylelint in your project

The following code block should give an understanding of a commonly used setup in your .stylelintrc file:

module.exports = {
  extends: ["@knime/eslint-config/stylelint/vue"],
  // Point this to the file(s) that define global custom properties, animations and custom
  // media (or remove if the project doesn't have any). Stylelint's built-in
  // `no-unknown-custom-properties`, `no-unknown-animations` and `no-unknown-custom-media`
  // rules use these to avoid false positives.
  // The `postcss-import` loader resolves `@import`ed partials, so you can point at a single
  // entrypoint. Drop the loader (just `referenceFiles: ["src/assets/index.css"]`) if your
  // entrypoint has no `@import`s.
  // See https://stylelint.io/user-guide/configure#referencefiles
  referenceFiles: [{ files: "src/assets/index.css", loader: "postcss-import" }],
};

There might be cases where CSS properties are shared between multiple nested Vue components, which Stylelint doesn't know. Do set default values for those to avoid linting errors, e.g. height: var(--toolbar-height, 0);.

See stylelint folder for available configs.

Using Git hooks in your project

The package supplies the tools to running a couple of commit hooks:

Linting and formatting staged changes

Include the following in a pre-commit hook to lint and format the changes in your stage zone (via lintstaged).

#!/usr/bin/env bash
pnpm dlx lint-staged

Additionaly, use the lint-staged.config.mjs file to configure lint-staged, i.e. create a lint-staged.config.mjs file in the root folder containing

import config from "@knime/eslint-config/lint-staged.config.mjs";
export default config;

Format commit message

Use a prepare-commit-msg hook to format your commit message to conform with the required format by KNIME:

#!/usr/bin/env bash
npm exec knime-eslint-config-prepare-commit-msg "$@"

In case the npm project isn't in the root folder, please do:

#!/usr/bin/env bash
<path-to-npm-project>/node_modules/.bin/knime-eslint-config-prepare-commit-msg "$@"

Refer to scripts/README.md for more information.