ESLint 및 LWC를 사용한 정적 분석

우리가 알고 있는 바와 같이 정적 분석은 여러 가지 상황에서 유용하다. 코드 라이브러리의 일치성을 유지하고 잠재적인 성능 문제를 포착하든, 코드를 다시 써서 더욱 습관화시키든.이전 기사에서 PMD를 사용하여 Apex 코드를 분석했습니다.그러나 본고에서 우리는 또 다른 Salesforce 프로그래밍 환경인 Lighting 웹 Components를 어떻게 분석하는지 고려할 것이다.
세일즈포스는 신속하고 기업적인 허브 포장기Lightning Web Components로 web components를 개발했다.LWC는 웹을 지원하는 동일한 HTML, CSS, 자바스크립트에 구축되어 있기 때문에 이 언어의 모든 분석기를 여기에 적용할 수 있습니다.
이 기사에서는 ESLint를 LWC 프로젝트와 통합합니다.또한 ESLint를 PMD와 통합하는 것처럼 편집기 및 CI 시스템과 통합하는 방법도 학습합니다.

선결 조건
시작하기 전에 비교적 새로운 Node 버전을 설치해야 합니다.일부 JavaScript를 숙지하는 것도 도움이 되지만 필요하지 않습니다.본 강좌에서 우리는 VS Code도 사용할 것이다.
먼저 Git 저장소에서 LWC 샘플 항목을 복제합니다https://github.com/gjtorikian/sfdc-linting.
이 저장소는 the dreamhouse-lwc project의 분기 사본으로 일부 오류가 발생했을 뿐입니다.이를 통해 ESLint가 어떻게 작동하는지 보여 드리겠습니다.
실행 npm install 다운로드 항목의 의존항.ESLint가 그중의 하나지만, 너도 얻었다LWC specific ESLint plugins.우리는 아래에서 이것들을 상세하게 소개할 것이다.

통합 ESLint
이 리포의 사용자 정의 LWC 구성 요소는 force-app/main/default/lwc 디렉토리에 저장됩니다.그것을 열 때, 디렉터리마다 하나의 구성 요소를 대표하고, HTML과 자바스크립트 파일이 있는 몇 개의 디렉터리를 볼 수 있습니다.
JavaScript는 컴파일 언어가 아닌 해석 언어이기 때문에 실행하기 전에 코드 경로가 정확한지 확인하는 내재적인 방법이 없습니다.Apex, Kotlin, C 또는 기타 컴파일러 언어에 대해 컴파일러가 모든 코드가 해당 언어의 문법 규칙에 부합되는지 확인하기 위해 개입합니다.JavaScript, Ruby, Python 또는 다른 해석 언어는 사용자가 어떤 것을 만나기 전에 일반적으로 그것이 유효한지 모른다.
이것이 바로 정적 분석기가 이런 해석 언어에 매우 중요한 이유이다.이들의 힘을 과시하기 위해 ESLint를 운행해 무슨 일이 일어날지 살펴봅시다.이 프로젝트에 대해 ESLint는 an npm script 로 설정되어 있기 때문에, 우리는 어떤 설정도 실행할 필요가 없습니다.클론 항목의 디렉토리에 명령 프롬프트에서 다음 줄을 입력합니다.

npm run lint

다음과 같은 출력이 표시되어야 합니다.

> [email protected] lint
> eslint **/{lwc,aura}/**/*.js


dreamhouse-lwc/force-app/main/default/lwc/daysOnMarket/daysOnMarket.js
  39:22  error  Parsing error: Unexpected token, expected "(" (39:22)

dreamhouse-lwc/force-app/main/default/lwc/propertyTile/propertyTile.js
  7:15  error  'selectedEvent' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

두 번째 오류는 Apex 프로젝트에서 본 것과 유사합니다. 변수를 만들었지만 사용하지 않았습니다.그러나 첫 번째 잘못은 훨씬 사악하다.daysOnMarket/daysOnMarket.js 파일을 열고 39번째 줄로 이동하면 최종 조건이 else if로 잘못 표시된 것을 알 수 있습니다else:

