static/compile time check for javascript with jquery? - javascript

I know javascript (or at least a version of it) can be compiled into .NET provided certain conditions are met. How can i do a compile time or static syntax check on javascript i am writing? The catch is, it must support jquery
Cause someone will ask, to compile (with ms .net) is
C:\Windows\Microsoft.NET\Framework\v2.0.50727\jsc thefile.js
writing package thenamespace { class ClassName{ around where necessary. Then you can add this as a normal reference. From experience the references are not always compatible with mono.

I'm not sure if there are any static analyzers which can check the validity of jQuery code in depth, but for the Javascript syntax itself, there are non-web versions of Javascript Lint and JSLint you could use.
If you're using Visual Studio, you could also give JSLint.VS a try for better integration.
UPDATE: Since I wrote this, JSHint and ESLint have taken over as the most popular members of the JSLint family.
Also, TypeScript is gaining popularity. It's a superset of JavaScript with optional static types which compiles to plain JavaScript. (For those who have used MyPy for Python, it's similar. Valid JavaScript is also valid TypeScript, but you can incrementally add type annotations and the compiler will use them to catch bugs.)

Related

In VS Code Can I Validate my Javascript But Ignore a Specific Typescript Error?

I am writing Javascript in Visual Studio Code (not Typescript). However, I added "checkJs": true ("Enable type checking on JavaScript files") to my compilerOptions in jsconfig.json to enable automatic imports.
Now that I have done that, I'm getting Typescript errors (squiggly lines), for instance:
JSX element type 'Foo' does not have any construct or call signatures. ts(2604)
I could remove these by disabling validity checking, but then I'd lose normal Javascript validity checking.
My question is: is it possible to have automatic imports, and Javascript validity checking, but not have Typescript errors in VS Code? For instance, is there some flag I can set in jsconfig.json to disable errors with "ts" at the end?
And if not, how do I fix Typescript errors in a Javascript file ... without having to adopt Typescript?
EDIT: Just to help clarify the kind of solution I'm imagining ... let's say we were talking about ESLint here. Yes I could add a comment at the top of a file to make ESLint ignore that file, but then I lose all linting whatsoever.
I'm more looking for the equivalent of being able to say "ts2604": false or "ts*": false in an .eslintrc file, or something more like that. In other words, I don't want to adopt Typescript, or lose all type awareness either ... I just want VS Code's great Javascript features, without large chunks of my code being underlined by error/warning messages that I can't do anything about.
This could be a red herring, but are all your errors JSX related? TypeScript can handle JSX (in *.tsx ot *.jsx files) if you specify the factory to use for the JSX. The error looks like TS can't find the factory class (so it's got <Foo> and doesn't know what to pass it to). Typically this will be something like (the settings say React, but they're the same for Preact or other JSX libraries):
"compilerOptions": {
"jsx": "react",
"jsxFactory": "probably the same as transform-react-jsx setting in your plugins"
}
There's much more on that in the TS docs.
Generally I find it best practice to fix TS errors before JS anyway, but that isn't always practical, so another option is adding // #ts-ignore on the preceding line or // #ts-nocheck to skip type checking in the file.
// #ts-ignore is really intended for this kind of situation, but it's not a long term fix - you're upgrading, you know it works, you just need TS to skip the failing check for now. But, when you know the code works and TS is missing a definition somewhere it can be the right patch.
VS Code's JavaScript type checking is powered by TypeScript. The errors you are seeing in your JS files are not TypeScript language errors, they are the TypeScript engine saying: "Hey this JavaScript code looks like it is invalid". The TypeScript engine tries to understand JavaScript as well as possible, but JavaScript's dynamic nature can sometimes trip it up and you may need to help it along with some JSDoc annotations .
So ideally you should address these errors. If this is not possible, you can suppress the errors using a // #ts-ignore comment on the line above the error (this is offered as a quick fix for the error)
This TypeScript feature request also tracks the ability to suppress specific error codes.
Lately I have been coding in React with Visual Studio Code and we have a team recommandation for using ESLint extension.
It has many configuration capabilities, and the following one may match with your needs :
eslint.probe = an array for language identifiers for which the ESLint extension should be activated and should try to validate the file. If validation fails for probed languages the extension says silent. Defaults to ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"].

Latest preact and typescript modules passing incorrect type

