Docs: Use emojis instead of images to indicate fixable/recommended rules

[qpwo]

In the rule page, I wanted to search for all auto-fixable rules but the icon was an image instead of unicode, so I couldn't do a ctrl-f. So this PR changes chechmarks and wrenches to unicode to allow searching, which should make it easier for people to find the rules they're looking for.

Screenshot of how it looks below. Chechmarks could be ✅ or some other things instead if people prefer it.

before	after

[eslint-github-bot[bot]]

Hi @qpwo!, thanks for the Pull Request

The first commit message isn't properly formatted. We ask that you update the message to match this format, as we use it to generate changelogs and automate releases.

• The commit message tag must be one of the following:

  The Tag is one of the following:

  • Fix - for a bug fix.
  • Update - either for a backwards-compatible enhancement or for a rule change that adds reported problems.
  • New - implements a new feature.
  • Breaking - for a backwards-incompatible enhancement or feature.
  • Docs - changes to documentation only.
  • Build - changes to build process only.
  • Upgrade - for a dependency upgrade.
  • Chore - for anything that isn't user-facing (for example, refactoring, adding tests, etc.).

  You can use the labels of the issue you are working on to determine the best tag.

• There should be a space following the initial tag and colon, for example 'New: Message'.

• The first letter of the tag should be in uppercase

Read more about contributing to ESLint here

[netlify[bot]]

✔️ Deploy Preview for eslint ready!

🔨 Explore the source changes: 30fc7fd39e35adab3570ac13bf7821deb546c0cb

🔍 Inspect the deploy log: https://app.netlify.com/sites/eslint/deploys/60f86ca782172a0007e421ac

😎 Browse the preview: https://deploy-preview-858--eslint.netlify.app

[eslint-github-bot[bot]]

Hi @qpwo!, thanks for the Pull Request

The first commit message isn't properly formatted. We ask that you update the message to match this format, as we use it to generate changelogs and automate releases.

• The commit message tag must be one of the following:

  The Tag is one of the following:

  • Fix - for a bug fix.
  • Update - either for a backwards-compatible enhancement or for a rule change that adds reported problems.
  • New - implements a new feature.
  • Breaking - for a backwards-incompatible enhancement or feature.
  • Docs - changes to documentation only.
  • Build - changes to build process only.
  • Upgrade - for a dependency upgrade.
  • Chore - for anything that isn't user-facing (for example, refactoring, adding tests, etc.).

  You can use the labels of the issue you are working on to determine the best tag.

• There should be a space following the initial tag and colon, for example 'New: Message'.

• The first letter of the tag should be in uppercase

Read more about contributing to ESLint here

[nzakas]

Interesting idea. I feel like the wrench icon is a little bit difficult to decipher visually, though. Is there another that could be used instead?

[bmish]

I'd be in favor of switching to emojis.

In many projects I've worked on, we use 🔧 for fixable, and ✅ for recommended (I've also seen ✔ for recommended).

• https://github.com/sindresorhus/eslint-plugin-unicorn#rules
• https://github.com/not-an-aardvark/eslint-plugin-eslint-plugin#supported-rules
• https://github.com/platinumazure/eslint-plugin-qunit#rules
• https://github.com/ember-cli/eslint-plugin-ember#components
• https://github.com/ember-template-lint/ember-template-lint#rules

[nzakas]

Okay, I don't feel very strongly about this. I kind of like the dark checkmark as opposed to the green, but if anyone wants to mock that up for a comparison, we can take a look.

[qpwo]

Ok I signed CLA and changed commit message so I think this is ready if yall are happy with it

[bmish]

Could you include both before and after screenshots in the PR description?

| Before | After |
| --- | --- |
| before.jpg | after.jpg |

And ideally, the individual rule docs (example) would use the same emojis in their fixable/recommended notices.

[qpwo]

Updated description. Rule docs are already changed.

[nzakas]

Netlify automatically generates a preview site each time the PR is updated. You can see this page here: https://deploy-preview-858--eslint.netlify.app/docs/rules/

I believe what @bmish is looking for is to use the same icons on the individual rule pages, which you can see an example of here: https://deploy-preview-858--eslint.netlify.app/docs/rules/no-extra-semi

I'm also 👍 to using the same emojis on the individual rule pages.

[qpwo]

Video of usage:

https://user-images.githubusercontent.com/10591373/126547217-b700182b-8764-463a-bc17-04a2a4c639a3.mov

With the styling on the wrench & checkmark right now, they're not selectable when they float left of the paragraph. Is that fine? They do look the same everywhere now though.

[nzakas]

Agree with @bmish.