if (this.daysOnMarket < MAX_DAYS_NORMAL_STATUS) {
  this.status = 'normal'
} else if (this.daysOnMarket < MAX_DAYS_WARNING_STATUS) {
  this.status = 'warning'
} else if {
  this.status = 'alert'
}

단원 테스트에서 이런 오류를 포착하는 것은 보장할 수 없다.이것은 미묘한 자바스크립트 오류로 정적 분석기가 이런 오류를 포착하고 보고하기에 매우 적합하다.
ESLint 규칙 구성은 PMD와 유사합니다.ESLint는 XML 대신 JSON 기호를 사용합니다.이 규칙이 어떻게 정의되었는지 보기 위해서 파일 force-app/main/default/lwc/.eslintrc.json 을 엽니다.맨 위에 한 줄의 문자가 보입니다.

"extends": ["@salesforce/eslint-config-lwc/recommended", "prettier"],

여기에서, 우리의 규칙 집합은 우리가 이전에 설치한 @salesforce/eslint-config-lwc 패키지를 확장했다.우리 프로젝트는 ESLint 규칙이 설정된 다른 npm 패키지를 추가하거나 계승할 수도 있습니다.

VS 코드에 ESLint 통합
명령줄에서 ESLint를 실행하는 대신 편집기에 직접 통합합니다.이것은 터미널 사이를 왔다 갔다 할 필요가 없이 코드를 작성할 때 바로 피드백을 받을 수 있게 한다.
a plugin for VS Code that brings ESLint 편집기에 직접 들어갑니다.페이지에 액세스하여 설치를 클릭하면 플러그 인이 다운로드되어 편집기에 설치됩니다.daysOnMarket.js 파일을 반환합니다.이전에 불쾌했던 else if 선이 지금 아래에 빨간색 곡선이 있다는 것을 알아차릴 수 있을 것이다.마우스 커서를 위에 놓으면 ESLint의 오류 메시지가 표시되는 대화 상자가 나타납니다.


CI에 ESLint 통합
이로써 ESLint가 전체 프로젝트에서 어떻게 실행되고 편집기의 각 파일에 적용되는지 이해할 수 있습니다.통합 ESLint의 최종 위치는 CI 테스트 키트에 있습니다.테스트 세트가 응용 프로그램의 논리를 완전히 테스트하는 것처럼 정적 분석기도 코드에서 실행되어 잠재적인 오류나 문제를 식별해야 한다.
ESLint는 npm을 통해 설치되는 의존 항목이기 때문에, CI 서버는 지원할 추가 설정이 필요하지 않습니다.GitHub Actions를 사용하는 경우 명령줄에서 수행한 것처럼 Actions YAML 파일에 별도의 단계를 추가하여 프로그램을 실행할 수 있습니다.

name: CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Install modules
      run: npm install
    - name: Run ESLint
      Run: npm run lint

GitHub 작업을 사용하지 않는 경우 스크립트에서 ESLint를 실행하기만 하면 됩니다.

#!/bin/sh

set -e

npm run lint

ESLint가 0이 아닌 상태로 실패하므로 문제가 있으면 이 스크립트를 실행하면 CI가 실패로 표시됩니다.

결론
이 시리즈에서 우리는 정적 분석이 코드를 깨끗하고 일치하며 효과적으로 유지하는 데 어떻게 도움이 되는지 전면적으로 소개할 것이다.정적 분석은 코드 평가에서 무시될 수 있는 작은 문제를 포착하여 소프트웨어 개발 도구 체인의 이상적인 구성 요소로 만들 수 있다.ESLint와 같은 도구를 CI 테스트 키트에 통합하여 향후 변경 사항이 영향을 미치지 않도록 할 수 있습니다.
SalesforceTrailhead badges는 LWC와의 협업에 대한 더 많은 정보를 얻기 위해 다양한 주제에 대해 논의했다.ESLint website는 프로젝트 이념과 목표에 대한 더 많은 정보를 제공했다.Salesforce와 VS 코드를 어떻게 결합하는지 더 많은 지식을 찾고 싶다면a whole suite of tools 플러그인으로 설치하여 코드를 작성하기 쉽도록 하세요!