著者:杉浦
【GitHub】目的に合ったスニペットをフレームワークの観点から探す
GitHubの検索機能には様々なオプションが付いています。その中の一つにCode optionsのIn this pathがあります。これはその名の通りコードファイルが置いてあるファイルパスで絞込検索をするオプションです。
フレームワークには大なり小なり型にはまった作法があります。よくある作法の種類に、特定の種類のコードを特定のフォルダに配置する、というものがあります。Laravelのコンソールコマンドならばapp/Console/Commands、Composerを使うなら外部ライブラリはvendor、といった具合です。
Artisanコンソール 6.x Laravel
この二つを合わせると特定の種類のコードと果たしたい目的の語で検索をすることができます。例えば、次のようなことができます。FuelPHPにはコンソールコマンドoilが用意されています。oilのサブコマンドとして様々なことをコンソール上で行えます。
はじめに – Oil パッケージ – FuelPHP ドキュメント
oilは便利なのですがルーティングを確認する機能がありません。Laravelのartisan route:listの様にコンソールで一覧を見たいものです。GitHubで次のようにググるとそれを実現したコードが見つかります。
route path:fuel/app/tasks
このコードらをたどっていくとリポジトリkenjis/fuelphp-tools： Tools for FuelPHP 1.xにたどり着きます。このリポジトリのtaskコードの一つにルーティングをコマンドライン上で表示する機能が入っています（残念ながらmodule以下のルーティング解析は未実装です）。
このおかげで次の様にroutingの大部分をいい感じに見れるようになりました。
著者:杉浦
【Git】package.json上でコマンドとGitを連携させるためのhusky, lint-staged
husky – npm
lint-staged – npm
huskyはGitのフックのほぼ全てをpackage.json上で定義できるパッケージです。フックできない部分はいずれもGitリポジトリを管理するサーバサイド用フックのみです。huskyのインストールと使い方は次の引用の通りです。
Install
npm install husky --save-dev// package.json { "husky": { "hooks": { "pre-commit": "npm test", "pre-push": "npm test", "...": "..." } } }
複数コマンドを実行するときはtypicode/husky： 🐶 Git hooks made easy#multiple-commandsにある様に、コマンド間を&&で区切るcmd && cmdかhusky個別の設定ファイルを用意します。すべてをpackage.jsonで完結させつつも、コマンドを&&で無理やり繋げない小技にnpm-run-all – npmを用いるやり方があります。次の様にあらかじめ小さいスクリプトを定義してnpm-run-allを介してまとめてhuskyで呼び出します。
{
"scripts": {
"php-cs-fix": "./vendor/bin/php-cs-fixer fix -vvv",
"eslint": "./node_modules/.bin/eslint resources/**/*.{ts,js,vue} --fix",
"php-unit-test": "php ./vendor/phpunit/phpunit/phpunit --configuration phpunit.xml tests/Unit --teamcity",
"pre-commit": "npm-run-all eslint php-cs-fix",
"pre-push": "npm-run-all php-unit-test"
},
"husky": {
"hooks": {
"pre-commit": "npm run pre-commit",
"pre-push": "npm run pre-push"
}
}
}
huskyだけでもコミット前のスクリプト起動漏れを防げて楽ですが、コミットのたびにフルでlintが走る上にlintで修正された分はコミット内容に含まれません。lint-stagedでこの問題を解決できます。
lint-staged – npm
lint-stagedはコミット用にステージングされたファイルの内、globで特定した対象のファイルについてのみ特定のコマンドを実行するパッケージです。対象ファイルはglob形式で指定します。大体*.{拡張子A,拡張子B}の様に指定するだけです。test絡みで通常のlintの対象にしたくない場合は!(*test).jsの様に!()を使います。!(*test).jsならばhogehoge.jsはlint, hogehoge.test.jsはnot lint。
lint-staged実例として次のような設定をし、Hoge.jsとFoo.phpファイルをコミットしようとするとします。
{
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix",
"git add"
],
"*.php": [
"php ./vendor/bin/php-cs-fixer fix -vvv --config .php_cs",
"git add"
],
"*.{json,css,scss}": [
"prettier --write",
"git add"
]
}
}
その様な場合、まず”*.{js,ts,vue}”の表現にマッチしたHoge.jsを引数として”eslint –fix Hoge.js”, “git add Hoge.js”が実行されます。Hoge.jsがESLintの自動修正によって修正され、Hoge.js全体がコミット対象になるわけです。これでコミット前に自動でlintが走り、lintの修正結果もコミット内に反映されます。Foo.phpでもphp-cs-fixerで同様にlintによる修正がかけられ、両方が終わった後に改めてコミットされます。
husky, lint-staged, 各Linterを導入してpackage.jsonに次の様な記述を加えるとコミットのたびにLintが便利な形で走ってくれます。
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix",
"git add"
],
"*.php": [
"php ./vendor/bin/php-cs-fixer fix -vvv --config .php_cs",
"git add"
],
"*.{json,css,scss}": [
"prettier --write",
"git add"
]
}
}