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 ))*

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

반응형
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 ))*

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

반응형
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 ))*

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

반응형
Posted by woojja

댓글을 달아 주세요

Email Html 을 작성해 주는 Page 입니다.

 

htmlemail.io/inline/

 

Responsive Email CSS Inliner

Use our free CSS inliner tool to inline your styles in HTML for your email templates and to ensure they render properly in your customers email clients.

htmlemail.io

행복한 고수되셔요.

woojja ))*

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

반응형

'Web > CSS' 카테고리의 다른 글

[CSS] Responsive Email CSS Inliner  (0) 2021.01.27
Posted by woojja

댓글을 달아 주세요

집에서 조용히 일을 할때면 조금 어두운 환경에서 코딩하는 것을 선호합니다.

 

그러다 보니 IDE Tool 의 밝은 화면은 눈을 부시게 하여 평상시에도 주로 Dark Theme 를 사용합니다.

 

하지만 성격이 그리 까칠한? 성격은 아닌지라 옆에 끼고 살다시피하는 Management Studio 는  Dark Theme 없이도 

사용하고 있었습니다.

 

하지만 요즘들어 노안이 슬슬... 아니 이미 와서 눈건강에 신경이 많이 쓰이는데요.

오늘은 일하다 갑자기 눈에 거슬렸습니다.

 

그래서 조회를 해서... 찾아냈습니다. 2017년 글이군요... ㅡㅡ;

조금더 일찍 알았더라면 하는 아쉬움이 있습니다.

 

Object Explorer 는 바뀌지 않지만 좋네요.

저처럼 어두운 환경을 좋아하는 밝은? 성격의 개발자 분들께서 사용하시면 좋겠네요. ^^;

 

혹시 Editor 에서 영문을 사용하다가

딴짓하고 돌아와서 Typing을 할때 자동으로 한글모드로 변경되어 버리는 상황! 너무 속상한데요...

 

방법 혹시 아시는 분 계실까요? 아시는 분... 팁 좀 알려주셔요.

 

www.sqlshack.com/setting-up-the-dark-theme-in-sql-server-management-studio/

 

Setting up the dark theme in SQL Server management studio

In this article, we are going to explain step by step how to enable SSMS Dark theme in all versions of SQL Server Management Studio

www.sqlshack.com

 

SSMS 18
C:\Program Files (x86)\Microsoft SQL Server Management Studio 18\Common7\IDE

Once the file is opened in the text editor, 
scroll down and find the section of the code under the “Remove Dark theme” heading, 
add “//” (without quotation marks) at the beginning of the first line like shown below, 
and save the file:


powershell -Command "(gc 'C:\Program Files (x86)\Microsoft SQL Server Management Studio 18\Common7\IDE\ssms.pkgundef') -replace '\[\`$RootKey\`$\\Themes\\{1ded0138-47ce-435e-84ef-9ec1f439b749}\]', '//[`$RootKey`$\Themes\{1ded0138-47ce-435e-84ef-9ec1f439b749}]' | Out-File 'C:\Program Files (x86)\Microsoft SQL Server Management Studio 18\Common7\IDE\ssms.pkgundef'"

 

 

행복한 고수되십시오.

woojja ))*

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

반응형
Posted by woojja

댓글을 달아 주세요