Lint HTML Templates with ERBLint and BetterHtml #1107

seanpdoyle · 2022-11-22T20:31:08Z

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.

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.

This commit also introduces the config/better_html.yml configuration file, and makes sure that BetterHtml and ERBLint consistently read its contents.

mike-burns · 2022-11-22T20:39:29Z

For writing the tests, two things to look at:

You'll be adding to https://github.com/thoughtbot/suspenders/blob/main/spec/suspenders/generators/lint_generator_spec.rb .
Here's an example of testing the RSpec conditional: https://github.com/thoughtbot/suspenders/blob/main/spec/suspenders/generators/ci_generator_spec.rb#L21-L47

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

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.

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.

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.

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.

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.

stevepolitodesign · 2023-12-12T10:44:08Z

Closed by #1148

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.

seanpdoyle force-pushed the standard-erb-lint branch from 1c42877 to c41d3e7 Compare November 22, 2022 20:43

This was referenced Nov 9, 2023

Suspenders 3.0.0 #1135

Merged

Introduce suspenders:advisories generator #1138

Merged

stevepolitodesign mentioned this pull request Dec 1, 2023

Introduce suspenders:lint generator #1148

Merged

2 tasks

stevepolitodesign closed this Dec 12, 2023

seanpdoyle deleted the standard-erb-lint branch December 12, 2023 12:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lint HTML Templates with ERBLint and BetterHtml #1107

Lint HTML Templates with ERBLint and BetterHtml #1107

seanpdoyle commented Nov 22, 2022

mike-burns commented Nov 22, 2022

stevepolitodesign commented Dec 12, 2023

Lint HTML Templates with ERBLint and BetterHtml #1107

Lint HTML Templates with ERBLint and BetterHtml #1107

Conversation

seanpdoyle commented Nov 22, 2022

mike-burns commented Nov 22, 2022

stevepolitodesign commented Dec 12, 2023