Skip to content

Commit 6001b7d

Browse files
committed
fix: fix remaining bugs & update examples
1 parent 3755a4c commit 6001b7d

Some content is hidden

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

57 files changed

+1128
-137
lines changed

README.md

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -60,50 +60,50 @@ All the `<script>` blocks in `.vue` files *MUST* be written in TypeScript (shoul
6060
import pluginVue from 'eslint-plugin-vue'
6161
import {
6262
defineConfig,
63-
configs,
6463
configureVueProject,
64+
configs,
6565
} from '@vue/eslint-config-typescript'
6666

67-
export default [
68-
...pluginVue.configs["flat/essential"],
67+
configureVueProject({
68+
// Optional: specify the script langs in `.vue` files
69+
// Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
70+
supportedScriptLangs: {
71+
ts: true,
72+
73+
// [!DISCOURAGED]
74+
// Set to `true` to allow plain `<script>` or `<script setup>` blocks.
75+
// This might result-in false positive or negatives in some rules for `.vue` files.
76+
// Note you also need to configure `allowJs: true` and `checkJs: true`
77+
// in corresponding `tsconfig.json` files.
78+
js: false,
79+
80+
// [!STRONGLY DISCOURAGED]
81+
// Set to `true` to allow `<script lang="tsx">` blocks.
82+
// This would be in conflict with all type-aware rules.
83+
tsx: false,
84+
85+
// [!STRONGLY DISCOURAGED]
86+
// Set to `true` to allow `<script lang="jsx">` blocks.
87+
// This would be in conflict with all type-aware rules and may result in false positives.
88+
jsx: false,
89+
},
90+
91+
// <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
92+
// Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
93+
// You may need to set this to the root directory of your project if you have a monorepo.
94+
// This is useful when you allow any other languages than `ts` in `.vue` files.
95+
// Our config helper would resolve and parse all the `.vue` files under `rootDir`,
96+
// and only apply the loosened rules to the files that do need them.
97+
rootDir: import.meta.dirname,
98+
})
99+
100+
export default defineConfig(
101+
pluginVue.configs["flat/essential"],
69102

70103
// We STRONGLY RECOMMEND you to start with `recommended` or `recommendedTypeChecked`.
71104
// But if you are determined to configure all rules by yourself,
72105
// you can start with `base`, and then turn on/off the rules you need.
73106
configs.base,
74-
75-
configureVueProject({
76-
// Optional: specify the script langs in `.vue` files
77-
// Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
78-
supportedScriptLangs: {
79-
ts: true,
80-
81-
// [!DISCOURAGED]
82-
// Set to `true` to allow plain `<script>` or `<script setup>` blocks.
83-
// This might result-in false positive or negatives in some rules for `.vue` files.
84-
// Note you also need to configure `allowJs: true` and `checkJs: true`
85-
// in corresponding `tsconfig.json` files.
86-
js: false,
87-
88-
// [!STRONGLY DISCOURAGED]
89-
// Set to `true` to allow `<script lang="tsx">` blocks.
90-
// This would be in conflict with all type-aware rules.
91-
tsx: false,
92-
93-
// [!STRONGLY DISCOURAGED]
94-
// Set to `true` to allow `<script lang="jsx">` blocks.
95-
// This would be in conflict with all type-aware rules and may result in false positives.
96-
jsx: false,
97-
},
98-
99-
// <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
100-
// Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
101-
// You may need to set this to the root directory of your project if you have a monorepo.
102-
// This is useful when you allow any other languages than `ts` in `.vue` files.
103-
// Our config helper would resolve and parse all the `.vue` files under `rootDir`,
104-
// and only apply the loosened rules to the files that do need them.
105-
rootDir: import.meta.dirname,
106-
}),
107107
)
108108
```
109109

examples/allow-js/eslint.config.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
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+
defineConfig,
4+
configureVueProject,
5+
configs,
6+
} from '@vue/eslint-config-typescript'
37

4-
export default [
8+
configureVueProject({
9+
supportedScriptLangs: {
10+
js: true,
11+
ts: true,
12+
},
13+
})
14+
15+
export default defineConfig(
516
{
617
name: 'app/files-to-lint',
718
files: ['**/*.js', '**/*.mjs', '**/*.ts', '**/*.mts', '**/*.vue'],
@@ -12,11 +23,6 @@ export default [
1223
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
1324
},
1425

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

examples/minimal/eslint.config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import pluginVue from 'eslint-plugin-vue'
2-
import vueTsEslintConfig from '@vue/eslint-config-typescript'
2+
import { defineConfig, configs } from '@vue/eslint-config-typescript'
33

4-
export default [
4+
export default defineConfig(
55
{
66
name: 'app/files-to-lint',
77
files: ['**/*.ts', '**/*.mts', '**/*.vue'],
@@ -13,5 +13,5 @@ export default [
1313
},
1414

1515
...pluginVue.configs['flat/essential'],
16-
...vueTsEslintConfig(),
17-
]
16+
configs.recommended,
17+
)
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import pluginVue from 'eslint-plugin-vue'
2-
import vueTsEslintConfig from '@vue/eslint-config-typescript'
2+
import { defineConfig, configs } from '@vue/eslint-config-typescript'
33
import pluginVitest from '@vitest/eslint-plugin'
44
import pluginCypress from 'eslint-plugin-cypress/flat'
55
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
66

7-
export default [
7+
export default defineConfig(
88
{
99
name: 'app/files-to-lint',
1010
files: ['**/*.{ts,mts,tsx,vue}'],
@@ -15,8 +15,8 @@ export default [
1515
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
1616
},
1717

18-
...pluginVue.configs['flat/essential'],
19-
...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),
18+
pluginVue.configs['flat/essential'],
19+
configs.recommendedTypeChecked,
2020

2121
{
2222
...pluginVitest.configs.recommended,
@@ -27,8 +27,8 @@ export default [
2727
...pluginCypress.configs.recommended,
2828
files: [
2929
'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
30-
'cypress/support/**/*.{js,ts,jsx,tsx}'
30+
'cypress/support/**/*.{js,ts,jsx,tsx}',
3131
],
3232
},
3333
skipFormatting,
34-
]
34+
)
Lines changed: 6 additions & 0 deletions
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

examples/usage-before-14.3/.gitignore

Lines changed: 30 additions & 0 deletions
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
Lines changed: 7 additions & 0 deletions
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+
}
Lines changed: 8 additions & 0 deletions
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+
}

examples/usage-before-14.3/README.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# usage-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+
```
Lines changed: 8 additions & 0 deletions
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+
})
Lines changed: 8 additions & 0 deletions
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+
})
Lines changed: 5 additions & 0 deletions
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+
}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************
3+
// This example commands.ts shows you how to
4+
// create various custom commands and overwrite
5+
// existing commands.
6+
//
7+
// For more comprehensive examples of custom
8+
// commands please read more here:
9+
// https://on.cypress.io/custom-commands
10+
// ***********************************************
11+
//
12+
//
13+
// -- This is a parent command --
14+
// Cypress.Commands.add('login', (email, password) => { ... })
15+
//
16+
//
17+
// -- This is a child command --
18+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19+
//
20+
//
21+
// -- This is a dual command --
22+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23+
//
24+
//
25+
// -- This will overwrite an existing command --
26+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27+
//
28+
// declare global {
29+
// namespace Cypress {
30+
// interface Chainable {
31+
// login(email: string, password: string): Chainable<void>
32+
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33+
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34+
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35+
// }
36+
// }
37+
// }
38+
39+
export {}
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "@vue/tsconfig/tsconfig.dom.json",
3+
"include": ["./e2e/**/*", "./support/**/*"],
4+
"compilerOptions": {
5+
"isolatedModules": false,
6+
"types": ["cypress"]
7+
}
8+
}

examples/usage-before-14.3/env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

0 commit comments

Comments
 (0)