Skip to main content

ESLint & Prettier

Plugin ES Lint — allows you to write your code cleaner, tells you where you make mistakes and, in general, it is a good practice for working in a team, so that everyone has everything in the same style - ES Lint will suggest which variables you do not use, where and which components do not use, shows syntax errors and where you put spaces incorrectly, where you put semicolons, etc. That is, this is already a de facto standard that must be used in writing your code, and this plugin will save you from many stupid mistakes that you make when developing your application.

Prettier - Code formatting tool with support for multiple languages, minimum configuration and maximum imposed rules.


Install dependencies

 yarn add eslint eslint-config-airbnb babel-preset-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-react-native prettier prettier-eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-react-hooks --dev


Rules Eslint

Add rules to .eslintrc.js

module.exports = {
root: true,
parser: 'babel-eslint',
extends: ['airbnb', 'prettier'],
plugins: ['react', 'react-native', 'jsx-a11y', 'import', 'react-hooks'],
parserOptions: {
ecmaFeatures: {
jsx: true
env: {
'react-native/react-native': true
rules: {
'no-param-reassign': 0,
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react/jsx-filename-extension': ['off'],
'react/jsx-one-expression-per-line': 0,
'linebreak-style': ['off'],
'implicit-arrow-linebreak': 0,
'no-undef': ['error'],
'react/sort-comp': ['off'],
'react/prefer-stateless-function': ['off'],
'react/destructuring-assignment': 1,
'function-paren-newline': 0,
semi: ['error', 'never'],
'spaced-comment': 0,
'comma-dangle': ['error', 'never'],
'react/prop-types': 0,
'no-extra-boolean-cast': 0,
'quote-props': 0,
'object-curly-spacing': ['error', 'always'],
camelcase: 0,
'no-nested-ternary': 0,
'react/jsx-wrap-multilines': 0,
'object-curly-newline': 0,
'operator-linebreak': 0,
'no-unused-expressions': 0,
'global-require': 0,
'max-len': 0,
'import/no-cycle': 0,
'no-underscore-dangle': 0,
'no-return-assign': 0,
'import/prefer-default-export': 0,
'jsx-quotes': ['error', 'prefer-double'],
'no-console': 'error',
'arrow-parens': 0,
'eol-last': 0,
'react-native/no-unused-styles': 0,
'react-native/split-platform-components': 0,
'react-native/no-inline-styles': 0,
'react-native/no-color-literals': 0,
'react-native/no-raw-text': 0,
'consistent-return': 0
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ios.js', '.android.js']


Rules Prettier

Add rules to .prettierrc.js

module.exports = {
singleQuote: true,
printWidth: 120,
tabWidth: 2,
trailingComma: 'none',
bracketSpacing: true,
semi: false,
useTabs: false,
jsxBracketSameLine: false,
arrowParens: 'avoid'


Editing package.json

Where we add scripts:

  • Симулятор. Для меня это iPhone SE так как его размер экрана миниматльное требование по верстке(iPhone 3,4 уже все)
  • Линтер, который будет запрещать вам пушить до исправления всех ошибок в коде
  • Установка Pods
"scripts": {
"ios": "react-native run-ios --simulator='iPhone SE'",
"android": "react-native run-android",
"lint": "esw src/**",
"lint-watch": "esw -w --changed src/**",
"postinstall":"cd ./ios && pod install && cd .."
"precommit": "lint",


We transfer App.js

Create a folder src and move the App.js file there, renaming it src/index.js


Run the application

yarn start-ios or yarn start-android


Which library allows you to write your code cleaner, tells you where you are making mistakes?

  1. Prettier
  2. ES Lint
  3. Babel

To see how well you learned this lesson, take the test in the mobile application of our school on this topic or in the telegram bot.



Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy Vasilev