ESlint for VSCode without using node or alternative? - javascript

We are teaching fundamental JavaScript to beginners and have recently switched from the Atom editor to VSCode. The problem with this is that VSCode requires us to install node and then npm install eslint, whereas in Atom, we can use the atom package manager to download a linter-eslint package that we can then point directly at a gloabl .eslint file. While it's not a huge deal to install and use node, we are trying to reserve all things node related for a later more advanced class so we can focus on fundamentals.
Is there a way to use ESlint in VSCode without downloading and installing it through node, or is there another alternative extension that we can use that would give us similar functionality?

There is an eslint extension for VS Code that MS supports: https://github.com/Microsoft/vscode-eslint
FWIW, I found that by googling "ESLint vscode". ;)
Given that the MS supported version still wants you to install eslint via npm, this is probably the only way to go.
FWIW, Atom itself is written in Node, so I'm guessing that it's doing the same thing, just hidden behind some UI snazziness.

Related

What is the difference between installing eslint as extension and installing as npm package?

I have been following various blogs and videos on setting up and configuring eslint and prettier for vscode and development. But every article fails to explain why do we need to separately install eslint as an npm package and vs code extension?
what difference it will make if I install either of the ones?
why do we need to separately install eslint as npm package and vscode extension?
Short answer: you don't.
Long answer:
Installing ESLint/Prettier as extension, allows you to format/check your code inside the VSCode.
However, installing them also as dependencies brings extra benefits:
VSCode will use exact same package as installed. So you will not spot the situation when VSCode says OK, but your CI server says: NOT OK
You will get control over the versions, and can update whenever you want
You will be able to use different versions for different projects. This is especially important, when you can't migrate old project, but want to use the latest possibilities for the new one
You will be able to access Prettier/ESlint through the script block of the package.json, and be able to write custom commands with parameters exactly as you need
You will be able to pair them with Husky or NPM hooks to automatically verify/format the code
From my experience, if you can install something locally - install it as package dependency (except CLI like create-react-app or angular-cli that helps you start the app). This will make your life a bit predictable.
These programs can format your code (ESLint and Prettier) and detect specific syntax (ESLint).
When installed as an extension in your IDE (vscode for example), you can get:
squiggly lines in real time;
and format-on-save.
But someone who starts up your project on their own environment might not have these extensions installed (might not even have the same IDE) and thus might not get these.
When installed as npm packages (and included somewhere in the pipeline, either in the npm start, or in your continuous deployment, or...)
you won't get real time squiggly lines,
but you can still get auto-formatting (though not necessarily on save, depending on the configuration),
you can get blocking rules (meaning instead of just seeing errors / warnings, you can actually block the pipelines until the dev fixes said errors / warnings)
you can insure anyone who starts the project, from any IDE, gets the packages included

How to get intellisense for AngularJS in VSCode?

So can anyone help me get the AngularJS intellisense working in Visual Studio Code?
Is it possible to configure this globally or can it only per project? I'm preferably looking for a solution on how to do this globally, as in whenever I open VSCode AngularJS intellisense just works.
I'm currently using AngularJS 1.5.x. I do not know if it possible to configure according to the version of AngularJS being used. Additionally, I'm using VSCode 1.10.2 and VSCode - Insiders on Windows 10.
I've already searched in several places, but the solutions I've found did not work for me. Maybe it's because they are old.
There are many extensions available for intellisense in Angular (2+), but not for AngularJS. However, this article by Mike Barlow explains how to do it and it's fairly recent since you've asked your question (June 2016).
Here's the summary of what you need to do per the article:
Have the following tools installed: node.js 6.2+, npm 3.9+, and VSCode 1.2+.
Install the typings package globally: npm install -g typings. Make sure this is a 1.X version.
Install AngularJS types: typings install dt~angular --save --global
This should create a a folder typings\globals\angular\ with a file called "typings.json"
Create a file within this directory as a sibling to "typings.json" called "jsconfig.json". This file can remain empty unless you need to transpile code (ie, using typescript, coffeescript, etc.)
Restart VSCode

WebStorm 2016.3 + Electron: Unresolved function or method

