SCSS-LINTを開始します

SCSS-LINT：SASSコードを整頓し、一貫性を保つための武器

コアポイント：

SCSS-LINTは、疑わしい使用状況をマークし、StyleSheetを簡単に読みやすくすることにより、SASSコードベースのきちんとしたものを維持するのに役立つ強力なRuby Gemツールです。使用する前にインストールする必要があり、コマンドラインツールの名前は

です。

• SCSS-LINTの構成には、プロジェクトルートディレクトリのYAMLファイルを介して従うルールを定義することが含まれます。このファイルは通常、scss-lintに名前が付けられ、すべてのコードスタイルのチェック構成が含まれています。コードスタイルのチェックプロセスをカスタマイズするために、
や
• などのオプションをSCSS-LINTに渡すことができます。 .scss-lint.yml --configコードを整頓するためにリモートリポジトリにコミットする前に、事前コミットフックを使用してコードを確認することをお勧めします。これは、--excludeファイルを介してGitフックをサポートする軽量NPMパッケージでセットアップできます。 SCSS-LINTがこのプロセス中にエラーを返した場合、コミットは中止され、コードを修正するためにコードを修正する必要があります。
• package.json実行可能なコードの作成は、ウェブサイト、アプリケーション、またはソフトウェア開発の最も簡単な部分です。プロジェクト全体をスケーラブル、テスト、適切に文書化し、貢献しやすくすることは難しい部分です。
その一部は、クリーンで一貫したコードベースを持つことです。醜い「奇妙な」コードを維持することは、コードベースをより簡単かつ速く維持するため、間違いなく快適なものではないためです。コードがソフトウェアのどこでも同じように見える場合、すぐにそれがどのように書かれているかに慣れます。

SASS側では、コードを整頓して一貫性にするためにできることがいくつかあります。 1つ目は、CSSガイドやSASSガイドなど、いくつかのコーディングガイドに従うことです。もう1つは、コードベースを確認することです。

単語

をチェックしているという言葉に慣れていない場合は、Wikipediaの説明を次のとおりです。

コンピュータープログラミングでは、「Check」とは、最初にCソースコードの疑わしい構造（おそらくエラー）を示す特定のプログラムを指します。現在、この用語は、あらゆるコンピューター言語で記述されたソフトウェアで疑わしい使用法をマークするツールを参照するためによく使用されています。

SASSの疑わしい使用法は何ですか？ 「疑わしい」をどのように定義するかに依存しますが、より広く、StyleSheetが読みやすく、複雑ではないことを確認するだけの問題かもしれません。たとえば、セレクターのネストの使用を単一のレベルに制限します。

SASSコードベースを確認するには、SCSS-LINTと呼ばれる優れたツールがあります。それでは、悪いニュースについて話しましょう。SCSS-LINTはRubyの宝石です。どのように実行しても、この宝石をプリインストールする必要があります（CLI、GRUNT、GULP ...）。良いニュースは、いくつかの素敵な人々が現在SCSS-LINTのNPMパッケージバージョンを開発しているので、遅かれ早かれ、この退屈な余分なステップを取り除くかもしれません。わかりました、始めましょう：

$ gem install scss_lint

注：命名の理由により、宝石の名前はscss_lintですが、コマンドラインツールは実際にはscss-lintです。ライブラリの名前はSCSS-LINTです。それは十分に複雑ではないからです…：）

CLIツールを始めましょう

SCSS-LINTには多くのオプションがあります。実際、最初は少し圧倒されるかもしれません。幸いなことに、頻繁に多くのオプションを使用していないので、これらのオプションを見てみましょう。

-cまたは--configオプションを使用すると、パスを構成ファイルに渡すことができます。これにより、コードベースに適用するルールを定義することができます。たとえば、

$ scss-lint . --config .scss-lint.yml

プロジェクトに応じて、コードスタイルのチェックプロセスから特定のファイルまたはフォルダーを除外するために-eまたは--excludeオプションを使用することができます。たとえば、サードパーティライブラリまたはノードモジュールを確認したくない場合があります。たとえば、

$ scss-lint . --exclude ./node_modules/**/*

--excludeのより複雑な使用については、--configに渡された構成ファイルで定義できます。

他にはオプションがありますが、これで開始するのに十分だと思います。

最初のパラメーターは

に渡されます。実行するフォルダーです。省略した場合、デフォルトはscss-lint、つまり現在のフォルダーです。特定のフォルダーを指定する場合は、次のことができます。 .

scss-lint ./assets/stylesheets

コードスタイルチェッカーを構成

SASSコードベースを確認する準備ができたので、どのルールに従うべきかを定義する必要があります。 SCSS-LINTには多くの

コードスタイルの検査官（呼ばれています）があり、ここにリストされているすべての検査官が長すぎます。コードスタイルチェッカーのドキュメントを読むことをお勧めします。

アイデアは、すべてのコードスタイルチェック構成を使用して、プロジェクトルートディレクトリにYAMLファイルを作成することです。デフォルトでは、SCSS-LINTは現在のフォルダーにファイルを見つけようとするので、このようなファイルに名前を付けることをお勧めします。ただし、別の名前を希望する場合は、

オプションで渡すことができます。

