{"id":68017,"date":"2024-09-30T17:42:10","date_gmt":"2024-09-30T12:12:10","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=68017"},"modified":"2024-10-03T14:12:00","modified_gmt":"2024-10-03T08:42:00","slug":"eslint-prettier-configuration-react-nativeairbnb-style","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/eslint-prettier-configuration-react-nativeairbnb-style\/","title":{"rendered":"EsLint & Prettier Configuration React Native(Airbnb Style)"},"content":{"rendered":"

This is a step-by-step guide for integrating ESLint<\/strong> and Prettier<\/strong> into a React Native<\/strong><\/a> project to ensure code quality and consistent formatting. You are essentially setting up Airbnb’s style guide<\/strong> with React-specific configurations and integrating it with Prettier<\/strong> to automatically format the code.<\/p>\n

\n

Steps Breakdown<\/h3>\n

1. Install Dependencies<\/h4>\n

Remove the previous ESLint configuration, and install the necessary packages.<\/p>\n

Commands:<\/h4>\n
yarn remove @react-native-community\/eslint-config eslint<\/code><\/pre>\n
yarn add -D eslint eslint-plugin-react-native prettier eslint-config-prettier<\/code><\/pre>\n<\/div>\n
\n
2. Initialize ESLint<\/h4>\n
Run the following command to initialize ESLint and generate a configuration file:<\/p>\n
npx eslint --init<\/code><\/pre>\n
Follow the prompts as outlined below:<\/p>\n
    \n
  • Q1:<\/strong> Choose “To check syntax, find problems, and enforce code style.”<\/li>\n
  • Q2:<\/strong> Choose “JavaScript modules (import\/export).”<\/li>\n
  • Q3:<\/strong> Choose “React.”<\/li>\n
  • Q4:<\/strong> Select “No” for TypeScript support.<\/li>\n
  • Q5:<\/strong> Choose “Node” (since React Native runs in a Node environment).<\/li>\n
  • Q6:<\/strong> Choose “Use a popular style guide.”<\/li>\n
  • Q7:<\/strong> Choose “Airbnb.”<\/li>\n
  • Q8:<\/strong> Choose “JSON” for the config file format.<\/li>\n<\/ul>\n
    Select “Yes” when prompted to install the dependencies.<\/p>\n<\/div>\n
    \n
    3. Update .eslintrc.json<\/code><\/h4>\n
    Replace the generated .eslintrc.json<\/code> file with the following configuration to integrate Prettier<\/strong> and React Native-specific rules:<\/p>\n
    {\r\n  \"env\": {\r\n    \"browser\": true,\r\n    \"es2021\": true\r\n  },\r\n  \"extends\": [\r\n    \"plugin:react\/recommended\",\r\n    \"airbnb\",\r\n    \"airbnb\/hooks\",\r\n    \"prettier\"\r\n  ],\r\n  \"plugins\": [\"react\", \"react-native\"],\r\n  \"parserOptions\": {\r\n    \"ecmaVersion\": \"latest\",\r\n    \"sourceType\": \"module\"\r\n  },\r\n  \"rules\": {\r\n    \"react\/function-component-definition\": \"off\",\r\n    \"no-param-reassign\": \"off\",\r\n    \"react\/jsx-filename-extension\": [1, { \"extensions\": [\".js\", \".jsx\"] }],\r\n    \"no-use-before-define\": [\"error\", { \"variables\": false }],\r\n    \"react\/prop-types\": [\"error\", { \"ignore\": [\"navigation\", \"navigation.navigate\"] }],\r\n    \"react-native\/no-inline-styles\": \"error\",\r\n    \"max-lines\": [\"error\", { \"max\": 500 }]\r\n  }\r\n}<\/code><\/pre>\n<\/div>\n
    \n
    4. Create .eslintignore<\/code><\/h4>\n
    Add a .eslintignore<\/code> file to exclude certain files or directories from ESLint checks.<\/p>\n
    .eslintignore<\/code>:<\/h4>\n
    node_modules\/\r\nbuild\/*.js\r\nconfig\/*.js\r\ncoverage\/*.js\r\ncoverage\/*\r\njest\/*.js\r\n__tests__\/*\r\n__tests__\/*.js<\/code><\/pre>\n<\/div>\n
    \n
    5. Create .prettierrc.json<\/code><\/h4>\n
    Add the following configuration in a .prettierrc.json<\/code> file to set up Prettier<\/strong> formatting rules:<\/p>\n
    {\r\n  \"arrowParens\": \"always\",\r\n  \"bracketSpacing\": true,\r\n  \"jsxBracketSameLine\": false,\r\n  \"jsxSingleQuote\": false,\r\n  \"quoteProps\": \"as-needed\",\r\n  \"singleQuote\": true,\r\n  \"semi\": true,\r\n  \"printWidth\": 100,\r\n  \"useTabs\": false,\r\n  \"tabWidth\": 2,\r\n  \"trailingComma\": \"es5\"\r\n}<\/code><\/pre>\n<\/div>\n
    \n
    6. Add Scripts to package.json<\/code><\/h4>\n
    Add the following scripts to your package.json<\/code> file to run ESLint<\/strong> and Prettier<\/strong>:<\/p>\n
    package.json<\/code>:<\/h4>\n
    \"scripts\": {\r\n  \"lint\": \"eslint .\",\r\n  \"lintFixAll\": \"eslint 'src\/**\/*.{js,jsx}' --fix\",\r\n  \"prettierFixAll\": \"prettier --write 'src\/**\/*.{js,jsx}'\",\r\n  \"fix:lintPrettier\": \"yarn prettierFixAll && yarn lintFixAll\"\r\n}<\/code><\/pre>\n
    This will allow you to lint and fix code formatting issues with a single command.<\/p>\n<\/div>\n
    \n
    7. Usage<\/h4>\n
    You can now run the following commands to check and fix issues in your project:<\/p>\n
      \n
    • Lint all files:<\/strong> yarn lint<\/code><\/li>\n
    • Fix all ESLint issues:<\/strong> yarn lintFixAll<\/code><\/li>\n
    • Fix all Prettier formatting issues:<\/strong> yarn prettierFixAll<\/code><\/li>\n
    • Run both Prettier and ESLint fixes:<\/strong> yarn fix:lintPrettier<\/code><\/li>\n<\/ul>\n<\/div>\n
      \n
      Conclusion<\/h3>\n
      By following these steps, your React Native project will be set up with ESLint<\/strong>, Prettier<\/strong>, and Airbnb\u2019s style guide<\/strong>, ensuring code quality and formatting consistency.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      This is a step-by-step guide for integrating ESLint and Prettier into a React Native project to ensure code quality and consistent formatting. You are essentially setting up Airbnb’s style guide with React-specific configurations and integrating it with Prettier to automatically format the code. Steps Breakdown 1. Install Dependencies Remove the previous ESLint configuration, and install […]<\/p>\n","protected":false},"author":1786,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":44,"footnotes":""},"categories":[5881],"tags":[6803,6808,6804,6805,6456,6801,6807,55,1156,6802,6806,4064,5853],"class_list":["post-68017","post","type-post","status-publish","format-standard","hentry","category-react-native","tag-airbnbstyleguide","tag-codeconsistency","tag-codeformatting","tag-codelinting","tag-codequality","tag-eslint","tag-eslintconfig","tag-javascript","tag-node","tag-prettier","tag-prettierconfig","tag-react","tag-reactnative"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t