Multiple TS/ESLint errors while coding along the tutorials

[AkbarBakhshi]

I have downloaded and unzipped the ArcGIS Experience Builder v1.14  (I am on windows 10 with node v20.10.0) from Downloads | ArcGIS Experience Builder | ArcGIS Developers.

I am following this tutorial on the developers guide for ArcGIS Experience Builder. It seems like the ESLint or TS configuration that come with the download package may not be set correctly. As soon as I add the new widget mentioned in the tutorial and create widget.tsx and copy the corresponding code, I keep getting multiple TS/ESLint errors such as "strings must use single quotes", etc.. I'd assume the .eslintrc.js and tsconfig.json that come with the download package would be consistent/compatible with the tutorials. Am I missing something? I am seeing errors even in the .eslintrc.js file and jimu-core folder.

[AkbarBakhshi]

I am also seeing that the imports mentioned in the tutorial are wrong. The tutorial has the following import:

import { React, AllWidgetProps } from "jimu-core";

However, for me below code is what works (I need to add "type"):

import { React, type AllWidgetProps } from 'jimu-core'

[TimWestern]

Yeah, I'm seeing that occasionally too and its fine with type, until you start using it as more than just an object definition I think.   Because when it switches, then you have to remove type. (which seems so odd to enforce that).  Note, some of these things are warnings rather than errors.  Whether warnings are cleaned up is something the dev community at large can never seem to agree upon, but I do think, they should look for these things, because a lot of people are no longer just developing in a text editor when they build these integrations around the ArcGIS APIs.

[TimWestern]

You are absolutely correct.  The rules for TS Lint and ES Lint may have changed, but a lot of library code related to jimu for example have not been updated in the new releases.  I find I often have to add those library folders to ignore paths to keep it from checking, but both webstorm and visual studio (I don't know about VSCode) seem to sometimes still report them regardless.

In webstorm, I have found it useful to look for these red lines, click on the line, then click the red LIghtbulb and fix eslint for the file.   I do find I am at times updating my eslint rules though to make some of these go away.  I agree it makes for a rough start for new dev projects as you may have to spend minutes or hours fixing all these issues before you have a clean client and server to build with.


ESRI should give major thought to doing cleanups of either the rules they use, or the libraries so that it removes the cognitive load on users, many of whom may be trained GIS users, but not experienced JS Software Engineers.

[AkbarBakhshi]

VS Code also has the same capability of suggesting fixes for errors, but only some of those actually work. 

It is very disappointing and frustrating to see these errors happening in their own tutorials. I would assume, ESRI, being as big of a company as they are, they would at least make sure the tutorials and codes in the docs would work fine...🤔

[Junshan_Liu]

Some code snippets are out of date, we'll update them in future release, the lint rules in the release package are recommended to follow.

[TimWestern]

I actually like some of the rule changes for fresh widget development, the reality is when you open up a project in a new version you may get a lot of warnings, it's always good to review those before starting development.

The big one that likely will annoy people is it doesn't seem to mandate but rather reject semicolon usage a lot at end of lines. Which matches where the nodeJs industry has moved in recent years.

[AkbarBakhshi]

@TimWestern I think most of these lint rules should be user specific. semicolons at the end of the line, double quotes or single quotes..

@Junshan_Liu I mean it would be nice to update the code snippets with each release. Why aren't they updated yet (they don't work) and will be updated with a future release? I don't get that   🤔