docs: 推奨設定テンプレートを追加 - #376
Conversation
プロジェクト固有の設定として推奨するテンプレートを追加。 ## VSCode テンプレート (.vscode/templates/) - tailwind-cva-settings.json: Tailwind CSS + CVA IntelliSense設定 - tailwind-extensions.json: Tailwind拡張機能の推奨 ## DevContainer テンプレート (.devcontainer/templates/) - optional-features.json: オプショナルなDevContainer Features一覧 - Python, Ruby, Go, Java, .NET これらはconfig-baseイメージに直接含めず、各プロジェクトで必要に応じて使用する形式。 Closes #365 Closes #366 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR introduces template configuration files for both DevContainer and VSCode environments, enabling optional development features (Python, Ruby, Go, Java, .NET) and improved IDE integration with Tailwind CSS and CVA classRegex support for enhanced IntelliSense capabilities. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Review: 推奨設定テンプレートを追加総合評価✅ 承認推奨 - 良好な品質で、リポジトリの有用性を向上させる変更です。 良い点1. 明確な目的と構造
2. ドキュメント品質
3. .gitignore の適切な更新
指摘事項重要度: 中 - JSON構造の妥当性ファイル: 現在のJSONファイルは、実際の devcontainer.json 形式ではなく、独自の構造になっています。 提案: テンプレートとして使うならば、 重要度: 低 - 正規表現の可読性ファイル: 正規表現が複雑ですが、これはTailwind CSS IntelliSenseの標準的なパターンなので問題ありません。ただし、README.mdに簡単な説明があると、将来的なメンテナンスがしやすくなります。 セキュリティ・パフォーマンス✅ セキュリティ上の懸念なし テストカバレッジ
補足: 静的なテンプレートファイルのため、ユニットテストは不要です。 改善提案（オプショナル）
結論このPRは、リポジトリの開発者体験を向上させる有用な追加です。指摘事項は主にドキュメントと構造の明確化に関するものであり、機能的には問題ありません。 推奨アクション:
上記の軽微な修正を行った上でマージすることを推奨します。 🤖 Reviewed by Claude Sonnet 4.5 via Claude Code |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @.devcontainer/templates/README.md:
- 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.
In @.vscode/templates/README.md:
- Around line 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.
In @.vscode/templates/tailwind-cva-settings.json:
- Around line 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.
|
|
||
| プロジェクトの `.devcontainer/devcontainer.json` の `features` セクションに追加してください。 | ||
|
|
||
| **例: Python Feature を追加** |
There was a problem hiding this comment.
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.
| **例: 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.
| 1. 推奨拡張機能を追加: | ||
|
|
||
| ```bash | ||
| # .vscode/extensions.json にマージ | ||
| cat .vscode/templates/tailwind-extensions.json | ||
| ``` | ||
|
|
||
| 2. VSCode 設定を追加: | ||
|
|
||
| ```bash | ||
| # .vscode/settings.json にマージ | ||
| cat .vscode/templates/tailwind-cva-settings.json | ||
| ``` |
There was a problem hiding this comment.
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\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], | ||
| ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n .vscode/templates/tailwind-cva-settings.jsonRepository: 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()
EOFRepository: 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.
|
🎉 This PR is included in version 1.54.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
1 participant
Summary
追加内容
VSCode テンプレート (.vscode/templates/)
tailwind-cva-settings.json: Tailwind CSS + CVA IntelliSense設定tailwind-extensions.json: Tailwind拡張機能の推奨DevContainer テンプレート (.devcontainer/templates/)
optional-features.json: オプショナルなDevContainer Features一覧使用方法
各プロジェクトで必要に応じてテンプレートをコピーして使用します。
config-baseイメージには直接含めず、オプショナルな設定として提供。
Test plan
Closes #365
Closes #366
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.