{ "componentChunkName": "component---src-templates-blog-post-tsx", "path": "/blog/2023-10-16-backstage-linting/", "result": {"data":{"blogPost":{"title":"Backstage: How to fix linting errors without slowing down development","slug":"/blog/2023-10-16-backstage-linting/","authorNodes":[{"name":"Min Kim","slug":"/people/min-kim/"}],"markdown":{"html":"
\n

TL;DR This blog post outlines the steps in creating a patch for the lint command in Backstage, which organizes errors by package, rules, and overall counts. The author explains how to use the generated lint error data to monitor and manage lint issues efficiently, and emphasizes the importance of tracking progress in reducing lint errors.

\n
\n

I recently worked with a team that had the lint command in their Backstage project misconfigured. The result? They ended up amassing an overwhelming number of lint errors - literally hundreds upon hundreds. In fact, the report output by the lint command was so long it would max out the terminal.

\n

Normally, you would run the lint command in CI for every commit of your pull requests. This practice ensures that any new lint errors introduced by the changes would prevent the pull request from being merged. However, we could not set up this configuration right away; doing so would have brought development to a screeching halt.

\n

With so many lint errors, it was difficult to pinpoint a starting point. To gain a clearer overview of the types and quantity of lint errors we were dealing with, I made modifications to the Backstage lint command. The modified command produced reports within a structured file system and generated an errors' summary.

\n

Writing the Patch

\n

The lint command of the backstage-cli package can be found here. We're going to write a patch for it to produce the summary file so let's start by installing patch-package:

\n
yarn add patch-package -W
\n

And modify the root package.json of your Backstage project:

\n
\"scripts\": {\n+  \"postinstall\": \"patch-package\"\n}
\n

Then navigate to the correct lint command file in ./node_modules/@backstage/cli/dist/cjs/lint. There will be three Javascript files for linting - one for the base lint command, another for the repo lint command, and a third for the versions lint command. The file we're going to modify is the one designated for the repo lint command.

\n

Here is a high level view of the patch we're going to be writing:

\n
create `errors` directory\ncreate `summary` file\n\nfor `errors` of each `package`\n  - create directory for this specific package\n  - output lint report of this package to a text file in its corresponding directory\n  - output the total lint error count of this package and list the rules that are being violated\n\ncalculate grand total count of lint errors for the entire project\ncombine the total count of lint errors by rule for the entire project
\n

And here's the actual patch. Typically we would use diff syntax to indicate which lines to be added, but in order to make the code easier to read, we will display the code snippet with Javascript syntax highlighting.

\n
\n

The code snippet below is quite long so you can check out a working demo of a Backstage app with the lint patch here. The actual patch can be found here, and you could also follow along its commit history for a more step-by-step approach in creating the patch.

\n
\n
var fs = require('fs');\n// ...\nasync function command(opts) {\n  // ...\n  let failed = false;\n  const errors_dir = path.join(process.cwd(), 'errors');\n  if (fs.existsSync(errors_dir)) {\n    fs.rmSync(errors_dir, { recursive: true, force: true });\n  }\n\n  let errors_summary = {\n    total_count: 0,\n    per_package: [],\n  };\n  let violations_combined = [];\n\n  for (const { relativeDir, resultText } of resultsList) {\n    const package_dir = path.join(errors_dir, relativeDir);\n    fs.mkdirSync(package_dir, { recursive: true });\n\n    const stripAnsi = new RegExp(/[\\u001b\\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g);\n    const resultTextFormatted = resultText.replace(stripAnsi, \"\").split(\"\\n\");\n\n    fs.writeFileSync(`${package_dir}/results.txt`, `${relativeDir}\\n${resultTextFormatted.join('\\n')}\\n`);\n\n    const violations_count = parseInt(\n      resultTextFormatted\n        .find(line => line.match(/✘ [0-9]+ problem.*/))\n        .replace(/\\s*✘\\s*/, \"\")\n        .replace(/ problem.*/, \"\")\n    , 10);\n\n    const violations_index = resultTextFormatted.indexOf(\"Errors:\") >= 0\n      ? resultTextFormatted.indexOf(\"Errors:\")\n      : resultTextFormatted.indexOf(\"Warnings:\");\n\n    let package_violations = [];\n\n    resultTextFormatted.slice(violations_index).forEach(line => {\n      if (line.match(/http/)) {\n        const error_details = {\n          count: parseInt(line.match(/\\d+/)[0], 10),\n          rule: line.match(/http.*/)[0]\n        }\n        package_violations.push(error_details);\n        violations_combined.push(error_details);\n      }\n    });\n\n    errors_summary.per_package.push({\n      package: relativeDir,\n      violations_count,\n      package_violations: package_violations.sort((a, b) => a.rule.localeCompare(b.rule)),\n    });\n\n    errors_summary.total_count = errors_summary.total_count + violations_count;\n    // ...\n  };\n\n  if (failed) {\n    const combined_violations_sorted = violations_combined\n    .reduce((acc, item) => {\n      const already_exists = acc.findIndex(acc_item => acc_item.rule === item.rule);\n      if (already_exists > -1) {\n        acc[already_exists].count = acc[already_exists].count + item.count\n        return acc;\n      } else {\n        return [...acc, item];\n      }\n    }, []);\n\n    fs.writeFileSync(errors_dir + \"/summary.json\", JSON.stringify({\n      count: errors_summary.total_count,\n      errors_combined: combined_violations_sorted.sort((a, b) => a.rule.localeCompare(b.rule)),\n      per_package: errors_summary.per_package.sort((a, b) => a.package.localeCompare(b.rule)),\n    }, null, 2));\n  }\n}
\n
\n

Note:

\n
    \n
  1. \n

    ESLint rules are categorized by warning and error, but we have found that the categorization is highly opinionated and do not necessarily align to its actual severity so for that reason we merged warnings with errors.

    \n
    2. \n
  2. \n

    ESLint offers a wide variety of options for formatters. I have reviewed each formatter but ultimately the stylish (default) formatter met all our needs. Although the sylish output required a bit of formatting, it is the only formatter that provides a relative path of the package location, count of errors per package, and provides source URLs to the violated rules.

    \n
    3. \n
\n
\n

Viewing and Updating the Summary

\n

With the patch code shown above, our new lint command will output a summary file that will look something like this:

\n
{\n  count: 3,\n  errors_combined: [\n    {\n      rule: \"https://eslint.org/docs/latest/rules/foo\",\n      count: 2,\n    },\n    {\n      rule: \"https://eslint.org/docs/latest/rules/bar\",\n      count: 1,\n    }\n  ],\n  per_package: [\n    {\n      package: \"/packages/a\",\n      violations_count: 1,\n      package_violations: [\n        {\n          rule: \"https://eslint.org/docs/latest/rules/foo\",\n          count: 1,\n        },\n      ]\n    },\n    ...\n  ]\n}
\n

From the generated summary file, we can extract the following information:

\n\n

In addition to the summary file, the modified lint command will output each package results to an organized file structure:

\n
errors/\n  |-- summary.json\n  |-- packages/\n    |-- foo/\n      |-- results.txt\n    |-- bar/\n      |-- results.txt
\n

Ideally from here you would divide and conquer to resolve all of your project's rule violations. However, if your team lacks the capacity to address these errors right away, the best you could do is try to prevent the problem from growing.

\n

The best way to keep track of your lint errors would be to keep the errors directory up to date in all of your pull requests. You could tell your developers to run the modified lint command, but having to rely on people remembering to do things is rarely a good idea, so you're left with two options: you could have your CI run the patched lint command and push the updated summaries to your pull requests - which would require your developers to pull their own branch after each commit they push - or you could use husky to force your local dev environments to run lint for you.

\n

Follow their Getting Started guide for installing Husky to your Backstage project and configure a pre-push hook to run lint:

\n
#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nyarn lint\nif git status | grep \"errors/\"; then\n  echo \"You forgot to run 'yarn lint'. The lint command was ran for you just now, commit the generated errors directory and git push again\"\n  exit 1\nfi
\n
\n

Note:

\n
    \n
  1. \n

    Instead of having husky run before a git push, you could configure it to run every time a developer creates a new commit. Depending on the size of your Backstage project, the lint command could take quite a while. In this guide we opted for the pre-push hook to provide a more pleasant developer experience.

    \n
    2. \n
  2. \n

    Having the pre-push hook create the commit and subsequently push the updated set of commits in a single step, without requiring developers to initiate an additional git push, would be a convenient approach. But, unfortunatey, the pre-push hook's mechanism involves calculating the specific commits to push at the moment the hook is activated. As a result, it's incapable of generating a fresh commit and incorporating that newly created commit within the confines of the hook itself.

    \n
    3. \n
\n
\n

Using the Data

\n

Now that we have a better overview of our linting errors (and a way to keep it reliably up to date), we need to decide on a method of using that data.

\n

The simplest approach to check if someone is introducing more lint errors would be to quickly check the git diff of their pull request for the total count in the summary file:

\n
{\n-  count: 3,\n+  count: 5,\n  errors_combined: [...],\n  per_package: [...]\n}
\n

However, should a developer address a minor rule violation while simultaneously introducing a more severe error, the overall count of lint errors would remain unchanged. To avoid this scenario, you'd need to compare the cumulative count for each specific rule:

\n
{\n  count: 3,\n  errors_combined: [\n    {\n      rule: \"https://eslint.org/docs/latest/rules/foo\",\n-      count: 2,\n+      count: 1,\n    },\n    {\n      rule: \"https://eslint.org/docs/latest/rules/bar\",\n-      count: 1,\n+      count: 2,\n    }\n  ],\n  per_package: [...],\n}
\n

And if you want to ensure that a particular rule isn't being resolved in one package while a new one is being introduced in another, you would have to take a look at the differences under the per_package property and review the git diff of the lint reports of each package.

\n

Whether you choose to resolve your lint issues rule-by-rule or package-by-package, providing your developers with the capability to access the lint reports for each package in a file format offers significant convenience. This will enable them to search through the entire directy for particular rules and be able to view the details of the lint report without having to run the command.

\n

Conclusion

\n

If your project has accumulated a long list of lint errors, it's crucial to strategize an approach for addressing them. Your team might be able to allocate resources to fix those linting errors right away or they may need to chip away at it incrementally. Regardless of the approach, it would be beneficial for your team to be able to track the progress of their efforts - it's also very satisfying to see the total count number within the summary file decrease in your pull requests.

\n

Upon successfully reducing your lint errors count to zero, you can promptly remove the patch and reconfigure your CI system to mandate linting as an obligatory check for all pull requests.

","frontmatter":{"date":"October 16, 2023","description":"In this guide Min will show you a unique approach to tackling a mountain of linting errors without disrupting delivery","tags":["backstage","dx"],"img":{"childImageSharp":{"fixed":{"src":"/static/363877537a4c176532fe50374dbfa685/31987/2023-10-16-backstage-linting.png"}}}}}}},"pageContext":{"id":"a8790376-f3a7-5124-88c6-bbef0a1f121e"}}, "staticQueryHashes": ["1241260443"]}