textToHTML_V2 VS ESLint

As mentioned, I published a package as part of the course and the way to install it is via terminal. My tool is called textToHTML. You may type npx texttohtmlv2 in your command line. It will prompt you to install the package (say yes). Then, to see if it's working you can try the help command by typing npx texttohtmlv2 -h in the terminal. It should display a list of other things to try out.

Last week in class we added automated testing to our Static Site Generators (mine is called textToHTML). This included some tests for Jest which make sure the core functionality of our programs work as expected.

I pick Andre repo, I created an issue stating, to separate generate HTML into a function, then add test case for that function. After finishing my fix. I created a PR, I see that the workflow Andre setup is working correctly.

Jest is a testing framework used for writing unit tests for your application. It allows you to write tests and test suite files ending in .test.js or .spec.js. In these files, you are able to test individual pieces of your application. For example, in my textToHTML SSG I have a function that processes Markdown syntax, called... processMarkdown()... I know, super creative.

Having set up linting/formatting in my own SSG called textToHTML, commit link, I was curious what it would find.

I saw how DocuSaurus handled the Markdown features, and also accessibility on their HTML templates. As such I decided for my own SSG to improve the Markdown capabilities and also add tags to each of the generated pages.

Given that we were now allowed to use an open source library to implement these features instead of coding from scratch, I chose Markdown-it.

Down to brass tacks

Implementing the changes were fairly simple, as in my original method I used a function to take the content (excluding head, meta tags, body) and process the Markdown using regexp. Instead what I did now was pass my content to the markdown function which then calls the "md.render()" method and returns that content.

var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true
});

const processMarkdown = (data) => {
    return md.render(data);
};

Enter fullscreen mode Exit fullscreen mode

In terms of the Yargs code, I made a module and required it in my main file in order to get access to "argv" value. This helped me make my main textToHTML.js file much cleaner because the setup code for Yargs was put into it's own file and textToHTML.js just handles the file logic.

Links: My partner's SSG, Issue-14, Pull Request

This week in OSD600 we went back to contributing to our own Static Site Generators. We had to pick 2 additional features to implement. For my repository textToHTML_V2 I decided to pick:

Some of the pull requests on my own repository include one where my partner had to fix the name of the HTML file generated from .md inputs. Pull Request 11 . That was really the only thing I needed my partner to change because we both asked about the code we were writing along the way so the pull request merge was smooth.

Let's be honest - setting up tools for a new project can be a frustrating process. Especially when you want to jump straight to coding part. This is often the case with ESLint and Prettier, two popular tools in the JavaScript ecosystem that can sometimes interfere with each other when it comes to code formatting. Fortunately, there's a simple solution to this process, and it's called eslint-plugin-prettier.

Do you have the need to find and fix problems in your JavaScript? Then ESLint is for you. With over 120 million downloads each month, it's definitely one of the most popular projects out there. The latest version introduces a new configuration system, designed to simplify available configuration options. Old and deprecated rules have been removed, and a new configuration inspector has been added. Check out the blog for all the highlights, and a migration guide.

ESLint: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

Automating code checks with static code analysis allows us to enforce code styling effectively. By integrating tools into our workflow, we can identify errors at an early stage, while coding instead of blocking us at the end. For instance, flake8 checks Python code for style and errors, eslint performs similar checks for JavaScript, and prettier automatically formats code to maintain consistency.

If you're a developer, you're surely familiar with Prettier and ESLint. With over 8 years of existence, they have established themselves as references in the JavaScript ecosystem.

eslint is used to avoid code errors

No lint errors: The committed code does not contain any lint errors (eslint).

Let’s walk through the steps for a one-time setup to configure husky pre-commit and pre-push hooks, ESLint with code styles conventions, prettier code formatter, and lint-staged. Husky automatically runs a script on each commit or push. This is useful for linting files to enforce code styles that keeps the entire code base following conventions.

GitHub | Website

ESLint: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.