9. Github & VS code shortcuts, cheatsheet, etc - HaroldSP/Harold GitHub Wiki

There's a nice cheatsheet on many languages and some training materials on an official GitHub page.

1. Creating a new repo on GitHub.

Just make a new repo from scratch or from a template. If you are making it from scratch - don't place a tick in a checkbox with "add README.md file"

2. Locally make a new folder and do the following steps:

echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin [link to your previously created repo]
git push -u origin main

…or push an existing repository from the command line

git remote add origin [link to your previously created repo]
git branch -M main
git push -u origin main

The command git branch -M main renames the current branch to main.

  • git branch: This is the command to manage branches in Git.
  • -M: This is an option that tells Git to move or rename a branch. The -M option will rename the branch even if a branch with the new name already exists. If you want Git to not rename the branch if a branch with the new name already exists, you can use the -m option instead.
  • main: This is the new name for the branch.

So, if you're on a branch named master (or any other name) and you run git branch -M main, Git will rename the master branch to main.

3. If you are using a Git bash, you can make some useful shortcuts:

First, you need to edit your ~/.bashrc or ~/.bash_profile file. You can do this with a text editor or via the command line. For example, you can open the file in a terminal-based text editor like nano:

nano ~/.bashrc

Once you've opened the file, you can add alias commands to the bottom. Here are a few examples of Git command aliases:

alias gs='git status'
alias ga='git add'
alias gb='git branch'
alias gc='git commit'
alias gd='git diff'
alias gr='git restore .'
alias gp='git push'
alias gl='git pull'
alias gco='git checkout'
alias gcob='git checkout -b'
alias glog='git log --oneline --all --graph'
alias gca='git add . && git commit --amend --no-edit --quiet'
alias gpf='git push origin main --force-with-lease'
alias gac='git add . && git commit -am'

Save and close the file. If you used nano, you can do this by pressing Ctrl+X, then Y, then Enter.

Breakdown

You can use the shorter version:

alias gs='git status -s'

To discard all uncommitted changes in your local copy of a Git repository, you can use the git restore command:

alias gr='git restore .'

If you need to amend the last commit (perhaps because you forgot to include a file or because you made a mistake in the commit message), you can use the git commit --amend command. First stage those changes with git add. Then use a command:

alias gca='git commit --amend'

Or if u don't want to edit a message:

alias gca='git commit --amend --no-edit'

When you amend a commit, you're essentially rewriting the history of your Git repository. If you've already pushed the commit you're amending to the remote repository, you won't be able to push the amended commit normally. That's because Git doesn't allow you to rewrite the history of the remote repository without explicitly telling it to do so.

You can use the --force (or -f) option with git push to force Git to overwrite the remote repository with your local repository. Here's how you can do it:

git push origin main --force

This command tells Git to push your local main branch to the origin remote and overwrite the remote branch if necessary.

Be careful with git push --force, though! It can overwrite changes in the remote repository that you don't have in your local repository. You should only use it if you're sure you won't be overwriting any important changes.

In some cases, you might want to use git push --force-with-lease instead of git push --force. The --force-with-lease option is a safer option that will not overwrite the work on the remote branch if more commits were added to the remote branch (by someone else) since you last fetched data from the repository. Here's how you can do it:

alias gpf='git push origin main --force-with-lease'

This command works similarly to git push --force, but it checks if your local branch is behind the remote branch before it overwrites the remote branch.

I have also added some combos, for example:

alias gac='git add . && git commit -am'

If I want to use this command but change the message at the end the usage would become ga commit_name

Please take note:

git add . and git add -A are very similar and in many cases will do the same thing, but there is a slight difference in behavior depending on the version of Git you're using and the context (whether you're at the root directory or a subdirectory).

git add . stages changes for all files and directories in and below the current directory (including new, modified, and deleted files). It does not stage removed files in directories above the current one.

git add -A or git add --all stages all changes in the entire repository, no matter where you are in the directory tree (including new, modified, and deleted files).

git add -A and even worse, git add . are both harmful and shouldn't be used in the vast majority of scenarios. You want git add -p or git add -i to actually consider what you're staging.

