<p data-line="0" class="code-line">DenoのLint pluginを導入して指定忘れを検出 &amp; 自動修正できるようにする。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__321d3782ad37b" src="https://embed.zenn.studio/card#zenn-embedded__321d3782ad37b" data-content="https%3A%2F%2Fjsr.io%2F%40tsutoringo%2Flint-css-modules%401.0.0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://jsr.io/@tsutoringo/lint-css-modules@1.0.0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://jsr.io/@tsutoringo/lint-css-modules@1.0.0</a><br style="display:none">
導入すると@ts-typeがないimportにはWarnが出る。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ab7301463b82-20250308.png" loading="lazy" class="md-img"></p>
<p data-line="5" class="code-line">ctrl+. もしくは</p>
<div class="code-block-container"><pre><code class="code-line" data-line="6">deno lint --fix
</code></pre></div><p data-line="9" class="code-line">で自動修正が可能になります。<br>
修正後<br>
<img src="https://storage.googleapis.com/zenn-user-upload/fe9478ca0822-20250308.png" loading="lazy" class="md-img"></p>
<h2 id="%E8%83%8C%E6%99%AF" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h2>
<p data-line="14" class="code-line">DenoでReact+Vite+CSS Module+Happy CSS Modulesでクラス名の型を定義を読み込みたい。<br>
しかしDenoは.d.tsを自動で解決せず明示しなければならない<sup class="footnote-ref"><a href="#fn-1476-1" id="fnref-1476-1">[1]</a></sup>。<br>
細かい背景は<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8034e62f74f64" src="https://embed.zenn.studio/card#zenn-embedded__8034e62f74f64" data-content="https%3A%2F%2Fzenn.dev%2Ftsutoringo%2Farticles%2F4396c0a6b5b253" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/tsutoringo/articles/4396c0a6b5b253" style="display:none" target="_blank">https://zenn.dev/tsutoringo/articles/4396c0a6b5b253</a></p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-1476-1" class="footnote-item">
<p data-line="19" class="code-line"><a href="https://docs.deno.com/runtime/reference/ts_config_migration/#providing-types-when-importing" target="_blank" rel="nofollow noopener noreferrer">https://docs.deno.com/runtime/reference/ts_config_migration/#providing-types-when-importing</a> <a href="#fnref-1476-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


DenoでVite + CSS Modules+Happy CSS Modulesの型を使用する。

背景

Discussion