Use ESLint and Stylelint to check for potential errors and enforce a consistent coding style by AnSq · Pull Request #69 · warframe-tools/Task-Checklist

AnSq · 2026-07-31T20:16:40Z

AI Disclosure:

I did not use AI for anything in this pull request.
I did use AI in this pull request, and I have included a statement of AI use in the commit message of every commit where I used AI.

ESLint and Stylelint are static code analysis tools that can catch common JavaScript and CSS problems and enforce a consistent coding style. I propose that we adopt them for this project.

Proposed Coding Style

JavaScript

Indent with 4 spaces.
Require semicolons.
Use double quotes, unless single quotes would allow for fewer escape sequences.
Single-parameter arrow functions must always use parentheses.
Single-statement blocks must use braces.
Use the "one true brace style".
- The exception to this is when an if and else block each have exactly one statement. Unfortunately, the eslint rule doesn't seem to support this. I could maybe write my own, but that seems like a bunch of extra work for not a lot of benefit. Just use /* eslint-disable-line @stylistic/brace-style */ for these cases.
Multiline arrays and object literals must have a trailing comma.
Curly braces must have spaces on their inner face (for blocks and objects, unless the object is empty).

There are many other rules active from the recommended configuration, but most of them are fairly obvious or have little-to-no effect on our codebase because we're already following them or don't use those language features.

CSS

The Stylelint config is largely comparable to the ESLint one, with some notable rules specific to CSS:

Use modern color function notation.
Use percentages for alpha values.
Use s (seconds) instead of ms (milliseconds) for time units.

JSON

Use the recommended JSON configuration.

Integration

A new GitHub Actions workflow will automatically run the checks on push and on pull request, much like we already have for Vitest.
You can install the provided pre-commit hook to do it for you locally (see note). The pre-commit hook will also run the existing Vitest suite.
Run manually:
- ESLint: npm run lint:js
- Stylelint: npm run lint:css
- Both: npm run lint (Stylelint will only run if there are no ESLint errors).
Editor extensions are available to highlight problems directly in your editor:
- VS Code Other VSIX editors
  (e.g. vscodium)
  
  ESLint from VS Marketplace from Open VSX
  
  Stylelint from VS Marketplace from Open VSX

Bug Fixes

Baro's "leaving soon" notification works again (caught by ESLint).
Bump version to 5.3.1

AnSq · 2026-07-31T23:33:54Z

 }

