Skip to content

Latest commit

 

History

History
101 lines (72 loc) · 5.4 KB

README-COPY.md

File metadata and controls

101 lines (72 loc) · 5.4 KB
Raw

HTML & CSS3 & JavaScript Course

If you are not familiar with linters, read root level README.

Set-up GitHub Actions

Please do the following steps in this order:

  1. In the first commit of your feature branch create a .github/workflows folder and add a copy of .github/workflows/linters.yml to that folder.
    • Remember to use the file linked above
    • Remember that .github folder starts with a dot.
  2. 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.
  3. When you open your first pull request you should see the result of the GitHub actions checks:

gh actions checks

Click on the Details link of each action to see the full output and the errors that need to be fixed:

gh actions failing checks

Set-up linters in your local env

Note: The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:

# .gitignore
node_modules/

Lighthouse

An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more.

You can get the Lighthouse report by any of the following ways:

To access the report generated by Lighthouse on your pull request, click the Details link for the Linters/Lighthouse check and you will see the full output of the action:

lighthouse report

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.

npm init -y
  1. Run 
    npm install --save-dev [email protected]
    not sure how to use npm? Read this.
  2. Copy .hintrc to the root directory of your project.
  3. 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.
  4. Run 
    npx hint .
  5. Fix validation errors.

Stylelint

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

  1. Run

    npm install --save-dev [email protected] [email protected] [email protected] [email protected]

    not sure how to use npm? Read this.

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

  3. 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.

  4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.

  5. Fix linter errors.

  6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

ESLint

  1. Run

    npm install --save-dev [email protected] [email protected] [email protected] [email protected]

    not sure how to use npm? Read this.

  2. Copy .eslintrc.json to the root directory of your project.

  3. 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.

  4. Run npx eslint . on the root of your directory of your project.

  5. Fix linter errors.

  6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!