Lint HTML Templates with ERBLint and BetterHtml #1107
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
For writing the tests, two things to look at:
|
Configure the [erb_lint][] utility to apply our `standard`-backed RuboCop linting tool to our application's `.erb` files. The initial `.erb-lint.yml` file is configured according to the gem's [README.md][]. Additionally, there are some key RuboCop rules that we're disabling [according to some feedback from the community of `erb_lint` users][issue]. The Rails tasks defined in `lib/tasks/erblint.rake` are inspired by those defined in [standard/rake.rb][]. They define the `erblint:autocorrect` and `erblint` tasks to execute the `erblint` command with and without the `--autocorrect` flag. Additional arguments can be passed in with the `ERBLINTOPTS` environment variable. By default, executing `rails standard` will execute `rails erblint`, and `rails standard:fix` will execute `rails erblint:autocorrect`. Also depend on the [erblint-github][] gem to provide additional, accessibility-focused rules for how we statically analyze ERB templates. Finally, the [ERBLint][] tool depends on [BetterHtml][], and claims to execute BetterHtml's [ERBSafety][] test suite. In our experience, this isn't the case, and [requires manual configuration][better_html_tests]. This commit also introduces the `config/better_html.yml` configuration file, and makes sure that `BetterHtml` and `ERBLint` consistently read its contents. [erb_lint]: https://github.com/Shopify/erb-lint [README.md]: https://github.com/Shopify/erb-lint#configuration [standard/rake.rb]: https://github.com/testdouble/standard/blob/main/lib/standard/rake.rb [exe/erblint]: https://github.com/Shopify/erb-lint/blob/main/exe/erblint [issue]: Shopify/erb-lint#222 (comment) [erblint-github]: https://github.com/github/erblint-github [ERBLint]: https://github.com/Shopify/erb-lint [ERBSafety]: https://github.com/Shopify/erb-lint#erbsafety [BetterHtml]: https://github.com/Shopify/better-html [better_html_tests]: https://github.com/Shopify/better-html#testing-for-valid-html-and-erb
seanpdoyle
force-pushed
the
standard-erb-lint
branch
from
1c42877
to
c41d3e7
Compare
This was referenced Nov 9, 2023
Merged
stevepolitodesign
added a commit
that referenced
this pull request
Dec 1, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces `eslint` and `stylelint` NPM commands that leverage [@thoughtbot/eslint-config][] and [@thoughtbot/stylelint-config][]. ``` yarn run eslint yarn run stylelint ``` Also introduces `.prettierrc` based off of our [Guides][]. [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
stevepolitodesign
added a commit
that referenced
this pull request
Dec 1, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces `eslint` and `stylelint` NPM commands that leverage [@thoughtbot/eslint-config][] and [@thoughtbot/stylelint-config][]. ``` yarn run eslint yarn run stylelint ``` Also introduces `.prettierrc` based off of our [Guides][]. [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
2 tasks
stevepolitodesign
added a commit
that referenced
this pull request
Dec 1, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces `eslint` and `stylelint` NPM commands that leverage [@thoughtbot/eslint-config][] and [@thoughtbot/stylelint-config][]. ``` yarn run eslint yarn run stylelint ``` Also introduces `.prettierrc` based off of our [Guides][]. [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
stevepolitodesign
added a commit
that referenced
this pull request
Dec 11, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces `eslint` and `stylelint` NPM commands that leverage [@thoughtbot/eslint-config][] and [@thoughtbot/stylelint-config][]. ``` yarn run eslint yarn run stylelint ``` Also introduces `.prettierrc` based off of our [Guides][]. [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
stevepolitodesign
added a commit
that referenced
this pull request
Dec 11, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces [scripts][] that leverage [@thoughtbot/eslint-config][], [@thoughtbot/stylelint-config][] and [prettier][]. Also introduces `.prettierrc` based off of our [Guides][]. [scripts]: https://docs.npmjs.com/cli/v6/using-npm/scripts [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [prettier]: https://prettier.io [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. In an effort to support that future commit, we ensure to run `yarn run fix:prettier` and `bundle exec standard:fix_unsafely` once the generator is complete. Otherwise, CI would fail because of linting violations. We call `standard:fix_unsafely` since `standard:fix` returns an error status code on new Rails applications. Running `standard:fix_unsafely` fixes this issue and returns a success status code. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
stevepolitodesign
added a commit
that referenced
this pull request
Dec 11, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces [scripts][] that leverage [@thoughtbot/eslint-config][], [@thoughtbot/stylelint-config][] and [prettier][]. Also introduces `.prettierrc` based off of our [Guides][]. We need to pin `stylelint` and `@thoughtbot/stlyelint-config` to specific versions to account for this [open issue][]. Unfortunately, running `yarn run lint:stylelint` results in deprecation warnings, which will need to be addressed separately. [scripts]: https://docs.npmjs.com/cli/v6/using-npm/scripts [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [prettier]: https://prettier.io [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting [open issue]: thoughtbot/stylelint-config#46 Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. In an effort to support that future commit, we ensure to run `yarn run fix:prettier` and `bundle exec standard:fix_unsafely` once the generator is complete. Otherwise, CI would fail because of linting violations. We call `standard:fix_unsafely` since `standard:fix` returns an error status code on new Rails applications. Running `standard:fix_unsafely` fixes this issue and returns a success status code. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
stevepolitodesign
added a commit
that referenced
this pull request
Dec 11, 2023
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces [scripts][] that leverage [@thoughtbot/eslint-config][], [@thoughtbot/stylelint-config][] and [prettier][]. Also introduces `.prettierrc` based off of our [Guides][]. We need to pin `stylelint` and `@thoughtbot/stlyelint-config` to specific versions to account for this [open issue][]. Unfortunately, running `yarn run lint:stylelint` results in deprecation warnings, which will need to be addressed separately. [scripts]: https://docs.npmjs.com/cli/v6/using-npm/scripts [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [prettier]: https://prettier.io [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting [open issue]: thoughtbot/stylelint-config#46 Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. In an effort to support that future commit, we ensure to run `yarn run fix:prettier` and `bundle exec standard:fix_unsafely` once the generator is complete. Otherwise, CI would fail because of linting violations. We call `standard:fix_unsafely` since `standard:fix` returns an error status code on new Rails applications. Running `standard:fix_unsafely` fixes this issue and returns a success status code. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. However, a future commit could explore removing the JavaScript linters. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
|
Closed by #1148 |
stevepolitodesign
added a commit
that referenced
this pull request
May 10, 2024
Closes #1107 Closes #1143 Creates a holistic linting solution that covers JavaScript, CSS, Ruby and ERB. Introduces [scripts][] that leverage [@thoughtbot/eslint-config][], [@thoughtbot/stylelint-config][] and [prettier][]. Also introduces `.prettierrc` based off of our [Guides][]. We need to pin `stylelint` and `@thoughtbot/stlyelint-config` to specific versions to account for this [open issue][]. Unfortunately, running `yarn run lint:stylelint` results in deprecation warnings, which will need to be addressed separately. [scripts]: https://docs.npmjs.com/cli/v6/using-npm/scripts [@thoughtbot/eslint-config]: https://github.com/thoughtbot/eslint-config [@thoughtbot/stylelint-config]: https://github.com/thoughtbot/stylelint-config [prettier]: https://prettier.io [Guides]: https://github.com/thoughtbot/guides/blob/main/javascript/README.md#formatting [open issue]: thoughtbot/stylelint-config#46 Introduces `rake standard` which also runs `erblint` to lint ERB files via [better_html][], [erb_lint][] and [erblint-github][]. [better_html]: https://github.com/Shopify/better-html [erb_lint]: https://github.com/Shopify/erb-lint [erblint-github]: https://github.com/github/erblint-github A future commit will ensure these linting rules are run during CI. In an effort to support that future commit, we ensure to run `yarn run fix:prettier` and `bundle exec standard:fix_unsafely` once the generator is complete. Otherwise, CI would fail because of linting violations. We call `standard:fix_unsafely` since `standard:fix` returns an error status code on new Rails applications. Running `standard:fix_unsafely` fixes this issue and returns a success status code. It should be noted that we deliberately permit this generator to be invoked on API only applications, because those applications can still contain views, like ones used for mailers. However, a future commit could explore removing the JavaScript linters. Also improves the developer experience by introducing `with_test_suite` helper, allowing the caller to run the generator in an application using minitest or RSpec.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Configure the erb_lint utility to apply our
standard-backed RuboCop linting tool to our application's.erbfiles.The initial
.erb-lint.ymlfile is configured according to the gem's README.md. Additionally, there are some key RuboCop rules that we're disabling according to some feedback from the community oferb_lintusers.The Rails tasks defined in
lib/tasks/erblint.rakeare inspired by those defined in standard/rake.rb. They define theerblint:autocorrectanderblinttasks to execute theerblintcommand with and without the--autocorrectflag. Additional arguments can be passed in with theERBLINTOPTSenvironment variable.By default, executing
rails standardwill executerails erblint, andrails standard:fixwill executerails erblint:autocorrect.Also depend on the erblint-github gem to provide additional, accessibility-focused rules for how we statically analyze ERB templates.
Finally, the ERBLint tool depends on BetterHtml, and claims to execute BetterHtml's ERBSafety test suite. In our experience, this isn't the case, and requires manual configuration.
This commit also introduces the
config/better_html.ymlconfiguration file, and makes sure thatBetterHtmlandERBLintconsistently read its contents.