Skip to content

Commit

Permalink
docs: initial idea of a more intuitive config
Browse files Browse the repository at this point in the history
  • Loading branch information
haoqunjiang committed Dec 25, 2024
1 parent d135b1f commit 27caf5f
Showing 1 changed file with 13 additions and 41 deletions.
54 changes: 13 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ Please also make sure that you have `typescript` and `eslint` installed.

Because of the complexity of this config, it is exported as a factory function that takes an options object and returns an ESLint configuration object.

This package exports 2 utility functions:
This package exports:

- `defineConfig`, as a re-export of the [`config` function from `typescript-eslint`](https://typescript-eslint.io/packages/typescript-eslint#config).
- `createConfig`, used for creating an ESLint configuration array that extends from the [`typescript-eslint` shared configs](https://typescript-eslint.io/users/configs).
- a utility function: `defineConfig`, as a re-export of the [`config` function from `typescript-eslint`](https://typescript-eslint.io/packages/typescript-eslint#config).
- all the [shared configruations from `typescript-eslint`](https://typescript-eslint.io/users/configs), available as named exports (in camelCase, e.g. `recommendedTypeChecked`).
- a Vue-specific config factory: `configureVueProject({ supportedScriptLangs, rootDir })`. More info below.

### Minimal Setup

Expand All @@ -39,12 +40,12 @@ This package exports 2 utility functions:
import pluginVue from 'eslint-plugin-vue'
import {
defineConfig,
createConfig as vueTsEslintConfig,
recommended,
} from '@vue/eslint-config-typescript'

export default defineConfig(
pluginVue.configs['flat/essential'],
vueTsEslintConfig(),
recommended,
)
```

Expand All @@ -59,26 +60,14 @@ All the `<script>` blocks in `.vue` files _MUST_ be written in TypeScript (shoul
import pluginVue from 'eslint-plugin-vue'
import {
defineConfig,
createConfig as vueTsEslintConfig,
configureVueProject,
recommended,
} from '@vue/eslint-config-typescript'

export default defineConfig(
pluginVue.configs['flat/essential'],

vueTsEslintConfig({
// Optional: extend additional configurations from `typescript-eslint`.
// Supports all the configurations in
// https://typescript-eslint.io/users/configs#recommended-configurations
extends: [
// By default, only the recommended rules are enabled.
'recommended',
// You can also manually enable the stylistic rules.
// "stylistic",

// Other utility configurations, such as `eslintRecommended`, (note that it's in camelCase)
// are also extendable here. But we don't recommend using them directly.
],

configureVueProject({
// Optional: specify the script langs in `.vue` files
// Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
supportedScriptLangs: {
Expand Down Expand Up @@ -110,6 +99,8 @@ export default defineConfig(
// and only apply the loosened rules to the files that do need them.
rootDir: import.meta.dirname,
}),

recommended,
)
```

Expand All @@ -122,36 +113,17 @@ It is not always easy to set up the type-checking environment for ESLint without
So we don't recommend you to configure individual type-aware rules and the corresponding language options all by yourself.
Instead, you can start by extending from the `recommendedTypeChecked` configuration and then turn on/off the rules you need.

As of now, all the rules you need to turn on must appear _before_ calling `vueTsEslintConfig({ extends: ['recommendedTypeChecked'] })`, and all the rules you need to turn off must appear _after_ calling it.

```js
// eslint.config.mjs
import pluginVue from 'eslint-plugin-vue'
import {
defineConfig,
createConfig as vueTsEslintConfig,
recommendedTypeChecked,
} from '@vue/eslint-config-typescript'

export default defineConfig(
pluginVue.configs['flat/essential'],

{
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
rules: {
// Turn on other rules that you need.
'@typescript-eslint/require-array-sort-compare': 'error',
},
},

vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),

{
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
rules: {
// Turn off the recommended rules that you don't need.
'@typescript-eslint/no-redundant-type-constituents': 'off',
},
},
recommendedTypeChecked
)
```

Expand Down

0 comments on commit 27caf5f

Please sign in to comment.