자바스크립트 코드를 확인하는 방법

JavaScript 코드를 작성할 때 코드의 품질과 가독성을 보장하기 위해 코드 검사를 수행해야 하는 경우가 있습니다. 코드 검사를 통해 발생할 수 있는 일부 오류와 불규칙한 작성을 발견할 수 있으므로 문제를 조기에 발견하면 문제를 더 빠르게 해결할 수 있어 불필요한 개발 비용을 줄일 수 있습니다. 이 기사에서는 두 가지 도구를 사용하여 JavaScript 코드를 검사하는 방법을 설명하겠습니다.

1. Lint 도구 사용

ESLint는 JavaScript 코드를 확인하고 가능한 문제를 찾는 데 도움이 되는 매우 인기 있는 코드 검사 도구입니다. ESLint에는 기존 컴파일러가 찾을 수 없는 문제를 찾는 데 도움이 되는 매우 광범위한 규칙 세트가 있습니다. 동시에 ESLint는 다양한 요구 사항을 충족하기 위해 규칙을 사용자 정의하여 기능을 확장할 수도 있습니다.

1. ESLint 설치

ESLint를 사용하기 전에 ESLint를 로컬에 설치해야 합니다. 설치하기 전에 Node.js와 npm을 설치해야 합니다. 다음 단계를 계속하려면 먼저 이 두 도구를 컴퓨터에 설치해야 합니다.

ESLint를 설치하려면 터미널에서 다음 명령을 실행하세요.

npm install eslint --save-dev

설치가 완료되면 ESLint를 사용하여 JavaScript 코드를 검사할 수 있습니다.

2. ESLint 구성

ESLint를 사용하기 전에 코드를 올바르게 확인할 수 있도록 규칙을 구성해야 합니다. ESLint는 .eslintrc.json 파일을 통해 구성을 로드할 수 있습니다.

프로젝트의 루트 디렉터리에 .eslintrc.json 파일을 만들고 여기에 필요한 규칙을 정의할 수 있습니다. 다음은 샘플 ESLint 구성 파일입니다.

{
  "parserOptions": {
    "ecmaVersion": 8,
    "sourceType": "module"
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "warn"
  }
}

이 샘플 구성에서는 ESLint가 ECMAScript 8 버전을 사용하고 모듈 가져오기를 사용하도록 지정합니다. 또한 사용되지 않는 변수에 대한 경고 요구 및 console.log 문에 대한 경고와 같은 몇 가지 규칙을 지정했습니다.

3. Run ESLint

구성을 완료한 후 다음 명령을 사용하여 ESLint를 실행할 수 있습니다.

./node_modules/.bin/eslint your-file.js

이 명령은 JavaScript 코드를 확인하고 오류 및 경고를 출력합니다. ESLint를 사용하여 다양한 명령줄 옵션을 실행하면 오류나 경고 등 다양한 결과를 표시할 수 있습니다.

2. Prettier 사용

Prettier는 코드의 형식을 자동으로 지정하는 도구로, 코드의 스타일과 형식을 통일하고 코드의 가독성과 유지 관리성을 향상시키는 데 도움이 됩니다. 코드를 작성할 때 Prettier는 코드의 들여쓰기, 공백, 세미콜론 및 기타 형식을 자동으로 조정하고 코드 스타일과 사양이 일관되도록 보장할 수 있습니다.

1. Prettier 설치

Prettier를 설치하려면 터미널에서 다음 명령을 실행하세요.

npm install prettier --save-dev

설치가 완료되면 Prettier를 사용하여 코드 형식을 지정할 수 있습니다.

2. Prettier 구성

ESLint와 유사하게 Prettier는 구성 파일을 통해 규칙을 로드할 수도 있습니다. Prettier는 Visual Studio Code, Atom 등과 같은 거의 모든 코드 편집기를 지원할 수 있습니다.

Visual Studio Code의 작업 영역 설정에 다음 구성을 추가할 수 있습니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

이 구성을 사용하면 Prettier 플러그인이 활성화되고 JavaScript 파일을 저장할 때 코드 형식이 자동으로 지정됩니다.

3. Prettier 실행

구성을 완료한 후 다음 명령을 사용하여 Prettier를 실행할 수 있습니다.

npx prettier your-file.js

이 명령은 JavaScript 코드의 형식을 지정하고 형식화된 코드를 출력합니다. 다양한 명령줄 옵션을 사용하여 코드 형식 지정 동작을 조정할 수 있습니다.

요약

위의 소개를 통해 JavaScript 코드 검사 및 형식 지정이 매우 중요하며 코드 품질, 가독성 및 유지 관리성을 향상시키는 데 도움이 될 수 있음을 알 수 있습니다. ESLint와 Prettier는 코딩 효율성과 코드 품질을 향상시키기 위해 위의 단계에 따라 설치하고 구성할 수 있는 매우 실용적인 두 가지 도구입니다.

위 내용은 자바스크립트 코드를 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!