Regarding Editor configuration for VSCode

settings.md

Setup Method 2

1. Copy Settings File

   copy settings.json to the following directory: C:\Users\admin\AppData\Roaming\Code\User\settings.json

Settings.json

{
  "window.zoomLevel": 0,
  "editor.renderWhitespace": "all",
  "editor.formatOnSave": true,
  "editor.tabCompletion": true,
  "javascript.validate.enable": false,
  "javascript.format.enable": false,
  "prettier.eslintIntegration": true,
  "files.autoSave": "afterDelay",
  "flow.pathToFlow": "node_modules/.bin/flow",
  "flow.useNPMPackagedFlow": true,
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

Setup Method 1.md

Setup Method 1

• On Opening VS Code, you will find a bar on the left side with four icons, press the last icon in these (extensions pop up opens)

• Search for extension named SettingsSync and install the one authored by Shan Khan

• Restart VS Code

• Press Shift + Alt + D and enter the following gistID: 1eacc2ad588808caf50118968e0468ec

• This will start installing the required plugins. Setup the required project settings with only one pain point -> To wait for at least 15 min.

• After 15 min, restart VS Code and see the list of extensions installed under the same extensions window.

• Ensure the list of extensions installed have these:

  • Babel ES6/ES7 - dzannotti.vscode-babel-coloring
  • React Native Tools - vsmobile.vscode-react-native
  • Flow Language Support - flowtype.flow-for-vscode
  • ESLint - by Dirk Baeumer
  • Prettier - JavaScript formatter - by Esben Petersen
  • Babelrc - waderyan.babelrc
  • Path Intellisense - christian-kohler.path-intellisense
  • TODO Highlight - wayou.vscode-todo-highlight
  • EditorConfig for VS Code - EditorConfig.editorconfig

If you find any extension not installed from the list above, install it manually following the same process as while installing Settings Sync. It has been reported by most of the developers, /Prettier - JavaScript formatter - by Esben Petersen/ is not installed from the list. If it is the case then, install it manually

Happy Vs Coding…

snippets_react-native_vscode.md

Franchise App - react-native-snippets - mobx

A collection of [React Native] snippets for Vscode

These snippets use ES6/7 syntax.

Setup

1. Copy Snippets File

   copy javascriptreact.json to the following directory: /Users/xxxxxx/Library/Application Support/Code/User/snippets

2. Edit Snippets

   Code -> Preferences -> User Snippets -> JavaScript React

Usage

Place your snippets for Javascript here. Each snippet is defined under a snippet name and has a prefix, body and description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:$1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the same ids are connected.

javascriptreact.json

{
   "Console Log":{
      "prefix":"log",
      "body":"if(__DEV__) console.log($1)"
   },
   "Class skeleton component":{
      "prefix":"ccomp",
      "body":[
         "class $1 extends Component {",
         "  state = { $2 }",
         "  render() {",
         "    return (",
         "       ",
         "    )",
         "  }",
         " }",
         " ",
         "export default $1"
      ],
      "description":"class component skeleton"
   },
   "Class component with proptypes and import":{
      "prefix":"pcomp",
      "body":[
         "import React, { Component } from 'react'",
         "import { View, Text } from 'react-native'",
         "import { observer, inject } from 'mobx-react'",
         "import PropTypes from 'prop-types'",
         "",
         "class $1 extends Component {",
         "  state = { $2 }",
         "  render() {",
         "    return (",
         "       <View>",
         "         $3",
         "       </View>",
         "    )",
         "  }",
         " }",
         "$1.propTypes = {",
         "  ",
         "}",
         "",
         "$1.defaultProps = {",
         "  ",
         "}",
         "",
         "export default $1"
      ],
      "description":"class component skeleton with prop types after the class"
   },
   "stateless component skeleton":{
      "prefix":"scomp",
      "body":[
         "const $1 = () => {",
         "  return(",
         "    <View>",
         "      $2",
         "    </View>",
         "  )",
         "}",
         ""
      ],
      "description":"stateless component skeleton"
   },
   "State component with proptypes and import":{
      "prefix":"spcomp",
      "body":[
         "import React, { Component } from 'react'",
         "import { View, Text } from 'react-native'",
         "import { observer, inject } from 'mobx-react'",
         "import PropTypes from 'prop-types'",
         "",
         "const $1 = () => {",
         "  return(",
         "    <View>",
         "      $2",
         "    </View>",
         "  )",
         "}",
         "",
         "$1.propTypes = {",
         "  ",
         "}",
         "",
         "$1.defaultProps = {",
         "  ",
         "}",
         "",
         "export default $1",
         "",
         ""
      ],
      "description":"State component with proptypes and import"
   },
   "componentWillMount":{
      "prefix":"cwm",
      "body":[
         "componentWillMount() {",
         "    $1",
         "}"
      ],
      "description":"componentWillMount"
   },
   "componentDidMount":{
      "prefix":"cdm",
      "body":[
         "componentDidMount() {",
         "    $1",
         "}"
      ],
      "description":"componentDidMount"
   },
   "componentWillReceiveProps":{
      "prefix":"cwr",
      "body":[
         "componentWillReceiveProps(nextProps) {",
         "    $1",
         "}"
      ],
      "description":""
   },
   "componentWillUnmount":{
      "prefix":"cwum",
      "body":[
         "componentWillUnmount() {",
         "    $1",
         "}"
      ],
      "description":"componentWillUnmount"
   },
   "render":{
      "prefix":"ren",
      "body":[
         "render() {",
         "    return (",
         "        <View>",
         "            $1",
         "        </View>",
         "    );",
         "}"
      ],
      "description":""
   },
   "mobx store":{
      "prefix":"mobstore",
      "body":[
         "import { action, observable,computed } from 'mobx'",
         "",
         "class $1 {",
         "  @observable $3",
         "}",
         "",
         "const $2 = new $1()",
         "export default $2",
         ""
      ],
      "description":"mobx store"
   },
   "eslint disable file":{
      "prefix":"esld",
      "body":[
         "/* eslint-disable */"
      ],
      "description":"eslint disable for whole file"
   },
   "eslint disable line":{
      "prefix":"esldline",
      "body":[
         "/* eslint-disable-line */"
      ],
      "description":"eslint disable for a specific line"
   },
   "flow":{
      "prefix":"flow",
      "body":[
         "/*",
         "* @flow",
         "* @author: $1",
         "*/"
      ],
      "description":"eslint disable for a specific line"
   },
   "styled":{
      "prefix":"styled",
      "body":[
         "import styled from 'styled-components/native';",
         "export const $1 = styled.$2`",
         "\t$3",
         "`;"
      ],
      "description":"Define a styled component"
   },
   "jest":{
      "prefix":"jest",
      "body":[
         "import styled from 'styled-components/native';",
         "export const $1 = styled.$2`",
         "\t$3",
         "`;"
      ],
      "description":"Define a styled component"
   },
   "jest sample test case":{
      "prefix":"jstcase",
      "body":[
         "/*",
         " * @flow",
         " */",
         "import math from '../app/stores/Math'",
         "",
         "describe('sum', () => {",
         "  it('should add two numbers', function() {",
         "    expect(math.sum(1, 2)).toBe(3)",
         "  })",
         "})"
      ],
      "description":"Define a Sample jest test case"
   },
   "jest sample test suite":{
      "prefix":"jstsuite",
      "body":[
         "/*",
         " * @flow",
         " */",
         "import React from \"react\"",
         "import { shallow } from \"enzyme\"",
         "import SimpleComponent from \"../app/components/Product\"",
         "",
         "// create a test suite",
         "describe(\"Product Component\", function() {",
         "  // create a test",
         "  it(\"renders correctly\", function() {",
         "    // create a shallow render for component",
         "    const tree = shallow(<SimpleComponent description=\"Sample description\" />)",
         "    // test shallow render with snapshot",
         "    expect(tree).toMatchSnapshot()",
         "    // setProps changes the props of the component",
         "    tree.setProps({ description: undefined })",
         "",
         "    // match with separate snapshot with changed  props",
         "    expect(tree).toMatchSnapshot()",
         "  })",
         "  it(\"has length 1\", function() {",
         "    const tree = shallow(<SimpleComponent description=\"test\" />)",
         "    // test component has only one child",
         "    expect(tree.length).toBe(1)",
         "  })",
         "})"
      ],
      "description":"jest sample test suite"
   }
}

Snippets

Snippet	Tab Trigger	Description
General Class Component skeleton	ccomp	Scaffolds a react-native component class
Class component with proptypes and import	pcomp	Scaffolds a Class component with proptypes and import
Stateless component skeleton	scomp	Scaffolds a react-native component stateless
State component with proptypes and import	spcomp	Scaffolds a stateless component with proptypes and import
Render function	render	Scaffolds a render skeleton

Lifecycle Methods

Snippet	Tab Trigger
constructor()	constructor()
componentWillMount()	cwm
componentDidMount()	cdm
componentWillUnMount()	cwum
componentWillReceiveProps()	cwr

Eslint Snippets

Tab Trigger	Description
esld	Eslint disable for whole file
esldline	eslint disable for a specific line

Flow Snippets

Tab Trigger	Description
flow	flow default syntax at the file starting

Styled components Snippets

Tab Trigger	Description
styled	Define a styled component

Jest Snippets

Tab Trigger	Description
jstcase	Define a Sample jest test case
jstsuite	Define a Sample jest test suite

TODO

• Need to write Snippets for flow types, styled components

vscode_config.md

To get insync with project, install these plugins:

• Babel ES6/ES7 - dzannotti.vscode-babel-coloring
• React Native Tools - vsmobile.vscode-react-native
• Flow Language Support - flowtype.flow-for-vscode
• ESLint - by Dirk Baeumer
• Prettier - JavaScript formatter - by Esben Petersen
• Babelrc - waderyan.babelrc
• Path Intellisense - christian-kohler.path-intellisense
• TODO Highlight - wayou.vscode-todo-highlight
• EditorConfig for VS Code - EditorConfig.editorconfig

These are with respect to developer preference

• Bookmarks - Alessandro Fragnani
• Output Colorizer - IBM.output-colorizer
• Project Manager - lefragnani.project-manager
• Rainbow Brackets - 2gua.rainbow-brackets
• SVG Viewer - cssho.vscode-svgviewer
• Color Highlight - naumovs.color-highlight

Reference used:

• https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce