맞춤법 검사 그 이상: 정적 분석 도구로 코딩 공동 작업을 강화하는 방법

이번 주에는 소프트웨어 개발에서 코드 형식 지정의 중요성에 대한 지식을 넓혔습니다. 맞춤법 오류를 식별하고 수정하기 위해 맞춤법 검사 기능이 있는 워드 프로세싱 소프트웨어에 의존하는 것처럼 개발자는 코드 품질을 유지하기 위해 서식 지정 및 린팅 기능을 제공하는 코드 편집기를 활용해야 합니다.

정적 분석 도구를 사용하는 이유

코드의 품질을 높이고 개발 시간을 단축하려면 프로그래머가 정적 분석 도구를 활용하는 것이 필수적입니다. 여러 기여자와 함께 프로젝트를 공동작업할 때 코딩 표준을 준수하는 것이 중요합니다. 이를 통해 다른 사람들이 코드를 더 쉽게 읽고 이해할 수 있기 때문입니다. 이러한 필요성으로 인해 다양한 프로그래밍 언어에 맞춰진 다양한 도구가 등장하게 되었습니다. 이번 주 내 프로젝트에서는 JavaScript 코드베이스에 Prettier를 구현하기로 결정했습니다. 서식 도구 외에도 린터도 필수적입니다. Linter는 개발자가 프로그램 실행에 영향을 미치지 않을 수 있지만 확인하지 않은 채로 두면 코드에 심각한 문제를 일으킬 수 있는 간과된 오류를 식별하는 데 도움을 줍니다. 이를 위해 ESLint를 선택했습니다.

더 예뻐요

Prettier를 사용하기 위해 다음 명령을 사용하여 프로젝트에 로컬로 설치했습니다.

npm install --save-dev --save-exact 더 예쁘게

다음으로 .prettierrc 및 .prettierignore라는 두 가지 구성 파일을 만들었습니다.

• .prettierrc: 이 구성 파일에는 형식 지정 규칙이 포함되어 있습니다.

어떤 규칙도 무시하지 않고 기본 Prettier의 설정을 사용하고 싶어서 빈 개체로 남겨두었습니다.

• .prettierignore: 이 파일은 Prettier가 포맷해서는 안 되는 파일이나 디렉터리를 나열합니다.

Prettier가 접근하기를 원하지 않는 모든 파일과 폴더를 포함했습니다. 대부분은 구성 파일과 자체 생성 파일입니다.

참고:

• 두 파일 모두 프로젝트의 루트 디렉터리에 있어야 합니다.
• 설치 후 다음을 실행하여 Prettier의 기능을 테스트할 수 있습니다.

npx가 더 예뻐요 . --쓰기

• 해당 명령을 더 쉽게 실행할 수 있도록 명령줄에서 실행되는 스크립트를 만들었습니다. package.json 파일 내에 format이라는 새 스크립트를 추가했습니다.

이 기능을 사용하려면 다음 명령을 입력하세요.

npm 실행 형식

로컬 설정 및 명령줄 사용 외에도 Prettier는 확장을 통해 코드 편집기(예: VSCode)에 통합될 수도 있습니다. 일단 설치되면 파일을 저장할 때 자동으로 코드 형식을 지정합니다.

린터

ESLint는 코드 일관성을 향상하고 버그를 최소화하는 것을 목표로 ECMAScript/JavaScript 코드의 패턴을 식별하고 보고하도록 설계된 도구입니다. 다음을 사용하여 ESLint를 설치하고 구성할 수 있습니다.

npm init @eslint/config@latest

이 명령을 실행하면 일련의 질문이 터미널 설정 과정을 안내하고 .eslint.config.mjs라는 새 구성 파일이 생성됩니다. ESLint 버전 9.x를 사용하고 있으므로 모든 구성이 이 파일 내에 지정됩니다. 또한 무시 속성을 사용하여 ESLint가 무시할 불필요한 파일과 폴더를 나열했습니다.

린팅 프로세스를 간소화하기 위해 package.json에 스크립트를 추가하여 더 쉽게 실행할 수 있도록 했습니다.

스크립트를 실행하려면 다음 명령을 입력하세요.

npm 실행 린트

에디터 통합

개별 프로젝트에서는 앞서 언급한 설정으로 충분하지만 공동 작업 환경에서는 모든 기여자를 위한 통일된 개발 환경을 보장하는 것이 중요합니다. 따라서 루트 디렉터리에 두 개의 파일이 포함된 .vscode 폴더를 만들었습니다.

• extensions.json: 이 파일은 개발자가 프로젝트를 열 때 설치해야 하는 필수 확장 프로그램을 나열하여 프로젝트 시작 시 프롬프트를 제공합니다.

• settings.json: 이 구성은 다음을 보장합니다.

  • 편집기는 Prettier를 사용하여 저장 시 코드 형식을 지정합니다.
  • ESLint는 저장 시 Linting 문제를 자동으로 수정합니다.
  • ESLint는 JavaScript 파일의 유효성을 검사합니다.
  • Prettier에서는 코드 형식을 지정하기 위해 구성 파일이 필요합니다.

settings.json 및 Extensions.json을 사용하여 .vscode 폴더를 설정함으로써 모든 기여자가 Visual Studio Code에 원활하게 통합된 Prettier 및 ESLint를 사용하여 일관된 개발 환경을 공유하도록 합니다. 이 설정을 사용하면 프로젝트 구성에 따라 자동 코드 형식 지정 및 Linting이 쉬워져 코드 품질과 일관성 유지가 단순화됩니다.

서식 문제 해결

• Prettier를 실행한 후 주로 개체의 마지막 요소에 쉼표를 추가하여 수동 조정이 필요한 몇 가지 파일을 식별했습니다.

• ESLint 실행 후 13개의 문제를 발견했는데, 그 중 대부분은 초기화가 필요하지 않은 전역 객체 프로세스 사용으로 인한 것이었습니다. 이 문제를 해결하기 위해 영향을 받은 파일 상단에 다음 설명을 추가했습니다.

/* eslint-disable no-undef */

또한 사용되지 않은 가져온 값도 있었습니다. 이러한 경우에는 간단히 제거했습니다.

결론

정적 분석 도구를 탐색하면서 특히 협업 프로젝트에서 그 중요성을 더 깊이 이해하게 되었습니다. 이러한 도구의 주요 목표는 팀워크를 촉진하고 높은 코드 품질을 유지하는 것입니다. 이제 처음부터 이러한 필수 도구를 통합하기 위해 프로젝트를 효과적으로 설정하는 방법을 알게 되었습니다.

위 내용은 맞춤법 검사 그 이상: 정적 분석 도구로 코딩 공동 작업을 강화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!