Add ESLint check #2438

dodieboy · 2024-07-03T11:23:39Z

Added ESLint into the test as mention on #2332 with some config like indent "tab", ignore empty catch and more

dodieboy · 2024-07-03T11:24:47Z

Currently have continue-on-error on and JSLint also not remove, should it be remove?
@raszpl any config you feel need to be added?

There is still allow lint that I did not fix.

dodieboy · 2024-07-03T11:38:24Z

Currently still have 75 errors

ImprovedTube · 2024-07-03T19:35:03Z

hi @dodieboy

…nnamed-orbert

…nnamed-orbert (@raszpl #2391 @4yman-el)

raszpl · 2024-07-03T22:13:14Z

Currently have continue-on-error on and JSLint also not remove, should it be remove?

JSLint is not doing anything at the moment "Stopping. (4% scanned)."
JSLint needs manual help #2415 to be able to tell whats going on

js&css/extension/init.js
 #1 'extension' was used before it was defined.

it doesnt understand (not that I would expect it to) manifest.json so doesnt know

				"js&css/extension/core.js",
				"js&css/extension/functions.js",
				"js&css/extension/www.youtube.com/night-mode/night-mode.js",
				"js&css/extension/www.youtube.com/general/general.js",
				"js&css/extension/www.youtube.com/appearance/sidebar/sidebar.js",
				"js&css/extension/www.youtube.com/appearance/comments/comments.js",
				"js&css/extension/init.js"

init.js is the last file injected and extension was defined all the way back in core.js

youtube/js&css/extension/core.js

Line 24 in d4a8733

var extension = {

but the worst thing about jslint is how opinionated Crockford is leading to some hardcoded nonsense like prohibited Tabs or code indentation. Imo no point keeping JSLint around with ESLint in place.

@raszpl any config you feel need to be added?

at first glance ESLint seem to have a grasp of file order? did you instrument this manually by giving it some sort of a map? for example

/home/runner/work/youtube/youtube/js&css/web-accessible/www.youtube.com/appearance.js
Error:   92:12  error  'i' is already defined  no-redeclare
Error:   92:19  error  'l' is already defined  no-redeclare

it doesnt mindlessly complain about "ImprovedTube not defined". Did you configure it with no-undef? Hmm it doesnt complain about undefined yt.config_.EXPERIMENT_FLAGS.kevlar_watch_grid so definitely no-undef.

Do you know of a way of instrumenting ESLint about execution contexts and order of files? Even if it had explicit support for linking web extensions by parsing manifest.json that would only solve /extension/ part of the extension. /web-accessible/ are manually injected in particular order

youtube/js&css/extension/init.js

Lines 58 to 69 in d4a8733

    
           extension.inject([ 
        
           	'/js&css/web-accessible/core.js', 
        
           	'/js&css/web-accessible/functions.js', 
        
           	'/js&css/web-accessible/www.youtube.com/appearance.js', 
        
           	'/js&css/web-accessible/www.youtube.com/themes.js', 
        
           	'/js&css/web-accessible/www.youtube.com/player.js', 
        
           	'/js&css/web-accessible/www.youtube.com/playlist.js', 
        
           	'/js&css/web-accessible/www.youtube.com/channel.js', 
        
           	'/js&css/web-accessible/www.youtube.com/shortcuts.js', 
        
           	'/js&css/web-accessible/www.youtube.com/blocklist.js', 
        
           	'/js&css/web-accessible/www.youtube.com/settings.js', 
        
           	'/js&css/web-accessible/init.js'

and afaik there is no way for linter to know that.
Something like a test_extension.js file containing

import "js&css/extension/core.js";
import "js&css/extension/functions.js";
import "js&css/extension/www.youtube.com/night-mode/night-mode.js";
import "js&css/extension/www.youtube.com/general/general.js";
import "js&css/extension/www.youtube.com/appearance/sidebar/sidebar.js";
import "js&css/extension/www.youtube.com/appearance/comments/comments.js";
import "js&css/extension/init.js";

and test_webaccessible.js

import '/js&css/web-accessible/core.js';
import '/js&css/web-accessible/functions.js';
import '/js&css/web-accessible/www.youtube.com/appearance.js';
import '/js&css/web-accessible/www.youtube.com/themes.js';
import '/js&css/web-accessible/www.youtube.com/player.js';
import '/js&css/web-accessible/www.youtube.com/playlist.js';
import '/js&css/web-accessible/www.youtube.com/channel.js';
import '/js&css/web-accessible/www.youtube.com/shortcuts.js';
import '/js&css/web-accessible/www.youtube.com/blocklist.js';
import '/js&css/web-accessible/www.youtube.com/settings.js';
import '/js&css/web-accessible/init.js';

with ESLint running only over those two files?

Problem: There are more no-redeclare errors in appearance.js later in the file, like

youtube/js&css/web-accessible/www.youtube.com/appearance.js

Line 216 in d4a8733

    
           container = document.querySelector("#related ytd-compact-video-renderer.style-scope")?.parentElement;

that it fails to flag, I dont know why yet.

Also doesnt complain about stray spaces [no-multi-spaces], this is super minor :)

Personally I really dont like the Java switch indent rules, much prefer saner php ones as they actually make Switch/case visible from far without reading the code. Imo Switch statement https://www.crockford.com/code.html "This avoids over-indentation." is a huge crock of bullshit :) JSLint is very badly opinionated in this way :( beautifier/js-beautify#15 also agrees with me and indents 'case' properly, can check it out at https://beautifier.io. You edited a ton of files crushing Switch statements according to Crockford fantasy :( :)

There is still allow lint that I did not fix.
Currently still have 75 errors

Everything doesnt have to pass from the get go, we can have few months of linter not passing while we systematically fix errors.
Imo fixing errors should have been next patch ~~, but what is done is done :)~~ Thank you for this Linter addition.

TLDR:
no-undef: "warn" after we figure out how to instrument ESLint properly as to the file order/context
no-multi-spaces: "warn"
no-fallthrough: ["error", { "allowEmptyCase": true }]

EDIT: the flattened Switch statements, Revert all changes +
indent: ["error", "tab", {"SwitchCase": 1}]

EDIT2:
no-undef: "error"
no-implicit-globals: "error"

/* global ImprovedTube:writable */ just before this line https://github.com/dodieboy/YouTube-Extension/blob/fc970f93ff0c5fec793c2ef6923ef54299e6900b/js%26css/web-accessible/core.js#L15

/* global extension:writable */ just before this line https://github.com/dodieboy/YouTube-Extension/blob/fc970f93ff0c5fec793c2ef6923ef54299e6900b/js%26css/extension/core.js#L24

raszpl · 2024-07-04T02:30:56Z

After reading thro all the changes only 39658f7 will require some reverts after applying ["error", "tab", {"SwitchCase": 1}], the rest looks great!

another rule to the pile:
no-trailing-spaces: "warn"

raszpl · 2024-07-04T04:58:36Z

I think this 16531ca broke the Action?

[lint-and-test](https://github.com/code-charity/youtube/actions/runs/9788612176/job/27026963024#step:3:17)
Dependencies lock file is not found in /home/runner/work/youtube/youtube. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock

Set up Node.js
Run actions/setup-node@v4
Found in cache @ /opt/hostedtoolcache/node/20.15.0/x64
Environment details
/opt/hostedtoolcache/node/20.15.0/x64/bin/npm config get cache
/home/runner/.npm
Error: Dependencies lock file is not found in /home/runner/work/youtube/youtube. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock

dodieboy · 2024-07-04T07:55:40Z

I disable the "not defined" rule as there 3k+ error for undefined. Eslint check is done by looking at file extension .js or any others that you declare in the command and check anything is defined in that file order and import file only. I don't think there is anyway to declare the file order without import. The other way to fixed it is by declaring global in the config file as shown below

I will add "not defined" rule back after I added the global into the config.

dodieboy · 2024-07-04T08:05:10Z

I think this 16531ca broke the Action?

[lint-and-test](https://github.com/code-charity/youtube/actions/runs/9788612176/job/27026963024#step:3:17)
Dependencies lock file is not found in /home/runner/work/youtube/youtube. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock

Set up Node.js
Run actions/setup-node@v4
Found in cache @ /opt/hostedtoolcache/node/20.15.0/x64
Environment details
/opt/hostedtoolcache/node/20.15.0/x64/bin/npm config get cache
/home/runner/.npm
Error: Dependencies lock file is not found in /home/runner/work/youtube/youtube. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock

I will look into it later

raszpl · 2024-07-04T10:09:21Z

I disable the "not defined" rule as there 3k+ error for undefined.

as expected :D

Eslint check is done by looking at file extension .js or any others that you declare in the command and check anything is defined in that file order and import file only. I don't think there is anyway to declare the file order without import.

means we indeed need those:

test_extension.js 
test_webaccessible.js
test_menu.js containing concatenated menu .js files, or does esling also take html files like menu/index.html?

created and thrown into /test/ directory, and ESLint run only on 'background.js test_extension.js test_webaccessible.js test_menu.js' and nothing else

The other way to fixed it is by declaring global in the config file as shown below

saw that in your config (Im learning about configuring elsing as I go) and dont like it. Linter will still assume functions from other .js files are not defined in file being parsed at this moment etc.

I will add "not defined" rule back after I added the global into the config.

please dont :) better to massage eslint into interpreting all files in related bundles (menu/extension/webaccessible).

dodieboy · 2024-07-04T13:01:55Z

Added the new rule and refix the indent base on the new rule

dodieboy · 2024-07-04T13:02:48Z

Removed the cache function for now, when everything confirm already than I will add it back

dodieboy added 10 commits July 3, 2024 17:14

Add ESLint

05de0fc

Update js-lint-test.yml

1c66e3f

Update js-lint-test.yml

8bc570d

Update js-lint-test.yml

4b707f0

Remove package-lock.json

30d840d

Add eslint config

8907f0f

Fixed code indent

39658f7

Fix Lint error

fc970f9

Update js-lint-test.yml

42ed36d

Add cache npm workflow

16531ca

dodieboy added 4 commits July 3, 2024 19:26

.

afc4881

Delete .eslintrc.json

67a39a7

Update eslint.config.mjs

4c1345a

Fix AudioWorkletGlobalScope error

cc2bcc1

ImprovedTube merged commit 00d51ad into code-charity:master Jul 3, 2024
1 check passed

ImprovedTube added a commit that referenced this pull request Jul 3, 2024

folders (+readme up) #2345 @PTheocharis; @dodieboy #2438; @crowdin @u…

8cab0ca

…nnamed-orbert (@raszpl #2391 @4yman-el)

dodieboy deleted the ESlint branch July 4, 2024 11:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ESLint check #2438

Add ESLint check #2438

dodieboy commented Jul 3, 2024

dodieboy commented Jul 3, 2024

dodieboy commented Jul 3, 2024

ImprovedTube commented Jul 3, 2024

raszpl commented Jul 3, 2024 •

edited

Loading

raszpl commented Jul 4, 2024

raszpl commented Jul 4, 2024

dodieboy commented Jul 4, 2024 •

edited

Loading

dodieboy commented Jul 4, 2024

raszpl commented Jul 4, 2024 •

edited

Loading

dodieboy commented Jul 4, 2024

dodieboy commented Jul 4, 2024

Add ESLint check #2438

Add ESLint check #2438

Conversation

dodieboy commented Jul 3, 2024

dodieboy commented Jul 3, 2024

dodieboy commented Jul 3, 2024

ImprovedTube commented Jul 3, 2024

raszpl commented Jul 3, 2024 • edited Loading

raszpl commented Jul 4, 2024

raszpl commented Jul 4, 2024

dodieboy commented Jul 4, 2024 • edited Loading

dodieboy commented Jul 4, 2024

raszpl commented Jul 4, 2024 • edited Loading

dodieboy commented Jul 4, 2024

dodieboy commented Jul 4, 2024

raszpl commented Jul 3, 2024 •

edited

Loading

dodieboy commented Jul 4, 2024 •

edited

Loading

raszpl commented Jul 4, 2024 •

edited

Loading