When trying to react preact + typescript together I am able to pass incorrect types without raising an error.
I am trying to convert our code base from plain JS into preact and add type scripting. Everything installs via NPM fine and I can get the site itself actually running but when running a basic sanity test I notice that inputs reserved solely for numeric entrees accept strings.
I cloned a git with a "working" example of preact + typescript and even in the basic "Hello World" example, I am able to pass a string as an attribute despite there being a string only requirement.
I am probably misunderstanding something basic but this has taken like 3 hours and I am a bit at a dead end.
I have the latest preact, typescript and babel. I could just turn one of these at a time off and see where the breakdown happens but was hoping someone else had an issue similar?
I believe you have a misunderstanding of the purpose of TypeScript.
TypeScript turns the development experience in JavaScript into something closer to a statically typed language like C#.
TypeScript will do nothing to sanitise user input.
If your question is "How can I protect against inputs of the wrong type?", then I believe what you are actually searching for is form validation.

How to tell to VSCode the type of a function parameter (Javascript)

Even tought Javascript is not a strong typed language I would like to tell VSCode about the type of some variables.
Like the snippet code in image below I would like to tell VSCode that task_id is a string variable.
I tried to specify it using a comment before the variable declaration (I've see this trick from this answer, but that apparently doesn't work with VSCode. Is there any VSCode plugin or something else to do that?
Use the jsdoc documentation, I suggest you to install the document this plugin: https://marketplace.visualstudio.com/items?itemName=joelday.docthis, this will allow you to easily document your (javascript) code.
Just isolate the callback, define the params, then document them following the jsdoc standards.
Otherwise, use typescript instead, which will allow you to define types and so on. https://www.typescriptlang.org/
You will need a transpiler, though.

Visual Studio Code Intellisense Method Definitions Javascript

Apparently no one else has wanted this feature, or I'm missing something. Intellisense works as normal, but I'm wondering if I'm missing a setting somewhere, if there is an extension, or if this functionality just isn't offered in VS Code... I would like to have the purpose of the method display when I start typing it as you can see in Adobe Brackets:
As opposed to how it shows in VS Code(which just shows the parameter requirements):
Is this possible?
VSCode is able to use the typescript language server to infer some information about the javascript that you're writing. The types for window/document etc are provided by the typescript team.
Here's where the type information for elements comes from. Compare that with the types for the document object. Notice that the properties here have comments above them, while the element properties do not. Type document.getElementById in VSCode, you'll see extra info like you do in brackets:
So for this information to appear about properties on Elements, someone would need to go through and add the comments. I have no idea if the typescript team is open to this, though.

Renaming variables in JavaScript

I've been stuck with the unpleasant task of "unminifying" a minified JavaScript code file. Using JSBeautifier, the resulting file is about 6000 lines long.
Ordinarily, the variable and parameter names would be permanently lost, but in this case, I have an obsolete version of the original file that the minified JavaScript code file was generated from. This obsolete version of the original file contains most of the code comments and variable names, but absolutely cannot be used in place of the current version.
I would like to know if there is some way of renaming all instances of a particular parameter or variable in JavaScript. Since minification reduces the names to a single character, find-and-replace is impossible.
Is there some tool out there, which I can tell, in this file, the parameter a to function foo should be clientName and have it semantically rename all instances of that parameter to clientName?
Unfortunately, I work for a large organization with an approved list of software and I am stuck with Visual Studio 2010 for the forseeable future (no VS 2012).
Update: #Kos, we don't use Git, but we do use source control. The problem is that a developer who doesn't work for my organization anymore once made changes to the file, minified it, and only checked in the minified version to source control, so his changes to the original have been lost.
I'm a year late for this answer, but I had a similar problem to yours so I built this: https://github.com/zertosh/beautify-with-words. It unminifies code using UglifyJS2 but uses a phonetic word generator to rename variables. You get "long-ish" variable names so it's a breeze to do a find-and-replace. Hope this helps someone else!
You might have another way out.
Check out the last unminified version of the code. Compare to the minified version. Arguably most of it should be the same modulo consistent variable renaming. The differences you'll have to rename and remerge.
Diff won't do this kind of compare; you need tools that compare the programs as code, not text. Our SmartDifferencer tool will do this (by using language-specific full parsers to generate ASTs, and then comparing the ASTs); in effect, it compares the programs in spite of whitepspacing. SmartDifferencer also handles renaming; if two file are identical modulo a single renaming, that's what SmartDifferencer tell you.
I don't know how well this work work out; we haven't tried SmartDifferencer with 6000 lines of "consistently renamed" variables.
I found that a Visual Studio extension we've licensed here called "Telerik JustCode" has functionality to do what I want.

Categories