Less cognitive load, faster file scanning!
ESLint! Because:
1npm i -D eslint eslint-plugin-import @typescript-eslint/parser
My config is in YAML because i prefer YAML (it has comments). You can convert it to JSON if you use JSOn.
1# .eslintrc.yaml
2# Configuration: https://eslint.org/docs/user-guide/configuring
3# Using with Prettier: https://prettier.io/docs/en/integrating-with-linters.html#recommended-configuration
4
5extends:
6 - eslint:recommended
7 - plugin:import/errors
8 - plugin:import/warnings
9 - plugin:import/typescript
10
11plugins:
12 - import
13
14settings:
15 import/resolver:
16 node:
17 extensions: ['.js', '.jsx', '.ts', '.tsx']
18 moduleDirectory: ['node_modules', 'src/']
19
20rules:
21 import/order:
22 - error
23 - groups:
24 - builtin
25 - external
26 - internal
27 - - parent
28 - sibling
29 pathGroups:
30 - pattern: react
31 group: external
32 position: before
33 pathGroupsExcludedImportTypes:
34 - builtin
35 newlines-between: always
36 alphabetize:
37 order: asc
38 caseInsensitive: true
1// React import (Always at the top)
2import React, { useState, useEffect } from 'react'
3
4// External
5import { LinearGradient } from 'expo-linear-gradient'
6import ContentLoader, { Rect } from 'react-content-loader/native'
7import { View, Text, Image, ScrollView, TouchableOpacity, Alert, Platform } from 'react-native'
8import { SafeAreaView } from 'react-native-safe-area-context'
9import { NavigationActions, NavigationRoute } from 'react-navigation'
10import { useNavigation } from 'react-navigation-hooks'
11import { NavigationStackOptions, NavigationStackProp } from 'react-navigation-stack'
12import { useDispatch, useSelector } from 'react-redux'
13
14// Internal imports
15import { SvgIcon } from 'components/icons'
16import { Routes } from 'components/navigation'
17import { Profile as TextLocalization } from 'helpers'
18import { selectUser } from 'store/auth'
19import { contactStateSelector, sendContact, clearContact, selectContactStateById } from 'store/contact'
20import { archiveConversationRequest } from 'store/conversation'
21import { selectConversationByUserId } from 'store/conversations'
22import { blockUserRequest } from 'store/report'
23import { RootState } from 'store/rootReducer'
24import { getUserDetails, clearUser, getUserByIdSelector } from 'store/user'
25import { UserSearch, ContactType, ContactState, UserDetails, UserProfile } from 'types'
26
27// Parent & Sibling imports
28import { Dimension, Color } from '../../Theme'
29import { DateTimeUtils, Localization, Sex } from '../../utils'
30import OptionsMenu, { Option } from '../common/OptionsMenu'
31import { Carousel } from '../profile/Carousel'
32import { ProfileActionButton } from '../profile/ProfileActionButton'
33import { ProfileTabs } from '../profile/ProfileTabs'
34import { styles, placeholderBgColor, placeholderFgColor, viewportWidth } from './Profile.style'