CSS Linter

Ruby Capstone Project --> Build your own linter

Explore the docs »

- Report Bug - Request Feature -

Table of Contents

• About the Project
• Built With
• Instructions
• Video Presentation
• Contributors
• Acknowledgements
• License

About The Project

This is the Ruby Capstone Project required at the end of Ruby module in Microverse Curriculum. Specifically is a CSS Linter with the purpose to check for spacing, indentation and format errors.

Rules

Indentation

• 2 space indentation rule

bad code:

  img {
  width: 700px;
  max-width: 100%;
}

good code:

  img {
    width: 700px;
    max-width: 100%;
  }

Line Format

• One line checking
• Line missing between css blocks

bad code:

p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
a {
  color: #111111;
  font-size: 16px;
}

good code:

p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

a {
  color: #111111;
  font-size: 16px;
}

Spacing

• Checking for missing spacing after : or ,
• Checking for missing spacing after { or }
• Checking for line break after { or } and after each property declaration

bad code:

a,p{color: #111111; font-size: 16px;}
div{color: #222222; font-size: 18px;}

good code:

a {
  color: #111111;
  font-size: 16px;
}

div {
  color: #222222;
  font-size: 18px;
}

Instructions

The CSS Linter does basic syntax checking, as well as applying a set of rules to the code and throws back an error if bad syntax is found. The throwback error is being printed out indicating the line and column of the specific syntax issue.

Examples

• Wrong Indentation, expected n spaces
• Spacing, expected single space before '{' and '('
• Spacing, expected single space after ')' and ':' and ','
• Line Format, Expected line break after '{' and '}' and ';'
• Line Format, Expected one empty line after '}'

To test out CSS Linter you need to:

• have Ruby installed on your computer
• download or clone this repo:
  • Clone with SSH:

  git@github.com:adamclasic/css-linter.git
  

  • Clone with HTTPS:

  https://github.com/adamclasic/css-linter.git
  

• Navigate to root directory of the repo and run:

$ bin/main path_to_file.css (path_to_file being the file you want to check for linters)

Rspec testing

• Run the command and see the output

$ rspec

Built With

This project was built using these technologies.

• Ruby
• Rubocop
• VsCode
• Rspec

Contributors

👤 Abderrahman Adam Allalou

• LinkedIn: Abderrahmane Adam Allalou
• GitHub: @adamclasic
• tweeter: @adamallalou

Acknowledgements

• Microverse
• The Odin Project
• Ruby Documentation

📝 License

This project is MIT licensed.