実践的な経験を共有するためのコードチェックツールstylelintの紹介

実践的な経験を共有するためのコードチェックツールstylelintの紹介

序文

チームで作業する場合、全員のコードにカスタムのフォーマット方法があると、マージを送信するときに多くの競合を解決する必要があることがよくあります。このとき、 eslint + stylelintを使用してチームのコードに制約を加えることができます。

文章

Stylelint は、チームで作業するときにスタイル規則を強制するのに役立つ、強力で最新のコード チェック ツールです。

1. stylelintをインストールする

糸を追加 -D stylelint

2. 設定ファイル

stylelint 検出器を使用するには、構成オブジェクトが必要です。これは 3 つの方法で作成できます。

package.jsonの stylelint プロパティ。

.stylelintrc.jsファイル

stylelint.config.jsファイルによって出力されるjsオブジェクト

いずれかが見つかると、それ以上の検索は行われず、解析が行われ、解析されたオブジェクトが使用されます。 今回は、 .stylelintrc.jsファイルを使用して設定します。

3. stylelintを使う

公式ドキュメントによると、次のように stylelint を実行してスタイルコードを検出できます。

--fixは自動的に修復するために使用されますが、すべての問題を修正できるわけではありません。

// パッケージ.json
「スクリプト」:{
  "lint:css":"stylelint src/**/*.css --fix"
}

落とし穴1:

私のプロジェクトではスタイル言語があまり使われていないからです。 CSSの検出は間違いなく間違っているので、ここでいくつか変更を加える必要があります

// パッケージ.json
「スクリプト」:{
  "lint:css":"stylelint src/**/*.less --fix"
}

このコードを実行すると

糸 lint:css postcss-less

ご覧のとおり、ここにはいくつかの注意事項があり、簡単に言えば、対応する構文を使用してスタイルを解析できるようにするためのものです。そして、対応する構文パーサーをインストールする必要があります。

糸を追加 -D postcss-less

そこでスクリプトを再度修正しました。

// パッケージ.json
「スクリプト」:{
  "lint:css":"stylelint src/**/*.less --fix --custom-syntax postcss-less"
}

さて、これで lint コマンドを通常どおり実行して、スタイル コードをフォーマットできます。次に、lintルールを設定しましょう

4. ルールを設定する

まず、ルールを改善するために3つのnpmパッケージをインストールする必要があります。

糸を追加 -D stylelint-config-standard stylelint-order stylelint-config-css-modules

stylelint-config-standardは stylelint の推奨設定であり、 stylelint-order CSS ファイルをフォーマットするときにコードのプロパティを並べ替えるために使用されます。

stylelint-config-css-modulesスタイルファイルを処理するためのcss-moduleソリューションです。

私の設定ファイルは次のようになります:

