プル要求でコードスタイルについて議論するのを止めてください!
11729 ワード
多くのチームは、ブラケット、indent、およびコードをフォーマットする方法についてのプル要求で議論するような状況に精通しています.これは、多くの時間とエネルギーの無駄になります.また、競合状況につながることができます.自動化することができれば、自動化しなければならない.どのようなツールを我々はこれを使用できますか?十分です. lefthook prettier レッツアプリで例を使用してそれらを使用する方法を見てみましょう.
ASdocumentation Lefthookは「Node . js、Rubyまたは他のどんな種類のプロジェクトのための速くて強力なGitフックマネージャ」です.それはどういう意味ですか.つまり、git commitやgit pushなどのときに実行するコマンドを設定することができます.
この例では、コミット前にオートフォーマットを設定します.また、たとえば、コミットの前にテストを実行することもできます.何らかのコマンドが失敗した場合(例えば、テストが失敗した場合)、変更はコミットされません.
それは“独裁”コードフォーマッタです.多くの言語をサポートしています.
テストアプリケーションの作成
前置きする
オープン
必要に応じてファイルを保存するときに書式設定を割り当てることができます https://prettier.io/docs/en/editors.html ).
保存時に書式設定を行う場合は、すべてが動作することを確認します.これを行うには、
代わりに
左側のインストール
フックの作成と構成
開ける
チェックするには、自動保存をオフにします.次に、
チェックする
この記事では、前のコミットフックのためにLefthookを使用しました.しかし、他の代替ツールpre-commit or husky . 彼らはすべて同じような能力を持っています、そして、あなたがそれらのうちの1つを理解するならば、あなたは残りに対処することができます.
あなたは最終的な結果をダウンロードすることができますhere .
カバー写真Sai Kiran Anagani on Unsplash .
Lefthookとは
ASdocumentation Lefthookは「Node . js、Rubyまたは他のどんな種類のプロジェクトのための速くて強力なGitフックマネージャ」です.それはどういう意味ですか.つまり、git commitやgit pushなどのときに実行するコマンドを設定することができます.
この例では、コミット前にオートフォーマットを設定します.また、たとえば、コミットの前にテストを実行することもできます.何らかのコマンドが失敗した場合(例えば、テストが失敗した場合)、変更はコミットされません.
何がきれいですか。
それは“独裁”コードフォーマッタです.多くの言語をサポートしています.
セットアップアプリケーション
テストアプリケーションの作成
npx create-react-app lefthook-prettier-example
cd lefthook-prettier-example
前置きする
npm install --save-dev --save-exact prettier
# or yarn:
yarn add --dev --exact prettier
# Then, create an empty config file to let editors and other tools know you are using Prettier:
touch .prettierrc.js
オープン
.prettierrc.js
コンフィグオブジェクトを指定します.すべてのオプションを見ることができますhere そして、あなたに合うものを指定してくださいmodule.exports = {
singleQuote: true,
jsxSingleQuote: true,
arrowParens: 'always',
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: false,
endOfLine: 'auto',
};
保存時に書式設定を行う場合は、すべてが動作することを確認します.これを行うには、
src/App.js
IDEでファイルを変更し、保存をクリックします.代わりに
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
フォーマットされたコードを取得します.import logo from './logo.svg'
import './App.css'
function App() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
Learn React
</a>
</header>
</div>
)
}
export default App
注意:設定で他のオプションを指定すると、結果は異なる場合があります.左側のインストール
npm i @arkweid/lefthook --save-dev
# or yarn:
yarn add -D @arkweid/lefthook
# NOTE: if you install it this way you should call it with npx or yarn for all listed examples below. (for example: lefthook install -> npx lefthook install)
# You can also install lefthook as a global dependency
npm install -g @arkweid/lefthook
フックの作成と構成
# Initialize lefthook with the following command (it creates lefthook.yml in the project root directory)
npx lefthook install
# Register your hook (You can choose any hook from https://git-scm.com/docs/githooks). In our example it pre-commit githook:
lefthook add pre-commit
開ける
lefthook.yml
設定ファイルを実行し、コミット前に実行するコマンドを追加します.pre-commit:
parallel: true
commands:
prettier:
glob: 'src/*.{js,ts,jsx,tsx}'
run: npx prettier --write {staged_files} && git add {staged_files}
チェックするには、自動保存をオフにします.次に、
src/App.js
そして、gitコミットgit add -A
git ci -m 'Add lefthook and prettier'
RUNNING HOOKS GROUP: pre-commit
EXECUTE > prettier
src\App.js 50ms
SUMMARY: (done in 0.75 seconds)
✔️ prettier
[master 4576031] Add lefthook and prettier
src/App.js
を再フォーマットする.結論
この記事では、前のコミットフックのためにLefthookを使用しました.しかし、他の代替ツールpre-commit or husky . 彼らはすべて同じような能力を持っています、そして、あなたがそれらのうちの1つを理解するならば、あなたは残りに対処することができます.
あなたは最終的な結果をダウンロードすることができますhere .
カバー写真Sai Kiran Anagani on Unsplash .
Reference
この問題について(プル要求でコードスタイルについて議論するのを止めてください!), 我々は、より多くの情報をここで見つけました https://dev.to/pavelkomiagin/stop-arguing-about-code-style-in-pull-requests-3022テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol