Skip to content

Commit f7bd7b7

Browse files
haoqunjianghaoqunjiang
authored
feat: a more intuitive way to configure and override (#123)
1 parent 6296f39 commit f7bd7b7

File tree

106 files changed

+4097
-1788
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+4097
-1788
lines changed

Diff for: ‎README.md

+79-84
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,26 @@ Please also make sure that you have `typescript` and `eslint` installed.
2525

2626
## Usage
2727

28-
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.
28+
Because of the complexity of the configurations, this package exports several utilities:
29+
30+
- `defineConfigWithVueTs`, a utility function whose type signature is the same as the [`config` function from `typescript-eslint`](https://typescript-eslint.io/packages/typescript-eslint#config), but will modify the given ESLint config to work with Vue.js + TypeScript.
31+
- `vueTsConfigs`, contains all the [shared configruations from `typescript-eslint`](https://typescript-eslint.io/users/configs) (in camelCase, e.g. `vueTsConfigs.recommendedTypeChecked`), and applies to `.vue` files in addition to TypeScript files.
32+
- a Vue-specific config factory: `configureVueProject({ scriptLangs, rootDir })`. More info below.
2933

3034
### Minimal Setup
3135

3236
```js
3337
// eslint.config.mjs
34-
import pluginVue from "eslint-plugin-vue";
35-
import vueTsEslintConfig from "@vue/eslint-config-typescript";
36-
37-
export default [
38-
...pluginVue.configs["flat/essential"],
39-
...vueTsEslintConfig(),
40-
]
38+
import pluginVue from 'eslint-plugin-vue'
39+
import {
40+
defineConfigWithVueTs,
41+
vueTsConfigs,
42+
} from '@vue/eslint-config-typescript'
43+
44+
export default defineConfigWithVueTs(
45+
pluginVue.configs['flat/essential'],
46+
vueTsConfigs.recommended,
47+
)
4148
```
4249

4350
The above configuration enables [the essential rules for Vue 3](https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention) and [the recommended rules for TypeScript](https://typescript-eslint.io/rules/?=recommended).
@@ -48,58 +55,54 @@ All the `<script>` blocks in `.vue` files *MUST* be written in TypeScript (shoul
4855

4956
```js
5057
// eslint.config.mjs
51-
import pluginVue from "eslint-plugin-vue";
52-
import vueTsEslintConfig from "@vue/eslint-config-typescript";
53-
54-
export default [
55-
...pluginVue.configs["flat/essential"],
56-
57-
...vueTsEslintConfig({
58-
// Optional: extend additional configurations from `typescript-eslint`.
59-
// Supports all the configurations in
60-
// https://typescript-eslint.io/users/configs#recommended-configurations
61-
extends: [
62-
// By default, only the recommended rules are enabled.
63-
"recommended",
64-
// You can also manually enable the stylistic rules.
65-
// "stylistic",
66-
67-
// Other utility configurations, such as `eslintRecommended`, (note that it's in camelCase)
68-
// are also extendable here. But we don't recommend using them directly.
69-
],
70-
71-
// Optional: specify the script langs in `.vue` files
72-
// Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
73-
supportedScriptLangs: {
74-
ts: true,
75-
76-
// [!DISCOURAGED]
77-
// Set to `true` to allow plain `<script>` or `<script setup>` blocks.
78-
// This might result-in false positive or negatives in some rules for `.vue` files.
79-
// Note you also need to configure `allowJs: true` and `checkJs: true`
80-
// in corresponding `tsconfig.json` files.
81-
js: false,
82-
83-
// [!STRONGLY DISCOURAGED]
84-
// Set to `true` to allow `<script lang="tsx">` blocks.
85-
// This would be in conflict with all type-aware rules.
86-
tsx: false,
87-
88-
// [!STRONGLY DISCOURAGED]
89-
// Set to `true` to allow `<script lang="jsx">` blocks.
90-
// This would be in conflict with all type-aware rules and may result in false positives.
91-
jsx: false,
92-
},
93-
94-
// <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
95-
// Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
96-
// You may need to set this to the root directory of your project if you have a monorepo.
97-
// This is useful when you allow any other languages than `ts` in `.vue` files.
98-
// Our config helper would resolve and parse all the `.vue` files under `rootDir`,
99-
// and only apply the loosened rules to the files that do need them.
100-
rootDir: import.meta.dirname,
101-
})
102-
]
58+
import pluginVue from 'eslint-plugin-vue'
59+
import {
60+
defineConfigWithVueTs,
61+
vueTsConfigs,
62+
configureVueProject,
63+
} from '@vue/eslint-config-typescript'
64+
65+
configureVueProject({
66+
// Optional: specify the script langs in `.vue` files
67+
// Defaults to `['ts']`.
68+
scriptLangs: [
69+
'ts',
70+
71+
// [!DISCOURAGED]
72+
// Include 'js' to allow plain `<script>` or `<script setup>` blocks.
73+
// This might result-in false positive or negatives in some rules for `.vue` files.
74+
// Note you also need to configure `allowJs: true` and `checkJs: true`
75+
// in corresponding `tsconfig.json` files.
76+
'js',
77+
78+
// [!STRONGLY DISCOURAGED]
79+
// Include 'tsx' to allow `<script lang="tsx">` blocks.
80+
// This would be in conflict with all type-aware rules.
81+
'tsx',
82+
83+
// [!STRONGLY DISCOURAGED]
84+
// Include 'jsx' to allow `<script lang="jsx">` blocks.
85+
// This would be in conflict with all type-aware rules and may result in false positives.
86+
'jsx',
87+
],
88+
89+
// <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
90+
// Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
91+
// You may need to set this to the root directory of your project if you have a monorepo.
92+
// This is useful when you allow any other languages than `ts` in `.vue` files.
93+
// Our config helper would resolve and parse all the `.vue` files under `rootDir`,
94+
// and only apply the loosened rules to the files that do need them.
95+
rootDir: import.meta.dirname,
96+
})
97+
98+
export default defineConfigWithVueTs(
99+
pluginVue.configs["flat/essential"],
100+
101+
// We STRONGLY RECOMMEND you to start with `recommended` or `recommendedTypeChecked`.
102+
// But if you are determined to configure all rules by yourself,
103+
// you can start with `base`, and then turn on/off the rules you need.
104+
vueTsConfigs.base,
105+
)
103106
```
104107

105108
### Linting with Type Information
@@ -111,34 +114,26 @@ It is not always easy to set up the type-checking environment for ESLint without
111114
So we don't recommend you to configure individual type-aware rules and the corresponding language options all by yourself.
112115
Instead, you can start by extending from the `recommendedTypeChecked` configuration and then turn on/off the rules you need.
113116

114-
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.
115-
116117
```js
117118
// eslint.config.mjs
118-
import pluginVue from "eslint-plugin-vue";
119-
import vueTsEslintConfig from "@vue/eslint-config-typescript";
120-
121-
export default [
122-
...pluginVue.configs["flat/essential"],
123-
124-
{
125-
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
126-
rules: {
127-
// Turn on other rules that you need.
128-
'@typescript-eslint/require-array-sort-compare': 'error'
129-
}
130-
},
131-
...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),
132-
{
133-
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
134-
rules: {
135-
// Turn off the recommended rules that you don't need.
136-
'@typescript-eslint/no-redundant-type-constituents': 'off',
137-
}
138-
}
139-
]
119+
import pluginVue from 'eslint-plugin-vue'
120+
import {
121+
defineConfigWithVueTs,
122+
vueTsConfigs,
123+
} from '@vue/eslint-config-typescript'
124+
125+
export default defineConfigWithVueTs(
126+
pluginVue.configs['flat/essential'],
127+
vueTsConfigs.recommendedTypeChecked
128+
)
140129
```
141130

131+
## Use As a Normal Shared ESLint Config (Not Recommended)
132+
133+
You can use this package as a normal ESLint config, without the `defineConfigWithVueTs` helper. But in this case, overriding the rules for `.vue` files would be more difficult and comes with many nuances. Please be cautious.
134+
135+
You can check [the documentation for 14.1 and earlier versions](https://github.com/vuejs/eslint-config-typescript/tree/v14.1.4#usage) for more information.
136+
142137
## Further Reading
143138

144139
- [All the extendable configurations from `typescript-eslint`](https://typescript-eslint.io/users/configs).

Diff for: ‎examples/allow-js/eslint.config.js

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import pluginVue from "eslint-plugin-vue";
2-
import vueTsEslintConfig from "@vue/eslint-config-typescript";
1+
import pluginVue from 'eslint-plugin-vue'
2+
import {
3+
defineConfigWithVueTs,
4+
vueTsConfigs,
5+
configureVueProject,
6+
} from '@vue/eslint-config-typescript'
37

4-
export default [
8+
configureVueProject({ scriptLangs: ['js', 'ts'] })
9+
10+
export default defineConfigWithVueTs(
511
{
612
name: 'app/files-to-lint',
713
files: ['**/*.js', '**/*.mjs', '**/*.ts', '**/*.mts', '**/*.vue'],
@@ -12,11 +18,6 @@ export default [
1218
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
1319
},
1420

15-
...pluginVue.configs["flat/essential"],
16-
...vueTsEslintConfig({
17-
supportedScriptLangs: {
18-
ts: true,
19-
js: true
20-
}
21-
}),
22-
]
21+
pluginVue.configs['flat/essential'],
22+
vueTsConfigs.recommended,
23+
)

Diff for: ‎examples/allow-js/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616
},
1717
"devDependencies": {
1818
"@tsconfig/node20": "^20.1.4",
19-
"@types/node": "^20.17.10",
19+
"@types/node": "^20.17.12",
2020
"@vitejs/plugin-vue": "^5.2.1",
2121
"@vue/eslint-config-typescript": "workspace:*",
2222
"@vue/tsconfig": "^0.7.0",
23-
"eslint": "^9.17.0",
23+
"eslint": "^9.18.0",
2424
"eslint-plugin-vue": "^9.32.0",
2525
"npm-run-all2": "^7.0.2",
26-
"typescript": "~5.6.3",
27-
"vite": "^6.0.5",
28-
"vue-tsc": "^2.1.10"
26+
"typescript": "~5.7.3",
27+
"vite": "^6.0.7",
28+
"vue-tsc": "^2.2.0"
2929
}
3030
}

Diff for: ‎examples/api-before-14.3/.editorconfig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
2+
charset = utf-8
3+
indent_size = 2
4+
indent_style = space
5+
insert_final_newline = true
6+
trim_trailing_whitespace = true

Diff for: ‎examples/api-before-14.3/.gitignore

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
*.tsbuildinfo

Diff for: ‎examples/api-before-14.3/.prettierrc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
{
3+
"$schema": "https://json.schemastore.org/prettierrc",
4+
"semi": false,
5+
"singleQuote": true,
6+
"arrowParens": "avoid"
7+
}

Diff for: ‎examples/api-before-14.3/.vscode/extensions.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"recommendations": [
3+
"Vue.volar",
4+
"vitest.explorer",
5+
"dbaeumer.vscode-eslint",
6+
"esbenp.prettier-vscode"
7+
]
8+
}

Diff for: ‎examples/api-before-14.3/README.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# api-before-14.3
2+
3+
This template should help get you started developing with Vue 3 in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
8+
9+
## Type Support for `.vue` Imports in TS
10+
11+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
12+
13+
## Customize configuration
14+
15+
See [Vite Configuration Reference](https://vite.dev/config/).
16+
17+
## Project Setup
18+
19+
```sh
20+
npm install
21+
```
22+
23+
### Compile and Hot-Reload for Development
24+
25+
```sh
26+
npm run dev
27+
```
28+
29+
### Type-Check, Compile and Minify for Production
30+
31+
```sh
32+
npm run build
33+
```
34+
35+
### Run Unit Tests with [Vitest](https://vitest.dev/)
36+
37+
```sh
38+
npm run test:unit
39+
```
40+
41+
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
42+
43+
```sh
44+
npm run test:e2e:dev
45+
```
46+
47+
This runs the end-to-end tests against the Vite development server.
48+
It is much faster than the production build.
49+
50+
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
51+
52+
```sh
53+
npm run build
54+
npm run test:e2e
55+
```
56+
57+
### Lint with [ESLint](https://eslint.org/)
58+
59+
```sh
60+
npm run lint
61+
```

Diff for: ‎examples/api-before-14.3/cypress.config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from 'cypress'
2+
3+
export default defineConfig({
4+
e2e: {
5+
specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
6+
baseUrl: 'http://localhost:4173'
7+
}
8+
})

Diff for: ‎examples/api-before-14.3/cypress/e2e/example.cy.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// https://on.cypress.io/api
2+
3+
describe('My First Test', () => {
4+
it('visits the app root url', () => {
5+
cy.visit('/')
6+
cy.contains('h1', 'You did it!')
7+
})
8+
})

Diff for: ‎examples/api-before-14.3/cypress/fixtures/example.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

0 commit comments

Comments
 (0)