Atomエディタ投げメモ_(10)CSScomb強化版[CSS/LESS/SASS]_html/css_WEB-ITnose

CSScomb とは

公式 Web サイトには 1 つだけ説明があります:

コードを美しくする (コードをより美しくする)

わかりやすく言うと:

CSScomb は CSS コードをタイプセットするために使用されます...それは可能ですNodejs に依存するフォーマットプラグインと言われています

CSScomb を入手しますか? これは今日のトピックではありません

公式 Web サイト: CSScomb

Sublime/Atom/brackets などの多くのエディターをサポートします

サードパーティCSScomb? これが今日のトピックです

昨日CSS3についての記事を書きました...コードが少しわかりにくいことがわかりました...手動での組版は少し...それで私はatomプラグインライブラリに行きましたcsscomb を探します

Atom -> 設定 -> インストール -> csscomb

いくつかの CSScomb プラグイン パッケージを見てみましょう (3 つの青い丸の機能は基本的に同じです、最初のものは公式です、、、今日の主人公は黄色です）

atom-css-comb

特徴

CSS/LESS/SASSのフォーマットをサポート

カスタムフォーマットをサポート

Built- 3 つのタイプセット スタイル (Yandex/CSScomb/zen)

Yandex の CSS 仕様... エンジンを検索しました... 非常に強力なようです...しかし私には適していません

CSScomb タイプセット スタイル

zen ( Emmet)

基本的な使用法

デフォルトのショートカット キーは 2 つあります [マウスを使用してプラグイン呼び出しをクリックすることもできます]

ctrl + alt + c[競合]

ctrl + alt + shift + c[競合]

レイアウトスタイルを切り替え(既成の構成)、説明と画像を読む

パッケージ -> CSS Comb -> 設定

デフォルトのショートカットキーパラメータ

'atom-text-editor':  'ctrl-alt-c':'css-comb:comb'

高度な使用法

対象ユーザーグループ: トスを上げたり、自分のスタイルを持っている友達。これは表示用です。詳細については公式ドキュメントを参照してください。 カスタマイズ

上記の

共通設定

を参照してください、カスタム構成 [構成ファイルの編集] を選択します、 カスタム パラメーター ページに入ります。形式は JSON で書かれています。

{    "help": "About options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md",    "exclude": ["node_modules/**"],    "verbose": true,    "always-semicolon": true,    "block-indent": " ",    "colon-space": ["", " "],    "color-case": "lower",    "color-shorthand": true,    "element-case": "lower",    "eof-newline": true,    "leading-zero": false,    "quotes": "single",    "remove-empty-rulesets": true,    "rule-indent": " ",    "stick-brace": "\n",    "strip-spaces": true,    "unitless-zero": true,    "vendor-prefix-align": true }

カスタム パラメーターの完全なリスト

: Click me I click me