2019年11月26日こんにちはフリーランスWebディレクター・エンジニアののせっちです。コーディングは肉体労働です。そこで自動化できるとこはどんどん自動化し作業を効率化させることが重要です。Prettier、Stylelintを使ってSCSSファイルを自動整形させる方法を知ったので、プラスαで自分なりの設定を追加しました。今回の記事は僕の設定ですが、やり方がわかれば自分なりのカスタマイズが可能です。こちらの記事が神でした!https://qiita.com/y-w/items/bd7f11013fe34b69f0df上記をベースに僕の記事では下記の設定を目指します。codeと連携し、保存時に自動整形を走らせるアルファベット順に並べるcalcの文法チェック同一セレクタでプロパティが重複していないかチェックそれではいってみましょう。本家さんで設定を行います。手順通りに行えば簡単に設定できます。僕のGulpの設定ではSCSSからCSSへコンパイルする際、アルファベット順にしています。よって、SCSSを書く段階からアルファベット順にします。(これが一番の目的)Gulp4で作業爆速化!オススメ設定を公開する【コピペOK】こんにちは!フリーランスエンジニアのせっち@yukinouz1です。コーダーが知っておきたいツールの一つとしてGulpがあります...stylelint-orderをダウンロードアルファベット順に並べるためにstylelint-orderをインストールします。stylelint-order公式https://www.npmjs.com/package/stylelint-order.stylelintrc.jsonは以下のようになります。※最低限の設定は済んでいる前提で追記分を記載します。]}これでアルファベット順に並べることができます。その他の設定を追加stylelint-scssを使えば、更に様々なルールを加えることができます。設定は厳格にしようと思えばいくらでもできますが、厳格すぎると逆にストレスになり作業効率が落ちるので、最低限のみ加えています。できることを知っておけば、いくらでも付け加えればOKです。今回加えたルールは下記です。calcの文法チェック同一セレクタでプロパティが重複していなかチェック二つとも普通にミスると致命的だし、エラーチェックしてくれたら助かる、というものです。stylelint-scss公式https://www.npmjs.com/package/stylelint-scss.stylelintrc.jsonは以下のようになります。]}追加した設定は下記です。同一セレクタ内で同じプロパティが使われていないかをチェックその他の設定は公式から確認できます。Rulesから自分好みの設定を選んでコピペするだけです!https://stylelint.io/stylelint-config-generatorというのがあり、ポチポチするだけでルールを追加でき、出来上がったコードを最後にコピぺするだけです。間違えてルールを追加してしまったら削除できないっぽい(?)ので注意が必要。https://maximgatilin.github.io/stylelint-config/まとめ・Stylelint、Prettierを使って自動整形させることが可能。・アルファベット順に並べ換えることができる。【Gulp4】package.jsonをアップデートして最新の状態を維持...WiFi中継器を使って自宅の2階でもWiFiを爆速化させる【レビュー】のせっち@バンコク永住系フリーランスバンコク在住6年のフリーランスディレクター兼エンジニアです。早稲田卒でお堅い商社で7年勤務→バンコク駐在→iSara4th普段はバンコクで生活費を下げつつ、Web制作中心に生きています。