Find Linter and Matching VS Code Plugin to Spell Check Site

[kathrynsilvaconway]

Dependency

• 2401

Overview

Our website needs to be free of misspellings so that our reputation for quality is maintained. For this issue, we will find a third party linter and VS Code plugin to spell check all text in pull requests that will appear on the website.

Action Items

• [x] Research various third party linters to find one we can use to check pull requests for spelling errors.
• [x] Verify that the vendor also makes a matching VS Code plugin that our devs can use locally to check their spelling before pushing code. The linter and the plugin must come from the same source.
  • [x] If you do not find a matching set, bring to merge team/dev leads to discuss next best option and present to product.
• [x] Test the linter/plugin combination in your own repository to be sure they work as expected.
  • [x] Once we identify and apply the spell checker go through this spreadsheet from design team
  • [x] Checking off the spelling/grammar errors that have been fixed (don't worry if linter doesn't fix the grammatical errors, we will make a separate issue for another linter if it doesn't fix both)
  • [x] If all spelling errors are corrected then this issue is completed, make a pull request (Merge team may need to install the linter but to verify functionality locally it will be helpful to see the repo it worked in)

Resources/Instructions

• Spreadsheet from design team with all the misspellings they found
• VS Code Plugins for spelling
• Web Based Chrome Extension checker
• Web based external checker - more sensitive than the chrome extension however will only check pages that are linked to main page (not about page, etc.)
• Figma spell check plug in SPELL
• Figma spell check plug in Spellchecker
• Bonnie's Query for spell checkers
  • When going through the query list make sure to check that the spell checker can work in VS Code as well as GitHub CI/CD

[JessicaLucindaCheng]

@kathrynsilvaconway

• I don't think #2909 and #2401 are dependencies for this issue. Dependencies are issues that need to be completed before this issue can be worked on. Issue #2909 is to be completed after this issue is done because we want the misspellings to be corrected after we find the linter so we have something for the linter to find.
  • [x] completed
• You should include the list of spelling errors to use to check that the plugin is effective. See the bottom of this comment for the list: https://github.com/hackforla/website/issues/2401#issuecomment-1146721700
• You may want to add a link to #2401 in the Resources/Instructions section so that we can trace back where this issue came from.

[ExperimentsInHonesty]

@kathrynsilvaconway Good News! I figured out how to find the CI/CD spell checkers, so that we can try to find the pair that we are looking for. Here are the ones that work on GitHub. This probably includes action. So they may not all be suitable. What we are looking for it one that works on PRs or commits. https://github.com/marketplace?type=&verification=&query=spell

[ExperimentsInHonesty]

@kathrynsilvaconway issue #2401 is not a dependency, its the issue that informs the making of this issue. https://github.com/hackforla/website/issues/2401#issuecomment-1146721700

[blulady]

@kathrynsilvaconway

* I don't think [Fix misspelled words on citizen-engagement-card.yml file from "policymaking" to "policy making" #2909](https://github.com/hackforla/website/issues/2909) and [Identify all mispelled words on site and make issues to fix #2401](https://github.com/hackforla/website/issues/2401) are dependencies for this issue. Dependencies are issues that need to be completed before this issue can be worked on. Issue [Fix misspelled words on citizen-engagement-card.yml file from "policymaking" to "policy making" #2909](https://github.com/hackforla/website/issues/2909) is to be completed **after** this issue is done because we want the misspellings to be corrected **after** we find the linter so we have something for the linter to find.

  * [x]  completed

* You should include the list of spelling errors to use to check that the plugin is effective. See the bottom of this comment for the list: [Identify all mispelled words on site and make issues to fix #2401 (comment)](https://github.com/hackforla/website/issues/2401#issuecomment-1146721700)

* You may want to add a link to [Identify all mispelled words on site and make issues to fix #2401](https://github.com/hackforla/website/issues/2401) in the Resources/Instructions section so that we can trace back where this issue came from.

Using the spelling errors to check if the Spell-Checker we use is a brilliant idea but I am uncertain about some of the items that are in the list because: `- line 41 "your" to "you're" Mobile_responsiveness.yml grammatical error

• line 33 each changes to each change in Mobile_responsiveness.yml grammatical error
• line 46 figma should be capitalized in Mobile_responsiveness.yml --> Not sure if this will be caught since it isn't a dictionary word
• "it's" should be "its" on homepage in "Hack for LA is a project of Code for America and is it's official Los Angeles chapter." grammatical error
• "Non-profit" button and description "I am a non-profit organization." should be "nonprofit" on homepage both of these are acceptable in Google docs, uncertain if a spell checker would pick this up`

There are some genuine spelling errors:

• "responsivenes" should be "responsiveness" in How to use Figma effectively on Open Source Volunteer Teams card on https://www.hackforla.org/toolkit/
• In 1.5.a Docker installation troubleshooting of CONTRIBUTING.md, fix spelling of "te" to "the" in "the following wiki page is a guide for solving te issue:"
• "elipsis" should be "ellipsis" in "Click the vertical elipsis located at the top right of the survey form" on https://www.hackforla.org/guide-pages/survey-reporting-dashboard-guide
• "elipsis" should be "ellipsis" in "VERTICAL ELIPSIS" on https://www.hackforla.org/guide-pages/survey-reporting-dashboard-guide
• "elipsis" should be "ellipsis" in "(2) Hovering over the new page added within the dropdown menu, you will see a vertical elipsis." on https://www.hackforla.org/guide-pages/survey-reporting-dashboard-guide

Which makes me wonder:

• does the spell checker also address grammatical errors?
• could we have the Dev(or us) create their own spelling/grammatical errors to test when running the spell check?
• ~is 3546 a dependency for #2401? Do we need to hold on, close or release #2401 because if we have the Dev (or us) create spelling issues that we then test for... but also if we release it by the time someone picks it up, it might not exist anymore?~ see the comment that follows for answer.

[ExperimentsInHonesty]

@blulady - I am not sure what you are talking about here. And I don't think I need to know because that issue is totally resolved by the creation of this issue.

is 3546 a dependency for https://github.com/hackforla/website/issues/2401? Do we need to hold on, close or release https://github.com/hackforla/website/issues/2401 because if we have the Dev (or us) create spelling issues that we then test for... but also if we release it by the time someone picks it up, it might not exist anymore?

[ExperimentsInHonesty]

@blulady you said

could we have the Dev(or us) create their own spelling/grammatical errors to test when running the spell check?

I agree. We should add the errors from the list to the Misspelled list spreadsheet and differentiate between misspellings and grammar errors. Keeping in mind, the solution is not to create the perfect spreadsheet but rather a good enough list to figure out which linter/plugin might work.

[ExperimentsInHonesty]

@blulady Product is taking this issue back temporarily until we are finished updating the spreadsheet.

[ExperimentsInHonesty]

@blulady Bishir and I updated the spelling list, including adding a column that indicates if it's a spelling or grammar issue. The person working on this is welcome to skip the grammar problems if the linter does not do them, we could do that with a separate linter on another issue if necessary. I don't want trying to find the perfect linter to be the enemy of finding a serviceable linter.

Make any changes you feel our necessary to this issue to convey that, and please hide all the comments once the top part is clear.

[github-actions[bot]]

Hi @christinaor, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[christinaor]

Availability: 4pm-10pm EST, M-F ETA: 10pm Thurs

[christinaor]

Progress: Code Spell Checker from VS Marketplace appears to have an equivalent npm package for developers who would prefer to use git and if they're not using VS Code as their IDE.

• How to for installing the Code Spell Checker VS Code extension
• FAQ on using Code Spell Checker as a linter or part of the build process - it's possible as an npm package
• The npm package is called cspell

Next steps are installing the combination to ensure both fix spelling errors consistently, and then apply them against the spreadsheet from the design team.

Blockers: Previously resolved questions on what would entail solving this issue with @jdingeman at Tuesday standup. Resolution is to create a PR using the plugin/extension to fix the spelling errors and touch base with Bonnie with a plan of action on implementing the spell checker in a GitHub action. Availability: 4pm-10pm EST, Wed-Fri, 1h each night as necessary ETA: 10p, 2/17

[christinaor]

I looked through a few more spell checkers on VS Code and checked if they had equivalent npm packages that would allow them to be written into GitHub actions. Surprisingly, there aren't too many spell checkers that are up to date and note that their dictionaries may not be accurate. Code Spell Checker appears to be the most current. Its equivalent npm package is called "cspell", which when executed on a path will list the line and point where the misspelling is. I have tested the npm package on my branch but did not include it in the PR since I'd like to confirm next steps.

One limitation of Code Spell Checker is that it only checks words with at least 4 characters, so it could not pick up one of the misspellings in the Google Sheet ("te" to "the") - this had to be manually corrected. There are configuration files we can create to be more specific about which words are included as an error, but I did not find anything to account for words less than 4 characters in this program.

Plan of Action:

• A new issue for grammar will need to be created since this extension only solves for misspellings.
• If Code Spell Checker is widely adopted, VS Code users will have an easier time with installing the VS Code extension and visually seeing the misspellings in the code they work on. Developers opting for the npm package would need to wait for the program to run and then look through all the misspellings in a list rather than across the codebase. Both can be configured via VS Code for the extension or through configuration files for the npm package. @ExperimentsInHonesty Is there any preference in how the misspellings should be spotted, and can you advise on next steps?
• A new issue for writing a GitHub action implementing cspell, if accepted.

[Aveline-art]

@christinaor One thing to take a look at would be textlint, which comes packaged with superlinter. It can be activated from the lint workflow file, if not already. It looks like there are also a couple of plugins that might add html linting as well.

Edit: Funny enough there are prepackaged rules for grammar + spelling, proper English diction, and inclusive language.