Difference between revisions of "VS Code"

From CSE330 Wiki
Jump to navigationJump to search
Line 5: Line 5:
 
# Clone the repo via https to a dedicated folder on your computer
 
# Clone the repo via https to a dedicated folder on your computer
  
[[File:File_Structure.png|200px|thumb|center|alt text]]
+
[[File:File-Structure.png|400px|center]]
  
 
# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer
 
# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer

Revision as of 00:56, 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.

Using the Git Integration (Module 1 example)

  1. First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
  2. Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
  3. 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).
  4. 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.
  5. 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'
  6. 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 by clicking 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 above integration working well, you don't necessarily 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