Find Linter and Matching VS Code Plugin to Spell Check Site

[kathrynsilvaconway]

Dependency

• Identify all mispelled words on site and make issues to fix #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

• Research various third party linters to find one we can use to check pull requests for spelling errors.
• 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.
  • If you do not find a matching set, bring to merge team/dev leads to discuss next best option and present to product.
• Test the linter/plugin combination in your own repository to be sure they work as expected.
• Once we identify and apply the spell checker go through this spreadsheet from design team
  • 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)
  • 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

[github-actions]

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.