GIT Basics Course / Cheatsheet

Andre Reus — Wed, 16 Jun 2021 18:50:40 +0000

What is GIT?

Best short and also official description:

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Benefits / Comparison:

Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

Setup

Download and install it from https://git-scm.com/

GIT Commands

Basic Commands

git status // Show the current status
git init // Initialize project folder with GIT
git add // Add changes to the stage
git commit // Commit changes in the stage to the history / log
git log // Show the commit history

GIT Help

git help // Help Overview
git help -a // GIT Commands
git help -g // GIT Guides

GIT Branching visually illustrated

Branching Commands

git branch // Create a branch
git checkout (in future "git switch") // Switch to a branch
git merge // Merge a branch into an other one

Playground for GIT Commands: https://git-school.github.io/visualizing-git/

GIT Client (GUI)

Some good free GIT Clients (GUIs) are:

Optional useful Diff Tool: Beyond Compare

Collaboration (or cloud backup)

Visually illustrated

Hosting services

Collaboration Commands

git clone // Download a repository to your PC
git fetch // Download the latest content from the server
git pull // Download the latest content from the server and merge it with your local content
git push // Upload your content to the server

Useful Links

How to implement Coding Guidelines

Andre Reus — Thu, 27 Aug 2020 13:52:25 +0000

Coding Guidelines are a crucial part of making a codebase with multiple contributors consistent, clean, readable and less error prone. But how do you make them easy to follow and how do you make sure they are met from every single person?

The answer to that are text editor / IDE settings, formatters and linters. There are different tools for that, including the most common:

EditorConfig (Code Editor / IDE Settings)
Prettier (Formatter)
ESLint (JavaScript Linter)
Stylelint (CSS Linter)

EditorConfig

EditorConfig defines a few basic settings for files in the code editor / IDE. They are applied when you create or save a file.

Sample .editorconfig file:

root = true

[*.{js,scss}]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

In some code editors / IDEs you need to install a plugin to activate the settings. See https://editorconfig.org/#download for details.

Prettier

Prettier is an opinionated code formatter for HTML, CSS, JavaScript, Markdown and more. It can be set up to format on save, which is very useful.

Note that it is opinionated, so you can't adjust every little detail of the formatter, but the settings that are available are enough for most modern projects. See https://prettier.io/docs/en/options.html for details.

ESLint

ESLint is an unopinionated JavaScript linter, this means that all rules can be adjusted. It checks JavaScript for code errors, but also has the option to check stylistic issues. It is a good option for large or legacy projects where every rule needs to be adjustable.

During setup there are a few questions asked:

See https://eslint.org/ for details.

Stylelint

Stylelint is an unopinionated CSS linter. Similar to ESLint all rules can be adjusted and it checks CSS for code errors, but also has the option for stylistic issues. The difference to ESLint is that it can't autofix errors.

See https://stylelint.io/ for details.

Conclusion

Initially you can always use an EditorConfig and then it is up to you to decide if you want a quick and "all in one" solution with a formatter like Prettier, or if you want to be able to edit every little detail of linters like ESLint and Stylelint (including linting for code errors).

DEV Community: Andre Reus