JavaScript、Web、およびノードコミュニティは、コミュニティの専用のメンバーによって書かれたドキュメントとともに、使いやすい(そして、とても使いやすい)ツールを我々の指先で持つことによって、最近祝福されます.
このポストは、いくつかのよく知られているツールで最も簡単で迅速かつ簡単なパイプラインを設定することですPrettier コード品質/再生性、およびHusky CodeBaseでこれらの規則を自動的に強制するために.
いくつかの後の記事では、我々は、ビルドステップ、テスト、およびいくつかの技術的なツールのような反応とtypescriptを追加します.しかし、今日、我々はそれだけできれいでハスキーでシンプルで清潔に保ちます.
また、念頭に置いて、多くの既存のツールやフレームワークを作成するように反応するアプリ、ギャツビーなどのように、すでにいくつかのツールをここで言及を提供します.しかし、私たちの目的は主にツールについて学び、なぜ彼らが使用されているかを理解するためです.
一旦我々がこれらのコード品質ツールをセットアップすることがどれくらい簡単かについて理解するならば、それはあなた自身のプロジェクトでこれらを使用しようとするとき、1つのより少ないハードルです.

しかし、サミー、なぜ？

"That which cannot be automated, cannot be enforced."
-Brian Holt,

高品質、身近な、一貫したコードを読みやすく理解しやすいです.さらに、あなた自身に似たコードは、あなたが理解するのがより簡単です.

どうやって始めるの？

OK、ステップCUNI - 1は単純です:新しいNPMプロジェクトを作成して、JSファイルを作成して、あなたが書いたコードで最も醜い、最も扱いにくい、最も読めない(書く)コードを書いてください.スタイルルール、ベストプラクティスを無視し、人々がTwitterで言う意味を無視します.あなたのシステムからそれを得てください.
今あなたの目の前で不潔な混乱を得たので、2つのツールの我々の最初は遊びに入ります:

前途

時々、我々は信頼されることができないので.
我々は、きれいなバージョンを使用している1.16.4 .
要するにコードフォーマッタ-これはあなたのコードを取得し、それに独自の一貫したスタイルのルールを適用することを意味します.これは柔軟性がありますが、一般的に開発者はデフォルトのルールを使用して、プロジェクト間で一貫性を保つようにしています.
要するに、この矛盾している1つのライナーの混乱が変わります.

export function funkyFilteredNames(names = [...defaultNames]) { return names.filter((name) => name.toLocaleLowerCase()[0] == "a").map(name => name.toLocaleUpperCase()); }

この読みやすいスニペットに

export function funkyFilteredNames(names = [...defaultNames]) {
  return names
    .filter(name => name.toLocaleLowerCase()[0] == "a")
    .map(name => name.toLocaleUpperCase());
}

どのようにそれはあなた次第です.あなたはCLIツールとしてきれいに使用するか、または選択のテキストエディタをそれを処理できるようにすることができます.それを簡単に保つために(そして、あなたが望むものを使用してください)私たちはきれいなCLIを使用するつもりです.
IDEの設定方法を確認するにはtheir docs on the matter .
まず最初に-をインストールしますnpm i -D prettier .
今私にお願いします:あなたの乱雑なコードがあるファイルを開き、あなたのファイルと同じディレクトリにコマンドラインを開きます.コードを見ながら、次のコマンドを入力します.

npx prettier *.js --write

ブーム、もはや混乱!
おめでとう、コードベースのルールをCodeBaseにある!これを簡単にするために、上記のスニペットをNPMスクリプトにし、すべてのJavaScriptファイルを見つけるためにいくつかの変更を加えます.

// package.json:
{
  // ...
  "scripts": {
    // other scripts
    "pretty": "prettier \"**/*.js\" --write"
  }
}

現在、あなたは走るだけですnpm run pretty あなたのプロジェクト内からすべてのJSファイルをフォーマットする!
おめでとう、あなたはそれを簡単に!✨
コードをフォーマットする代わりにコードをチェックし、コードがフォーマットされていないときにコンソールを消去することもできます.

"pretty-check": "prettier \"**/*.js\" --list-different"

しかし、フォーマッタを実行することを思い出してください.あなたは毎回、あなたは毎回美食をすることを確信していますか?それは今日の私達の2番目のツールが来るところです:ハスキー!

ハスキー

とても簡単に忘れるから
私たちはHusky1.3.1🐕 Huskyはgitフックを書くのが簡単になります.リポジトリにコミットしようとするとき、コードをチェックするのを確認するために、我々はそれを使用します.
ハスキーのための手順は、我々のフックを定義する構成ファイルから始まる簡単です!
ファイルを作成する.huskyrc プロジェクトのルートで、次のテキストを書き込み、すべてのコミットの前にチェックを実行するフックを定義します.

{
  "hooks": {
    "pre-commit": "npm run pretty-check"
  }
}

それからハスキーをインストールします.npm i -D husky注意:定義した後にHuskyをインストールすることが重要です.huskyrc ファイル.何かあれば、常にパッケージを再インストールできます.また、削除する必要があります.ハスキーがまだ働いていないならば、git/フックフォルダはパッケージを再インストールします.もう少し読むことができますin this GitHub issue
今すぐあなたのファイルのいずれかに行き、いくつかの醜いコードを書いてください.必要はありません最後の時間のような混乱をするには、単一の単一引用符で十分です!
保存してファイルをコミットしようとすると、レスポンスの最後に表示されます.

ハスキーはコードをチェックしたので、コミットを拒否し、コードがきれいな基準に従っていないことを発見!
あなたが望むならば、あなたは`"pre-commit" 実行するpretty の代わりにpretty-check .
おめでとう、あなたはそれを自動化!✨
最近では、フォーマッタを使用してワークスペースを設定するのは困難ではなく、コードの読みやすさのために大きな長さになります.
Prettierは、ほぼ350万ダウンロード週間の1つの今日の最も使用されているJavaScriptフォーマッタであり、開発者はそれを使用して理解を容易に偉大な仕事をしている.
ハスキーは、多くのオーバーヘッドまたは努力なしでGitコミットフックを書くのを許します.きれいに組み合わせて、それは本当に難しいスタイルのガイドと矛盾しないコードをコミットすることができます.
私はこの小さなプロジェクトをあなたが記事で説明した手順をチェックするために準備しました.

サミソッラ / JStyypipeline

パイプラインとコード品質ツールによるJSプロジェクトの例📝

JStyypipeline

JSパイプライン/ワークスペースツールの実装について📝
レポは、そのスタイルの中で、プリティ、ハスキー、エスリント、travisci、タイプスクリプト、および同様のツールのような様々なツールを実装する方法に関する例があります.
このプロジェクトはJavaScriptプロジェクトのプロジェクトツールを実装する方法を示します.ここでは道具を説明する記事があります.

Prettier and Husky

View on GitHub
チェックアウトPart1.PrettierAndHusky この記事のためのコードのために.
❤️ 読んでくれてありがとう!このシリーズのより多くの部分は、後で来るでしょう.私は将来の記事でeslint、travisci、および私自身の個人的なツールを使用することを望む.