プル要求でコードスタイルについて議論するのを止めてください!

11729 ワード

多くのチームは、ブラケット、indent、およびコードをフォーマットする方法についてのプル要求で議論するような状況に精通しています.これは、多くの時間とエネルギーの無駄になります.また、競合状況につながることができます.自動化することができれば、自動化しなければならない.どのようなツールを我々はこれを使用できますか?十分です.

lefthook

prettier

レッツアプリで例を使用してそれらを使用する方法を見てみましょう.

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',
};

必要に応じてファイルを保存するときに書式設定を割り当てることができます https://prettier.io/docs/en/editors.html ).

保存時に書式設定を行う場合は、すべてが動作することを確認します.これを行うには、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

Activity起動モードでSingleTopはonNewIntent()を呼び出すだけでなく

エーテルを使用して署名を生成し検証する方法を学ぶ