ESリント,きれいなおよびGITレンズによるVSコードのシームレスチームワーク

コンフリクトは、Gitのようなバージョン管理ツールでチームの仕事中に通常直面する主な問題の一つです.時々、チームの1人の人が一つの線または1つの性格さえ変えたということは起こります、しかし、それはより多くの線の変化を示します.そして、チームの他のすべてのメンバーとの大きな衝突に終わります.
ほとんどの場合、この変更は自動生成され、それらはプリティやコードフォーマッタのような自動整形ツールによって行われます.時々、チームコントロールメンバーの間でマイナーな構成変更があります.一部の設定は、シングル/ダブルクォート、テーリングコンマ、タブ/スペース、スペース、セミコロン等です.
次のイメージでは、唯一の違いは、スペースとシングル/ダブル引用、実際のコンテンツの変更はないことがわかります.

これらの不要な競合を避けることは非常に簡単です、チームのすべてのメンバーは一般的な設定に同意する必要があります.我々は、いくつかのツールを使用してコミットする前に、これを実施し、維持し、チェックすることができます:ESLILT、きれいな、GitLensでGitLens.次のようにします.

ESLILT :: ( extension identifier : dbaeoms . vscode - eslint )

まず、コードに対するeslint拡張モジュールをインストールします.Eslintは、あなたのチームメンバーが厳密にプロジェクトを通してECMAScript規則に従うようにあなたのチームメンバーを助けます.
全体的なリンギングのために我々は使用されますAirbnb Javascript ガイドライン.以下の概要に従ってください.詳細なガイドラインに従ってくださいhere
インストールeslint-config-airbnb-base としてdev-dependency その依存関係を以下に示します:

NPM > 5 +:

npx install-peerdeps --dev eslint-config-airbnb-base

NPM < 5 >

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb-base

私たちはESLint with Babel Parser まだECMAScriptによって公式にサポートされていない新しい機能を有効にするには.
バベル・エスリントをインストール

npm install babel-eslint --save-dev

使用.eslintrc 設定

{
 "parser": "babel-eslint",
 "extends": ["airbnb-base"],
 "rules": {
   "react/jsx-filename-extension": 0,
   "arrow-body-style": 0,
   "no-plusplus": 0,
   "function-paren-newline": 0,
   "arrow-parens": 0,
   "func-names": 0,
   "no-use-before-define": 0,
   "consistent-return": 0,
   "object-curly-newline": 0,
   "no-underscore-dangle": 0,
   "prefer-destructuring": 0
 }
}

上記の構成は、汎用ノードアプリケーションのためにうまく機能します.プラグインで特定のフレームワークサポートのためにこれを修正することができます.たとえば、次のプラグインスニペットを追加することによって、ReplyとJSXサポートのプラグインを追加できます.

 "plugins": ["react", "jsx-ally", "import"]

また、その他の目的のためのプラグインを追加することもできます.例えば、プラグインを追加するにはava 次の行を設定に追加します.

 "plugins": ["ava"]

(後述の拡張子: esbenp - prettier - vscode )

最初にVSコード用の拡張機能拡張をインストールします.次に、package.json ファイル.私たちはeslint-plugin-prettier 一緒に仕事をする

npm install --save-dev eslint-plugin-prettier  

今すぐ更新.eslintrc として

"extends": ["prettier"],
 "rules": {
   "prettier/prettier": "error"
 }

今すぐ有効にすると、コードを保存するコードを保存する前にファイルをフォーマットします.オープンPreferences>>Settings>>Extensions (確認してください)User タブを設定するか、またはsettings.json ファイルの場所です.

リナックス~/.config/Code/User/settings.json

MacOS/Users/<username>/Library/Application Support/Code/User/settings.json

Windows%APPDATA%\Code\User\settings.json

ファイルの内容を更新します

{
   "window.zoomLevel": 1,
   "editor.formatOnSave": true,
   "eslint.alwaysShowStatus": true,
   "eslint.autoFixOnSave": true,
   "prettier.eslintIntegration": true,
   "prettier.jsxSingleQuote": true,
   "prettier.singleQuote": true
   "prettier.trailingComma": "none"
}

VSコード設定から

テキストエディタ:

エディタ:保存時の書式

エディタの挿入スペース

エディタ:デフォルトフォーマッタ>を選択します.きれいなvscode

要するにアロー・パーens >避ける

singlequote = true

要するにタブ(これはエディタの設定を上書きします).

タブ幅= 2

末尾コンマ

gitlens ( identifier : eamoid . gitlens ):

GitLensは、VSコードの組み込みのGit機能の上に多くの強力な機能を追加します.GitLensを追加します.
これらの拡張子を追加した後、eslintの潜在的な表示されます
コードを実行しないで構文的または意味的なエラー.共通.eslintrc ファイルは、すべてのチームメンバーが同じペースに留まるのを助けるでしょう.きれいなコードに自動書式設定を追加します.あなたがチームメンバーの間の衝突を避けるのを、きれいにする一般的な設定設定は役立ちます.最後に、GitLensは、あなたが上流にプッシュする前に、現在の粒状レベルでの変更を調べることができるように、ライン履歴、ファイル履歴などのような強力な機能を追加します!
これらの3つの拡張があなたが現在より少ない対立でコード化するのを援助することを望みます!
注:これはmostafizラーマンです、そして、それはDEV . TOの私の初のポストです.私または私のポストについてのさらなる情報のために訪問してくださいmostafiz.net