Code Analysis for CSS, HTML and javascript - javascript

Can anybody point me in the direction of software similar to StyleCop for C# which can analyse CSS, HTML and javascript against sets of predefined rules / custom rules.
For Example,
css - to ensure camel case is used for class names
html - to ensure inline sytles are not used
javascript - not sure yet :P
Ideally, tools which can be run as-part of msbuild would be benefical so they can be included as part of a quality build. Tools runnable by developers would also be desirable.

For javascript check out JSLint:
http://www.jslint.com/

For CSS you can use csslint tool.
http://csslint.net/
It can be execute from command line also.
https://github.com/stubbornella/csslint/wiki/Command-line-interface

If you want customizable rules for a wide variety of languages, you can consider using the DMS Software Reengineering Toolkit.
DMS has compiler-style parsers for a wide variety of langauges (including "dirty" HTML and JavaScript) as well as means to define dialects of such langauges (e.g., CSS for HTML). These parsers build full abstract syntax trees, and then you can code custom scripts for DMS to walk over these trees and check that your style conventions have not been violated.
DMS-based tools are easily incorporated into command scripts.
DMS has already been used for this purpose for both COBOL and C++.

If you are working with Visual Studio then you can try Web Analyzer
It's Lints JavaScript, JSX, TypeScript, CoffeeScript and CSS files using:
CssLint
ESLint (a better version of JSHint, JSLint and JSCS)
CoffeeLint
TSLint
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebAnalyzer&ssr=false#overview
Note: Work better for visual studio 2015 and lower version.

Related

Compiling Dart into minifier friendly javascript: From dartdevc into google-closure-compiler

What compiler options are best to ensure that dartdevc generates minifier friendly javascript code which can be compressed by google closure compiler in ADVANCED mode.
Please show a tested example that specifies options for 1. dartdevc, and 2. java -jar goolge-closure-compiler.jar as a simple bash script, without pub.
Module type should be 'common' if possible, dart_sdk.js should be included, the final result should be es3 or es5 for compatibility with all browsers, and all output goes into one compressed .js file.
The dartdevc compiler is not meant for production usage at this time, and does not support any sort of "advanced" optimizations (such as those done by the Google Closure Compiler). Our only supported optimization path is using dart2js, our optimizing compiler which in many cases is as good as or better the Google Closure Compiler.
See "When should I use dartdevc" on our FAQ page:
Use dartdevc whenever you’re actively working on your code.
Keep using dart2js to build your deployed, production application. With dart2js you get advanced optimizations such as tree shaking to minimize downloaded code size.
I'm excited you'd like to see dartdevc work for more use cases, but we are concentrating on a great developer experience and keeping optimization usage in dart2js at this time.

Code formatting standard across various IDEs for JavaScript

I am working on an Angular project. Developers in my team are using various IDEs like WebStrorm, SublimeText or even Eclipse.
I wish to have some kind of code formatting rules defined for JavaScript defined which can be imported in WebStorm as well as other IDEs, but as I searched I could not found anything standard for this.
How can I do this?
You can use a plugin called editorconfig. It supports all the major editors. You define the rules in a config file that sits in the root of the project repo.
Additionally, you can include jsHint in your workflow/build process to check your code for potentially problems and inconsistent formatting. It's fully configurable.

Dynamics CRM: using Xrm.Page library in Eclipse

I'm using Eclipse as JavaScript IDE.
I would like to setup Xrm.Page library in this environment (for code completion and assistance).
I couldn't find any separate library files and any tools for that, just for Visual Studio.
Is there a solution for using it in Eclipse?
Install a free copy of Visual Studio Express.
Install the VS extension from \sdk\templates\xrm.pagescriptprojecttemplate
Create a VS solution from the XrmPageScript template.
From the new solution copy of the file \Scripts\XrmPageTemplate.js
Now you can bring the XrmPageTemplate.js file into Eclipse and develop with code-completion, etc.
UPDATED DEC 02 2013
After looking at your comments I did some further investigation. Eclipse, unlike Visual Studio, does not support code completion from JavaScript source in a reliable manner. In most cases it requires a custom plugin be created to support auto completion.
Quoting from Add External JS Libraries to Eclipse JSDT-driven Projects:
Resources which are added to the Build Path can theoretically be made
available for Content Assist. That's an important distinction because
ensuring that the file is scanned does not guarantee that it will be
correctly converted into a usable object model. That's because, in
order for some JDT-based functionality to work correctly, class type
information must be inferred in many cases. Eclipse examines the
JavaScript Abstract Syntax Tree (AST) in order to generate "virtual"
class information. And while the unique conventions of the various
JavaScript Toolkits such as Dodo, jQuery, and Prototype can be handled
to some extent, at this point it's still provisional.
Some of the makers of popular JS libraries have taken a proactive role
in exposing their object model to Eclipse via a plugin.
Since the only supported development environment for Dynamics CRM is Visual Studio is not likely to see a custom plugin be released to support Xrm.Page.

