備忘録

【SCSS】StylelintとPrettierを使ってSCSSの自動整形

投稿日 :
最終更新日 :
Series: Hugoでサイト構築
Tags: SCSS

Stylelint

バージョン

16.4.0

インストール

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recess-order

設定ファイル

.stylelintrc.yaml
extends:
  - stylelint-config-standard-scss
  - stylelint-config-recess-order
  - stylelint-prettier/recommended
rules:
  block-no-empty: true
  no-duplicate-selectors: null

Prettier

バージョン

3.2.5

インストール

npm install --save-dev prettier stylelint-prettier

設定ファイル

.prettierrc.yaml
tabWidth: 4

Stylelint実行

npx stylelint **/*.scss

npx stylelint --fix **/*.scss
package.json
"scripts":{
    "lint": "stylelint **/*.scss",
    "fix": "stylelint --fix **/*.scss"
}
npm run lint

npm run fix

関連記事

  • 【Hugo】HugoでSass(SCSS)を使う
    前提 環境: Windows Hugo: v0.125.4 Dart Sassのインストール Hugo ExtendedにはLibSassが含まれているが、非推奨となっているため、Dart Sassをイン
  • 【Hugo】Hugoの基本的な文法
    前提 Hugo: v0.125.4 変数 定義 {{ $foo := "foo" }} 代入 {{ $foo = "bar" }} テンプレート内での使用 <p>{{ $foo }}</p> 比較 Eq arg1 == arg2 {{ eq 1 1 }} # true {{ eq 1 2 }} # false {{ eq "foo" "foo" }} # true {{ eq "foo" "bar" }} # false 参考
  • 【Hugo】Hugoの環境構築
    前提 環境: Windows Hugo: v0.125.4 インストール バイナリをダウンロードして配置 Githubからバイナリをダウンロード Releases latest ダウンロードしたファイルを解凍し、任意の