ESLint configuration to be used by developers at Amedia
[!TIP] This module uses flat config files for ESLint[1]. [1]: https://eslint.org/docs/latest/use/configure/configuration-files-new
ESLint configuration for Prettier.
amedianpm install --save-dev @amedia/eslint-config-prettier eslintAfter installing the deps, update your ESLint config:
eslint.config.js.
import prettier from '@amedia/eslint-config-prettier';
export default [
// ensure that prettier is dead last
prettier,
];d6346cc: Kragl 4.x
Get ready: This release breaks the world.
ESLint 9 introduces a new configuration format (flat config files)^1 so as we move to ESLint 9 we need to re-do all the ESLint configuration both in this package, and in downstream repos.
See the configuration docs for how to setup kragl for your project.
We are all-in on ECMAScript Modules at Amedia, but have been held back in this repo due to the tools we depend on have lagged behind. Now the world is ready, and we are making the move.
Changes that hit the consumer are things like .prettierrc.cjs will not
work with the @amedia/prettier-config package and the consumer needs
to move to prettier.config.js with ESM syntax.
@amedia/eslint-config exports an helper function that generates an
ESLint configuration that complies with our standards, it supports both
toggling options and full-on custom configuration.
For example, a TypeScript + Svelte project:
import eslintConfig from '@amedia/eslint-config';
export default eslintConfig({
typescript: true,
svelte: true,
});We have had a long-standing issue of the LSP hanging when interacting with our Prettier configuration. This was likely due to our Prettier configuration dynamically loading the Svelte plugin if it was necessary. Some versions of Prettier struggle with that, so for kragl 4.x the consumer manually decides if the standard or svelte prettier configuration should be used.
Standard:
// prettier.config.js
export { default } from '@amedia/prettier-config';Svelte:
// prettier.config.js
export { svelte as default } from '@amedia/prettier-config';dbb3437: add two new rules to eslint-base
Adding rules may cause previously linted code to fail, though these two
rules may be automatically fixed, so running kragl lint --fix should
resolve the simple cases automatically.
The reason for adding a requirement for the node: protocol prefix is
to make it absolutely clear that this is an internal node module. This
makes it easier for the reader to, as one example, immediately spot any
node modules that may need polyfill for the browser.
The second rules pushes us to use ESM everywhere it is expected by
default. All CommonJS code needs to be moved to .cjs files, regardless
if the module type is "module" or not.
This also serves to help us move to a pure ESM based ecosystem for our internal codebase.
ef21080: introduce prettier-config-base
The base Prettier config is extracted to @amedia/prettier-config-base to allow it to be used independently from @amedia/prettier-config, if the feature probing functionality is not needed.
This is in line with how @amedia/eslint-config works.
a1cf31a: drop esoteric options for lint and format
There are many options for lint and format, and most of them are never used. They were added for debugging purposes, and are superfluous after breaking out the runners to standalone kragl tools.
This makes the lint and format commands a lot more straight-foward to use as intended, with fewer sharp edges.
a1cf31a: modularize kragl
Introduce kragl-eslint and kragl-prettier, and expose an API so they
can be used from kragl.
The breaking change is that each runner's internal help text is now
available under --help, e.g. kragl prettier --help or kragl eslint --help.
They will print the help for Prettier and ESLint respectively, and
replaces --prettier-help.
Each command's usage matches the internal tool's, so --eslint-config
is no longer necessary, just --config with suffice.
kragl lint and kragl format serves as shortcuts to run all the
configured formatters and runners with it's own options that normalize
usage.
a1cf31a: drop config exports from kragl packages
drop esoteric options for lint and format
There are many options for lint and format, and most of them are never used. They were added for debugging purposes, and are superfluous after breaking out the runners to standalone kragl tools.
This makes the lint and format commands a lot more straight-foward to use as intended, with fewer sharp edges.
modularize kragl
Introduce kragl-eslint and kragl-prettier, and expose an API so they
can be used from kragl.
The breaking change is that each runner's internal help text is now
available under --help, e.g. kragl prettier --help or kragl eslint --help.
They will print the help for Prettier and ESLint respectively, and
replaces --prettier-help.
Each command's usage matches the internal tool's, so --eslint-config
is no longer necessary, just --config with suffice.
kragl lint and kragl format serves as shortcuts to run all the
configured formatters and runners with it's own options that normalize
usage.
b1cc6c8: forbid unresolved dependencies
Enabled by default for JavaScript (both ESM and CJS).
Disabled for TypeScript and Svelte.
TS has its own import-plugin, and for Svelte it would result in a lot of false positive reports.
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md
40ec61a: This allows a nicer syntax in the project configuration files when overriding config:
Old:
const config = require('@amedia/kragl/config/eslint.config.cjs');
module.exports = {
...config,
rules: {
...config.rules,
// my override
}
}New:
const { eslintConfig } = require('@amedia/kragl');
module.exports = {
extends: [
eslintConfig,
],
rules: {
// my override
}
}The old way is still supported.
For Prettier the improvement is not as drastic, perhaps not even preferable:
const config = require('@amedia/kragl/config/prettier.config.cjs');
module.exports = {
...config,
// override
}Becomes:
const { prettierConfig } = require('@amedia/kragl');
module.exports = {
...require(prettierConfig),
// override
}For Jest, only the import path changes:
const config = require('@amedia/kragl-jest/config/jest.config.cjs');To:
const { jestConfig } = require('@amedia/kragl-jest');Jest does not have any logic to extend configs, so it is handled the same way as Prettier.
This also moves base rules away from @amedia/eslint-config to @amedia/eslint-config-base where they should be.
b395434: Introduces the Kragl, a tool that makes it easy to use and comply with the Amedia code style and guidelines.
Kragl provides commands like lint and format, which runs multiple
tools with a single command, e.g. lint would run ESLint, Prettier,
e.g. typechecks for TypeScript projects.
Projects can use kragl lint with zero configuration and get the
recommended rules by default (@amedia/prettier-config and
@amedia/eslint-config) that attempts to identify the type of project
(react/svelte/jest/typescript) and loads the relevant configuration.
To get editor integration, projects should add at least two files:
.eslintrc.cjs:
module.exports = require('@amedia/kragl/config/eslint.config.cjs')prettier.config.cjs:
module.exports = require('@amedia/kragl/config/prettier.config.cjs')To maximise effectiveness, the existing configurations have been changed to be more isolated in terms of scope (e.g. @amedia/eslint-config-react handles react rules only). This makes them easier to maintain, increases clarity about what rules go where, and generally makes them easier to reason about.
This makes it a breaking change for consumers of those libraries.
The pattern is to make it easier to do this:
module.exports = {
extends: [
'@amedia/eslint-config-base',
'@amedia/eslint-config-react',
'@amedia/eslint-config-jest',
'@amedia/eslint-config-typescript',
'prettier',
],
}And avoid problems where ESLint cannot uniquely reference a plugin or configuration as they should never collide due to duplication.