for example, running npx eslint ./App.js --fix
on a fresh react native app that went through the eslint init process will cause the code to format from:
App.js:
import {
StyleSheet,
View,
TextInput,
ImageBackground,
Image,
TouchableOpacity,
SafeAreaView
} from 'react-native';
import { I18nManager } from 'react-native'
to:
import {
StyleSheet,
View,
TextInput,
ImageBackground,
Image,
TouchableOpacity,
SafeAreaView, // <<< LOOK HERE
, I18nManager } from 'react-native';
notice the double comma after SafeAreaView
any idea what causes the double commas and how to fix it? thanks you. .....................................................
my .eslintrc.json file:
{
"env": {
"es2021": true,
"node": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
}
package.json:
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.67.3"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/runtime": "^7.17.2",
"@react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.10.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.2",
"eslint-plugin-react-hooks": "^4.3.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
The issue has been resolved, it was a bug with eslint itself and the latest version (8.11.0) has applied a fix.