14:23・2021/12/01
prettier、stylelintを設定してCSSをきれいにするぞ～！【2022年8月】
00:23・2022/08/14 公開
00:23・2022/08/14 更新
導入する前に
prettier(プリティア)ってなに？
インデントやカンマやその他コードの見た目をきれい(prettier)にしてくれるよ！
CSSだけでなく、様々な拡張子のファイルに対応しているよ。
stylelint(スタイルリント)ってなに？
CSSコードの文法などをチェックしてエラー出したり修正したりしてくれるよ！
拡張パックをインストールすればSCSSなどにも対応させられるよ。
それ要る？
なくても困らないけど、あって困ることはないよ！
導入後は目に優しいCSSコードが出来上がってちょっとうれしいよ。
チームでやるならお互いの生産性のためにあったほうがいいかもね。
重複するルールがあったらどうなっちゃうの？
問答無用でprettierのルールに上書きされるよ！
VSCodeではいまのところ整形機能の実行順を指定できないから、stylelintのルールをprettierのルールより優先することはできないよ！
VSCodeに導入したの？
そうだよ(即答)
プロジェクトごとに設定を変えたいんだけどワークスペースごとに設定できる？
できるよ！
なので、VSCodeのユーザーに設定する場合と、ワークスペースに設定する場合の2パターンの解説を書いたよ！←えらい
prettierの導入
Notionのリンク(こっちのほうが見やすいので掲載)
https://210neon.notion.site/prettier-c568f4f678654db7840dd38a3a8bc726
以下Notionのコピペとより詳しい解説です。
prettierのルール一覧
https://prettier.io/docs/en/options.html
エディタに導入する(VSCode)
VSCode拡張機能(esbenp.prettier-vscode)のインストール
拡張機能をインストールする場合
→複数同じ名前のものがあるので、一番人気の高いものをDLするように。
setting.jsonに下記を設定して黄色の波線がつかなければOK
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
}ユーザー設定(setting.json)
{
//prettierの設定
"prettier.semi": true,
"prettier.singleQuote": false,
"prettier.quoteProps": "as-needed",
"prettier.jsxSingleQuote": false,
"prettier.trailingComma": "es5",
"prettier.bracketSpacing": true,
"prettier.arrowParens": "always",
"prettier.requirePragma": false,
"prettier.insertPragma": false,
"prettier.proseWrap": "preserve",
"prettier.htmlWhitespaceSensitivity": "css",
"prettier.vueIndentScriptAndStyle": false,
"prettier.embeddedLanguageFormatting": "auto",
"prettier.printWidth": 100,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.endOfLine": "auto"
}特定の言語(拡張子)でprettierをオフにする(setting.json)
"[scss]": {
"editor.defaultFormatter": null
},ワークスペースに導入する
インストール
npm i prettierワークスペース設定(.prettierrc)
{
"semi": true,
"singleQuote": false,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"embeddedLanguageFormatting": "auto",
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"endOfLine": "auto"
}特定のファイルに対してprettierをオフにする(.prettierignore)
**/scss/**/*.scssstylelintとの競合
※stylelintの設定よりもprettierの設定が優先されるので、 ルールまわりでstylelintのエラーがでたら下記のパッケージを利用してprettierとの競合を確認して下さい。
https://github.com/prettier/stylelint-config-prettier
stylelintの導入
Notionのリンク(こっちのほうが見やすいので掲載)
https://210neon.notion.site/stylelint-for-SCSS-d39fb51a5c784e1cb0f6e99b41a67981
以下Notionのコピペとより詳しい解説です。
ルール一覧
問題(赤波線)が出たときはルールを調べて追記する。
コンソールの下線部をクリックするとドキュメントサイトに飛べます。
stylelint
https://stylelint.io/
ここでルールを検索して出なかったら下のSCSSのやつにあるはず
stylelint-config-standard-scss(SCSSに対応させる場合)
https://github.com/stylelint-scss/stylelint-config-standard-scss/blob/HEAD/index.js
このファイルの中の設定をコピペするとエラーが消えるかも
どちらのエラーでもなかったらきっとprettier
stylelintはワークスペース単位でしか設定できません。
ワークスペースに導入する
最低限必要なpackage
"sass": "^1.53.0",
"stylelint": "^14.9.1",
"stylelint-config-recess-order": "^3.0.0",//CSSのスタイルの並び順を指定する
"stylelint-config-standard-scss": "^4.0.0"//SCSSファイルに対応させる適宜必要なバージョンをインストールしてください。(バージョンはチームで揃えたほうがいいです)
SCSS対応を含めたルールセット(.stylelintrc.js)
現在ぼくが使用しているものです。
module.exports = {
extends: ["stylelint-config-standard-scss", "stylelint-config-recess-order"],
rules: {
"at-rule-empty-line-before": [
"always",
{
except: ["blockless-after-blockless", "first-nested"],
ignore: ["after-comment"],
ignoreAtRules: ["else"],
},
],
"at-rule-no-unknown": [
true,
{
ignoreAtRules: ["include", "mixin", "each", "use", "forward", "charset","for"],
},
],
"block-no-empty": true,
"color-no-invalid-hex": true,
"color-named": "never",
"color-hex-case": "lower",
"comment-no-empty": true,
"comment-empty-line-before": "always",
"comment-whitespace-inside": "always",
"declaration-block-no-duplicate-properties": true,
"declaration-block-no-shorthand-property-overrides": true,
"declaration-block-no-redundant-longhand-properties": true,
"declaration-bang-space-after": "never",
"function-calc-no-unspaced-operator": true,
"function-url-quotes": "always",
"function-name-case": "lower",
"function-max-empty-lines": 0,
// "function-parentheses-space-inside": "always", //(prettierで圧縮されるのでnullが正しいようです)
"font-family-no-duplicate-names": true,
"font-family-name-quotes": "always-unless-keyword",
"length-zero-no-unit": true,
"media-feature-name-no-unknown": true,
"no-duplicate-at-import-rules": true,
"no-duplicate-selectors": true,
"no-descending-specificity": null,
"no-empty-source": true,
"no-extra-semicolons": true,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"property-no-unknown": true,
"property-case": "lower",
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-no-unknown": true,
"selector-pseudo-element-colon-notation": "double",
"selector-type-no-unknown": true,
"selector-type-case": "lower",
"selector-class-pattern": null,
"selector-id-pattern": null,
"string-no-newline": true,
"string-quotes": "double",
"shorthand-property-no-redundant-values": true,
"scss/at-rule-no-unknown": true,
"time-min-milliseconds": 100,
"unit-no-unknown": true,
"unit-case": "lower",
"value-keyword-case": "lower",
"selector-id-pattern": null, // idでkebab-case以外も許容
"selector-class-pattern": null, // classでkebab-case以外も許容
"keyframes-name-pattern": null, // keyframesでkebab-case以外も許容
"scss/at-mixin-pattern": null, // mixinでkebab-case以外も許容
"scss/dollar-variable-pattern": null, // $変数でkebab-case以外も許容
"scss/percent-placeholder-pattern": null, // %placeholderでkebab-case以外も許容
"scss/at-extend-no-missing-placeholder": null, // @extendで%placeholder以外も許容
"max-line-length": null, // 120文字を超える行を許可
"max-empty-lines": null, // 連続する空白行を許可
"no-descending-specificity": null, // 詳細度の高いセレクタが前に来るのを禁止(ネストを多用する場合はnull推奨)
"scss/double-slash-comment-whitespace-inside": null, // autofixがないので修正が面倒だったらnull
},
};特定のファイルに対してstylelintをオフにする(.stylelintrc.js)
ignoreFiles: ["**/scss/**/*.scss"],なかなかパッケージの全貌を知るのに苦労しましたが、コミュニティが運営されているところを見れたのでいい経験になりました。
Notionも最近使い始めたのですが、WordPressを開いてブログを書く行為がUX的に悪いのに気づいた(し、見た目もあんまり良くない……)ので、アップデートしたいなと思いました。まる。
