Suppose you have the following line in your .js(x) file and using VIM as your favourite text-editor
if (foundArray = decodeURIComponent(location.hash).toLowerCase().match(/^#\/([0-9a-zäüöß\-_]+)?\/*$/i)) {
The /* potion of that regex will cause VIM to grey out all of the following lines because it assumes all following symbols are commented out.
Does anybody experience same issues? Any suggestions for workarounds, syntax highlighting scripts/plugins?
EDIT
I tried with a minimal vim config (and vim -u minimalconfig). Same results...
Contents of minimalconfig:
set nocompatible
filetype on
filetype plugin indent on
syntax on
syntax enable
set background=dark
Yes, it's a limit of the included JavaScript syntax highlighting. There are alternative JavaScript highlighters which cater for this case:
vim-javascript plugin
JavaScript syntax file
Those each also make other changes to JavaScript highlighting, so you might want to try them both and see which one you prefer.
Or, rewrite your JavaScript to avoid having /* in a regexp literal, for instance by one of:
Use {0,} for zero-or-more, instead of *.
Put the pattern in a string and construct it explicitly with Regexp('^#/…', 'i') — the /* will then be inside a string constant, which doesn't confuse the highlighter.
Related
In Python world, one of the most widely-used static code analysis tools, pylint has a special check, that detects typos in comments and docstrings.
Is there a way to detect typos in JavaScript code using static code analysis?
To make the question more specific, here is an example code I want to cause a warning:
// enter credntials and log in
scope.loginPage.logIn(browser.params.regularUser.login, browser.params.regularUser.password);
Here credntials is misspelled.
There is a eslint plugin built specifically for the task - eslint-plugin-spellcheck:
eslint plugin to spell check words on identifiers, Strings and comments of javascript files.
It is based on the hunspell-spellchecker library that knows how to parse and use Hunspell dictionaries of known words:
Hunspell is a spell checker and morphological analyzer designed for
languages with rich morphology and complex word compounding and
character encoding, originally designed for the Hungarian language.
Here is what it outputs for the example code provided in the question:
$ node_modules/eslint/bin/eslint.js -c eslint.json showCase.spec.js
25:8 warning You have a misspelled word: credntials on Comment spellcheck/spell-checker
The plugin is easily customizable and can check in comments, identifiers and strings.
You can use cspell. It's a very handy command line tool and finds spelling mistakes in JavaScript, TypeScript, Python, PHP, C#, C++, LaTex, Go, HTML and CSS sources.
Output for your example:
cspell ./src/code.js
code.js:1:10 - Unknown word (credntials)
./src/code.js
// enter credntials and log in
scope.loginPage.logIn(browser.params.regularUser.login, browser.params.regularUser.password);
As many of us know, IE7 is not quite friendly with JavaScript code containing trailing commas, which can be a large problem for projects using modern JS framerworks and containing a lot of JS code.
In a pretty good article on the subject, the author mentions:
On the tools front, my preference for combating these devils is the Eclipse JavaScript Development Tools. The JavaScript source editor in JSDT flags trailing commas as errors: http://www.enterprisedojo.com/wp-content/uploads/2010/12/jsdtRules.png
However, using Eclipse Indigo with WTP/JSDT, I'm not seeing trailing commas as errors, and I can't find a proper setting to fix this.
How do I setup Eclipse to flag trailing commas in JavaScript as errors?
It looks like the fix for another bug involving erroneous syntax errors on the comma operator also removed the syntax error on trailing commas in initializers. That's technically correct; the standard says they're allowed and IE7 is just nonconformant. There's a feature request open asking that they be reinstated.
Slightly off topic, but you should also look into using JSLint to check the syntax of the JavaScript code. It will warn you about the trailing comma, but also about many other potential problems. There is a good plugin for Eclipse, http://marketplace.eclipse.org/content/phonegap-android-jslintjshint. The instructions for setting it up: http://www.mobiledevelopersolutions.com/home/announce-1/mds12released-nowwithjslintjshint
Make sure you're in the correct perspective (ie JavaScript as opposed to Java).
Also, I found in Helios that if I added a JS file to the project by right-clicking and adding a new 'File' (which I would then name with a .js extension) didn't make the UI pick up that it should be treated as a JS file--no syntax highlighting, checking, etc. If I added it specifically using the new JavaScript file option, it worked fine.
Xcode3 (and newer ;) doesn't properly format Javascript when I type something like:
doSomething(somewhere, function(err, result) {
It inserts a huge indentation. I tried to change Xcode formatting rules but no luck. One way or another it breaks indentations.
Is there a proper way to use Xcode for javascript development?
What worked fairly well for me is to switch the .js files to use C syntax coloring.
In XCode 4: Editor -> Syntax Coloring -> C
It still highlights numbers and strings and comments, and it indents braces in a sane way.
With some tweaking it is possible to modify the way Xcode indents JavaScript by supplying a custom xclangspec file. Xcode for formatting and syntax uses language definitions in xclangspec files kept in directory SharedFrameworks/DVTFoundation.framework/Versions/A/Resources. Since the formatting for C language works actually better for JavaScript than the Xcode original JavaScript formatting, it is possible to use some parts of definition for C in JS definition. More details you can find at http://www.conhar.com/xcode-and-javascript/.
A quick solution is to choose View -> Syntax Coloring -> Simple Coloring.
If you are okay to edit Javascript without fancy syntax highlight, this is pretty useful.
This way only the numbers and strings are colored, and the indentation stops being so annoying.
Unfortunatelly XCode has very limited formatting options.
But you can use uncrustify which is pretty good. You can find some information here:
Xcode source automatic formatting
Objective-C Tidy
These articles all talk about formatting objective-c code, however uncrustify can format the source code of various languages ;)
Hope this helps.
Uncrustify requires a .cfg file to setup which can be somewhat overwhelming. There's an alternative here
Implementing a large JavaScript application with a lot of scripts, its become necessary to put together a build script. JavaScript labels being ubiquitous, I've decided to use them as annotations for a custom script collator. So far, I'm just employing the use statement, like this:
use: com.example.Class;
However, I want to support an 'optional quotes' syntax, so the following would be parsed correctly as well
use: 'com.example.Class';
I'm currently using this pattern to parse the first form:
/\s*use:\s*(\S+);\s*/g
The '\S+' gloms all characters between the annotation name declaration and the terminating semi colon. What rule can I write to substitute for \S+ that will return an annotation value without quotes, no matter if it was quoted or not to begin with? I can do it in two steps, but I want to do it in one.
Thanks- I know I've put this a little awkwardly
Edit 1.
I've been able to use this, but IMHO its a mess- any more elegant solutions? (By the way, this one will parse ALL label names)
/\s*([a-z]+):\s*(?:['])([a-zA-Z0-9_.]+)(?:['])|([a-zA-Z0-9_.]+);/g
Edit 2.
The logic is the same, but expresses a little more succinctly. However, it poses a problem as it seems to pull in all sorts of javascript code as well.
/\s*([a-z]+):\s*'([\w_\.]+)'|([\w_\.]+);/g
Ok -this seemed to do it. Hope someone can improve on it.
/\s*([a-z]+): *('[\w_\/\.]+'|[\w_\/\.]+);/g
I'm trying to retrofit/fix lots of legacy web code and unfortunately most of it is poorly formatted JavaScript. I'm looking for a batch/scriptable utility that can fix JavaScript that is missing simicolons at the end of executable statements.
I've tried the beautify-cl.js script with Rhino but that does not does not add semicolons. In addition, I have tried JSTidy thinking I could modify it to be scriptable, but it strips all comments. Considering we have something like 2000-3000 files, any solution has to be scriptable.
The following topics were referenced, however none of the solutions were sufficient for various reasons:
Javascript Beautifier - Doesn't handle semicolon
Best source code formatter for Javascript? - Not scriptable
Any ideas/solutions? Thanks in advance.
I've found a winning combination in js-beautify and Google's Closure Linter:
# legacy.js is your poorly formatted JavaScript file, and will be modified in-place
js-beautify -s 2 -n -b end-expand -x -r legacy.js && fixjsstyle legacy.js
Explanation of js-beautify options:
-s 2: indent with two spaces
-n: ensure newline at end of file
-b end-expand: puts { braces at the end of the line, but always gives } braces their own line.
-x: unescape \xNN-escaped characters in strings
-r: make changes in-place
fixjsstyle, which is installed with the Closure Linter suite, makes changes in-place by default.
This pipeline retains comments (!), indents everything (mostly) how I like, adds semicolons where appropriate, and even changes double quotes to single quotes where feasible. Both commands can be given a list of files (e.g., **/*.js), instead of just one.
To install the required packages on Mac OS X:
npm install -g js-beautify
brew install closure-linter
Obviously you'll need to do this if you want to minify the files on deployment. Missing semicolons are probably the #1 reason JS files don't minify properly, so I understand your motivation.
Write a little Python (or whatever) script to run the file through jslint, then use the output from jslint to see which lines need semicolons, then spin through the js source and add them.
I think you can be fairly fearless here, because JavaScript implicitly adds the semicolons anyway.
Update: This set of tools may be what you are looking for. The "format" tab offers missing semicolon insertion.
If you use JavaScript Utlity V2 at http://jsutility.pjoneil.net and use the formatting function, it will automatically replace missing semicolons.
In addition, if you use the compaction function, it will also replace missing semicolons so that the compaction will not cause any errors.
You shouldn't be worried about doing a mass update on a lot of legacy code for the sole purpose of inserting semi colons. That's a classic case of "doing it wrong".
How would you test the results?
How would you ensure no "functionality" (as a side effect of a bug caused by a semi colon being missing) isn't lost?
What do you think adding semi colons to all these files will get you? Beside larger files (I'm not knocking the use of semicolons) and massive amounts of untested code changes?
As gumbo said, use jslint. I would use it on the files as you edit them in your day to day work. As you edit these files, presumably you will be testing changes to the file at that time. That would be the most ideal time to go crazy with semi colon insertion.
Also, if you're concerned about keeping 2000-3000 legacy javascript files alive and supported, you've got far bigger problems than semi colons
If http://jsutility.pjoneil.net is throwing too much errors (and be unable to format it), you may try to compress it with: http://refresh-sf.com/yui/ (which will add missing semicolons) and then go back to pjoneil.net formatter to obtain the pretty code with semicolons.
If you are using Visual Studio Code then Prettier Formatter is the way to go:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
You simply install it and then on the keyboard shortcut to Format Document, the js file is reformatted but also any missing semicolons are automatically filled.
Enjoy!