// .stylelintrc.js
モジュール.エクスポート = {
    プロセッサ: [],
    プラグイン: ['stylelint-order'],
    拡張: [
        「stylelint-config-standard」、
        「stylelint-config-css-モジュール」
    ]、
    ルール:
        "selector-class-pattern": [ // 命名規則 -
            "^([az][a-z0-9]*)(-[a-z0-9]+)*$",
            {
                "メッセージ": "クラスセレクターはケバブケースである必要があります"
            }
        ]、
        "string-quotes":"single", // 一重引用符 "at-rule-empty-line-before": null,
        "at-rule-no-unknown":null,
        "at-rule-name-case": "lower", // @ ルール名の大文字と小文字を指定します "length-zero-no-unit": true, // 長さがゼロの単位を禁止します (自動的に修正できます)
        "shorthand-property-no-redundant-values": true, // ショートハンド プロパティ "number-leading-zero": "never", // 0 のない小数点
        "declaration-block-no-duplicate-properties": true, // 宣言ブロックの重複プロパティを禁止します。 "no-descending-specificity": true, // 優先度の高いセレクターによってカバーされる優先度の低いセレクターの出現を禁止します。
        "selector-max-id": 0, // セレクター内の ID セレクターの数を制限します "max-nesting-depth": 3,
        "indentation": [2, { // インデントの警告リマインダーを指定する "severity": "warning"
        }],
        "order/properties-order": [ // ルールの順序 "position",
            "トップ"、
            "右"、
            "底"、
            "左"、
            「Zインデックス」、
            "画面"、
            "フロート"、
            "幅"、
            "身長"、
            '最大幅'、
            '最大高さ'、
            '最小幅'、
            '最小高さ'、
            「パディング」、
            'パディングトップ'、
            'パディング右'、
            'パディングボトム'、
            '左パディング'、
            'マージン'、
            'マージントップ'、
            「マージン右」、
            'マージン下'、
            '左マージン'、
            「マージン縮小」、
            'マージントップ折りたたみ'、
            '右余白の縮小'、
            'マージン下部折りたたみ'、
            '左余白縮小'、
            'オーバーフロー'、
            'オーバーフロー-x'、
            「オーバーフロー」、
            'クリップ'、
            'クリア'、
            'フォント'、
            'フォントファミリー'、
            'フォントサイズ'、
            'フォントスムージング'、
            'osx-font-smoothing',
            'フォントスタイル'、
            'フォントの太さ'、
            「行の高さ」、
            「文字間隔」、
            「単語間隔」、
            "色"、
            「テキスト配置」、
            'テキスト装飾'、
            'テキストインデント'、
            'テキストオーバーフロー'、
            「テキストレンダリング」、
            'テキストサイズ調整'、
            'テキストシャドウ'、
            'テキスト変換'、
            「単語区切り」、
            「単語の折り返し」、
            「空白」、
            '垂直配置'、
            'リストスタイル'、
            'リストスタイルタイプ'、
            'リストスタイルの位置'、
            'リストスタイルの画像'、
            'ポインタイベント'、
            'カーソル'、
            "背景"、
            「背景色」、
            "国境"、
            「境界半径」、
            'コンテンツ'、
            '概要'、
            'アウトラインオフセット'、
            「不透明度」、
            'フィルター'、
            「可視性」、
            'サイズ'、
            '変身'、
        ]、
    }
};

今回はprocessors属性は使用しないため紹介しません。興味のある学生は公式ドキュメントを参照してください。

plugins 、方法論、ツール セット、非標準のCSS 機能、または非常に特殊なユース ケースをサポートするためにコミュニティによって作成されたルールまたはルール セットです。

extends既存の構成ファイルを継承します。 (私の設定では、css-moduleと公式推奨の設定が継承されています)

rulesによって検出器が何を検出し、何を解決するかが決まるため、このオプションを使用して対応するルールをオンにし、対応する検出を実行できます。デフォルトがないため、すべてのルールを明示的に構成する必要があります。

注: null はルールを無効にします。公式に推奨されている構成ルールをルールで書き換えることができます。

5. lintファイルを無視する

この時点で、stylelint を使用してスタイル コードを通常どおりフォーマットできます。ただし、プロジェクト内にはフォーマットする必要のないコードがいくつかあることがよくあります。たとえば、antd のスタイルを書き換えるために、オーバーライド ファイルを別途抽出します。明らかに、antd のセレクターの命名は仕様と異なる可能性があるため、ここではフォーマットは必要ありません。したがって、lint を実行するときはこのファイルを無視する必要があります。

.stylelintrc.jsignoreFiles設定できます。

.stylelintignoreファイルを作成します。

/* stylelint-disable */メソッドを使用して、コード ブロックの lint 検出を無視できます。

私は 2 番目の方法を使用します。構成は次のとおりです。

// .stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
*.css
src/styles/antd-overrides.less

6. 自動フォーマット

上記の設定を完了すると、標準化の目的は達成されますが、毎回 lint を実行しなければならない場合、コーディングの負担が間違いなく増加します。スタイル コードを記述するときにコードを自動的にフォーマットする方法は 2 つあります。

stylelint vs-code プラグイン

webpackプラグイン

