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

糸を追加 -D stylelint

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

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

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

// .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',
            'フォントスタイル'、
            'フォントの太さ'、
            「行の高さ」、
            「文字間隔」、
            「単語間隔」、
            "色"、
            「テキスト配置」、
            'テキスト装飾'、
            'テキストインデント'、
            'テキストオーバーフロー'、
            「テキストレンダリング」、
            'テキストサイズ調整'、
            'テキストシャドウ'、
            'テキスト変換'、
            「単語区切り」、
            「単語の折り返し」、
            「空白」、
            '垂直配置'、
            'リストスタイル'、
            'リストスタイルタイプ'、
            'リストスタイルの位置'、
            'リストスタイルの画像'、
            'ポインタイベント'、
            'カーソル'、
            "背景"、
            「背景色」、
            "国境"、
            「境界半径」、
            'コンテンツ'、
            '概要'、
            'アウトラインオフセット'、
            「不透明度」、
            'フィルター'、
            「可視性」、
            'サイズ'、
            '変身'、
        ]、
    }
};

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

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

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

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