[React Native] Atom (Nuclide)에서 Linter 도입

소개

React Native 프로젝트에서 Atom 편집기를 사용하여 개발하고 있습니다.
다음은 Atom (Nuclide 패키지)을 사용하는 환경에서 JavaScript의 Linter를 사용할 수 있도록했을 때의 메모입니다.

lint란?

소스 코드의 구문을 구문 분석하는 프로그램.
linter를 도입하면 코드의 구문 검사를 자동으로 해줍니다.

도입 절차

버전은 npm 8.3.0, npm 5.5.1.

Atom 패키지 설치

Atom의 Settings 또는 apm으로 다음 패키지를 설치합니다.

linter

linter-eslint

linter-ui-default

기타 요청한 패키지를 설치합니다.

다음 경고가 표시되면 Disable Linter 또는 Disable Diagnostics 중 하나를 선택합니다.

이번은 Disable Linter를 선택.
lint의 결과는 atom-ide의 diagnostics UI에 표시됩니다.

샘플 앱 만들기

동작 확인을 위한 앱을 만듭니다.

$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject

npm 모듈 설치

eslint 및 babel-eslint를 설치합니다.

$ npm install eslint --save-dev
$ npm install babel-eslint --save-dev

이번에는 airbnb/javascript: JavaScript Style Guide을 사용하고 싶으므로 eslint-config-airbnb를 설치합니다.

$ npm install eslint-config-airbnb --save-dev

프로젝트의 import { AppRegistry } from 'react-native'; 코드에 대해 Atom에서 오류가 발생했으므로 eslint-plugin-import도 설치합니다.

$ npm install eslint-plugin-import --save-dev

.eslintrc 파일 만들기

프로젝트의 루트 디렉토리에 .eslintrc를 만듭니다.

eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "classes": true,
  },
  rules: {
    // React Native ではJSファイルにJSXを書く
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    // React Nativeでは画像を相対パスで読み込む
    'global-require': 'off',
  },
}