Bitovi ESLint 구성: 코드를 개선하기 위해 직접 선택한 규칙

Linting은 코드 품질을 보장하는 중요한 단계이며 개발 파이프라인의 자동화된 프로세스에 적합합니다. 대부분의 팀은 프레임워크에서 제공하는 기본 린트 구성을 사용하므로 확장된 ESLint 규칙 세트로 런타임 오류를 방지하고 코드 품질을 높일 수 있는 기회를 놓치고 있습니다.

Bitovi는 @bitovi/eslint-config 및 @bitovi/eslint-plugin 패키지를 발표하게 되어 기쁩니다!

Bitovi의 고객과 커뮤니티를 위한 더 나은 코드 품질과 더 나은 표준을 추구하기 위해 우리는 최고의 ESLint 규칙을 신중하게 선택하고 기존 격차를 메우기 위해 자체적으로 일부를 만들었습니다. 클라이언트 및 내부 프로젝트에 대한 경험을 기반으로 일반적인 함정을 피하기 위해 기존 권장 규칙 세트 및 선택된 규칙을 기반으로 빌드@bitovi/eslint-config했습니다.

Bitovi ESLint 구성에는 무엇이 있습니까?

ESLint-config 패키지에는 전용 Angular 및 React 규칙 세트가 있지만 프로젝트는 RxJS와 같은 다른 특정 규칙 세트의 이점을 누릴 수도 있습니다. 다음은 ESLint 구성에 포함된 몇 가지 Angular 집합 규칙입니다.

사용하지 않는 변수를 제거하여 코드를 깨끗하게 유지 - @typescript-eslint/no-unused-vars

키보드 탐색의 접근성 문제 방지 - @angular-eslint/template/no-positive-tabindex

클릭 이벤트 바인딩이 있는 요소에 액세스할 수 있는지 확인 - @angular-eslint/template/click-events-have-key-events

클릭 이벤트 바인딩이 있는 구성 요소 클래스에 액세스할 수 있는지 확인 - @bitovi/host-listener-click-events-have-key-events

두 가지 짧은 단계에 따라 Bitovi의 권장 ESLint 규칙을 최대한 활용할 수 있습니다.

1. 설치

시작하려면 ESLint-config 패키지를 설치하세요! 실행 npm i -D @bitovi/eslint-config , 이는 npm install --save-dev @bitovi/eslint-config 의 줄임말입니다.

2. 사용법

설치가 완료되면 프로젝트의 ESLint 구성 파일 확장 배열에 rules provided by @bitovi/eslint-config 중 하나를 추가할 수 있습니다.

  extends: [
    '@bitovi/eslint-config/angular',
  ]

  // or, if you only want a specific rule set like RxJS
  extends: [
    '@bitovi/eslint-config/rules/rxjs',
  ]

무엇 향후 계획?

@bitovi/eslint-plugin 패키지에 더 많은 맞춤형 ESLint 규칙을 추가하여 프로젝트에 더 쉽게 접근할 수 있고 더 나은 SEO 및 Lighthouse Score 등을 얻을 수 있도록 할 계획입니다!

자세히 알아보고 싶으세요? Roadmap 을 살펴보십시오.

아이디어나 제안이 있으신가요? 우리는 그들에 대해 듣고 싶습니다. 할 수 있습니다open an issue at @bitovi/eslint-config repository.

질문이 있으시면 저희 Community Slack로 알려주세요!