Difference between revisions of "VS Code"

From CSE330 Wiki
Jump to navigationJump to search
Line 14: Line 14:
 
'''Note: If you're using Windows, you may need to install Git on your machine first. https://git-scm.com/download/win'''
 
'''Note: If you're using Windows, you may need to install Git on your machine first. https://git-scm.com/download/win'''
  
# First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
+
* First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
# Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
+
[[File:New-file.png|400px|center]]
# Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
+
* Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
# Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
+
* Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
# To commit, simply type a message in the box and click the check mark above it.  To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
+
* Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
# Note this is also where you can pull from your remote.
+
* To commit, simply type a message in the box and click the check mark above it.  To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
 +
* Note this is also where you can pull from your remote.
  
 
==== Bonus - Module 1 ====
 
==== Bonus - Module 1 ====
 
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
 
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
# You can view your settings by clicking CMD + , (Mac) or Ctrl + , (Windows).  Search for Theme and choose one that works for you!
+
# You can view your settings with '''CMD + ,''' (Mac) or '''Ctrl + ,''' (Windows).  Search for Theme and choose one that works for you!
 +
 
 +
 
  
 
== Module 2 ==  
 
== Module 2 ==  
Line 38: Line 41:
 
     "username": "YOUR USERNAME",
 
     "username": "YOUR USERNAME",
 
     "privateKeyPath": "/path/to/your/id_rsa",
 
     "privateKeyPath": "/path/to/your/id_rsa",
     "remotePath": "/home/YOUR USERNAME/public_html/module2",
+
     "remotePath": "/home/YOUR USERNAME/module2",
 
     "uploadOnSave": true
 
     "uploadOnSave": true
 
   }
 
   }

Revision as of 02:18, 13 January 2019

Getting Started With Each Module

  1. Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
  2. Navigate to the created repo in Bitbucket
  3. Clone the repo via https to a dedicated folder on your computer
File-Structure.png
  1. In VS Code, File > Open the Spring2019-module1-individual-STUDENTID folder that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Bitbucket repository! I highly recommend creating your bitbucket repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

Module 1 -- Using the Git Integration

Note: If you're using Windows, you may need to install Git on your machine first. https://git-scm.com/download/win

  • First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
New-file.png
  • Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
  • Type doc followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
  • Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
  • To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
  • Note this is also where you can pull from your remote.

Bonus - Module 1

  1. If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
  2. You can view your settings with CMD + , (Mac) or Ctrl + , (Windows). Search for Theme and choose one that works for you!


Module 2

SFTP Integration (Shipping files to your server)

  1. Open the Extensions tab and search for 'sftp'. Download the first one.
  2. To use commands in VS Code, type Cmd + Shift + P (Mac), or Ctrl + Shift + P on windows.
  3. Type SFTP and open the sftp config command.

Your config should look like the following:

 {
   "protocol": "sftp",
   "host": "YOUR.EC2.DNS",
   "port": 22,
   "username": "YOUR USERNAME",
   "privateKeyPath": "/path/to/your/id_rsa",
   "remotePath": "/home/YOUR USERNAME/module2",
   "uploadOnSave": true
 }

- Note the uploadOnSave field is optional, but can be nice! - Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

Testing Everything Locally

If you get the SFTP integration working well, you don't need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

To run PHP locally

Windows

  1. Download WAMP (https://sourceforge.net/projects/wampserver/)
  2. Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, and should be able to run php files.

Mac

  1. Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
  2. Type the following in your terminal and follow instructions
 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. In your terminal, type php -v. If your version is less than 7, update with brew. brew install php