-
yarn
をインストール -
Package のインストール
yarn
- 上記コマンドで
node_modules
に以下がインストールされる.- "husky": "^4.2.5",
- "lint-staged": "^10.2.2",
- "prettier": "^2.0.5"
- 全コードのフォーマットをしたい場合は下記コマンドで全てチェックし修正も可能であれば行われる.
- 修正不可能な場合はエラーが出るが,行も表示されるのでこれを元に修正する.
yarn run all-fmt
-
以上の設定を行った場合は,
git commit
前にフォーマットが起動するようになる. -
git commit
時に強制的に LF へgit commit
.git/hooks/pre-commit(husky)
: 詳しくは不明"husky"
->"hooks"
->"pre-commit"
->"lint-staged"
"lint-staged"
"prettier --write", "git add"
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json,css,md,html}": ["prettier --write", "git add"]
}
}
package.json
の下記部分により仕様の変更可能.
{
...,
"prettier": {
"arrowParens": "always",
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "none",
"semi": true,
"printWidth": 1000
},
...
}
- 以下の設定により除外設定が可能.
./.prettierignore
: 対象から除外するファイル// prettier-ignore
: 対象から除外するコード要素
- JavaScript も本格的に使う場合は,こちらと
Prettier
を併用するのが主流らしいPrettier はコードフォーマッタのため、ESLint のような構文チェック機能はない。 そのため、コードの整形は Prettier が行い、コードの構文チェックは ESLint が行うように併用する。
-
package.json
における Path の記法に一癖あるらしい.よく知らない.普段意識せずに使っている、"**"と書けばネストしたディレクトリを含む、というような glob は globstar というシェル拡張を使っているそうです。
記事執筆時点の Mac だとデフォルトで bash のバージョンが 3 系なので、そもそも globstar が使えません。(globstar が追加されたのはバージョン 4 から)
その状態で"**"を含む glob を書くと、2 段以上ネストされたディレクトリに対応できなくなったわけです。
では Bash のバージョンを 4 系に上げ、globstar を有効にすればそれだけで使えるようになるかというと、そういうわけでもありませんでした。
どうも、npm scripts に書いたスクリプトは sh -c に続く形で渡されるようです。 このとき、元のシェルセッションで globstar を有効にしていたとしても、新しく作られたシェルのセッションでは globstar が無効になってしまっていました。
"scripts": {
"test": "mocha src/**/*.spec.ts"
},
- 部分的に正しいが powershell では動かないらしい
"scripts": {
"test": "mocha 'src/**/*.spec.ts'"
},
- Poweshell でも動作させたい場合は「"」が望ましいらしい.
"scripts": {
"test": "mocha \"src/**/*.spec.ts\""
},
-
Prettier 公式のトップページでは
preety-quick
が勧められているが,シェアはlint-staged
の方が高いらしい.
- ブログでは古いバージョンの
husky
を使っている為上の場合が多いが,husky: "^4.2.5"
では以下.
{
"scripts": {
- "precommit": "npm test",
- "commitmsg": "commitlint -E GIT_PARAMS"
},
+ "husky": {
+ "hooks": {
+ "pre-commit": "npm test",
+ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+ }
+ }
}