こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になりそうな実装を未然に防ぐ 次のようなルールを強制し、コーディングスタイルを共通化してコードに一貫性を持たせる font-weightの値は、boldといったキーワード指定を強制する 疑似要素のコロンは2つに強制する（::before）など ICSでは複数人で開発することが多いため、スタイルシートの一貫性のためにStylelintが役立っています。HTMLコーディングが多い場面で恩恵を得られるツールです。 この記事ではStylelintの導入方法と、必要な設定について紹介します。
What's in a price? How to price your products and services
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ち」3ます。 CSSは素のままだとエラーを吐かず、どこに原因があるのかを探すのに苦労しますが、stylelintを使うことで基本的な構文エラーやスタイルの重複、タイポなどがあると、エラーを検出し、どこのファイルの何行目に問題があるのか教えてくれます。一部の書式に関する規則に対しては自動的に修正することもできます。設定できるルールは170以上あり、柔軟にカスタマイズできます4。また、GitHub5などでも使われ、CSSだけではなく、SCSSやSass、Reactのstyled c
2021/05/20追記 各ルールについての説明部分は最新の情報に基づいた内容ではありません。 適宜、一次情報であるstylelintのドキュメントをご参照ください。 フロントエンドエンジニアの松田です。 先日、副業で開発に参加しているFindyでstylelintの導入を行ったので、導入方法と各ルールについてまとめてみました。 stylelintとは eslint, tslint等と同じようなCSSのlinterです。導入することによって、詳細度や!importantの使用制限など、CSSがカオスになってしまうのを防いでくれる効果があります。 導入方法（技術面） User Guideに書かれているように、stylelintを利用する方法は幾つかあります。チーム開発する場合はCLIツールとして導入し、npm scriptsで実行できるようにするのが良いでしょう。各種CIツールで実行する際に
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
stylelintの設定ファイル
stylelint.config.js �� ] V `��\ V module.exports = { plugins: ['stylelint-order', 'stylelint-scss'], rules: { indentation: 2, 'color-hex-case': 'lower', // hex値は小文字指定（大文字を禁止） 'color-hex-length': 'short', // hex値は短い表記（冗長な表記は禁止） 'color-named': 'never', // 名前付きカラー指定を禁止 'color-no-invalid-hex': true, // 無効な16進数の色指定を禁止 'function-comma-space-after': 'always-single-line', // 単一行のカンマ後には空白が必要 'function-comm
こんにちは！のせっち@nosecchi01です。 Stylelintをv13からv14へのメジャーアップデートがありました。 かなり大幅な変更がありましたので、アップデートは慎重に行う必要があります。 特に既存プロジェクトでは、既に書いているコードがあり、調整が大変だったので、注意すべき点をご紹介します。 Stylelint v14での変更点 主な変更点はStylelint公式のMigration Guideを読むのが一番確実です。
GitHub - prettier/stylelint-prettier: Stylelint plugin for Prettier formatting
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.
Sass(SCSS) の stylelint ルールは stylelint-config-sass-guidelines に任せたい
こんにちは森田です。 Sass(SCSS) でスタイリングする場合、弊社では必ず stylelint を使いコードの一貫性を保ちます。 弊社には長年継ぎ足しで使われた秘伝のルールがあるのですが、Stylelintは更新性が高く使えなくなるルールが出てきたりとまれにメンテナンスが必要になります。 なので、今後は基本的なルールと更新性は stylelint-config-sass-guidelines に任せて使っていこうと考えています。 インストール方法npm インストールインストールは npm から stylelint 本体、postcss、stylelint-config-sass-guidelines を dev-dependency にインストールします。 postcss も必要になるみたいなのでインストールしましょう。
先々週から開発タスクをやりながらstylelint v14へのマイグレーションを少しづつ行なっていました。 SCSSを使っている方なら手順書にサンプルが記載されているのですんなり移行できるのではないかなと思いますが、 私の場合ですとCSS-in-JSで開発をしており、CSS-in-JSをstylelint使ってlintをできるようにするのに手順書に具体的なアプローチ方法がなかったので苦戦しつつもやり遂げたので以降に関するポイントをご紹介していけたらと思います。 公式サイトのマイグレーション移行手順はこちらです。 stylelint.io v14では以下の構文が含まれていないそうです。 Stylelint no longer includes the syntaxes that: parse CSS-like languages like SCSS, Sass, Less and Sugar
Sassファイルの整形（Lint）をしてくれるツールはいろいろありますが、中でもstylelintがいい感じなので好んで使っています。 "at-rule-no-unknown" でエラー発生 ところが、"at-rule-no-unknown"すなわち「標準的でない@-規則」というルールにおいて、これを適用させたくなかったのでfalseを設定したところ、Invalid Option: Unexpected option value "false" for rule "at-rule-no-unknown"と怒られてしまいました。
前提 Git Node.js & npm ESLint などの Lint ツール 目的 lint-staged を使うと、簡単にコミット前のファイルの Lint を強制できる。 .git/hooks/pre-commit ファイルに直接書いても良いが、 pre-commit などのツールと連携させることで、package.json に設定を一元化できる。 方法 私のおススメは ESLint と stylelint を使った の設定。
stylelint-config-standard を入れようとしていたが、scss 用の拡張を加えた stylelint-config-standard-scss を入れる。Stylelint v14 からデフォルトではscss 等のcss 以外の言語のlint ができなくなり、scss をlint したい場合はscss 拡張が必要になったため。stylelint-config-standard とstylelint-config-recommended-scss を拡張しているので、scss を使う場合はこれを入れておけばOK（たぶん） 次はprettier 関連。 書式の規則はPrettier、構文エラー等はStylelintと分業させると良いらしい。 prettier 関連のライブラリ stylelint-config-prettier prettier と重複するルールをオフにす
アクセシビリティに関するリンターのルールまとめ 2021年1月版
clickイベントがキーボードで発火しない要素に対してclickイベントだけでなく keyDown keyPress keyUp イベントも実装するように促す
Nuxt3の開発用テンプレート作った
{ ..., "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "lint:js": "eslint --ext \".js,.vue,.ts\" --ignore-path .gitignore .", "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore", "lint:prettier": "prettier --check .", "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier", "lintfix": "prettier
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ
React+TSプロジェクトで便利だったLint/Format設定紹介
CSSのコード品質向上のためのStylelint入門 - ICS MEDIA
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう！
stylelintの導入とVS Codeの設定の方法 - Qiita
stylelintの導入方法と各ルール解説 - Qiita
Stylelintを使うなら必ず知るべき設定方法と99のルール
Stylelint 14 での SCSS と CSS-in-JS の設定方法
既存プロジェクトをStylelint v14にアップグレードするときに注意すべき点
stylelint v13 → v14へマイグレーションしました - Sassyブログ
stylelint "at-rule-no-unknown" ルールでエラー - Qiita
コミット前に Lint を強制するなら lint-staged が便利 - Qiita
Stylelint のconfig を決める