typescript 4.5 betaでes modulesを試す
node.jsでes modulesがサポートされた時にやってみようと思ったがts→mjsに変換する方法が無くて諦めたやつができるようになったっぽいので試してみた。
一応試したコードはgithubに上げてある。
インストールと設定
beta版(4.5.0-beta)をインストールする
yarn add typescript@beta
tsconfigを作成し、module設定を変更する
yarn tsc --init
commonjsをes2022に
{ "compilerOptions": { "module": "es2022", } }
雑なtypescriptのコードを用意する。ts4.5では .mtsという拡張子が使える様になっている。.mtsをコンパイルすると.mjsとes moduleを使う指定になってnode.jsが実行してくれる。
// add.mts export const add = (x: number, y: number) => x + y // index.mts import { add } from "./add.mjs"; // ここがm"js"なことに注意 console.log(add(1,2))
これでtscして実行してみる
yarn tsc -P . && node src/index.mjs
ちなみに
.mtsのような拡張子を使わず、既存の.tsでcommonjsではなくes moduleとして実行することもできることができる。*1
type in package.json and New Extensions
実際にやってみた。ソースコードは前とほぼ同じだけど、ファイルの拡張子が違う。
// add.ts export const add = (x: number, y: number) => x + y // index.ts import { add } from "./add.js"; console.log(add(1,2))
package.jsonに以下を書き加える。設定を書くとnode.jsが.jsをes moduleとして実行する。
{ "type": "module" }
yarn tsc -P . && node src/index.js
*1:node.js v12で入った機能ですが https://nodejs.org/api/packages.html#packages_type
コミットされるlaravelのコードだけをフォーマットする
以前の記事でPHPをフォーマットができるようになった。
ただこれを実行すると既存のコードをすべて書き換えてしまうので、チームの合意が得づらい。 なのでコミットされるファイルだけをフォーマットしていき、徐々にフォーマットされている世界を目指す事にした。
設定サンプルリポジトリ
この記事の設定を適用したサンプル
使用技術
phpでどうやるのかがわからないが、laravelにはpackage.jsonつまりはNode.jsの技術が入っています。なので基本的にはNode.jsの技術に全部頼ることにする。
というわけでhuskyとlint-sagedを使う。
導入
インストールや初期設定。
基本的には設定者以外の人はgit cloneしてきて、composer install, npm installすれば勝手に動く状態を目指す。
phpのフォーマットは以前の記事でも使用したphp-cs-fixerを使用します。ルール設定等も以前の記事を参考にしてください。
また設定にはnpmを使用するという前提で書きます。もしyarnなどを使ってる場合は適宜置き換えてください。
npm i -D husky lint-staged # huskyの初期準備 npm set-script prepare "husky install" npm run prepare # commit hookの設定 npx husky add .husky/pre-commit "npx lint-staged" # lint-stagedの設定ファイルを作る touch .lintstagedrc.json # package.jsonにフォーマット用の設定を作成 # php-cs-fixerのコンフィグファイルを指定する npm set-script format './vendor/bin/php-cs-fixer fix --config .php-cs-fixer.dist.php'
lint-stagedの設定
先程作成した.lintstagedrc.jsonに設定を記述していきます。
設定自体はphp-cs-fixerの以前の記事*1を参考に記述します
{ "./app/**/*.php": [ "npm run format" ], "./config/**/*.php": [ "npm run format" ], "./database/factories/**/*.php": [ "npm run format" ], "./database/seeders/**/*.php": [ "npm run format" ], "./routes/**/*.php": [ "npm run format" ], "./tests/**/*.php": [ "npm run format" ], "./.php-cs-fixer.dist.php": [ "npm run format" ] }
これでlint-stagedの設定で指定したファイルが変更された時に自動的にphp-cs-fixerが実行されるようになる。
ちなみに
bladeのフォーマットにはblade-formatterというのがあるらしいのでそれを設定してやれば動くはず。
インストールして雑にpackage.jsonのscriptsに登録する。
npm i -D blade-formatter npm set-script format:blade 'blade-formatter -w'
あとは.lintstagedrc.jsonにblade用の設定を追加
{ "./resources/**/*.blade.php": ["npm run format:blade"] }
php-cs-fixerで設定ファイルをフォーマットする
最近仕事でPHP × Laravelを書くことを迫られてて、普段phpの情報は追ってないので環境を整えることから始めている。
とりあえずフォーマット頑張るのアホらしいのでjavascriptでいうpretteir的なものを求めて探しているとphp-cs-fixerというものに出会った。
結論だけ知りたい方は最後まで飛ばしてください
導入
公式見てもよくわからなかったのでこちらのqiita記事を参考にして導入した。 記事を参考にコマンド等ポチポチしてるとハマることなくインストールできた。
本題
参考にした記事でほとんどのファイルをフォーマットできたが設定ファイルの.php-cs-fixer.dist.phpがフォーマットされないな〜と思って
inの部分の記述を参考に以下のものを記述したがうまく動かずappendメソッドを見つけたのでそっちでやっても動かなかった。
<?php // inメソッドはディレクトリを指定するものでファイルの指定はできないっぽい $finder = PhpCsFixer\Finder::create() ->in([ // 省略 __DIR__.'/.php-cs-fixer.dist.php' ]) // これも動かない $finder = PhpCsFixer\Finder::create() ->in([ // 省略 ]) ->append([ __DIR__.'/.php-cs-fixer.dist.php' ])
解決策
仕方がないのでリポジトリを見に行くと、設定ファイルが置いてあり、そこに理由と解決策が書いていた*1
__DIR__.'/php-cs-fixer', disabled, as we want to be able to run bootstrap file even on lower PHP version, to show nice message
らしく、以下のような指定でフォーマットすることができた
<?php $finder = PhpCsFixer\Finder::create() ->in([ // 省略 ]) ->append([ __FILE__ ])
最終的に
ルールがよくわからんのでphp-cs-fixerが用意してるっぽいのとimportのorderだけ並び変える設定を入れた
<?php declare(strict_types=1); $finder = PhpCsFixer\Finder::create() ->in([ __DIR__.'/app', __DIR__.'/config', __DIR__.'/database/factories', __DIR__.'/database/seeders', __DIR__.'/routes', __DIR__.'/tests', ]) ->append([ __FILE__, ]) ; $config = new PhpCsFixer\Config(); return $config ->setRiskyAllowed(true) ->setRules([ '@PhpCsFixer' => true, '@PhpCsFixer:risky' => true, 'ordered_imports' => ['sort_algorithm' => 'alpha', 'imports_order' => ['const', 'class', 'function']], ]) ->setFinder($finder) ;
