Prettier 및 ESLint를 향한 여정: 코드 품질을 개선하기 위해 이러한 도구를 채택한 방법

Monogram에서 우리는 항상 고품질 코드를 생성하기 위해 노력해 왔습니다. TypeScript과 함께 Prettier 및 ESLint이 우리의 모든 리포지토리에 코딩 표준을 적용하고 잠재적 오류에 대한 즉각적인 피드백을 제공함으로써 이를 수행하는 데 도움이 된다고 믿습니다. 이러한 도구를 채택하는 것은 지금까지 훌륭한 여정이었으며 코드의 품질과 일관성이 크게 향상되었습니다. prettier와 eslint에 대한 여러분의 피드백을 환영합니다. 여러분의 작업에서 그것들을 어떻게 사용하고 있는지 공유해주세요!

작업에 Prettier 및 ESLint를 쉽게 채택할 수 있는 두 개의 npm 패키지를 출시했음을 발표하게 되어 기쁩니다. 첫 번째 패키지 monogram-prettier 는 모든 프로젝트에서 쉽게 사용할 수 있도록 해주는 더 예쁜 래퍼입니다. 두 번째 패키지 monogram-eslint 는 모든 프로젝트에서 쉽게 사용할 수 있도록 해주는 eslint 래퍼입니다.

더 예뻐

여러 팀 내에서 코드 스타일에 대한 많은 논쟁이 있습니다. 모든 사람을 행복하게 하려고 노력하는 것은 실망스러울 수 있습니다. Prettier를 채택하면 모든 사람이 같은 페이지에 있도록 코드 서식을 자동으로 지정할 수 있으며 스타일 선택을 놓고 논쟁하는 데 시간을 낭비하지 않아도 됩니다! Prettier는 일련의 규칙에 따라 코드의 형식을 자동으로 지정하는 많은 인기 있는 코드 편집기의 확장 기능입니다. 즉, 서식 지정에 대해 걱정하지 않고 코드를 작성하기만 하면 됩니다. Prettier가 대신 처리해 드립니다. 많은 팀이 Prettier를 코드 서식 지정의 표준으로 채택했으며, 여러분의 팀에서도 고려할 가치가 있습니다!
monogram-prettier는 package.json에 설치되며 미리 정의된 더 예쁜 규칙을 제공합니다. 설치를 추가하고 package.json에 추가하기만 하면 됩니다.

설치

npm 또는 yarn 를 통해 패키지를 설치합니다.

yarn add --dev @monogram/prettier-config

package.json에 추가하십시오.

규칙을 적용하려면 package.json에 추가해야 합니다.

"prettier": "@monogram/prettier-config",

연장하다

A.prettierrc.js 파일은 필요하지 않으나 확장하여 자신만의 설정을 추가하고 싶다면 이렇게 사용하시면 됩니다.

// .prettierrc.js
module.exports = {
 ...require('@github/prettier-config'),
 tabWidth: 2,
 useTabs: false,
 overrides: [
   {
     files: '*.scss',
     options: {
       singleQuote: true,
       tabWidth: 2,
       useTabs: false,
       printWidth: 160
     }
   }
 ]
}

ESLint

ESLint는 JavaScript 코드를 linting하는 도구입니다. 팀의 코딩 표준을 적용하거나 더 나은 코드를 작성하는 데 사용할 수 있습니다. ESLint는 린팅에 대한 규칙 기반 접근 방식을 사용하므로 원하는 대로 구성할 수 있습니다. 즉, 팀의 요구 사항에 맞게 사용자 정의할 수 있고 모든 것이 업계 모범 사례를 준수하는지 확인할 수 있습니다. 코드 품질 보증을 막 시작했든 노련한 전문가이든 ESLint는 더 나은 코드를 작성하는 데 도움이 되는 도구입니다.

우리가 함께 만든 패키지는 monogram-eslint라고 하며 프로젝트에 설치되고 자체 사전 정의된 ESLint 규칙을 제공합니다.

설치

설치하려면 npx를 통해 실행해야 합니다.

npx @monogram/eslint-config

두 패키지 모두 오픈 소스이며 GitHub에서 사용할 수 있습니다. 우리는 당신이 그것들을 어떻게 사용하고 있는지에 대한 당신의 의견을 듣고 싶고 PR을 통해 자유롭게 기여할 수 있습니다. 또는 GitHub로 문의해 주세요. 코드 품질을 더욱 향상시키는 데 도움을 주셔서 감사합니다!