cli-ssg에 정적 분석 도구 추가

정적 분석 도구는 형식 문제를 수정하고 의심스러운 코딩 구성을 발견하거나 일반적인 오류를 경고함으로써 소스 코드의 품질을 유지하는 데 도움이 됩니다. cli-ssg은 공동 작업 오픈 소스 프로젝트이므로 공통 서식 지정 및 린팅을 시행하기 위해 이를 배치하는 것이 특히 중요합니다.

더 예뻐

Prettier은 모든 출력 코드가 일관된 스타일을 준수하는지 확인하는 소스 코드 포맷터입니다. 다음을 사용하여 로컬로 설치하는 것으로 시작했습니다.

npm install --save-dev --save-exact prettier

구성 파일 만들기:

echo {}> .prettierrc.json

다음 아티팩트를 무시하도록 .prettierignore 파일 생성:

# Ignore artifacts:
node_modules
sample_input

Prettier가 제대로 구성되었는지 테스트하기 위해 다음을 사용하여 모든 파일을 포맷하려고 했습니다.

npx prettier --write .

이것이 내가 얻은 결과입니다.


모든 것이 예상대로 작동했기 때문에 npm 실행할 간단한 prettier 스크립트를 추가하여 저장소 작업을 하는 모든 사람을 위한 원스텝 솔루션을 추가했습니다.package.json에서:

"scripts": {
    "prettier": "prettier --write .",
    "prettier-check": "prettier --check ."
  }

이 변경 후 다음을 사용하여 더 예쁘게 실행할 수 있었습니다.

npm run prettier
npm run prettier-check //To check the files that are already formatted, rather than overriding them

ESLint

ESLint은 코드를 정적으로 분석하여 문제를 빠르게 찾고 종종 버그로 이어지는 특정 코드 패턴을 방지하는 린터입니다.

로컬로 설치하여 시작했습니다.

npm install eslint --save-dev

그런 다음 다음을 사용하여 구성 파일을 설정합니다.

npx eslint --init

제대로 설치되었는지 테스트하기 위해 소스 코드를 린팅해 보았습니다.

npx eslint .

그것은 효과가 있었다! 그러나 몇 가지 linting 오류도 발견했습니다.
process는 가져오기 없이 사용되었으므로 간단히 다음을 추가하여 쉽게 수정할 수 있습니다.

const process = require('process');

no-unused-vars는 argv가 CLI 설정의 일부이므로 제거할 수 없었기 때문에 수정하기가 약간 까다로웠습니다. 나는 다음을 사용하여 해당 줄을 무시했습니다.

//eslint-disable-next-line no-unused-vars

다시 실행하면 오류가 실제로 수정되었으며 이번에는 오류나 경고가 표시되지 않았습니다.

eslint를 실행하는 간단한 스크립트를 다시 추가하기 위해 eslint에 package.json 스크립트를 추가했습니다.

"scripts": {
    "eslint": "eslint --config .eslintrc.json ."
  }

이 변경 후 다음을 사용하여 소스 코드를 간단하게 린트할 수 있었습니다.

npm run eslint

VSCode 통합

포맷터와 린터를 이미 구성했기 때문에 이제는 VSCode와 통합하고 싶었습니다. .vscode 디렉토리에 settings.json 파일을 생성하여 이 작업을 수행했습니다. 파일을 저장할 때마다 prettier를 실행하기 위해 prettier를 기본 포맷터로 사용하는 옵션을 추가했습니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

사전 커밋 후크

내가 하고 싶었던 마지막 일은 husky 을 사용하여 사전 커밋 후크를 설정하는 것이었습니다. 나는 그것을 설치하여 시작했습니다.

npx husky-init && npm install

pretty-quick 사용 및 사전 커밋 후크 만들기:

npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

이제 사용자가 커밋을 생성하면 포맷터가 자동으로 실행됩니다.


Github: https://github.com/dhillonks/cli-ssg