stylelintで定義済み変数を使わずにハードコードされている値に警告を出すカスタムルールを作る
css や scss で定義された変数があるにもかかわらずチーム開発の中で 16px や 4px などのハードコーディングされた値が直接使われてしまうことがあります。 こうしたケースをコードレビ...
0
1
Comment0
106 search resultsShowing 1~20 results
Stocked
You need to log-in
脱ドキュメント コーディングルールをESLint / Stylelintに任せる
この記事は VR法人HIKKY Advent Calendar 2024 の 17 日目の記事です。 終盤に差し掛かってきたかと思いますが、後半もまだまだ有益な情報があるかと思うのでぜひご覧いた...
3
0
Comment0
CSS Modules + Sass（SCSS） で発生した変数に関する Stylelint エラーとその解決方法
はじめに CSS Modules と Sass(SCSS) を組み合わせてスタイルを実装した際に直面した問題を紹介します。 今回は、名前空間なしでインポートしたパーシャルファイル内の変数を使用し...
1
1
Comment0
Stylelintのmedia-feature-name-no-unknownについて
stylelintを適用した際に stylelintを使って、既存のCSSの最適化？を行うことによって保守や統一感を出す作業を行ってみた。その際に、メディアクエリのmin-widthやmax-...
0
0
Comment0
VS Code × stylelint【VS Code × CSScombはもう辞めよう】
2024/07/17追記 stylelintのextendsをグローバルにインストールすると、グローバルに設置されているextendsとパスが通らず、stylelint.configBasedi...
1
2
Comment1
CSSのLint "stylelint"を入れてみた
Stylelintとは Stylelintは、CSSやSCSSなどのスタイルシート言語に対して、コードの品質を保ち、ベストプラクティスに従うための静的解析ツールです。簡単に言うと、Styleli...
0
0
Comment0
stylelintをv13からv16にアップデート
BeforeAfter "stylelint": "^13.13.1", "stylelint-config-prettier": "^8.0.2", "stylelint-config-rec...
0
0
Comment0
Linaria のセットアップ for Next.js 14
Motivation Next.js 14 がリリースされて久しいが、React での CSS in JS ライブラリの一つである Linaria を導入したのでその手順についてまとめた。 Ne...
3
0
Comment0
CSSのプロパティを自動で並べ替える方法
複数人で開発をしていると marginとpaddingってどちらを先に書けば良いだろう？ position指定ってtop -> right -> bottom -> leftの...
5
5
Comment0
【自動化】husky + lint-stagedでコミット時にリンター自動実行の仕組みを作る
はじめに ふらっと行った勉強会でhuskyを用いて、生産性改善をしていた発表を聞いて、 「これ自分の開発チームでもできそう」 と思って、huskyを導入した時の技術メモを分かりやすく記事化しまし...
6
0
Comment0
ブチ切れて覚えるフロントエンド【stylelint編】
こんにちは。 フロントエンドのキャッチアップをすべく書籍なりなんなりを読んでいますが、まあまあの頻度でエラーが出ます。そして調べても原因がパッと出てきません。設定ファイルとか多いし複雑だし、中の...
4
2
Comment0
Nuxt.js(v3)でgenerate納品する前にやっておきたい設定
インストール前に... 各種確認を実施。 リリース情報 node.jsのリリースノート nuxtのリリースノート nuxi(nuxt/cli)のリリースノート vscodeのリリースノート 動作...
34
30
Comment0
Nuxt.js(v2)でgenerate納品する前にやっておきたい設定
Nuxt.js(v2)でgenerate納品する前にやっておきたい設定 Nuxt(v3)版書きました。 リリース情報確認URL Nuxt.jsのリリースノート create-nuxt-appのリ...
426
386
Comment0
【Stylelint】コード検証ツールでCSSの見落としをなくす
この記事は レコチョク Advent Calendar 2023 の3日目の記事となります。 はじめまして。 新卒2年目フロントエンドエンジニアの望月と申します。 音楽はK-POPアイドルが大好...
5
0
Comment0
[Stylelint] PostCSS,Sassで定義したmixinを使用することを強制する
はじめに PostCSSやSCSSを使用して開発するときに、mixinを使って共通のCSSスタイルを繰り返し使用したい時などがあるかと思います。 例えば下記のベンダープレフィック付きのtrans...
1
0
Comment0
Stylelintがv15からPrettierと書式フォーマットルールがごっつんこしなくなったゾ
はじめに リンターとフォーマッターはそれぞれが担う役割が異なります。 リンターは構文チェック、フォーマッタは書式のチェックを行うものです。 CSSに関して、前まではリンターであるStylelin...
10
2
Comment0
ズボラでも綺麗なSCSSを書きたい！(Stylelint v15)
はじめに 2023/3/28 追記 v15対応するように加筆修正しました。 私は、コードを書く上で、 半角スペースがない！ ここは空行入れないと！ ここだけインデント違うんですけど！ とか、割と...
3
2
Comment1
stylelintを基本からまとめてみた【入門】
styelintとは？ チーム全体で使うCSSのエラーを回避し、コードの一貫性を高めるために役立つ モダンなlinterで、スタイルのエラーを自動的に修正してくれ、使用したいルールだけを有効にし...
0
1
Comment0
TypeScript + Next.js で最強の Lint 設定を考えたので誰よりも丁寧に説明する (husky もあるよ)
はじめに どうも、 yoshii です 最近、 Next.js でものを作ることが多く、 Next.js の Lint 設定のテンプレートを作ろうと思いました。 ここで、俺の考えた最強の Lin...
50
51
Comment0
Linaria のセットアップ for Next.js 13
Motivation Next.js 13 では新機能として App Directory が追加された。 この機能を有効化した状態での Linaria(CSS in JS ライブラリ)1 の導入...
3
1
Comment0
106 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles