eslint 와 Prettier 설정에 대한 내용입니다.

npm install eslint babel-eslint prettier --save-dev 
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev 
npm install husky lint-staged  --save-dev

 

Package.json 에 추가

"lint-staged": {
  "*.js": ["eslint . --fix", "prettier --write"]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

 

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'prettier',
    'prettier/react',
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'script',
  },
  rules: {
    'import/no-unresolved': 'off',
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
        printWidth: 100,
      },
    ],
  },
  plugins: ['prettier'],
};

vscode 설정

좌측 하단에 톱니바퀴 모양을 눌러 settings

Edit in settings.jso

 

settings.json

{
    "editor.tabSize": 2,
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "editor.codeActionsOnSave": {
        // For ESLint
        "source.fixAll.eslint": true
    },
  "prettier.eslintIntegration": true
}

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

추가로 

사용하는 Package.json, vsCode/settings.json, .eslintrc.js, prettierrc.js 을 따로 첨부해서 나중에 사용해야겠네요. ^^;

{
  "name": "SomeAppName",
  "version": "0.0.1",
  "private": true,
  "lint-staged": {
    "*.js": [
      "eslint . --fix",
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/drawer": "^5.12.4",
    "@react-navigation/material-top-tabs": "^5.3.14",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "1.10.3",
    "react-native-reanimated": "2.0.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "2.18.1",
    "react-native-tab-view": "2.15.2",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "7.13.8",
    "@babel/runtime": "7.13.9",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.21.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "6.15.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.1.2",
    "eslint-plugin-react": "7.22.0",
    "husky": "5.1.3",
    "jest": "26.6.3",
    "lint-staged": "10.5.4",
    "metro-react-native-babel-preset": "0.65.2",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

settings.json

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "eslint.workingDirectories": [
    
    ],
    "prettier.tabWidth": 2,
    "prettier.eslintIntegration": true,
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        // For ESLint
        "source.fixAll.eslint": true
    },

    "eslint.alwaysShowStatus": true,
    //"prettier.disableLanguages": ["js"],
    //"files.autoSave": "onFocusChange",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 300000,
    "bracket-pair-colorizer-2.activeScopeCSS": [
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}",
        "opacity: 0.5"
    ],
    "editor.multiCursorModifier": "ctrlCmd",
}

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'prettier',
    'prettier/react',
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  'no-use-before-define': ['error', { variables: false }],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'import/no-unresolved': 'off',
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
        printWidth: 100,
      },
    ],
  },
  plugins: ['prettier'],
};

 

.prettierrc.js

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  semi: true,
  useTabs: false,
  tabWidth: 2,
  printWidth: 80,
};

 

행복한 고수되셔요.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
LIST
Posted by woojja

댓글을 달아 주세요

지난 Post 와 관련하여 React Navigation V5 설치에 관해 다시 정리한다.

 

먼저

react-native init 프로젝트명

으로 React native 기본 App 을 생성한다.

 

cd 프로젝트명

으로 생성한 App 의 Directory 로 이동한다.

 

cd ios

podfile 의 내용을 다음과 같이 수정한다.

  #use_flipper! <== 주석처리
  use_flipper!({ 'Flipper-Folly' => '2.3.0' }) # <= 추가
  
  post_install do |installer|
    flipper_post_install(installer)
  end

xcode 12.4 를 사용하는 경우에 위와 같이 처리해주어야 Build 시 오류가 발생하지 않는다.

그리고 pod 를 Update 해준다.

pod update

pod update 이전에 npm install 이 실행되어야 할 수도 있다.

npm install
npm install @react-navigation/native --save
npm install @react-navigation/stack --save

//추가 navigation
npm install @react-navigation/drawer
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

cd ios
pod install

다음과 같이 설치가 되었다면 코드를 작성하고 실행해 본다.

// Screens/HomeScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const HomeScreen = (props) => {
    return (
        <View
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
        >
            <Text>Home Screen</Text>
        </View>
    );
};

