My Sublime 3 settings

{
    "auto_complete_commit_on_tab": true,
    "color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
    "draw_white_space": "all",
    "font_face": "Fira Mono",
    "font_size": 20,
    "tab_size": 2,
    "theme": "Brogrammer.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_automatic_white_space": true,
    "trim_trailing_white_space_on_save": true
}

@botmaster @JimmyLv and anyone else using Intellij, you can use Live Templates to achieve the same thing as Sublime's snippets.

Info here:
https://blog.jetbrains.com/webstorm/2018/01/using-and-creating-code-snippets

and all available variables (including filename and filename without extension) here:
https://www.jetbrains.com/help/idea/live-template-variables.html

As an example, you can set up a Live Template for a React Native Functional Component by going to Preferences > Editor > Live Templates and creating a new Template Group (I called mine React Native) and then a new Live Template in that group. The abbreviation is rnccf, description is whatever you want, and the "Template text" is as follows:

import { View, Text } from 'react-native'

$ComponentName$.propTypes = {

}

export default function $ComponentName$ (props) {
  return (
    <View>
      <Text>
        $ComponentName$
      </Text>
    </View>
  )
}

$ComponentName$ creates a variable, which you edit by clicking "Edit variables". Make the "Expression" for this variable fileNameWithoutExtension(), and then define the available contexts by clicking "Define" below the template text. It's a similar process for creating the other snippets.