タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になりそうな実装を未然に防ぐ 次のようなルールを強制し、コーディングスタイルを共通化してコードに一貫性を持たせる font-weightの値は、boldといったキーワード指定を強制する 疑似要素のコロンは2つに強制する（::before）など ICSでは複数人で開発することが多いため、スタイルシートの一貫性のためにStylelintが役立っています。HTMLコーディングが多い場面で恩恵を得られるツールです。 この記事ではStylelintの導入方法と、必要な設定について紹介します。
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
この記事は、 「ESLintとか使ってたけど、もしかしてCSS向けにもあるのでは...？ あるやんけ！あとはこれをESLintみたいな感じでVSCodeでいい感じに保存時にフォーマットかけられれば死角なしや！」 っていう人向けです。 環境 VSCode 1.12.2 Node.js 14.13.0 (あまり関係ないです) 導入 Nodeのセットアップ まずは、必要なパッケージをインストールしていきます。 yarn add -D stylelint prettier stylelint-prettier stylelint-config-prettier OR npm install --save-dev stylelint prettier stylelint-prettier stylelint-config-prettier これでリンターのインストールが終わりました。 次に、.sty
こんにちは。Eight でフロントエンドエンジニアをしている鳥山（@pvcresin）です。 ついこの間新卒で入ったと思ったら、もう 2 年目に突入していました。時が経つのは早いものです。 今回は Eight の Web フロントエンドで使っているスタイルのリンター（コードの静的解析ツール）を SCSS-Lint から stylelint に移行した話をしたいと思います。 SCSS-Lint Eight のフロントエンドではスタイリングに Sass（SCSS 記法）を使用しています。 そして、そのリンターとして SCSS-Lint を採用していました。 それをコードレビュー自動化ツールの Sider（旧 SideCI）と組み合わることで、PR（プルリクエスト）上で SCSS ファイルをチェックするように設定していました。 これによりスタイル定義の品質を担保していました。 SCSS-Lint
Stylelintとは CSSのコードをチェックするツール。 例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。 Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。 Stylelintのインストール方法 npmを使用するので、例としてターミナルで以下のコマンドを実行してファイルを必要な作成する。 mkdir css-sample; cd css-sample; touch index.css .stylelintrc.json; npm init -y; 関連ファイルを作成したらStylelintとルール(stylelint-config-standard)をインストールする。 npm i -D stylelin
はじめにこんにちは。胃もたれすることが増えてきたような気がしている kimizuy です。今回は Stylelint のバージョンを 13 から 14 に上げる機会があったので、そこで得た知見をもとに v14 の変更点や設定のサンプル（SCSS と CSS-in-JS）をご紹介します。 前提VSCode で普段開発しているのですが Stylelint の拡張機能 に以下の警告が出るようになっていました。 Stylelint version 13.12.0 is no longer supported. While it may continue to work for a while, you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration gui
CSSプロパティの並び順や細かい記述ルールを手動で整える時代は終わりました。stylelintを使って並び順やフォーマットを自動で調整する方法を、黒い画面が苦手な方にもなるべくわかりやすく解説します。 はじめに チームでの開発だけでなく、ひとりで開発している場合であっても、一貫したルールに基づいてコーディングすることは重要です。 CSSの開発においても プロパティの順番はアルファベット順にすること 値の先頭の「0」を省略すること（例 0.8em → .8em） といったようなルールのある現場は多いと思います。 こういったルールを、ドキュメントに書き起こして、手動でCSSを整えたり並び替えて、コードレビューで指摘して、、、、 こんな苦労をしている方がいれば、ぜひ伝えたい。 その作業、もう人間がやる必要はありません。 この記事でできるようになること Visual Studio Codeを使って
Nuxt + Stylelint + Prettier + VSCode で、保存時に SCSS を自動フォーマットする 動作確認した環境 OS Windows 10 Pro Editor VisualStudioCode ( v1.14.1 ) Package Manager Yarn Packages Create Nuxt App ( v2.12.0 ) Nuxt ( v2.11.0 ) Stylelint ( v13.0.0 ) やることまとめ Nuxt パッケージ導入 yarn create nuxt-app # 設定は自由に yarn add -D node-sass sass-loader yarn add -D [email protected] @nuxtjs/stylelint-module yarn add -D stylelint-config-standard st
stylelintをSCSSとVSCode(Stylelint拡張機能)に導入しようと思ったんだけど、14系[1]には破壊的変更[2] が含まれてるらしく、ドキュメント通りにやってもエラーが出てしまったり、ネットで検索しても出てくる記事が13系以前のものだったりして苦労した。何とか導入することができたのでどうやったかを記録したいと思う。 やりたいこと SCSSにstylelintを導入する yarn stylelint hogehoge.scssとかやったらSCSSファイルにstylelintを実行できる プロパティのソートもやってくれる VSCodeにstylelint拡張機能を導入する エディタ上にリアルタイムでエラーを出してくれる 保存時に自動で修正してくれる 結論 インストール yarn add -D stylelint stylelint-config-standard-scss
VSCodeでESLintとPrettier、そしてStylelintの環境構築について改めて見直しました。 ここ最近までESLintやStylelintのフォーマット機能を使用しておりPrettierを使っていなかった残念なタイプの僕ですが、今やLintもフォーマットも分業制、餅は餅屋、というわけで、Prettierの使用の必要性を改めて理解し、今回の見直しに至った次第です。というわけで、見直したバージョンの環境構築の備忘録を兼ねて、残しておきます。 はじめに 「フォーマット？Prettier？別にESLintとかStylelintのフォーマット機能使えばいいんじゃん。Prettierをわざわざ使う理由は？カッコつけ！？」とかマジで思っていたし、いろんな文献読んでも腑に落ちませんでした。 というか、Prettierを使っていた時期もあったんですが、まぁ当時はまだESLintやStylel
こんにちは！のせっち@nosecchi01です。 Stylelintをv13からv14へのメジャーアップデートがありました。 かなり大幅な変更がありましたので、アップデートは慎重に行う必要があります。 特に既存プロジェクトでは、既に書いているコードがあり、調整が大変だったので、注意すべき点をご紹介します。 Stylelint v14での変更点 主な変更点はStylelint公式のMigration Guideを読むのが一番確実です。
VSCodeはビルドインの設定や拡張機能が豊富なおかげで、カスタマイズしていくとどの自動整形が働いているのか分かりづらくなってくると思います。 ゆえに「なんとなくそれっぽく整形が効いているけど、カスタマイズのやり方はわからない」という状態だったりするのではないでしょうか。筆者もそれっぽく整形が効けばいいかな程度だったこともありました。 今回手元のプロジェクトでStylelintにおける特定のルールの有効・無効をしっかりカスタマイズする必要がでたので、改めて設定にチャレンジしてみました。 ※執筆中にStylelint14.0.0と拡張v1.0.3がリリースされ、一部の仕様が変更になりましたので、要所要所にて加筆しています。お試しになる際にはお気をつけてください。 Stylelintとは List of rules | Stylelint stylelintのルール簡単説明（v5.4.0） 「
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
