Skip to content

Commit eac60ea

Browse files
sonofmagicsonofmagic
committed
feat: include vscode config in generated templates
1 parent 263c52f commit eac60ea

5 files changed

Lines changed: 172 additions & 1 deletion

File tree

‎.changeset/bright-vscode-template.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"create-uni-app-tailwindcss": patch
3+
---
4+
5+
生成的 uni-app 项目现在包含 VS Code 的 ESLint、Stylelint、Tailwind CSS 配置和扩展推荐。

‎packages/create-uni-app-tailwindcss/tests/create.spec.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ for (const template of registry.templates) {
2222
], packageRoot)
2323
const pkg = JSON.parse(await readFile(path.join(projectDir, 'package.json'), 'utf8'))
2424
expect(pkg.name).toBe(`${template.id}-app`)
25-
expect(pkg.devDependencies['weapp-tailwindcss']).toBe('^5.4.1')
25+
expect(pkg.devDependencies['weapp-tailwindcss']).toBe('^5.5.0')
2626
expect(pkg.scripts['update:deps']).toBe('pnpm up --latest --interactive "!@dcloudio/*" "!@vue/runtime-core" "!@vue/shared" "!rollup" "!vite" "!vue" "!vue-i18n"')
2727
expect(pkg.scripts['update:uni-app']).toBe('pnpm dlx @dcloudio/uvm@latest --manager pnpm')
2828
expect(pkg.scripts['test:hmr:h5']).toBeUndefined()
@@ -33,6 +33,9 @@ for (const template of registry.templates) {
3333
expect(pkg.devDependencies.playwright).toBeUndefined()
3434
expect(pkg.devDependencies.pngjs).toBeUndefined()
3535
await expectFile(path.join(projectDir, '.npmrc'))
36+
await expectFile(path.join(projectDir, '.vscode', 'settings.json'))
37+
await expectFile(path.join(projectDir, '.vscode', 'extensions.json'))
38+
await expectFile(path.join(projectDir, '.vscode', 'tailwind.json'))
3639
await expectFile(path.join(projectDir, 'pnpm-workspace.yaml'))
3740
await expectFile(path.join(projectDir, 'src', 'pages.json'))
3841
await expectFile(path.join(projectDir, 'vite.config.ts'))

‎packages/template/.vscode/extensions.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"dbaeumer.vscode-eslint",
4+
"stylelint.vscode-stylelint",
5+
"bradlc.vscode-tailwindcss"
6+
]
7+
}

‎packages/template/.vscode/settings.json‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
// Disable the default formatter, use eslint instead
3+
"prettier.enable": false,
4+
"editor.formatOnSave": false,
5+
// Auto fix
6+
"editor.codeActionsOnSave": {
7+
"source.fixAll.eslint": "explicit",
8+
"source.organizeImports": "never"
9+
},
10+
// Reuse diagnostics collected while editing instead of linting the whole file again on save.
11+
"eslint.codeActionsOnSave.mode": "problems",
12+
// This is a single-package workspace; keep config and dependency resolution at its root.
13+
"eslint.workingDirectories": [
14+
{
15+
"mode": "location"
16+
}
17+
],
18+
// https://github.com/tailwindlabs/tailwindcss/discussions/5258
19+
"css.customData": [
20+
".vscode/tailwind.json"
21+
],
22+
"tailwindCSS.experimental.classRegex": [
23+
// https://github.com/lukeed/clsx?tab=readme-ov-file#tailwind-support
24+
[
25+
"clsx\\(([^)]*)\\)",
26+
"(?:'|\"|`)([^']*)(?:'|\"|`)"
27+
],
28+
// https://cva.style/docs/getting-started/installation
29+
[
30+
"cva\\(([^)]*)\\)",
31+
"[\"'`]([^\"'`]*).*?[\"'`]"
32+
],
33+
[
34+
"cx\\(([^)]*)\\)",
35+
"(?:'|\"|`)([^']*)(?:'|\"|`)"
36+
]
37+
],
38+
// Mini Program rpx arbitrary text sizes, for example text-[24rpx],
39+
// can be misreported as conflicting with text color utilities.
40+
"tailwindCSS.lint.cssConflict": "ignore",
41+
// Silent the stylistic rules in you IDE, but still auto fix them
42+
"eslint.rules.customizations": [
43+
{
44+
"rule": "style/*",
45+
"severity": "off"
46+
},
47+
{
48+
"rule": "format/*",
49+
"severity": "off"
50+
},
51+
{
52+
"rule": "*-indent",
53+
"severity": "off"
54+
},
55+
{
56+
"rule": "*-spacing",
57+
"severity": "off"
58+
},
59+
{
60+
"rule": "*-spaces",
61+
"severity": "off"
62+
},
63+
{
64+
"rule": "*-order",
65+
"severity": "off"
66+
},
67+
{
68+
"rule": "*-dangle",
69+
"severity": "off"
70+
},
71+
{
72+
"rule": "*-newline",
73+
"severity": "off"
74+
},
75+
{
76+
"rule": "*quotes",
77+
"severity": "off"
78+
},
79+
{
80+
"rule": "*semi",
81+
"severity": "off"
82+
}
83+
],
84+
// Validate source languages only. Stylelint owns CSS/SCSS in the editor.
85+
"eslint.validate": [
86+
"javascript",
87+
"javascriptreact",
88+
"typescript",
89+
"typescriptreact",
90+
"vue"
91+
],
92+
"css.validate": false,
93+
"less.validate": false,
94+
"scss.validate": false,
95+
"stylelint.validate": [
96+
"vue",
97+
"css",
98+
"scss"
99+
]
100+
}

‎packages/template/.vscode/tailwind.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// https://github.com/tailwindlabs/tailwindcss/discussions/5258
2+
{
3+
"version": 1.1,
4+
"atDirectives": [
5+
{
6+
"name": "@tailwind",
7+
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
8+
"references": [
9+
{
10+
"name": "Tailwind Documentation",
11+
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
12+
}
13+
]
14+
},
15+
{
16+
"name": "@apply",
17+
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
18+
"references": [
19+
{
20+
"name": "Tailwind Documentation",
21+
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
22+
}
23+
]
24+
},
25+
{
26+
"name": "@responsive",
27+
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
28+
"references": [
29+
{
30+
"name": "Tailwind Documentation",
31+
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
32+
}
33+
]
34+
},
35+
{
36+
"name": "@screen",
37+
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
38+
"references": [
39+
{
40+
"name": "Tailwind Documentation",
41+
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
42+
}
43+
]
44+
},
45+
{
46+
"name": "@variants",
47+
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
48+
"references": [
49+
{
50+
"name": "Tailwind Documentation",
51+
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
52+
}
53+
]
54+
}
55+
]
56+
}

0 commit comments

Comments
 (0)