.scss-lint.ymlSASSガイドは、プロジェクトで使用できる既製の構成ファイルを提供します。何かをカスタマイズしたい場合は、必ず詳しく見てください。全体として、問題を解決する必要があります。 --config

を送信するときは、コードスタイルを確認してください 非常に良いことは、コードがクリーンであることを確認するためにコミットするときに事前コミットフックを使用することです（checked

）。以前のSitePointの記事で、SASSテストとコミットフックを取り上げました。

あなたが事前コミットフックが何であるかわからない場合、それは基本的に、コミットを適用する前にいくつかの操作を実行するように設計されたメカニズムです。実行されたアクションがエラーをスローすると、コミットは中止されます。

リモートリポジトリにコミットする前に、必ずコードを確認してください。これは、gitフックに最適なユースケースです。このセクションでは、非常に簡単な方法でセットアップする方法を確認します。

これを行うには、

ファイルを介して直接Gitフックをサポートする非常に軽量のNPMパッケージを使用します。これを行うことができる多くのライブラリがありますが、私は個人的にpackage.jsonを選択しました。以下に示すように：pre-commit

提出するとき、コミット前のフックはLint NPMスクリプトをトリガーして実行します（まったく同じ

$ gem install scss_lint

とまったく同じ）。コードからわかるように、LINT NPMスクリプトは

コマンドを実行します。 SCSS-LINTがエラーを返した場合、コミットは中止され、コードを修正してコミットに合格する必要があります。 npm run lint scss-lint .gulp、grunt、またはその他のツールでSCSS-LINTを実行すると、

バイナリを直接使用する代わりに、Lint NPMスクリプトでタスクを実行できます。同様に、

やscss-lintなどのオプションを渡すことができます。 --config --exclude

最終的な考え

私たちはいつでもうまくやることができますが、これはSCSS-LINTの素晴らしい紹介であり、実際に既存のプロジェクトと新しいプロジェクトの両方にシンプルで強力な方法で使用できると思います。

みんな、汚れたコードの提出を続ける理由はありません。プッシュする前にチェックしてください！

（元のテキストのFAQパーツは、記事のトピックに関連しているため、ここに保持され、情報は書き直した後に情報が失われます）

scss lintの主な目的は何ですか？ SCSS Lintは、開発者がSCSSコードで一貫したコーディングスタイルを維持するのに役立ち、複数の開発者が取り組んでいる大規模なプロジェクトで特に役立ちます。同じコードベース。

scss lintをインストールするにはどうすればよいですか？

SCSS LintはRubyの宝石であるため、Rubyを使用すると、ターミナルにCommand

を実行して、SCSS Lintをインストールできます、コマンドラインから

を実行してSCSSファイルを並べることができます。

scss lintを構成するにはどうすればよいですか？

SCSS Lintは、このファイルのルートディレクトリにgem install scss_lintファイルを作成することで、特定のリナーを有効にすることができます、そして各リナーには、構成できる独自のオプションセットがあります。

他のツールでscss lintを使用できますか？

はい、SCSS Lintは多くの人気のあるツールや編集者と統合できます。たとえば、GruntやGulpなどのタスクランナー、またはSublime TextやAtomなどのコードエディターで使用できます。これにより、開発ワークフローの一部としてSCSSファイルを自動的にリントできます。

いくつかの一般的なSCSS LINTルールとは何ですか？

SCSS Lintには、SCSSコードの優れたプラクティスを実施する幅広いルールが付属しています。いくつかの一般的なルールには、一貫したインデンテーションの実施、後続の空白の許可、およびファイルの最後に新しいラインが必要です。また、IDセレクターの使用を許可したり、ルールの開口部のブレースの前にスペースを必要とするなど、より具体的なSCSS機能のルールもあります。

特定のSCSSリント警告を無視するにはどうすればよいですか？

無視したい特定の警告がある場合は、コード行の前に

を使用してコメントを追加することでそうすることができます。ルールを再度有効にするには、

で別のコメントを追加できます。また、コードのセクションのすべてのリンターを// scss-lint:disable RuleName。 // scss-lint:enable RuleName CSSファイルを使用してSCSS Lintを使用できますか？// scss-lint:disable all

SCSS Lintは、CSSのスーパーセットであるSCSS向けに特別に設計されています。これは、CSSコードをまとめることができることを意味しますが、CSS固有の構文を理解できない場合があります。主にCSSを使用している場合は、StylelintのようなCSS固有のリンターの使用を検討することをお勧めします。

scss lintを更新するにはどうすればよいですか？

端末でコマンド

を実行して、SCSS Lintを更新できます。これにより、gemの最新バージョンをダウンロードしてインストールします。最新の機能とバグ修正の恩恵を受けるために、ツールを最新の状態に保つことをお勧めします。

scss lintの代替品は何ですか？

Stylelint、CSSlint、Sass Lintなど、SCSS Lintの代替品がいくつかあります。これらのツールには同様の機能がありますが、異なるルールや構成オプションがある場合があります。ニーズと好みに最適なツールを選択する必要があります。 gem update scss_lint scss lintをアンインストールするにはどうすればよいですか？

scss lintが必要ない場合は、端末でコマンドを実行してアンインストールできます。これにより、システムから宝石が削除されます。後で再インストールしたい場合は、インストールコマンドを再度実行して実行できます。

以上がSCSS-LINTを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。