Visual Studio Code

Common

My VSCode setting

"editor.wordWrap": "on",
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"explorer.confirmDragAndDrop": false, // Default (format when you paste)
"editor.formatOnSave": true,

How to open VSCode setting?

CMD + SHIFT + P (on MacOS)
CTRL + Shift + P (on Windows)
then type in "preferences: open settings (json)"

How to auto fix eslint when saving

Set the following in settings.json of VSCode

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

How to expand explorer when you open a file in node_modules folder?

• “Cmd + Shift + P”, type “Reveal Active File …”

Rename All Occurrences

Select a variable/method and hit F2, you can edit the name and it will change every instance of that variable’s name throughout the entire current working project.

If you only want to change within the current file, use the Command + F2 (on Mac) or Ctrl + F2 (on Windows) keyboard shortcut and VS Code will spawn a cursor at every instance throughout the current file.

How to switch word wrap on and off?

Use Alt + Z (Win) or ⌥+Z (Mac)

Best plugins

Bracket Pair Colorizer

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

React

How to create snippets?

Open a snippet file

Code > Preferences > User Snippets
Select "Javascript"

Delete snippet content and paste

{
      "Class Component": {
      "prefix": "cc",
      "body": [
			"//import liraries",
			"import React, { Component } from 'react';",
			"import { View, Text, StyleSheet } from 'react-native';",
			"",
			"// create a component",
			"class ${1:filename} extends Component {",
			"	render() {",
			"		return (",
			"			<View style={styles.container}>",
			"				<Text>${1:filename}</Text>",
			"			</View>",
			"		);",
			"	}",
			"}",
			"",
			"// define your styles",
			"const styles = StyleSheet.create({",
			"	container: {",
			"		flex: 1,",
			"		justifyContent: 'center',",
			"		alignItems: 'center',",
			"		backgroundColor: '#2c3e50',",
			"	},",
			"});",
			"",
			"//make this component available to the app",
			"export default ${1:filename};",
			""
      ],
      "description": "Class Component Template"
    },
      
      "Functional Component": {
      "prefix": "fc",
      "body": [
			"//import liraries",
			"import React, { Component } from 'react';",
			"import { View, Text, StyleSheet } from 'react-native';",
			"",
			"// create a component",
			"const ${1:filename} = () => {",
			"	return (",
			"		<View style={styles.container}>",
			"			<Text>${1:filename}</Text>",
			"		</View>",
			"	);",
			"};",
			"",
			"// define your styles",
			"const styles = StyleSheet.create({",
			"	container: {",
			"		flex: 1,",
			"		justifyContent: 'center',",
			"		alignItems: 'center',",
			"		backgroundColor: '#2c3e50',",
			"	},",
			"});",
			"",
			"//make this component available to the app",
			"export default ${1:filename};",
			""
      ],
      "description": "Class Component Template"
    },

	"index": {
      "prefix": "index",
      "body": [
			"import { AppRegistry } from 'react-native';",
			"import App from './src/App';",
			"",
			"AppRegistry.registerComponent('${1:projectname}', () => App);"	
      ],
      "description": "Index code for both Android and IOS"
    },
}

Save

How to use a snippet?

Open new React Native js file

Type “cc” or “fc”

Select a “User snippet” from drop down list