What tools other than jslint exist to validate and check Javascript syntax and style?

In our current project we are using JSLint for verifying that Javacript is written correctly, and that it satisfies a few style checks. This is included as an Ant task in our build.xml.
However, I have found that the license of JSLint makes it incompatible with free and open-source software:
// The Software shall be used for Good, not Evil.
I also find JSLint a bit too overzealous in its checks, and makes JQuery-based development difficult. I understand that its intent is not to help one develop scripts, but to check that the script will work in most existing language implementations.
Finally, it's just not smart enough with its scoping: what's wrong with defining a variable in the head of a for loop? (i.e. for (var i = 0; ...) rather than var i; for (i = 0; ...)).
(EDIT: This is actually a problem with Javascript itself. JavaScript does not have block scope, unlike most C-like languages.)
What alternatives exist for verifying the syntax and style for Javascript scripts, intended to be executed within modern web browsers? Any implementation language is fine. I've even thought about using the Rhino library to load and execute the script within Java.
Use JSHint: http://www.jshint.com/
Why not try TypeScript? its much better than any "checker" JS can provide and generates great code. Its also type-safe and a leaner-meaner language. Just an opinion.
JSHint does not have the same license as JSLint. In a sense it does have an MIT license without the 'Do no evil' addition of JSLint. See the github link:
jsHint license on gitHub

programming in javascript with Visual Studio (2010)?

Whether you are forced to code javascript in Visual Studio 2010, or insist on using Visual Studio 2010 instead of another IDE, I'm wondering what anyone has done to improve the javascript development experience in VS2010.
I'm asking since javascript support is lacking in Visual Studio 2010. You don't get the the kind of support you get as if you were developing Silverlight apps in C# and XAML. For example, the intellisense doesn't support javascript 1.8.5 (or even 1.6 functions i.e. JSON.Parse), it's difficult to navigate to function or object definitions (no Go To Definition), no Object Browser, Call Hierarchy, and the list can go on.
What have you done to compensate for the VS2010 features that don't exist for javascript? Also, what would be a good feature request to support javascript development; anything that VS2010 should add as an extension or a future release? Also, are there any suggestions to manage the .js code for large projects?
A few things that have helped me so far are the JScript Editor Extensions, and the Web Standards Update. Also, when working in .js files I rely on bookmarks to get back to key places, since the functions of the file aren't visible (as the would be in C#). My feature request would be to add intellisense support by javascript version, similar to how you can target .NET 2.0, 3.5, or 4.0.
There are a number of VS extensions to assist with javascript:
Visual Studio Javascript extensions feature comparison
JSEnhancements is awesome, and does what you really want: adds regions and code block collapsing.
Also see this extension: http://code.google.com/p/js-addin/
which parses your script into an object tree that can be used for navigation.
I have also used the free version of this editor: http://www.yaldex.com/JSFactory_Pro.htm
I can't recommend it, unfortunately, because it suffers from a couple critical problems (awkward UI, freaky intellisense, and not entirely stable). Which is too bad because it's a very thoughtfully designed piece of software by and large, it just fails where the rubber meets the road.
1) Install Resharper, helps a lot when building javascript heavy web apps.
2) Get FireBug for debugging.
3) Also, the JQuery.vsdocs files are sometimes helpful!
While I use vim and Notepad++ to cut code, I feel your pain, or did until I started using Firebug to debug JavaScript. While it many not be exactly fitting for your situation it's invaluable to me in developing Web based apps:
http://getfirebug.com/

Categories