ES Lint, Prettier 및 Git 렌즈를 사용하여 VS 코드에서 원활한 공동 작업 수행

충돌은 Git와 같은 버전 제어 도구를 사용하는 팀에서 일반적으로 직면하는 주요 문제 중 하나입니다.때때로 팀의 한 사람이 한 줄, 심지어 문자를 변경했지만, 그것은 더 많은 줄의 변경을 보여줌으로써 팀의 모든 다른 구성원들에게 커다란 충돌을 가져왔다.
대부분의 경우, 이러한 변경은 자동으로 생성되며, 자동 포맷 도구(예를 들어 Pretter나codeformatter)가 완성합니다.때때로 팀 구성원 간에 작은 설정 변경이 발생하는데 이것은 버전 제어에서 고통스러운 충돌과 불필요한 역사 기록을 초래할 수 있다.일부 구성에는 큰따옴표/큰따옴표, 꼬리표 쉼표, 탭/공백, 공백, 세미콜론 등이 있습니다.
다음 그림에서 유일한 차이점은 공백과 큰따옴표/큰따옴표이며 실제 내용은 변하지 않았다는 것을 알 수 있습니다.

이러한 불필요한 충돌을 피하는 것은 매우 쉽다. 팀의 모든 구성원은 하나의 일반적인 설정에 합의하기만 하면 된다.제출하기 전에 VS 코드에서 ESLint, Prettier, GitLens를 사용하는 몇 가지 도구를 사용할 수 있습니다.다음은 작업 방법입니다.

ESLint: (확장 식별자: dbaeumer.vscode-ESLint)

먼저 VS 코드의 ESLint 확장을 설치합니다.ESLint는 팀 구성원이 전체 프로젝트에서 Ecmascript 규칙을 준수하도록 도와줍니다.
전체 대들보에 대해 우리는 Airbnb Javascript 준칙을 사용할 것이다.다음 요약 또는 세부 지침을 따를 수 있습니다hereeslint-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 및 Babel Parser 을 사용하여 Ecmascript가 아직 정식으로 지원하지 않은 새로운 기능을 사용할 것입니다.
babel eslint 설치:

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
 }
}

상술한 설정은 일반 노드 응용에 적용된다.플러그인의 특정 프레임워크 지원을 위해 수정할 수 있습니다.예를 들어, 다음 플러그인 세션을 추가하여 React 및 JSX 지원 플러그인을 추가할 수 있습니다.

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

테스트와 다른 목적으로 다른 플러그인을 추가할 수도 있습니다.예를 들어, ava 플러그인을 추가하려면 구성에 다음 행을 추가합니다.

 "plugins": ["ava"]

Prettier: (확장 식별자: esbenp. Prettier-vscode)

우선 VS 코드에 더 예쁜 확장을 설치합니다.그리고 package.json 파일의 dev 의존항 목록에prettier를 설치합니다.우리는 eslint-plugin-prettier를 사용하여 eslint와 prettier를 결합하여 사용할 것이다.

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

현재 업데이트.eslintrc는 다음과 같습니다.

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

이제 저장 후 파일을 포맷하기 위해 VS Code Prettier 플러그인을 사용합니다.Preferences>>Settings>>Extensions 탭에서 설정을 변경하거나 User 파일을 통해 변경할 수 있는지 확인합니다. 위치는 다음과 같습니다.

Linux:settings.json

MacOS:~/.config/Code/User/settings.json

창문: /Users/<username>/Library/Application Support/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 코드 설정:

텍스트 편집기:

편집기: 저장된 형식 > 선택

편집기: 스페이스 바 삽입 > 선택되지 않음

편집기: 기본 포맷 프로그램 > esbenp 선택.더 예쁜 vscode

더 예뻐: 화살표 팔르스>> 피하기

따옴표 =true

더 예뻐: 탭 사용하기 (편집기 구성 덮어쓰기)

더 예뻐: 레이블 너비 = 2

꼬리표 쉼표: 없음

GitLens(식별자:%APPDATA%\Code\User\settings.json):

GitLens는 VS 코드의 내장된 Git 기능을 바탕으로 많은 강력한 기능을 추가했습니다.구성을 변경할 필요 없이 GitLens를 추가합니다.
이러한 확장을 추가하면 ESLint가 제공하는 잠재력
코드를 실행하지 않는 상황에서 문법이나 의미 (모든 것이 아님) 오류가 발생했습니다.공통 eamodio.gitlens 파일은 모든 팀 구성원이 같은 속도를 유지하도록 도와줍니다.Prettier는 코드에 자동 포맷을 추가합니다.Prettier의 일반적인 구성 설정은 팀 구성원 간의 충돌을 피하는 데 도움이 됩니다.마지막으로 GitLens는 프로젝트에 강력한 기능을 추가했습니다. 예를 들어 줄 기록, 파일 기록 등입니다. 그러면 업스트림으로 추진하기 전에 입도 단계에서 변경 사항을 검사할 수 있습니다!
이 세 가지 확장이 지금부터 코드 충돌을 줄이는 데 도움을 줄 수 있기를 바랍니다.
주의: 이것은 Mostafiz Rahman입니다. 이것은 제가 Dev.to에서 올린 첫 번째 댓글입니다. 어떤 댓글이나 건의도 감사하기 그지없습니다!내 또는 내 게시물에 대한 자세한 내용은 다음을 참조하십시오. mostafiz.net