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.
From ESLint, use the recommended CSS configuration with the following modifications:
- Warn instead of erroring on !important. (None of our uses of !important seemed necessary, so I removed them all anyway.)
- Warn instead of erroring on features that are not baseline widely available.
  - Some non-widely-available features are allowed if they've almost graduated from "newly" to "widely" available, or if their effect is small.

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).
Baro now correctly transitions between locked and unlocked when leaving and arriving without needing a page refresh.
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

* now becomes locked when becoming unavailable while not checked * now becomes unlocked when becoming available without needing a refresh * v5.3.1

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 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 added 2 commits August 6, 2026 12:52

baro fixes:

1793d10

* now becomes locked when becoming unavailable while not checked * now becomes unlocked when becoming available without needing a refresh * v5.3.1

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

Navigation Menu

Use ESLint and Stylelint to check for potential errors and enforce a consistent coding style - #69

Use ESLint and Stylelint to check for potential errors and enforce a consistent coding style#69
AnSq wants to merge 2 commits into
warframe-tools:mainfrom
AnSq:eslint

AnSq commented Jul 31, 2026 •

edited

Loading

Uh oh!

AnSq Jul 31, 2026

Uh oh!

AnSq Jul 31, 2026

Uh oh!

AnSq Jul 31, 2026

Uh oh!

AnSq Jul 31, 2026

Uh oh!

AnSq Jul 31, 2026

Uh oh!

HelpfulSoft1207 commented Aug 1, 2026

Uh oh!

AnSq commented Aug 2, 2026 •

edited

Loading

Uh oh!

AnSq Aug 2, 2026

Uh oh!

AnSq commented Aug 4, 2026

Uh oh!

AnSq commented Aug 4, 2026 •

edited

Loading

Uh oh!

AnSq commented Aug 5, 2026 •

edited

Loading

Uh oh!

AnSq commented Aug 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	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!

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