export default HomeScreen;
import React from 'react';
import { View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './Screens/HomeScreen';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};
export default App;
react-native run-ios 또는 npm run ios

 

행복한 고수되십시오.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
LIST
Posted by woojja

댓글을 달아 주세요

React Native 개발을 시도하면서 많은 시행착오를 겪고 있습니다.

그 중 가장 큰 하나는 "Big Sur" 입니다.

 

최신 맥북을 샀다고 즐거워 한 것은 잠시 였습니다.

잘 된다고 하는 소스를 받아 실행을 시켜보면 여지없이 오류가 났으며

Googling 을 통해 안 것은 "Big Sur" 에 관한 것이었습니다.

"Big Sur" 가 나오면서 XCode 버전업이 되었으며

그 버전업으로 인해 Third Party 중 몇몇 package 들이 오류를 일으키고 있었습니다.

 

그 중 디버깅에 사용하는 Flipper 의  Folly 가 가장 자주 만나는 녀석입니다.

 

해결방법은 ios directory 에 있는 Podfile 의 내용을 다음과 같이 수정하는 것입니다.

 

  #use_flipper!
  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

 

그리고 Navigator 사용하는데 오랜시간을 보내게 되었습니다.

createStackNavigator 와 createAppContainer 때문인데요.

 

문제는 다음의 import 문입니다.

import { createStackNavigator, createAppContainer } from 'react-navigation';

하지만 오류를 만나게 됩니다.

(오류를  capture 하지 않았네요... 귀차니즘 발동으로 그냥 넘어가겠습니다. ^^;)

 

내용은 대충 "createStatckNavigator 는 react-navigation-stack 으로 옮겨졌다.

 

그럼 당연히 

npm install react-navigation-stack --save

로 설치하고 아래와 같이 바꿔줘야겠지요?

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

그런데 이상하게도 다른 오류들이 나타납니다.

react-native-gesture-handler 가 없다느니 react-native-safe-area-context 가 없다느니...

당연히 다시 설치해주고 Rebuild 해줘도 오류가 나옵니다.

 

아항... 메모장에 옮겨놓은 오류가 있어서 붙여놓습니다.

여튼... 

하라는 대로 해봤지만 별 소용이 없습니다.

 

서너시간은 npm install, npm uninstall  로 보내버렸네요... ㅡㅡ;

해당부분을 모두 지우고 다시 설치를 계속 반복하다가...

 

차근차근 해보자는 생각에 

다음과 같이 진행했습니다.

다음 공식 page 를 참고했구요.

reactnavigation.org/docs/4.x/getting-started

reactnavigation.org/docs/4.x/hello-react-navigation

 

먼저 react-navigation 과 관련된 모든 package 들은 uninstall 해줍니다.

 

그리고 ios directory 로 이동하여 

pod update 해줍니다.

cd ios
pod update
cd ..

그리고 다음과 같은 실행해 줍니다.

npm install react-navigation --save
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context --save

 

@react-native-community/masked-view react-native-safe-area-context 부분은 중복되지만 그냥 실행해줬습니다.

cd ios
pod install
cd ..

이 부분을 찾아 내느라 몇번의 시행착오를 거쳤지만 결국엔 오류없는 화면을 봤습니다. ^^;

IOS 개발도 낯선대다가 Expo 사용하지 않고 React Native CLI 를 사용하여 작업하려니 시행착오가 많네요.

얼마나 많은 퀘스트 들이 기다리고 있을지 기대가 됩니다.

 

제가 잘못알고 있는 점이 있다면 알려주십시오.

여러분의 소중한 작은 충고가 React Native 개발자로 나아가는데 큰 도움이 되리라 생각합니다.

 

행복한 고수되십시오.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
LIST
Posted by woojja

댓글을 달아 주세요

이전버튼 1 이전버튼
반응형