新規のRailsのプロジェクト

を久しぶりに立ち上げた際に、git-cz等の導入方法を忘れていたので備忘録として残しておきます。

yarnの導入

yarnはJavascriptのパッケージマネージャーです。brew等から入ると思います。

$ brew update
$ brew install yarn
$ export PATH="$HOME/.yarn/bin:$PATH"

npmのモジュールの導入

今回は諸々を入れます。これは、自分のRailsプロジェクトのルートディレクトリ直下で行いました。

$ yarn add --dev commitizen cz-customizable husky lint-staged

`package.json`に追記

すでにある設定に以下を追記します。

{
  "scripts": {
    "cz": "npx git-cz"
  },
  "lint-staged": {
    "(*.rb|Gemfile)": [
      "bundle exec rubocop --auto-correct --fail-level E",
      "git add"
    ]
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".cz-config.js"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

lint-stagedには、対象にしたいファイルの拡張子と、それに対して行うコマンドを記述しておきます。

rubocop.ymlの設定

rubocop.ymlはrubocop先生の設定を書くのですがこれは、個人でお好みでお願いします。

`.cz-config.js`

package.jsonにおいてcz-customizableは別途記述するとの設定を行ったので、同じくプロジェクトルートに.cz-config.jsを配置します。

'use strict';
module.exports = {
  types: [
    {
      value: 'feat',
      name: 'feat:     新機能',
      title: 'Features'
    },
    {
      value: 'fix',
      name: 'fix:      バグ修正',
      title: 'Bug Fixes'
    },
    {
      value: 'HOTFIX',
      name: 'HOTFIX:   致命的で緊急なバグ修正',
      title: 'Critical hotfix'
    },
    {
      value: 'UI',
      name: 'UI:       UIやスタイルの更新',
      title: 'UI'
    },
    {
      value: 'docs',
      name: 'docs:     ドキュメントのみの変更',
      title: 'Documentation'
    },
    {
      value: 'style',
      name: 'style:    フォーマットの変更\n            （コードの動作に影響しないスペース、フォーマット、セミコロンなどの変更）',
      title: 'Styles'
    },
    {
      value: 'texts',
      name: 'texts:    文字や文章の更新',
      title: 'Text and literals'
    },
    {
      value: 'i18n',
      name: 'i18n:     国際化',
      title: 'Internationalization'
    },
    {
      value: 'typo',
      name: 'typo:     タイプミスの修正',
      title: 'Typos'
    },
    {
      value: 'refactor',
      name: 'refactor: リファクタリングのための変更\n            （機能追加やバグ修正を含まない変更）',
      title: 'Code Refactoring'
    },
    {
      value: 'perf',
      name: 'perf:     パフォーマンスの改善のための変更',
      title: 'Performance Improvements'
    },
    {
      value: 'UX',
      name: 'UX:       ユーザーエクスペリエンス/ユーザビリティの改善',
      title: 'UX'
    },
    {
      value: 'test',
      name: 'test:     不足テストの追加や既存テストの修正',
      title: 'Tests'
    },
    {
      value: 'config',
      name: 'config:   設定の追加や変更',
      title: 'Configuration'
    },
    {
      value: 'build',
      name: 'build:    ビルドシステムや外部依存に関する変更\n           （スコープ例: gulp, broccoli, npm）',
      title: 'Builds'
    },
    {
      value: 'CI',
      name: 'CI:       CI用の設定やスクリプトに関する変更\n           （スコープ例:Travis, Circle, BrowserStack, SauceLabs)',
      title: 'CI'
    },
    {
      value: 'chore',
      name: 'chore:    その他の変更\n           （補助ツール、ドキュメント生成などのソースやテストの変更を含まない変更）',
      title: 'Chores'
    },
    {
      value: 'WIP',
      name: 'WIP:      作業中',
      title: 'WIP'
    }
  ],
  scopes: [
    // { name: '*' },
    // { name: 'admin' },
    // { name: 'exampleScope' },
    // { name: 'changeMe' }
  ],
  // it needs to match the value for field type. Eg.: 'fix'
  /*
  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: 'コミットする変更タイプを選択:\n',
    scope: '変更内容のスコープ(例:コンポーネントやファイル名)(optional):\n',
    // used if allowCustomScopes is true
    customScope: '変更内容のスコープ(例:コンポーネントやファイル名)(optional):\n',
    subject: '変更内容を要約した本質的説明:\n',
    body: '変更内容の詳細（"|"で改行）(optional):\n',
    breaking: '破壊的変更についての記述(optional):\n',
    footer: '関連issueを追記 (例:"fix #123", "re #123")(optional):\n',
    confirmCommit: 'このコミット内容でよろしいですか?'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix']
};

おまけ

最初に入れると便利なgem

gem "dotenv-rails" #envファイルで環境変数
gem "global" #定数管理
gem "kaminari" #pageing
gem "slim" #slim
gem "tilt" #slimのために

group :development, :test do
  gem "factory_bot_rails"
  gem "hirb" # コンソールちょっとみやすく
  gem "pry-byebug"
  gem "pry-doc"
  gem "pry-rails"
  gem "pry-stack_explorer"
  gem "rubocop", require: false
  gem "rubocop-rspec"
end

group :development do
  gem "annotate" #migrate時とかに自動でshemaをコメント
  gem "better_errors" #エラー見やすくするやつ
  gem "binding_of_caller" #エラー画面からコンソール操作
  gem "brakeman", require: false 
  gem "bullet" #N+1クエリ検出
  gem "bundler-audit" #セキュアじゃないgemを警告
  gem "html2slim" #erbとかhtmlをslimに変換（精度はわるい）
  gem "web-console", ">= 3.3.0"
end