Flat ESLint config for JavaScript, TypeScript, Vue 2, Vue 3, Prettier. Thanks to sxzz for example.
- Format with Prettier.
- Designed to work with TypeScript, Vue 2 and 3 out-of-box.
- Support JSON(5), YAML, Markdown...
- Sort imports,
package.json
,tsconfig.json
... - ESLint Flat config, compose easily!
- Reasonable defaults, best practices, only one-line of config
npm install @karta.io/eslint-config eslint --save-dev
# or with pnpm:
pnpm add -D @karta.io/eslint-config eslint
Require Node.js >= 18.18, and ESLint >= 9.0.0.
And create eslint.config.mjs
in your project root:
// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';
export default createConfig();
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
{
"eslint.experimental.useFlatConfig": true,
}
We use ESLint Flat config. It provides much better organization and composition.
Normally you only need to import the createConfig
function:
// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';
export default createConfig();
And that's it! Or you can enable/disable each integration individually, for example:
// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';
export default createConfig({
settings: {
// Vue is auto-detected, you can also explicitly enable or disable them:
vue: true,
// Disable jsonc, yaml and markdown support
yaml: false,
markdown: false,
// Disable prettier support
prettier: false,
// Disable jsonc support and sorting keys for package.json and tsconfig.json
jsonc: false,
sortKeys: false,
},
});
And also you can override any rule:
// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';
export default createConfig({
// https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects
config: [
{
files: ['**/*.ts'],
rules: {
'@typescript-eslint/no-redeclare': 'off',
},
},
{
files: ['**/*.vue'],
rules: {
'vue/no-dupe-keys': 'error',
},
},
],
});