[React Native] React Native Editor Configuration

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

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