なぜ webpack プラグインがスタイルコードのフォーマットに役立つのでしょうか? これは、ホットアップデート中に再コンパイルするときに、このプラグインがコードの検出に役立つためです。そして、 .stylelintrc.jsファイルで設定されたルールに従って修正します。 lint エラーがある場合は、プロジェクトを実行できないようにして、lint のないスタイルがコード ベースにアップロードされないようにすることができます。

ということで、このプラグインを使用する際に多くの落とし穴に陥ったので、一つずつお話しします。

プラグインの落とし穴コレクション

一番初めに。 Baidu で見つかったさまざまな偉人の書き方によると、次のように設定するだけで済みます。

新しいStyleLintPlugin({
    コンテキスト: "src",
    設定ファイル: path.resolve(__dirname, './stylelintrc.js'),
    ファイル: '**/*.less',
    エラー発生時: false、
    静か:本当、
    構文: 'less'
})

結末は予想通り、うまくいきませんでした。最も恐ろしいのは、ローカルで実行したときにタスクに問題がないという誤った印象を与え、コードに問題がないと誤って信じてしまうことです。実はこのプラグインは動作しませんでした。

なお、この構成でstylelintのvscode拡張機能を使うと爆発しそうなくらい赤い波がたくさん出てきますよ~~~~。

私の経験を経て、ついにエラーも錯覚もエラー チェックもなく、無視した構成を無視することなく構成を完了しました。

    新しいStylelintプラグイン({
      configFile: path.resolve(__dirname, './.stylelintrc.js'),
      拡張子: ['less'],
      ファイル: 'src/**/*.less',
      修正: 真、
      カスタム構文: 'postcss-less'、
      lintDirtyModulesOnly: true、
      スレッド: true、
      除外: ['node_modules', 'src/styles/antd-overrides.less'],
    })

7. コミット検出

これは比較的簡単です。プロジェクトで以前に eslint 中にコミット検出を構成している場合は、スクリプトに検出スタイルを追加するだけで済みます。構成は以下のとおりです

  「lintステージング」: {
    "*.{ts,tsx}": [
      "eslint --ext js,ts,tsx --fix",
      「git 追加」
    ]、
    "*。少ない": [
      "stylelint --fix --custom-syntax postcss-less",
      「git 追加」
    ]
  }

実際、ここでyarn lint:cssを実行する必要はありません。これを行うと、コミット時にsrcの下のすべてのスタイルが完全に検出されるからです。ただし、変更されたファイルのみを検出する必要があります。

特記事項: --custom-syntax postcss-less必ず追加してください。

以上がstylelint導入時に遭遇した問題の体験談と共有の詳しい内容です。stylelint導入時の実践的な問題の共有について、さらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • CSSコードチェックツールstylelintの使い方を詳しく解説
  • Vue 単一ファイルコンポーネント lint エラー自動修正と styleLint エラー自動修正の詳細な説明
  • stylelint_StyleLint で CSS をチェックする

<<:  ウェブサイトのBGM実装方法

>>:  VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル

推薦する

MySQLデータベースでサポートされているストレージエンジンの比較

目次ストレージエンジンMySQL でサポートされているストレージ エンジン同時実行制御ロック粒子をロ...

MySQL 8.0はJSONを扱えるようになりました

目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...

Linux環境変数の設定戦略の詳細な説明

ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...

vue backtop コンポーネントを実装するための完全なコード

効果: コード: <テンプレート> <div class="back-t...

初心者向けのMySQLデータベースとテーブルDDLの作成と操作の学習

目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...

DockerでRedisを使用するための詳細な手順

1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明

MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...

Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します

まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクト...

Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています

目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...

MySQL インポート csv エラーの 4 つの解決策

これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1:地元のせいエラー:エラー 39...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Linux における nohup と & の使い方と違いの詳細な説明

例:例として、Python コード loop_hello.py を使用します。このコードは、ループ回...

検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法

検索テキストボックスにテキストを設定すると、フォーカスを外すと位置がジャンプしますコードをコピーコー...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...