Add ESLinter for JS Linting

LynnHerrick9 commented 1 year ago

This changes is related to the Setup Guides task. It adds linting functionality for JavaScript files. The linter can be run at any point during development. It is also added to the workflow process (from PR click checks tab in top-middle of screen, click Pull Request on left side of screen, click pr_checks on left-side or middle of screen, click Run Linter in middle of screen). Prior to this change the run linter option in PR Check was a print statement as a placeholder. The image below shows a screenshot of the workflow with ESLint running and passing during the PR check of this current PR.

To make it more consumable for review, I will split up all the linter work into PRs associated to each linter and language. This review will include all changes for ESLint and JavaScript code.

What was changed

Added ESLint capabilities (packages, configuration)
Updated sh file used in github workflows for pr check
Add steps to run before PR to developer section of README
Fixed changes in JS files reported by linter

How to check change

Checkout branch and build project
Verify all changes reported by linter did not disrupt the project by running npm run serve
Verify there are no existing linter errors by using the path on PR above to see if pr checks passed for linter
Verify there are no existing linter errors by manually running the linter in the code. Navigate to the base of the repo and run sh ./ci/linter.sh. Below image shows an example of what the command line will look like when there are no errors.
Verify linter is working and/or check any style fixes I made in other files. For this you will use the same command as above and choose any of the files that have changed and reverse any changes made. I have give two examples below, but feel free to check any of the changes using the same process.

Example 1: Here I have changed the single quotes back to double quotes on line 2 of the markdown.js file and then run the linter. Note the linter now reports an error for quotes with the message that Strings must use singlequote.

Example2: Here I have navigated to a different directory from the first example (_includes/components/) and removed the added space on line 4 of the PageHeader.js file. Note the linter now reports and error for space-before-function-paren with the message Missing space before function parentheses.

Notes

I have turned two rules off within the .eslintrc.js file.

semi: By default this will error for any added semicolons at the end of lines. The semicolon is not required in JS but can be useful to avoid syntax errors when the compiler cannot auto-add. We have a mixed usage, which could be intentional. If we ever decide to always use or never use, I have added a note to the configuration on what to change it to.
no-unused-vars: I believe this is due to not all changes being added to the project yet and we can remove this ignored rule completly once all changes have been merged to main.

netlify[bot] commented 1 year ago

Deploy Preview for bloom-guides-template ready!

Name	Link
Latest commit	e60f1bdf8ef1d28266263de2c0b83fd76da71f70
Latest deploy log	https://app.netlify.com/sites/bloom-guides-template/deploys/64a6ffc129a19d00086a7f8f
Deploy Preview	https://deploy-preview-45--bloom-guides-template.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

SMakaiTakori commented 1 year ago

@jeffmaher I went ahead and merged my branch with this one so now the linter is linting our hidden .eleventy.js file. I fixed the merge conflicts as well and all tests are passing, so we should be set on this one. I will wait for you to give your official approval before merging this into the main branch. Thanks!

bloom-works / guides-template