-function createChecklistItem(task) {
+function createChecklistItem(task) { /* eslint-disable-line complexity, max-lines-per-function */


There's a bunch of places where I've enabled a complexity rule (like complexity, max-lines-per-function, or max-depth) and then ignored all the violations. The rule is enabled so that the writer of the code is warned that the function they're writing might be getting out of hand and it might be time to refactor something. If that's deemed infeasible or not worth it though, then the eslint-disable comment warns the reader of the code of the potential difficulty in wrapping their brain around it, but assures them that the writer is at least aware of the issue.

AnSq · 2026-07-31T23:35:17Z

+        if (task.id.startsWith("daily_")) { when = "today"; } /* eslint-disable-line @stylistic/brace-style */
        else if (task.id.startsWith("weekly_")) { when = "this week"; }


example of the trouble with brace-style

AnSq · 2026-07-31T23:38:21Z

 }

-function updateIncompleteSubtaskCount(task, queryFrom=document) {
+function updateIncompleteSubtaskCount(task, queryFrom = document) {


I actually prefer no spaces here, but @stylistic/space-infix-ops doesn't have an option for "ignore default parameters", and that's a sacrifice I'm willing to make.

AnSq · 2026-07-31T23:47:05Z

 #more-info {
-    p:not(:last-child):not(:has(+ :is(ul, table))), table {
+    p:not(:last-child):not(:has(+ :is(ul, table))), table { /* eslint-disable-line css/no-invalid-properties -- eslint bug workaround */


eslint has trouble parsing some nested CSS

AnSq · 2026-07-31T23:49:50Z


    const now = new Date();
    const taskTimes = calcTaskTimes(task, now);
+    const cycleNumber = calcCycleNumber(task, now);


Wow, look at that! It already caught an error!

(I accidentally deleted the definition of cycleNumber in a previous commit.)

HelpfulSoft1207 · 2026-08-01T00:14:02Z

I had not heard of ESLint before, I will check this out this weekend, but so far looks promising. I like the idea of having a consistent coding style for posterity.

AnSq · 2026-08-02T03:56:43Z

I added Stylelint for checking CSS. It has better support and more options for CSS than ESLint. Right now it's set up to use both ESLint and Stylelint on CSS files, which seems like maybe a bad idea, but they haven't seemed to clash too much so 🤷.

The biggest changes here are enforcing modern color function notation and percentages for alpha values.

The Stylelint config is also a work in progress.

AnSq · 2026-08-02T04:01:14Z

 input[type="checkbox"] {
-    appearance: none; -webkit-appearance: none; -moz-appearance: none;


appearance: none is widely supported without a vendor prefix

AnSq · 2026-08-04T16:32:35Z

There's now a working GitHub Actions workflow for this. If you're curious, you can see the results of me testing different failure modes here.

AnSq · 2026-08-04T20:03:23Z

There's now a pre-commit hook for this. You do have to install it manually (this is a limitation/security feature of git).

Known issue: the pre-commit hook does linting checks on the working directory, not the index (staged files). This means that you can, for example, stage some code with linting errors, fix it, forget to re-stage the fixes, and this hook will happily let you commit anyway. Fixing this would be more complicated than it's worth, imo, especially considering that the GitHub workflow will catch it eventually, and installing the hook is optional anyway.

AnSq · 2026-08-05T20:10:39Z

I have squashed the commits. I'm still open to feedback, of course, ~~but from my perspective I think this is ready to merge now.~~ Actually, hang on, I need to check something.

…consistent coding style * ESLint checks JS, JSON, and some CSS * Stylelint checks CSS * Stylistic plugins for both enforce coding style * Adds GitHub workflow to run checks on push and PR * Adds pre-commit hook to run checks that devs can install * Update CONTRIBUTING.md

AnSq · 2026-08-06T20:38:39Z

resolved merge conflicts
added --cache to speed up ESLint and Stylelint
added Vitest to pre-commit
Vitest, ESLint, and Stylelint now run in parallel in pre-commit
fixed some more bugs with Baro
- bumped version to 5.3.1

AnSq · 2026-08-09T05:03:49Z

Added some more bug fixes/refactoring/tests. The current state of this branch is equivalent to this release and is currently live at https://ansq.github.io/Warframe-Task-Checklist/. You can merge this as-is, or if you prefer, I can split one or both of the bugfix commits into a new PR that you can review and merge separately from the linting changes.

HelpfulSoft1207 · 2026-08-09T14:18:28Z

Sorry for the late reply on this, I have been swamped with work and real life, and will be for the rest of this month.

Please split the fix from the ES/Style-lint changes and I can merge that one in.

For this, I would like for ESLint to handle the JS and Stylelint to handle the CSS, and not have them overlap. I feel like we will end up running into a clash that will be annoying and end up going this route anyways. I like the idea of all of this though, and from what I have read from each tool, they are highly regarded and very helpful (based on that and what has already been found).

I do not want to implement automatic fixing with --fix, I think we can handle the fixes.

I am taking a look at the rest and will comment on any changes or questions. Thank you again!

AnSq · 2026-08-10T15:55:53Z

Please split the fix from the ES/Style-lint changes and I can merge that one in.

Done. I've kept the fix for the undeclared variable because that was directly detected by ESLint, and ESLint fails validation without it, but if you'd like I can pull that out too.

For this, I would like for ESLint to handle the JS and Stylelint to handle the CSS, and not have them overlap. I feel like we will end up running into a clash that will be annoying and end up going this route anyways.

Entirely reasonable. I have removed ESLint's coverage of CSS.

I do not want to implement automatic fixing with --fix, I think we can handle the fixes.

I agree. My current setup does not use --fix.

Sorry for the late reply on this, I have been swamped with work and real life, and will be for the rest of this month.

Absolutely no pressure to respond to my stuff on any particular timeline. I'm perfectly content to tinker around on my branch and only get stuff merged when/if it's convenient for you.

HelpfulSoft1207 · 2026-08-10T16:06:51Z

Done. I've kept the fix for the undeclared variable because that was directly detected by ESLint, and ESLint fails validation without it, but if you'd like I can pull that out too.

That is fine.

Absolutely no pressure to respond to my stuff on any particular timeline. I'm perfectly content to tinker around on my branch and only get stuff merged when/if it's convenient for you.

Okay thanks. If anything is urgent you can always ping me on Discord. I will see that notification long before I read the email from GH.

AnSq commented Jul 31, 2026

View reviewed changes

AnSq commented Aug 2, 2026

View reviewed changes

AnSq changed the title ~~[Proposal/Discussion/WIP] Use ESLint to check for potential errors and enforce a consistent coding style~~ [Proposal/Discussion/WIP] Use ESLint and Stylelint to check for potential errors and enforce a consistent coding style Aug 3, 2026

AnSq force-pushed the eslint branch from e8dba39 to fe8a009 Compare August 5, 2026 19:36

AnSq changed the title ~~[Proposal/Discussion/WIP] Use ESLint and Stylelint to check for potential errors and enforce a consistent coding style~~ Use ESLint and Stylelint to check for potential errors and enforce a consistent coding style Aug 5, 2026

AnSq marked this pull request as ready for review August 5, 2026 20:10

AnSq marked this pull request as draft August 6, 2026 10:30

AnSq force-pushed the eslint branch from fe8a009 to 1793d10 Compare August 6, 2026 19:53

AnSq force-pushed the eslint branch from 6b94dc6 to 1793d10 Compare August 7, 2026 02:38

AnSq marked this pull request as ready for review August 7, 2026 02:41

don't use eslint for css

9e28e9d

AnSq force-pushed the eslint branch from e363adb to 9e28e9d Compare August 10, 2026 15:53

AnSq mentioned this pull request Aug 10, 2026

Baro Bugfixes #71

Open

2 tasks

	VS Code	Other VSIX editors (e.g. vscodium)
ESLint	from VS Marketplace	from Open VSX
Stylelint	from VS Marketplace	from Open VSX

		if (task.id.startsWith("daily_")) { when = "today"; } /* eslint-disable-line @stylistic/brace-style */
		else if (task.id.startsWith("weekly_")) { when = "this week"; }

		input[type="checkbox"] {
		appearance: none; -webkit-appearance: none; -moz-appearance: none;

Conversation

AnSq commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Coding Style

JavaScript

CSS

JSON

Integration

Bug Fixes

Uh oh!

AnSq Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

AnSq Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

AnSq Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

AnSq Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

AnSq Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

HelpfulSoft1207 commented Aug 1, 2026

Uh oh!

AnSq commented Aug 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnSq Aug 2, 2026

Choose a reason for hiding this comment

Uh oh!

AnSq commented Aug 4, 2026

Uh oh!

AnSq commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnSq commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnSq commented Aug 6, 2026

Uh oh!

AnSq commented Aug 9, 2026

Uh oh!

HelpfulSoft1207 commented Aug 9, 2026

Uh oh!

AnSq commented Aug 10, 2026

Uh oh!

HelpfulSoft1207 commented Aug 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AnSq commented Jul 31, 2026 •

edited

Loading

AnSq commented Aug 2, 2026 •

edited

Loading

AnSq commented Aug 4, 2026 •

edited

Loading

AnSq commented Aug 5, 2026 •

edited

Loading