コンピュータにその仕事をさせなさい.

私は特にスタイルガイド、チームの慣例、ガイドライン、および詳細についてのドキュメントを読んで公正な量の読書費に感謝しない.私は、私がこれらのドキュメンテーションページのすべての参照について考える必要がないと言います.
そういうわけで、私は通常コンピュータに仕事をさせようとします.以下に使用するツールについていくつか注意しましょう.

エスライン
Eslintはあなたのソースコードの多くの側面をカバーすることができるリンギングツールです.例えば、私はeqeqeq ルールを自動的にチェックしている=== の代わりに== 私の条件で.

// ESLint will suggest using === instead of ==
if (iWrite == thisCondition) {
  console.log('ESLint will complain.')
}

構成ファイルは拡張可能ですので、異なる設定は、チーム、組織、または世界中で共有することができます.このように、私は設定を提供することによって規則を指定することができます、そして、規則が壊れているときはいつでも、手動でそれをチェックする必要のないフィードバックを与えます.

前途
独断的なコードフォーマッタとして進められて、タブとスペースと他の書式設定問題のようなものを議論する必要を修正します.代わりに、コードは設定ファイルで定義された規則を通してフォーマットされます.
保存時にコードをフォーマットすることができます.コードが正しくフォーマットされていないかどうかをチェックし、エラーのほとんどを自動的に修正します.
私はスタイルガイドの目的のためにeslintを使用するのが好きですeqeqeq この規則は、コードの書式設定を慎重にします.

スタイラス
StyleLintはESLILTと同様のリンターですが、JavaScriptコードをチェックする代わりに、StyleLintが代わりにスタイルシートを検証します.
eslintの同じ利点の多くは適用されます.StyleLintを使用すると、私が記述するCSSコードを通して、コードのスタイルや慣習を指定し、強制することができます.

タイプスクリプト
JavaScriptのスーパーセットとして、TypeScriptは、開発者がJSコードに型を追加することができます.TypeScriptコンパイラは、静的に決定できるエラーをコードに含める必要があります.

const add = (a: number, b: number) => {
  return a + b
}

add(1, 'a')

タイプスクリプトは無効なタイプstring 番目の引数のうち、add 関数.これらのチェックは、コードを実行することなく、予期しないエラーをたくさんキャッチすることができます.

テスト
自己テストコードを書くこと自体が話題です.しかし、今まで使ってきたツールのいくつかについてメモを書きたいと思います.

冗談
Jestはテストフレームワークを提供するテストフレームワークです.それは機嫌がいい--watch モードだけでなく、さまざまなアサーションの可能性と優れたモッキング機能の茄多.カバレッジレポート、カスタムMatcherのサポート、およびプラグインのサポートなどの追加機能とペア、私は主に私のコードをテストするための冗談を使用している.

サイプレス
サイプレスは、部品をモッキングせずに複数のシステムコンポーネントを含むユースケースを確認できるE 2 Eテストを書くのに最適な方法です.
代わりに手動でウェブページ上でクリックすると、サイプレスは、自動ランナーとコマンドを通過します.一方、アサーションは自動的にすべてが期待通りにチェックすることができます.

テスト
私は、ファンのファンですTesting Library スイート、特にVueのテストライブラリと反応ライブラリをテストします.これらのテストユーティリティは、アクセシビリティのような私のコードの他の側面を暗黙のうちにチェックしながら、より読みやすい方法でテストを書くことができます.

import { render, screen } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import Counter from './my-path/Counter.vue'

test(`updates the displayed text with correct counter value`, () => {
  render(Counter)

  screen.getByText('Counter is: 0')
  userEvent.click(screen.getByRole('button', {name: /increment/i}))

  screen.findByText('Counter is: 1')
})

将来的には、私はCypress Testing Library 同様のAPIをE 2 Eテスト用の他のテストライブラリとして使用します.

ハスキーのためのギットフックhusky 私が簡単にgitフックを加えることができる大きなパッケージです.これらのフックは、さまざまな目的のためにカスタムコードを実行できるポイントを提供します.

{
  "husky": {
    "hooks": {
      "pre-commit": "eslint . --ext .js,.ts"
    }
  }
}

ほとんどの時間、私は使用しているhusky カスタムValidateスクリプトを実行する前コミットフックを追加するには、このポストに記載されているツールの多くを使用します.失敗すると、開発者はコードをコミットできず、最初に問題を修正しました.これは、迅速なフィードバックループを可能にし、コミットを行う前に必要なチェックが行われていることを保証します.

リントステージlint-staged は指定したコマンドを実行したファイルに対してのみ実行するパッケージです.それは次のコミットされるファイルに絞り込むことによってプロジェクト全体をチェックすることを避けます.
私にはhusky and lint-staged 私が通常構成することを意味して、一緒に手をつないでくださいhusky 電話するlint-staged スクリプト.

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "npm run validate"
  }
}

更なるメモ
私がまだ使っていなかったプロジェクトのうちの1つはコミットメントです.コミントはルールと概念をconventional commits 設定ファイルに.それから、gitはメッセージをコミットして、それらの規則に違反を見つけようとします.