In this project, I built a custom HTML linter using Ruby to check if the code follows the best practices and warns the user if he/she does not follow them.
- Ruby
- RSpec for TDD
To get a local copy up and running follow these simple steps
git clone https://github.com/Maha-Magdy/Build-Custom-Linter.git
bundle
rspec
-
You have two option:
- Pass a local HTML code into the workspace.html file by overriding what already exists, and run this command
ruby bin/main.rb workspace.html
- Pass any local HTML file path or webpage path as an argument after ruby bin/main.rb, like this command.
ruby bin/main.rb file_path
-
It may become one of these options.
- No offenses detected if your code follows the best practices.
- The number of detected errors that needed to fix.
- Warnings if you do not pass file path/valid HTML file
- Use proper document structure
# Good Code
<!DOCTYPE html>
<html>
<head>
<title>proper title for the file</title>
</head>
<body>
<img src="" alt="proper description for the image">
<p><span></span></p>
</body>
</html>
# Bad Code
<html>
<head>
<title>proper title for the file</title>
</head>
<img src="" alt="proper description for the image">
<p><span></span></p>
</html>- Declare the correct doctype
# Good Code
<!DOCTYPE html>- Always close tags
# Good Code
<!DOCTYPE html>
<div>
<h1>Title</h1>
<p>some text</p>
</div>
# Bad Code
<div>
<h1>Title
<p>some text- Don't use inline styles
# Good Code
<h1>Title</h1>
# Bad Code
<h1 style="padding: 15px">Title</h1>- Use alt attribute with images
# Good Code
<img src="" alt="proper description for the image">
# Bad Code
<img src="">- Place external style sheets within the tag
# Good Code
<html>
<head>
<link rel="stylesheet" href="">
</head>
</html>
# Bad Code
<html>
<body>
<link rel="stylesheet" href="">
</body>
</html>- Use lowercase markup for tags' name
# Good Code
<html>
<head>
<title>proper title for the file</title>
</head>
<body>
<img src="" alt="proper description for the image">
<p><span></span></p>
</body>
</html>
# Bad Code
<HTML>
<HEAD>
<title>proper title for the file</title>
</HEAD>
<BODY>
<IMG src="" alt="proper description for the image">
<P><SPAN></SPAN></SPAN>
</BODY>
</HTML>👤Maha Magdy
- GitHub: Maha-Magdy
- Twitter: @Maha_M_Abdelaal
- LinkedIn: Maha Magdy
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
This project is MIT licensed.