Finally, to make sure your current terminal session recognizes the new aliases, source your ~/.bashrc or ~/.bash_profile file:

source ~/.bashrc

4. Working with remote

To add a remote use the command git remote add showcases <url> where is the URL of the remote repository.

Here's how you can find the name of the remote repository:

Open your terminal. Navigate to your local Git repository. Type the command git remote -v. This command will list all remotes for your repository. The output will look something like this:

origin  https://github.com/user/repo.git (fetch)
origin  https://github.com/user/repo.git (push)

"origin" is the name of the remote repository.

To remove the connection to the remote repository:

Use the command git remote rm origin if the remote is named "origin". Replace "origin" with the actual name of your remote repository if it's different.

VS code

Extensions

  • Code runner (formulahendry.code-runner)
  • Genie (genieai.chatgpt-vscode) - you need chat gpt api keys to get it working
  • Codegpt(DanielSanMedium.dscodegpt) - you need chat gpt api keys to get it working
  • Auto Complete Tag (formulahendry.auto-complete-tag)
  • Live Server (ritwickdey.LiveServer)
  • Night Wolf (MaoSantaella.night-wolf) or just use standard Monokai or whatever you like
  • Material Icon Theme (PKief.material-icon-theme)
  • ESLint. Read the description to install / Prettier image
  • Vetur or Vue.volar for Vue or the extension pack
  • Icons or Material Theme Icons for icons customisation
  • Duplicate action an ability to duplicate files and directories in VS Code (mrmlnc.vscode-duplicate)
  • Split HTML Attributes, also manage the sorting order by accessing the extention settings ["^v-if", "^v-else", "^v-show", "^v-model", "^v-for", "^:key", "^key", "^v-", "^:", "^@click", "^@", "^id", "^class", "^.*=""]
  • Remote-ssh lets you use any remote machine with a SSH server as your development environment
  • Git Graph
  • Vue sort attributes

Format on save

  • Manage -> Settings (or ctrl+,) -> text editor -> formatting -> format on save
  • Manage -> Settings (or ctrl+,) -> text editor -> image
  • Manage -> Settings (or ctrl+,) -> text editor -> image
  • Manage -> Settings (or ctrl+,) -> image

Node.js

  • Node.js LTS. npm -v and node -v to check if installed correctly

Json-server

Vue

npm install vue@next
npm install -g @vue/cli
vue upgrade --next
vue --version

How to create VS code snippets

In VS Code, you can create your own code snippets that work like shortcuts for code templates. Here's how you can do it:

  1. Open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P on a Mac).
  2. Type in "Configure User Snippets" and select it.
  3. Choose the language for which you want to create a snippet. For example, JavaScript or TypeScript.
  4. In the file that opens, you can define your own snippets. Here is an example of your arrow function template:
{
  "Print to console!": {
    "prefix": "log",
    "body": ["console.log('$1');", "$2"],
    "description": "Log output to console"
  },

  "Arrow Function": {
    "prefix": "arrfunc",
    "body": ["const $1 = () => {", "    $2", "}", "$0"],
    "description": "Create an arrow function"
  }
}

In this snippet, "prefix" is what you type to trigger the snippet, "body" is the content of the snippet, and "description" is a brief description of the snippet.

The $1, $2, etc. are tab stops. After you trigger the snippet, you can press Tab to jump to the next tab stop. $0 defines the final cursor position after all tab stops have been visited.

In the above example, typing arrfunc and hitting Tab or Enter will insert an arrow function template where $1 is the function name and $2 is the function body.

  1. Save the file and close it. The snippet is now ready to use in your JavaScript or TypeScript files.

Remember to replace "arrfunc" with your preferred shortcut and adjust the "body" to match your desired template.

Adjusting Git bash

  • git config --list. This is just to check your config file. Press q or ctrl+С to exit, if it is a long list
  • git config --global user.email "[email protected]"
  • git config --global user.name "Your Name"
  • git config --global core.autocrlf true
  • git init
⚠️ **GitHub.com Fallback** ⚠️