Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save RidaRidss/b7ca1caf360c9f63efcfd2ff78b4ac75 to your computer and use it in GitHub Desktop.
Save RidaRidss/b7ca1caf360c9f63efcfd2ff78b4ac75 to your computer and use it in GitHub Desktop.

Visual Studio code

1. Download Visual Studio Code for ubuntu

        code_1.17.0-1507160143_amd64.deb

            double tap , open and install

2. Install VS Code Extensions

        [ Go To File => Preferences => Settings ]
    
                OR
    
        [  press window icon on left side of vs code window, you will get the Extensions searchbar , then install below extensions one by one and press reload after installation done.

        ] = >
        {
                1.  React Native Tools by Visual Studio Mobile Tools
                2.  Auto Close Tag by Jun Han
                3.  Auto Complete Tag by Jun Han
                4. Auto Rename Tag by Jun Han
                5.  Babel ES6/ES7 by dzannotti
                6.  Code Spellcheker by Street Side Software
                7.  Color Highlight by Sergii Naumov
                8.  Document This by Jeol Day
                9.  ESLint by Drik Baeumer
                10.  Flow Language Support by flowtype
                11.  Git Blame by Wade Anderson
                12.  Lorem ipsum by Daniel Imms
                13.  Path Intellisense by Christian Kohler
                14.  Peep by nwallace
                15.  Prettier - JavaScript formatter by Esben Petersen
                16.  Rainbow Brackets by 2gua
                17.  SVG Viewer by cssho
                18.  SVN Changes by eliean
                19.  TODO Highlight by Wayou Liu
                20.  vscode-icons by Roberto Huertas
        }

3. Change VS Code Settings

        presss Ctrl + ','  now change VS code settings for React-Native Code , paste below code in the setting file with in {} openend by shortcut key as above
            {
                    "editor.tabSize": 2,
                    "workbench.iconTheme": "vscode-icons",
                    "editor.formatOnSave": true,
                    "flow.useNPMPackagedFlow": true,
                    // Enable/disable JavaScript validation. (For Flow)
                    "javascript.validate.enable": false,
                    // Enable/disable default JavaScript formatter (For Prettier)
                    "javascript.format.enable": false
            }

4. Run React-Native Project in VS Code

        1.  Open React-Native Project in terminal
    
        2.  Use below command to open your React-Native project in VS Code
    
            [
               code .
            ]
        
                                 OR
                    
            [

                Open VS Code and Open Folder (select your project folder path)

            ]       
        
        3. getting VS Code Terminal 
        
                press ctrl+J  
       
            4. Connect Your Device
        
                1. If Android SDK is installed ,this command will work
        
                          adb
            
                2. Run this command to get all available devices in your system and it will Run your project application in all the available devices which will shown in list by checked by the command 'adb' 
        
                        adb devices
                    
                3. Run 
            
                    1. for the very first time run server in VS Code terminal, press + button in VS Code terminal and run below command
                    
                            react-native start
                        
                      #### note : If You got an error any time while starting the server " ERROR  A non-recoverable condition has triggered.  Watchman needs your help!" , use the below process , Run below 3 commands

                               echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
                               echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
                               echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
                               watchman shutdown-server

            
                    
                    2. secondly run app in VS Code terminal, press + button to add a new tab in VS Code terminal and run below command

                            react-native run-android

note : Now in the above command there is an option while you have already run this command first Time , app build is ready before , So no need of this for the next time

note : If you got an error throw from VS Code terminal "java.io.IOException: Cannot run program : /home/username/Android/Sdk/build-tools/23.0.1/aapt" while apk installation in your device :

       open project's directory cmd and run below command 

            sudo apt-get install lib32stdc++6 lib32z1

                            OR

            Best way to install build-tools using android studio

                open android studio and install
                
                
                
            3(a) If You are working with an android device
                
                 Thirdly run react server "The main thing is that" Your devices should be connected to your system machine's IP address                    
                    connect your device , in VS Code terminal press + button to add a new tab in VS Code terminal and run below command
                      1.  adb shell input keyevent 82
                     
                   you will get a popup 
                    then select options as below
                     
                     2.   Dev Settings → Debug server -> Debug server host and ports for device
                        
                     3.   Type in your machine's IP address and the port of the local dev server (e.g. 192.168.1.157:8081)

note : How will you approach your system ip address in ubuntu

                Open a terminal and type below command to find your machine's IP address.
            
                        /sbin/ifconfig
                
              4.  Go back to the Developer menu and select Reload JS.
              
                    4(a)  adb shell input keyevent 82
                     
                    4 (b)  you will get a popup 
                    then select options as below
                     
                    4 (c)  Reload
                    
                        above command will reload the changes , after build installation

 
 
                3(b) If You are working with an emulator follow step 4

5. For Searching files in VS Code

            press ctrl+p
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment