vscodeのcsscombがうまく働かない

Visual Studio Codeでcsscombを使用してCSSの整形を試みているのですが、思い通りの形になりません。
もともとあったcsscomb.json
(C:\Users\ユーザーネーム.vscode\extensions\mrmlnc.vscode-csscomb-5.3.0\node_modules\csscomb\config\csscomb.json)
の中身を書き換えて以下のようにしています。
setting.json

{
  "csscomb.preset": "csscomb"
}

csscomb.json
10000文字を超えるコードのため、記載できませんでした。コメント欄に追記という形で記載しておきます。

試してみたこと

csscomb build configで生成された

    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "    ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "double",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true,

の部分をsetting.jsonに直接書き込んでみましたが、マウスオーバーで「不明な構成設定」「利用できるクイックフィックスはありません」と出てきます。
また、中身に一切手を加えていないyandexやzenに書き換えてみたところ、作動しました。

環境

Windows10
Visual Studio Code version 1.41
CSScomb version 5.3.0

_jade

2020/01/27 13:29

別アカウントからの追記のためのコメントです。以下にcsscombの中身を記載します。

gedachtnis

2020/01/27 13:31

{ "exclude": [ ".git/**", "node_modules/**", "bower_components/**" ], "remove-empty-rulesets": true, "always-semicolon": true, "color-case": "lower", "block-indent": " ", "color-shorthand": true, "element-case": "lower", "eof-newline": true, "leading-zero": false, "quotes": "double", "space-before-colon": "", "space-after-colon": " ", "space-before-combinator": " ", "space-after-combinator": " ", "space-between-declarations": "\n", "space-before-opening-brace": " ", "space-after-opening-brace": "\n", "space-after-selector-delimiter": "\n", "space-before-selector-delimiter": "", "space-before-closing-brace": "\n", "strip-spaces": true, "tab-size": true, "unitless-zero": true, "vendor-prefix-align": true, "sort-order": [ [ //------------------------------------ 視覚整形モデル "display", "position", "top", "right", "bottom", "left", "float", "clear", "z-index", "direction", "unicode-bidi", "-webkit-writing-mode", "-ms-writing-mode", "writing-mode", "-webkit-text-orientation", "text-orientation", "text-combine-upright" ], [ //------------------------------------ 視覚整形モデル詳細 "width", "min-width", "max-width", "height", "min-height", "max-height", "line-height", "vertical-align" ], [ //------------------------------------ 視覚効果 "overflow", "overflow-x", "overflow-y", "-ms-overflow-style", "overflow-style", "clip", "visibility", "-webkit-marquee-style", "marquee-style", "marquee-loop", "-webkit-marquee-direction", "marquee-direction", "-webkit-marquee-speed", "marquee-speed", "rotation", "rotation-point", "-webkit-clip-path", "clip-path", "clip-rule" ], [ //------------------------------------ フレキシブルボックス "-webkit-box-orient", "-webkit-box-direction", "-webkit-flex-direction", "-moz-box-orient", "-moz-box-direction", "-ms-flex-direction", "flex-direction", "-webkit-flex-wrap", "-ms-flex-wrap", "flex-wrap", "-webkit-flex-flow", "-ms-flex-flow", "flex-flow", "-webkit-box-ordinal-group", "-webkit-order", "-moz-box-ordinal-group", "-ms-flex-order", "order", "-webkit-box-flex", "-webkit-flex", "-moz-box-flex", "-ms-flex", "flex", "-webkit-flex-grow", "-ms-flex-positive", "flex-grow", "-webkit-flex-shrink", "-ms-flex-negative", "flex-shrink", "-webkit-flex-basis", "-ms-flex-preferred-size", "flex-basis", "-webkit-box-pack", "-moz-box-pack", "-ms-flex-pack", "-webkit-justify-content", "justify-content", "-webkit-box-align" "-moz-box-align", "box-align", "-webkit-align-items", "align-items", "-ms-flex-align", "-webkit-align-self", "-ms-flex-item-align", "-ms-grid-row-align", "align-self", "-webkit-align-content", "-ms-flex-line-pack", "align-content" ], [ //------------------------------------ 段組レイアウト "-webkit-columns", "-moz-columns", "columns", "-webkit-column-width", "-moz-column-width", "column-width", "-webkit-column-count", "-moz-column-count", "column-count", "-webkit-column-gap", "-moz-column-gap", "column-gap", "-webkit-column-rule", "-moz-column-rule", "column-rule", "-webkit-column-rule-color", "-moz-column-rule-color", "column-rule-color", "-webkit-column-rule-style", "-moz-column-rule-style", "column-rule-style", "-webkit-column-rule-width", "-moz-column-rule-width", "column-rule-width", "break-before", "break-after", "break-inside", "-webkit-column-span", "column-span", "-webkit-column-fill", "-moz-column-fill", "column-fill" ], [ //------------------------------------ ボックスモデル "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "border", "border-width", "border-color", "border-style", "border-top", "border-right", "border-bottom", "border-left", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "-webkit-box-shadow", "-moz-box-shadow", "box-shadow", "-webkit-box-decoration-break", "-ms-box-decoration-break", "-o-box-decoration-break", "box-decoration-break", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "-ms-text-overflow", "text-overflow", "text-overflow-ellipsis", "text-overflow-mode" ], [ //------------------------------------ 画像値と置換内容 "object-fit", "object-position", "image-resolution", "image-orientation", "image-rendering" ], [ //------------------------------------ 色と背景 "color", "background", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "-ms-background-position-x", "background-position-x", "-ms-background-position-y", "background-position-y", "-webkit-background-clip", "-moz-background-clip", "background-clip", "background-origin", "-webkit-background-size", "-moz-background-size", "-o-background-size", "background-size", "mix-blend-mode", "isolation", "background-blend-mode", "opacity" ], [ //------------------------------------ フィルタ（Filter Effects Module Level 1） "-webkit-filter", "filter" ], 記載しきれなかったためさらに続きます。

gedachtnis

2020/01/27 13:32

[ //------------------------------------ フォント "font", "font-family", "font-style", "font-variant", "font-weight", "font-size", "font-stretch", "font-size-adjust", "font-synthesis", "font-stretch", "font-effect", "font-emphasize", "font-emphasize-position", "font-emphasize-style", "font-smooth", "src", "unicode-range", "-webkit-font-kerning", "font-kerning", "-webkit-font-variant-ligatures", "font-variant-ligatures", "font-variant-position", "font-variant-caps", "font-variant-numeric", "font-variant-alternates", "font-variant-east-asian", "-webkit-font-feature-settings", "-o-font-feature-settings", "font-feature-settings", "font-language-override" ], [ //------------------------------------ テキスト "text-indent", "text-align", "text-decoration", "-webkit-text-decoration-line", "-moz-text-decoration-line", "text-decoration-line", "-webkit-text-decoration-color", "-moz-text-decoration-color", "text-decoration-color", "-webkit-text-decoration-style", "-moz-text-decoration-style", "text-decoration-style", "-webkit-text-decoration-skip", "text-decoration-skip", "-webkit-text-underline-position", "text-underline-position", "letter-spacing", "word-spacing", "text-transform", "white-space", "-webkit-text-emphasis", "text-emphasis", "-webkit-text-emphasis-style", "text-emphasis-style", "-webkit-text-emphasis-color", "text-emphasis-color", "-webkit-text-emphasis-position", "text-emphasis-position", "text-shadow", "-moz-tab-size", "-o-tab-size", "tab-size", "-webkit-line-break", "line-break", "-ms-word-break", "word-break", "-webkit-hyphens", "-moz-hyphens", "-ms-hyphens", "hyphens", "overflow-wrap", "-ms-word-wrap", "word-wrap", "-webkit-text-align-last", "-moz-text-align-last", "-ms-text-align-last", "text-align-last", "-webkit-text-justify", "-ms-text-justify", "text-justify", "hanging-punctuation" ], [ //------------------------------------ ルビレイアウト "-webkit-ruby-position", "ruby-position", "ruby-merge", "ruby-align" ], [ //------------------------------------ テキスト流し込み形状 "-webkit-shape-outside", "shape-outside", "-webkit-shape-image-threshold", "shape-image-threshold", "-webkit-shape-margin", "shape-margin" ], [ //------------------------------------ 生成内容 "content", "quotes", "counter-reset", "counter-increment", "list-style", "list-style-type", "list-style-image", "list-style-position", "icon" ], [ //------------------------------------ 表 "caption-side", "table-layout", "border-collapse", "border-spacing", "empty-cells" ], [ //------------------------------------ 変形 "will-change", "-webkit-transform", "-moz-transform", "-ms-transform", "-o-transform", "transform", "-webkit-transform-origin", "-moz-transform-origin", "-ms-transform-origin", "-o-transform-origin", "transform-origin", "-webkit-transform-box", "transform-box", "-webkit-transform-style", "transform-style", "-webkit-perspective", "perspective", "-webkit-perspective-origin", "perspective-origin", "backface-visibility" ], [ //------------------------------------ アニメーション "-webkit-animation", "-moz-animation", "-ms-animation", "-o-animation", "animation", "-webkit-animation-name", "-moz-animation-name", "-ms-animation-name", "-o-animation-name", "animation-name", "-webkit-animation-duration", "-moz-animation-duration", "-ms-animation-duration", "-o-animation-duration", "animation-duration", "-webkit-animation-timing-function", "-moz-animation-timing-function", "-ms-animation-timing-function", "-o-animation-timing-function", "animation-timing-function", "-webkit-animation-iteration-count", "-moz-animation-iteration-count", "-ms-animation-iteration-count", "-o-animation-iteration-count", "animation-iteration-count", "-webkit-animation-direction", "-moz-animation-direction", "-ms-animation-direction", "-o-animation-direction", "animation-direction", "-webkit-animation-play-state", "-moz-animation-play-state", "-ms-animation-play-state", "-o-animation-play-state", "animation-play-state", "-webkit-animation-delay", "-moz-animation-delay", "-ms-animation-delay", "-o-animation-delay", "animation-delay", "-webkit-animation-fill-mode", "animation-fill-mode", "-webkit-transition", "-moz-transition", "-ms-transition", "-o-transition", "transition", "-webkit-transition-property", "-moz-transition-property", "-ms-transition-property", "-o-transition-property", "transition-property", "-webkit-transition-duration", "-moz-transition-duration", "-ms-transition-duration", "-o-transition-duration", "transition-duration", "-webkit-transition-timing-function", "-moz-transition-timing-function", "-ms-transition-timing-function", "-o-transition-timing-function", "transition-timing-function", "-webkit-transition-delay", "-moz-transition-delay", "-ms-transition-delay", "-o-transition-delay", "transition-delay" ], [ //------------------------------------ ユーザーインタフェース "cursor", "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "-moz-resize", "resize", "nav-index", "nav-up", "nav-right", "nav-down", "nav-left", "ime-mode", "scroll-behavior", "-webkit-user-select", "-moz-user-select", "-ms-user-select", "user-select", "pointer-events" ], [ //------------------------------------ ページメディア "page-break-before", "page-break-after", "page-break-inside", "orphans", "widows", "size" ], [ //------------------------------------ IE独自 "-ms-zoom", "zoom", "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", "filter:progid:DXImageTransform.Microsoft.gradient", "-ms-interpolation-mode" ] ] }

行動規範の内容に同意します

回答1件

ベストアンサー

VS CODEでCSSのフォーマットをするまで
こちらの記事でCSScombの使い方を紹介してますが、
CSScomb Build Configで作った物でcsscomb.jsonを置き換えるとありますね。

投稿2020/01/27 13:37

yureighost

総合スコア2183

gedachtnis

2020/01/27 13:55

はじめまして。ご回答ありがとうございます。ご紹介して頂いたリンク先の ④作成したフォーマットを読み込む完成したjsonファイルを下記パスにあるjsonファイルと置き換える。なお、元のものはバックアップをとっておくと良い。 C:\Users\ユーザーネーム.vscode\extensions\mrmlnc.vscode-csscomb-5.2.2\node_modules\csscomb\config\csscomb.json というところでしょうか？それでしたら私も C:\Users\ユーザーネーム.vscode\extensions\mrmlnc.vscode-csscomb-5.3.0\node_modules\csscomb\config\csscomb.json のファイルに上記のコードを記述しております。言葉足らずで申し訳ございませんでした。質問内容の方を修正いたします。

yureighost

2020/01/27 15:34

こちらでも拡張機能をインストールして試してみました。思ったのですがcsscomb.jsonファイルが巨大すぎではないでしょうか。私の方はリンクで貼った記事では置き換えと書いてあったので、 CSScomb Build Configでできた物に差し替えたのでcsscomb.jsonファイルはたったの26行ですが、それで正常に動作していると思います。この辺りもう一度試し直してみてください。

gedachtnis

2020/01/31 11:44

お返事にお時間いただいてしまい申し訳ございません。原因は解明しませんでしたが、もう一度初期設定のままのcsscomb.jsonに置き換え、再びこちらで設定しようとしていた設定に変更したところ、無事に設定が出来ました。実際に試していただいたりと、ご親切にしてくださりありがとうございました。

行動規範の内容に同意します