Today we will talk about the Microverse module 1 week 1 day 2 simple GitHub linters setup simple project. Microverse has an industrial educational environment so that all of the students can learn the process of how the programming industry works. So, let’s begin with our first simple project. I will break down the steps for this project from scratch to the end.

Checkout the steps below to finish your project efficiently:

Step 1 Github Repository Setup: 

First of all, you need to create a repo (GH repository) in your GitHub account. You can click  on the Create button as shown in the picture below:

Use the Microverse readme template from the repo template options after selecting an owner for the repo.

Step 2 Clone the Repo to Local Machine:

There are different options available for cloning the repo in your local machine such as:

• You can you https link for cloning the repo. Just copy the link and open your terminal.

• You can do the same with SSH if, in your GitHub profile, you have setup SSH already instead of using https you can use SSH in your terminal after writing git clone SSH.
• If both these way feels complicated for you then you can also use GitHub Desktop Software that is really easy to operate but it is still recommended to get used to the terminals and code bases as a developer.

Step 3 Follow GitHub Flow and Setup Linters Config:

During the linters setup, you need to follow the GitHub flow in a professional way. GitHub flow is a
structure to manage your repository in a professional manner. According to GitHub flow you need to add all stable codes in the main or master branch of your repo such as linters and the rest of the code which will be continuously updated due to the demand of workflow will be stored in a sub-branch of the repo.

First of all, open the GitHub repo link that is given to the project repo to setup linters then select the linters configuration you want to setup for your project. There are different linter files available for different projects according the uses of programming languages. In this project we will only use html-css file since we are just going to use html-css for this project.

Link for the Html-Css repo : https://github.com/microverseinc/linters-config/tree/master/html-css

Go to you VS code create a folder .github/workflows then inside these folders create a file call linters.yml  copy the code from this link and paste it inside the linters.yml file:

https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml

Create 2 files in the root level called .hintrc and stylelintrc.json copy the code from below link and paste in according to the files:

 .hintrc

.stylelintrc.json

After completing pasting the code in the files from the top bar of your VS code click on terminal and open a new terminal. Then run the commands below one by one  but before that you need to add a .gitignore file and write node_modules in the file:

Webhint

A customizable linting tool that helps you improve your site’s accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.

NOTE: If you are running on Windows, you need to initialize npm to create package.json file.

Run

npm init -y

Run

npm install –save-dev hint@7.x

Copy .hintrc to the root directory of your project.

Do not make any changes in config files – they represent style guidelines that you share with your team – which is a group of all Microverse students.

If you think that change is necessary – open a Pull Request in this repository and let your code reviewer know about it.

Run

npx hint .

Fix validation errors.

Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

Run

npm install –save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

Copy .stylelintrc.json to the root directory of your project.

Do not make any changes in config files – they represent style guidelines that you share with your team – which is a group of all Microverse students.

If you think that change is necessary – open a Pull Request in this repository and let your code reviewer know about it.

Run

npx stylelint “**/*.{css,scss}”

on the root of your directory of your project.

Fix linter errors.

Commit the changes with proper description and then push it to the main or master branch.

Step 4 Add HTML-CSS:

Now create a new branch and checkout the branch. Add index.html and style.css file. Link CSS file in HTML properly. Add some basic code in your HTML file such as :

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <meta charset=”UTF-8″ />

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

    <title>Document</title>

    <link rel=”stylesheet” href=”style.css” />

  </head>

  <body>

    <h1>Hello Microverse</h1>

  </body>

</html>

CSS:

h1 {

  color: green;

}

You can’t leave the files empty otherwise linters will show  error in stylelint in GitHub.

Commit changes and push it to GitHub in the new branch. Create pull request in your repo in GitHub and wait for linter results.

If everything is green you are good to submit.