A set of ESLint shareable configs for TypeScript projects.
- Out of the box support for TypeScript, React, and Markdown
- Sort your imports
- Sort your fields in
package.json - Prefer top-level function declarations over function expressions
$ npm install -D eslint prettier @ocavue/eslint-config
Create eslint.config.mjs in your project root with the following content:
// eslint.config.mjs
import { defineESLintConfig } from '@ocavue/eslint-config'
export default defineESLintConfig(){
"scripts": {
"lint": "eslint .",
"check": "prettier --check .",
"fix": "eslint --fix . && prettier --write ."
}
}Add a .prettierignore file in the root of your project. You can copy the .prettierignore file from this project.
If you are using VS Code, you and install ESLint extension and Prettier extension, then add the following to your VS Code settings:
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}You can pass an optional object to the defineESLintConfig function to enable or disable the configs. Here is an example:
// eslint.config.mjs
import { defineESLintConfig } from '@ocavue/eslint-config'
export default defineESLintConfig({
// Enable React config and only apply for files under `src/react` directory.
react: { files: ['src/react/**/*.tsx'] },
// Enable Vue config.
vue: true,
})The full type definition for the options is as follows:
export interface ESLintConfigOptions {
/**
* Whether to enable [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) configuration.
*
* @default true
*/
typescript?: boolean
/**
* Whether to enable [eslint-plugin-unicorn](https://www.npmjs.com/package/eslint-plugin-unicorn) configuration.
*
* @default true
*/
unicorn?: boolean
/**
* Whether to enable [eslint-plugin-package-json](https://www.npmjs.com/package/eslint-plugin-package-json) configuration.
*
* @default true
*/
packageJson?: boolean
/**
* Whether to enable [eslint-plugin-import-x](https://www.npmjs.com/package/eslint-plugin-import-x) configuration.
*
* @default true
*/
imports?: boolean
/**
* Whether to check code blocks in Markdown files.
*
* @default true
*/
markdown?: boolean
/**
* Whether to enable React configuration.
*
* @default false
*/
react?: boolean | ReactOptions
/**
* Whether to enable Vue configuration.
*
* @default false
*/
vue?: boolean | VueOptions
/**
* Whether to enable UnoCSS configuration.
*
* @default false
*/
unocss?: boolean
/**
* Whether to enable [eslint-plugin-command](https://www.npmjs.com/package/eslint-plugin-command) configuration.
*
* @default false
*/
command?: boolean
/**
* Ignore some common files that should not be linted.
*
* @default true
*/
ignores?: boolean | IgnoresOptions
/**
* Whether to enable [eslint-config-flat-gitignore](https://www.npmjs.com/package/eslint-config-flat-gitignore) configuration.
*
* @default true
*/
gitignore?: boolean | GitignoreOptions
/**
* Whether to enable [eslint-plugin-antfu](https://www.npmjs.com/package/eslint-plugin-antfu) configuration.
*
* @default true
*/
antfu?: boolean
/**
* Whether to enable [eslint-plugin-no-only-tests](https://www.npmjs.com/package/eslint-plugin-no-only-tests) configuration.
*
* @default true
*/
noOnlyTests?: boolean
/**
* Whether to enable [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier) configuration.
*
* @default true
*/
prettier?: boolean
}You can pass the second and following arguments to the defineESLintConfig function to extend the config.
// eslint.config.mjs
import { defineESLintConfig } from '@ocavue/eslint-config'
export default defineESLintConfig(
{
// Your options here
},
// More configs here:
{
files: ['src/**/*.ts', 'src/**/*.tsx'],
rules: {
'@typescript-eslint/no-explicit-any': 'warn',
},
},
{
rules: {
'no-console': ['warn', { allow: ['warn', 'error', 'assert'] }],
},
},
)