Linter는 실시간 구문 분석을 수행하는 도구입니다. 구문 분석을 설치하면 구문과 코딩 스타일의 오류를 실시간으로 수정할 수 있으며 개발 효율성 향상과 팀 내에서 코드의 통일성이 뛰어납니다.

Linter 자체는 용기이므로 언어에 따라 플러그인을 설치해야합니다. 이번에는 React Native (Javascript)를 사용하므로 ESLint을 플러그인으로 설치합니다.

목차

1. Atom에 linter와 ESLint 설치

2. eslint-config-airbnb 패키지 설치

3. 규칙 활성화

4. 동작 확인

1. Atom에 linter와 ESLint 설치

Atom 설치 후 Atom -> Preferences -> Install 선택

검색 상자에 linter를 입력하면 linter가 검색 ​​결과에 표시되므로 설치합니다.

검색 상자에 linter-eslint를 입력하면 linter-eslint가 검색 ​​결과에 표시되므로 설치합니다.

2. eslint-config-airbnb 패키지 설치

유명소 eslint-config-airbnb를 도입한다. eslint-config-airbnb는 Airbnb가 게시하는 ESLint의 규칙 세트입니다. 어떤 규칙은 eslint-config-airbnb을 보면 확인할 수 있습니다.

아래 명령은 복잡하지만 eslint-config-airbnb가 의존하는 패키지를 포함하여 모두 설치할 수 있습니다.

$ (
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

무엇을하고 있는지 보충하면 다음 명령을 사용하여 종속 패키지를 알고 이러한 종속 패키지를 위의 명령과 함께 설치합니다.

$ npm info "eslint-config-airbnb@latest" peerDependencies
{ eslint: '^4.19.1',
  'eslint-plugin-import': '^2.12.0',
  'eslint-plugin-jsx-a11y': '^6.0.3',
  'eslint-plugin-react': '^7.9.1' }

3. 규칙 활성화

eslint-config-airbnb를 사용하려면 .eslintrc를 만들고 airbnb 규칙을 사용한다고 선언하십시오.

$ vi .eslintrc

{
  "extends": [ "airbnb" ]
}

4. 동작 확인

";"를 삭제하면 오류가 발생했는지 확인할 수 있으며 올바르게 작동하고 있음을 알 수 있습니다.



덧붙여서 어떤 규칙이 적응되고 있는지를 클릭하여 확인할 수 있습니다. 위의 예에서 팝업을 클릭하면 규칙 내용이 나열된 다음 사이트이 표시됩니다.