코드를 자동으로 더 읽기 쉽게 만들기위한 하나의 쉬운 비결

(Ryan Chong) (2020 년 12 월 2 일)

탭 또는 공백?

그게 질문입니다. 개발자들은 대단히 독단적입니다. 따라서 탭이나 공백을 사용하는 것과 같이 사소 해 보이는 것을 결정할 때가되면 빠르게 화염 전쟁으로 발전 할 수 있습니다. 저의 캠프 대 당신의 캠프.

하지만 개발자가 주장하는 것은 그것뿐이 아닙니다. 예전에는 코드 검토 과정에서 코드 서식에 대한 많은 의견을 종종 받았습니다.

예를 들어 다음과 같은 의견을받습니다.

  • 일관되지 않은 들여 쓰기
  • 작은 따옴표와 큰 따옴표의 일관성없는 사용
  • 일관되지 않은 세미콜론 삽입
  • 일관되지 않은 탭과 공백 사용

감사합니다. 개발자는 또한 매우 효율적인 사람들입니다. 어느 대회가 다른 대회보다 우월하다고 주장하는 시간을 보내는 것이 시간을 최대한 활용하는 것이 아니라는 결론을 내리는 데 오래 걸리지 않았습니다.

그래서 그들은 해결책을 찾았습니다. 코드 포맷터 .

작동 방식은 다음과 같습니다. 먼저 표준 구성을 정의하십시오. 그런 다음 동일한 프로젝트에서 작업하는 모든 사람과 표준 구성을 공유합니다. 코드 포맷터는 코드 저장소에 도달하기 전에 해당 구성을 기반으로 코드를 자동으로 포맷합니다. 결과적으로 모든 사람의 코드는 원래 형식에 관계없이 일관됩니다.

코드 포맷터에는 다양한 종류가 있지만 궁극적으로 표준 이 등장합니다. Prettier 는 많은 사람들이 FE 개발의 표준으로 널리 인식하고 있습니다. 잠시 후에 어떻게 작동하는지 설명하겠습니다.

하지만 먼저 Prettier 설치에 대해 이야기하겠습니다.

Prettier 설치

그렇지 않은 경우 좋아하는 코드 편집기를 사용하고 확장을 설치하십시오. Visual Studio Code (VS Code)를 사용하고 있습니다. VS Code에서 확장 패널을 클릭하고 “Prettier”를 검색하면됩니다. 아래 스크린 샷과 유사한 내용이 표시됩니다.

예쁜 구성 설정

다음으로 더 예쁜 구성을 정의해야합니다. 이것은 탭이나 공백, 작은 따옴표 또는 큰 따옴표 등을 사용하여 코드를 형식화하도록 더 예쁘게 지시하는 것입니다. 전체 구성 목록은 여기 에서 찾을 수 있습니다.

예쁜 구성

그런 다음 VS Code의 settings.json에서 자바 스크립트 포맷터를 활성화합니다. 포맷 할시기도 선택합니다.

Settings.json

또는 GUI 버전 (기본 설정> 사용자 설정 열기)을 열고 관련 설정을 수동으로 전환 할 수도 있습니다.

GUI 설정

Prettier 작동 방식

예제 고려 이하. 첫 번째 스크린 샷은 형식이 지정되지 않은 버전의 자바 스크립트 코드를 보여줍니다. 코드가 어디에서 시작되고 끝나는 지 파악하기가 어렵습니다.

이제 Prettier와 같은 코드 포맷터를 사용하면 코드를 저장 하기 만하면 모든 것이 됩니다. 예쁘게 예쁘게 표현 :

형식화 된 코드
이후 : 형식화 된 코드

요약

코드 서식을 수동으로 지정하는 것은 시간을 최대한 활용하는 것이 아닙니다. 하나의 표준을 정한 다음 해당 표준을 구성으로 구현하십시오. 마지막으로, 다음 코드 검토에서 코드 형식에 대해 언급하는 데 추가 시간을 소비하지 않을 것입니다.

TeamSpirit는 싱가포르에서 선배 / 후배 소프트웨어 엔지니어를 고용하고 있습니다. 귀하의 제안을 소중히 여기고 많은 자율성을 제공하는 친절한 동료들과 함께 일하고 싶다면 recruit.sg @ teamspirit.com