How to use jshint for VS 2010 - javascript

I just download script for JSHint from site and refer in my HTML as external javascript like other JQuery library. It doesnt seems to Get working .. I could not able to find the right way to use jsHint . I search for the Docs .The Configuration part states that
"you can either specify the configuration file manually via the --config flag, use a special file .jshintrc or put your config into your projects package.json file under the jshintConfig property."
Where is config flag located .I Couldnot able to understand it properly ...Please Suggest

JSHint is a static analysis tool. To use it from Visual Studio, you would call the executable as part of the build process so that it can check your code and report any errors it finds.
You don't refer to it from HTML at all. It's not a JavaScript library like JQuery is, and it won't run from your users' browsers: it's a tool for finding problems with your JavaScript, and it will run as part of your project build.
In the first instance you can just run JSHint from a console to get it to check your code. In other words, just run jshint myfile.js (where myfile.js is the name of the JavaScript file you want to check) as described in the docs.

Related

How to run a node script by CLI custom command?

Currently, I'm working on a personal project and I'd like to create an alias for some commands that I have to run... Similar to:
jest ...
node ...
tsc ...
I think that for my project would be so helpful and cool to have something like
foo ...
I'm working with Node, Typescript, and JS.
I took a look on the internet and read saw some people teaching how to create some alias I tried and it works :)
I already have the alias working on my local machine cause I added the alias on the .bashrc file.
alias foo = command...
However, I also tried to put it on my package.json scripts section, like:
"scripts": {
"runFoo": "foo",
But when I run npm run runFoo it says that "foo" is not recognized... Are any way to do that? How the tools like jest do that?
I would be thankful for any direction about what to study for that.
Extra:
There is any way to run all the .js from a folder by using any node command without knowing the name of the files?
Like:
node *.js
It can help while I don't figure out how to do the alias...
Edit:
What I want to do is:
https://developer.okta.com/blog/2019/06/18/command-line-app-with-nodejs
The answer helped me to find this post, and following it, it worked here.
it says that "foo" is not recognized
That is because shell aliases do not work in npm scripts (they are only valid when directly called in said shell), see e.g. How can I pipe to a bash alias from an npm script?
Aliases are meant to reduce typing, and are not automatically shared across environments, on the contrary of npm scripts which are committed with package.json. Hence if you try running that script in another environment, the latter may not know that alias (or worse, use it for something else!).
How the tools like jest do that?
They do not... Their command is not an alias, but an actual executable binary or script.
When installed as dependencies, you will find links to their executable in node_modules/.bin/ folder, see What is the purpose of .bin folder in node_modules?
You can easily create such executable scripts, even written in JavaScript to be executed by a Node.js engine, see e.g. Appropriate hashbang for Node.js scripts

How can I know that a JS or HTML or CSS file is well formatted via bash?

I know I can open a code editor and see the file and realize if it's formatted or not. But I want to create a script that does that. I want to search through a directory and find all of the files that are not formatted.
I know the formatting of each file differs. For example, to format Python you need a different set of rules and to format a JS or a C# file different rules apply.
However, since code editors do it behind the scene using some extensions or code-parser engines, I think there might be tools for shell too.
Can I do it? Can I install some dependencies and then search through code files in a directory and report the list of files that are not code-formatted?
You can add Prettier to your project, then run command to check unformatted files:
npx prettier --check .
To format your code, run:
npx prettier --write .

Intellisense and JsHint support for Ext Js in VisualStudio

I want to work with Senach Ext Js in a Website project in VisualStudio 2013.
The problem: VisualStudio respectively WebEssentials throws warnings like:
JsHint (W117): 'Ext' is not defined.
Here is the situation as it looks today:
The project is exactly what Sencha Cmd produced for me.
At the moment I want only a Website project and no server sided code involved (therefore I did not make a MVC or Web API project).
I know that there is a way to define some global symbols in each JavaScript file for JsHint, but I want to get the intellisense working too. So I am looking for the correct configuration for both use cases: WebEssential JSHint Warnings and Intellisense.
Maybe both problems need to be addressed separately. That would be fine too.
Is my directory structure correct (just took what Sencha Cmd built for me)?
How to address the problem to make intellisense working?
(How to avoid Webessential JavaScript warnings (it seems most or all of them are JsHint)?)
Update: Related question:
Enabling JSHint Support for Ext.js in Intellij Idea
Update:
"An _references.js file in any other location than
“~/Scripts/_references.js” will be just like any other JS file and
won’t be used for global intellisense. Even putting the file in the
root of your web project will not work as well."
Source: http://gurustop.net/blog/2012/03/03/javascript-js-intellisense-auto_complete-in-visual-studio-11-beta-the-web-_references-js-file/
still not working when I have the _references in a new "Script" folder:
So it seems like the final answer was to add a file called ~/scripts/_reference.js and then include a line to reference Ext JS in there. This enables Visual Studio to index the Ext JS source for Intellisense. For example:
/// <reference path="../ext/ext-all-debug-full.js" />
More on the Intellisense and _reference.js:
http://msdn.microsoft.com/en-us/library/bb385682.aspx
Note that due to the size of the Ext JS codebase, Visual Studio might take a few minutes to complete the indexing process and for Intellisense to start working smoothly.

NPM modules in Grunt based projects

Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder.
E.g.
var qr = require('qr-image');
I am trying to do something similar in grunt but i am unsuccessful with that.
I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project.
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
Now whenever I use require I get the following error on console and my code breaks.
ReferenceError: require is not defined
Please suggest as how to use the npm module in Grunt based project, Thanks.
The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.
In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:
<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>
Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.
Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).
A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.

how can I enable a source map for coffeescript?

I recently discovered the existence of source maps in chrome via source debugging in the haxe language. It allows to debug generated javascript inside the chrome browser while seeing the bug reason in the original source code.
Has anyone written a source map generator for coffeescript / Is coffeescript source mappable ?
It would help debug the javascript generated by coffeescript.
Coffeescript 1.6 has native support for source maps.
Use the "--map" or "-m" option to enable it. Or if you use the npm compiler, you will have to add the sourceMap: true option.
npm install -g coffee-script
Should install coffee-script as a global module. Check version > 1.6 by typing
coffee -v
If you need help you can use. Use it to see meaning of options used below
coffee -h
For regular compilation use
coffee -mo script/ -cw src/
This should auto-generate maps files. I leave this running in terminal as I code, it compiles every time I save.
KNOWN BUG:
The current coffee-script compiler does not seem to handle different /src and /script directories. In map file you find that sources = {filename} rather than {relative file path}.
SOLUTION:
Keep your .coffee files in same directory as .js
Modify source directive manually in .map file. This will get overwritten again on next save
This has long been an active issue on the CoffeeScript project (indeed, it predates the source map standard). However, no (complete) CoffeeScript source map generator exists yet. For discussion, see https://github.com/jashkenas/coffee-script/issues/558
Source map support is also one of the goals of the "CoffeeScript Redux" compiler that was recently funded on Kickstarter (see http://www.kickstarter.com/projects/michaelficarra/make-a-better-coffeescript-compiler). That project has just begun; you can watch it at https://github.com/michaelficarra/CoffeeScriptRedux
Ps, if you're on vim, use:
au BufWritePost *.coffee silent make -m
which compiles with source map on file save. I've found it extremely handy when I want some random buffer to start compiling coffee for me.

Categories

Resources