Skip to content

docs: 推奨設定テンプレートを追加 #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
keito4 merged 1 commit into from
Jan 23, 2026
Merged

docs: 推奨設定テンプレートを追加 #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions .devcontainer/templates/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# DevContainer 設定テンプレート

このディレクトリには、config-base イメージに追加できるオプショナルな設定テンプレートが含まれています。

## オプショナル Features

`optional-features.json` には、プロジェクトに応じて追加できる DevContainer Features が記載されています。

### 使用方法

プロジェクトの `.devcontainer/devcontainer.json` の `features` セクションに追加してください。

**例: Python Feature を追加**

@coderabbitai coderabbitai Bot Jan 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use a proper heading instead of bold text.

Markdownlint flags this as a heading misuse. Convert the bold line to a heading to satisfy MD036.

✏️ Suggested fix 
-**例: Python Feature を追加**
+#### 例: Python Feature を追加

Based on static analysis, ...

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
**例: Python Feature を追加**
#### 例: Python Feature を追加
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)

13-13: Emphasis used instead of a heading

(MD036, no-emphasis-as-heading)

🤖 Prompt for AI Agents 
In @.devcontainer/templates/README.md at line 13, Replace the bold example line
"**例: Python Feature を追加**" with a proper Markdown heading to satisfy MD036
(e.g., prepend one or more '#' characters like "# 例: Python Feature を追加" or "##
例: Python Feature を追加"); update the line containing that exact text so it uses
heading syntax instead of bold markup.


```json
{
"name": "My Project",
"image": "ghcr.io/keito4/config-base:latest",
"features": {
"ghcr.io/devcontainers/features/python:1": {
"version": "latest"
}
}
}
```

### 利用可能な Features

| Feature | 説明 |
| ------- | ------------------------------------ |
| Python | Python 開発環境（pip, venv 含む） |
| Ruby | Ruby 開発環境（rbenv, bundler 含む） |
| Go | Go 開発環境 |
| Java | Java 開発環境（OpenJDK） |
| .NET | .NET 開発環境 |

**注意**: config-base イメージには既に基本的な Python (python3, pip) がインストールされています。
Python Feature を追加すると、pyenv による複数バージョン管理などの追加機能が利用可能になります。

## 参考

- [DevContainer Features 一覧](https://containers.dev/features)
- [config-base イメージの使用方法](../../docs/using-config-base-image.md)
41 changes: 41 additions & 0 deletions .devcontainer/templates/optional-features.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"$schema": "https://raw.githubusercontent.com/devcontainers/spec/main/schemas/devContainer.schema.json",
"_comment": "config-base イメージに追加できるオプショナルな DevContainer Features",
"features": {
"python": {
"feature": "ghcr.io/devcontainers/features/python:1",
"options": {
"version": "latest"
},
"description": "Python 開発環境（pip, venv 含む）。注意: config-base には既に python3 がインストール済みですが、この feature は追加の Python バージョン管理を提供します。"
},
"ruby": {
"feature": "ghcr.io/devcontainers/features/ruby:1",
"options": {
"version": "latest"
},
"description": "Ruby 開発環境（rbenv, bundler 含む）"
},
"go": {
"feature": "ghcr.io/devcontainers/features/go:1",
"options": {
"version": "latest"
},
"description": "Go 開発環境"
},
"java": {
"feature": "ghcr.io/devcontainers/features/java:1",
"options": {
"version": "lts"
},
"description": "Java 開発環境（OpenJDK）"
},
"dotnet": {
"feature": "ghcr.io/devcontainers/features/dotnet:2",
"options": {
"version": "latest"
},
"description": ".NET 開発環境"
}
}
}
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ __pycache__/
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
!.vscode/templates/
.vscode/*.log
.idea/
*.swp
Expand Down
37 changes: 37 additions & 0 deletions .vscode/templates/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# VSCode 設定テンプレート

このディレクトリには、プロジェクト固有の VSCode 設定テンプレートが含まれています。
必要に応じて各プロジェクトの `.vscode/` ディレクトリにコピーして使用してください。

## 利用可能なテンプレート

### Tailwind CSS + CVA IntelliSense

Tailwind CSS と Class Variance Authority (CVA) を使用するプロジェクト向けの設定。

**ファイル:**

- `tailwind-cva-settings.json` - VSCode 設定
- `tailwind-extensions.json` - 推奨拡張機能

**使用方法:**

1. 推奨拡張機能を追加:

```bash
# .vscode/extensions.json にマージ
cat .vscode/templates/tailwind-extensions.json
```

2. VSCode 設定を追加:

```bash
# .vscode/settings.json にマージ
cat .vscode/templates/tailwind-cva-settings.json
```
Comment on lines +19 to +31

@coderabbitai coderabbitai Bot Jan 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Clarify that cat doesn’t merge JSON.

The steps say “merge,” but cat only prints. This can mislead readers into thinking it performs an in-place merge. Consider rephrasing to “copy/merge manually” (or provide a concrete merge command).

✏️ Suggested wording tweak 
-# .vscode/extensions.json にマージ
+# .vscode/extensions.json に追記/マージ（手動）
 cat .vscode/templates/tailwind-extensions.json
...
-# .vscode/settings.json にマージ
+# .vscode/settings.json に追記/マージ（手動）
 cat .vscode/templates/tailwind-cva-settings.json
🤖 Prompt for AI Agents 
In @.vscode/templates/README.md around lines 19 - 31, The README incorrectly
implies that `cat` merges JSON; update the two instructions referencing
".vscode/extensions.json" and ".vscode/settings.json" (and the template files
"tailwind-extensions.json" and "tailwind-cva-settings.json") to clarify that
`cat` only prints file contents and does not perform an in-place merge, and
either instruct readers to copy/merge the JSON manually or provide a concrete
merge command alternative (e.g., a JSON merge tool or appending instruction) so
users know how to actually merge the templates into their VSCode config files.


**機能:**

- `cva()` 関数内での Tailwind クラス補完
- `cx()` 関数内での Tailwind クラス補完
- ファイルネスティング（package.json → lock files など）
16 changes: 16 additions & 0 deletions .vscode/templates/tailwind-cva-settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
],
Comment on lines +3 to +5

@coderabbitai coderabbitai Bot Jan 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

cat -n .vscode/templates/tailwind-cva-settings.json

Repository: keito4/config

Length of output: 699

🏁 Script executed:

# Test regex matching behavior to understand the overmatching concern
python3 << 'EOF'
import re

# Current cx pattern
current_cx = r"(?:'|\"|`)([^']*)(?:'|\"|`)"

# Proposed cx pattern
proposed_cx = r"[\"'`]([^\"'`]*)[\"'`]"

# Test cases
test_strings = [
    '"hello world"',
    "'hello world'",
    "`hello world`",
    '"hello"world"',  # Mixed quotes - problematic case
    "'hello'world'",  # Single quotes
    '`hello`world`',  # Backticks
]

print("Current pattern: " + current_cx)
print("Proposed pattern: " + proposed_cx)
print()

for test in test_strings:
    print(f"Input: {test}")
    current_match = re.search(current_cx, test)
    proposed_match = re.search(proposed_cx, test)
    
    if current_match:
        print(f"  Current captures: {current_match.group(1)}")
    else:
        print(f"  Current: NO MATCH")
    
    if proposed_match:
        print(f"  Proposed captures: {proposed_match.group(1)}")
    else:
        print(f"  Proposed: NO MATCH")
    print()
EOF

Repository: keito4/config

Length of output: 143

🌐 Web query:

Tailwind CSS classRegex IntelliSense quote matching

💡 Result:

Short answer: the IntelliSense regex must not include the surrounding quote in the captured group — otherwise the extension thinks the first character of your class starts with a quote and won’t suggest anything. Two better options: (A) update your classRegex to exclude the quotes from the capture, or (B) use the newer classFunctions setting instead of regex.

Examples

  • classRegex that avoids capturing the quote (works for single/double/backtick):
    "tailwindCSS.experimental.classRegex": [
    "tw([^])", "tw\\(['\"]([^'\"]*)['\"]\\)", "classnames\\((?:'|\")([^'\"]*)(?:'|\")\\)" ] (The key is that the capture group ([^'\"] or similar) does not include the quote itself.) [1]

  • Prefer classFunctions (added to the extension so you don’t need custom regex):
    "tailwindCSS.classFunctions": ["tw", "tw.style", "classnames"]
    This tells the extension which functions contain class strings without brittle regex. [2][3]

References

  • Regex/quote problem and workaround examples. [1]
  • Tailwind docs / IntelliSense extension info. [2]
  • classFunctions and example config history. [3]

Tighten the cx() classRegex to avoid overmatching.

The current pattern (?:'|\"|)([^']*)(?:'|"|) captures [^'] which excludes only single quotes but allows " and ` inside the capture group. This causes Tailwind's IntelliSense to fail since it interprets the quote character as the start of the class name. The capture must exclude all quote types to match Tailwind's requirements.

🔧 Proposed fix 
-    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+    ["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
🤖 Prompt for AI Agents 
In @.vscode/templates/tailwind-cva-settings.json around lines 3 - 5, The cx()
classRegex currently uses a capture group that excludes only single quotes
(e.g., ([^']*)), which lets double quotes and backticks leak into the match;
update the cx() regex used for classRegex so its capture group excludes all
quote types (single, double and backtick) instead of just single quotes—i.e.,
replace the existing ([^']*) capture with a character class that forbids single,
double and backtick characters so cx() and the classRegex no longer overmatch.

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.ts": "${capture}.js",
"*.tsx": "${capture}.js",
"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, .nvmrc",
".eslintrc.*": ".eslintignore",
".prettierrc.*": ".prettierignore",
"tsconfig.json": "tsconfig.*.json",
"next.config.*": "next-env.d.ts"
}
}
3 changes: 3 additions & 0 deletions .vscode/templates/tailwind-extensions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["bradlc.vscode-tailwindcss"]
}
Loading