【React Native】 eslint 도입
1. eslint 설치
npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-airbnb babel-preset-react-native -D
2. package.json의 scripts에 추가
"lint": "esw ./src/**",
"lint-watch": "esw -w --changed ./src/**",
"start-ios": "react-native run-ios && npm run lint-watch",
"start-android": "react-native run-android && npm run lint-watch"
package.json
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"start-ios": "react-native run-ios && npm run lint-watch",
"start-android": "react-native run-android && npm run lint-watch",
"lint": "esw app/**",
"lint-watch": "esw -w --changed app/**",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "3.0.0",
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.2.1",
"eslint-watch": "^3.1.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
view raw
3. ESLint 구성 파일 작성
파일 이름: .eslintrc
파일 경로: 프로젝트 루트
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"react/jsx-filename-extension": ["off"],
"linebreak-style": ["off"],
"no-undef": ["error"],
"react/sort-comp": ["off"],
"react/prefer-stateless-function": ["off"]
},
"globals": {
"it": 0,
"expect": 0,
"describe": 0,
"navigator": 0
}
}
디렉토리 구성
완성
이런 식으로 콘솔에 표시
참고
Reference
이 문제에 관하여(【React Native】 eslint 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kondoakio/items/40dd079d963e0ebbca2e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-airbnb babel-preset-react-native -D
"lint": "esw ./src/**",
"lint-watch": "esw -w --changed ./src/**",
"start-ios": "react-native run-ios && npm run lint-watch",
"start-android": "react-native run-android && npm run lint-watch"
package.json
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"start-ios": "react-native run-ios && npm run lint-watch",
"start-android": "react-native run-android && npm run lint-watch",
"lint": "esw app/**",
"lint-watch": "esw -w --changed app/**",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "3.0.0",
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.2.1",
"eslint-watch": "^3.1.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
view raw
3. ESLint 구성 파일 작성
파일 이름: .eslintrc
파일 경로: 프로젝트 루트
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"react/jsx-filename-extension": ["off"],
"linebreak-style": ["off"],
"no-undef": ["error"],
"react/sort-comp": ["off"],
"react/prefer-stateless-function": ["off"]
},
"globals": {
"it": 0,
"expect": 0,
"describe": 0,
"navigator": 0
}
}
디렉토리 구성
완성
이런 식으로 콘솔에 표시
참고
Reference
이 문제에 관하여(【React Native】 eslint 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kondoakio/items/40dd079d963e0ebbca2e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"react/jsx-filename-extension": ["off"],
"linebreak-style": ["off"],
"no-undef": ["error"],
"react/sort-comp": ["off"],
"react/prefer-stateless-function": ["off"]
},
"globals": {
"it": 0,
"expect": 0,
"describe": 0,
"navigator": 0
}
}
이런 식으로 콘솔에 표시
참고
Reference
이 문제에 관하여(【React Native】 eslint 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kondoakio/items/40dd079d963e0ebbca2e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【React Native】 eslint 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kondoakio/items/40dd079d963e0ebbca2e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)