I am playing around with Electron and WebStorm as part of a project preparation and I am struggling with different problems. Therefore I want to start simple by creating very basic stuff and working my way up.
So I have a very simple project setup in WebStorm and my first Electron app is running. But WebStorm keeps saying that it cannot resolve function names.
Electron and electron-prebuilt are added to the package.json and Node.js coding assistance is enabled. Therefore require('electron') is recognised correctly.
I saw the blog entry by JetBrains on how to start with Electron in WebStorm and found also another similar answer here on StackOverflow.
JetBrains' blog entry
StackOverflow answer
It is said, that one should add github-electron to the JavaScript library from the communitie-stubs repositories. But these seems outdated, as there is no github-electron anymore and all other electron entries are ambiguous.
So my question is: How to setup WebStorm for plain JS ES6 correctly, beginning by eliminating the "unresolved" messages?
So, after digging into the topic more and more and climbing the steep learning curve, I finally found the answer by myself.
Here we go:
Go to WebStorm's Preferences / Languages & Frameworks / TypeScript
Make sure Use TypeScript Service is enabled
Open up WebStorm's Terminal panel (as it will automatically point to your project's working directory) and install the type definitions for TypeScript via NPM:
npm install #types/electron
You don't need to use the --save / --save-dev tags, as the types are needed solely for WebStorm's code assistance and have no impact on your project.
You'll get a new entry inside your node_modules folder containing the type definitions.
And that's it. WebStorm does not show any unresolved function or method messages for this particular module anymore.
This works for theoretically every other module, as long as there are type definitions available. But chances are good, as there are a lot of them. Way more than what WebStorm's JavaScript library download functionality offers.
Have a nice day, everyone!
Martin
install the electron library. Since the github-electron has renamed to electron.

Developing TypeScript without an installed IDE or editor

I work in a place that restricts me from downloading and installing any applications, regardless of job roles. I have several web apps that I want to migrate to Angular 2 with TypeScript. I'm a C# developer in my own time and TypeScript is very appealing as it's statically typed and just compiles down to JavaScript.
How can I develop with TypeScript without having access to an installed IDE or code editor? Are there any online environments that allow the use of TypeScript definition files that provide code help/intellisense?
How can I develop with TypeScript without having access to an installed IDE or code editor
I am hoping you can do npm install typescript. If you can just run npm install typescript -g and then run typescript as tsc -w -p tsconfig.json in your code directory. This will allow you to run the compiler in the background leaving you free to use even notepad if you have to.
Alternatively you can just download the zip file from : https://github.com/Microsoft/TypeScript/releases and if you have node you can run node ./bin/tsc etc from the extracted directory.
Use Codenvy:
It needs some manual tweaks but somebody figured them out already: https://groups.google.com/a/codenvy.com/forum/#!topic/codenvy/R4myXA9MygA
You can try the playground: http://www.typescriptlang.org/Playground
Although it doesn't allow references to other files.

Node.js / npm - anyway to tell if a package is pure JS or not?

I've noticed that in trying to get seemingly simple node packages to install with npm (e.g. nerve, a "micro-framework") I often run into some form of dependency pain. After some digging, I tracked down the problem with nerve to the bcrypt module, which is apparently written in C/C++ and has to be compiled after the package manager downloads it.
Unfortunately, it seems like if you want this to work on Windows, the answer is (from one of the bcrypt issues threads) "install a Linux VM". So earlier today I did just that, and started running into other dependencies (you need certain unnamed apt packages installed before you can even think about building, despite GCC being installed), then eventually after seeing yet another C compiler error (about some package or other not being able to find "Arrays.c" I think), I actually gave up, and switched from nerve to express instead. Ironically, the larger and more complicated express installs with npm on Linux and Windows without a single issue.
So, my question is: is there any filter / dependency tracking available that lets you see if a package has additional dependencies besides node core? Because to me the allure of node is "everything in Javascript", and this kind of stuff dispels the illusion quite unpleasantly. In fact, despite having done more than my time working with C/C++, whenever I see a requirement to "make" something these days I generally run in the other direction screaming. :)
The first solution doesn't tell you if a dependency makes the package impure or not. Much better to search for gyp generated output:
find node_modules/ | grep binding.gyp || echo pure
Look out for the "scripts" field in the package.json.
If it contains something like
"scripts": {
"install": "make build",
}
and a Makefile in the root directory, there's a good possibility that the package has some native module which would have to be compiled and built. Many packages include a Makefile only to compile tests.
This check on the package documents does not exclude the possibility that some dependency will have to be compiled and built. That would mean repeating this process for each dependency in the package.json, their dependencies and so on.
That said many modules have been updated to install, without build on Windows, express for one. However that cannot be assured of all packages.
Using a Linux VM seems to be the best alternative. Developing Node.js applications on Window gives you step by step instructions on installing a VM, Node.js and Express.
Node is not "everything javascript" , since one way to extend node core is to write c/c++ plugins.
So Node is more a javascript wrapper around c/c++ modules using V8.
How could you write efficient database drivers in pure javascript for instance ? it would be possible but slow.
as for the filters , it is up to the author to document his package. there is no automatic filter.

Categories