[コラボレーション]shecky&lint-舞台ショー
💬 Background
この休みはGitHubを利用してコラボレーションする方法を勉強しています.
自分の作業環境に属するブランチをローカルで掘り起こしてpushを行う問題を作成し、pullリクエストを作成し、チームメンバーが私のコードを見てコメントすることができます.
チームメンバーの承認を得たら、私のコードを開発ブランチにマージできます.
それだけでなく、パブリケーションとpull requestのテンプレートを必要なものに変更することもできます.
本当にシステム的なコラボレーション構造を知っていると驚く.
GitHubが提供する機能のほか、eslintやprettyerなどのパッケージを使うとインデントが何回かに統一され、大引用符や小引用符などの細かい設定が使われます.
隊員たちが異なる方法でコードを書いても、自動的に統一されます.
ただし、prettyerを設定せずにチームメンバーがコミットする場合もあります.
では、コミットする前にprettyerを自動的に実行できますか?
これを可能にしたhaskyについて理解してみましょう.
🐩 husky
❓❗ What?!
herskyはgit hooksを設定しやすいツールです.
Git hooksとは、gitコマンドを実行するときに、何かを処理したい場合に、これらのコマンドを処理するのに役立ちます.
上記のように提出するとprettyer処理も一緒に行います.
❓❗ How?!
その前に、きれいなtierとhaskyをつなぐlint-standについて知りましょう.
😀 lint-staged
❓❗ What?!
git階層ファイルでlinterを実行します!
git階層ファイルはコミット前に追加されたファイルであることを知っています.
ではlinterは何ですか?
linterは静的プログラム解析ツールです.
ESlintを簡単に思い出せばいいです.
構文エラーまたはコードスタイルを分析、表示、または変更するツール.
整理すると、lint-standingは私が追加したファイルの構文エラーやスタイルエラーを分析、表示、変更できるツールです.
❓❗ How?!
どのフォルダにいても.js拡張子のあるファイルに設定したprettyerを適用!
どうしてここにgitを追加するの?!
prettyerを実行するとコードが変更されます.
もしコードが修正されたら?
再追加するには
今提出します.
npx lint-stageは自動的に最初に実行されます.(pre-commit!!)
npx lint-standingが実行するコマンドと、そのコマンドを適用するファイルはpackageです.jsonで.
では、コードは設定通りに実行され、ファイルに適用され、コミットされます.😁
😂 Feelings
これらの機能を見るたびに本当に感動します.😂
🐩ヘスキー、その名の通り、彼は本当に忠実なやつだ.
この休みはGitHubを利用してコラボレーションする方法を勉強しています.
自分の作業環境に属するブランチをローカルで掘り起こしてpushを行う問題を作成し、pullリクエストを作成し、チームメンバーが私のコードを見てコメントすることができます.
チームメンバーの承認を得たら、私のコードを開発ブランチにマージできます.
それだけでなく、パブリケーションとpull requestのテンプレートを必要なものに変更することもできます.
本当にシステム的なコラボレーション構造を知っていると驚く.
GitHubが提供する機能のほか、eslintやprettyerなどのパッケージを使うとインデントが何回かに統一され、大引用符や小引用符などの細かい設定が使われます.
隊員たちが異なる方法でコードを書いても、自動的に統一されます.
ただし、prettyerを設定せずにチームメンバーがコミットする場合もあります.
では、コミットする前にprettyerを自動的に実行できますか?
これを可能にしたhaskyについて理解してみましょう.
🐩 husky
❓❗ What?!
herskyはgit hooksを設定しやすいツールです.
Git hooksとは、gitコマンドを実行するときに、何かを処理したい場合に、これらのコマンドを処理するのに役立ちます.
上記のように提出するとprettyer処理も一緒に行います.
❓❗ How?!
$ git i husky -D # devDependancies로 husky 설치
$ npx husky install # git hooks 설치
package.jsonのスクリプトの変更//...
"script": {
//...
"prepare": "husky install",
//...
},
$ npx husky add .husky/pre-commit "commit 전에 실행하고자 하는 명령어!"
コマンドを追加する前にその前に、きれいなtierとhaskyをつなぐlint-standについて知りましょう.
😀 lint-staged
❓❗ What?!
git階層ファイルでlinterを実行します!
git階層ファイルはコミット前に追加されたファイルであることを知っています.
ではlinterは何ですか?
linterは静的プログラム解析ツールです.
ESlintを簡単に思い出せばいいです.
構文エラーまたはコードスタイルを分析、表示、または変更するツール.
整理すると、lint-standingは私が追加したファイルの構文エラーやスタイルエラーを分析、表示、変更できるツールです.
❓❗ How?!
$ npm i lint-staged -D # 설치!
$ npx husky add .husky/pre-commit "npx lint-staged"
package.jsonで"lint-staged": {
"**/*.js": [
"prettier --write",
"git add",
]
},
これをつけよう!どのフォルダにいても.js拡張子のあるファイルに設定したprettyerを適用!
どうしてここにgitを追加するの?!
prettyerを実行するとコードが変更されます.
もしコードが修正されたら?
再追加するには
今提出します.
npx lint-stageは自動的に最初に実行されます.(pre-commit!!)
npx lint-standingが実行するコマンドと、そのコマンドを適用するファイルはpackageです.jsonで.
では、コードは設定通りに実行され、ファイルに適用され、コミットされます.😁
😂 Feelings
これらの機能を見るたびに本当に感動します.😂
🐩ヘスキー、その名の通り、彼は本当に忠実なやつだ.
Reference
この問題について([コラボレーション]shecky&lint-舞台ショー), 我々は、より多くの情報をここで見つけました https://velog.io/@rjsgh7943/협업-husky-lint-stagedテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol