New user: tried to use a javascript linter


#1

Hi,

I’m coming from cloud9 and would like to use atom. Could someone walk me through how to get a javascript linter working? Someone suggested the readme fro projects but where is that located?


#2

Hi, I seem to have the javascript linter working but it’s not very good. For instance it doesn’t pick up undefined variables. Is there a better linter to use with atom?


#3

Hi @rss81

Welcome to Atom Editor :tada:

I personally use ESLint with Javascript, you can install linter and linter-eslint (and say yes to any dependencies they might ask for) in Settings View -> Packages -> Install Packages or by doing this from CLI

apm install linter linter-eslint

After you have installed and maybe rebooted (reboot only necessary on windows IIRC), You should create a .eslintrc.json file in your project root or at least your javascript project root and write these for stating contents

{
  "extends": "eslint:recommended"
}

This should enable some default rules and show you some basic warnings, there are also presets or configs of ESLint you can use, a popular one is eslint-config-airbnb.

I have however, for myself, abstracted out most of the parts so I don’t have to install the ESLint dep and others in all projects (and then there’s the possibility of getting out of sync) so I use npm@3’s dedupe powers with my package eslint-config-steelbrain, so if you want to use that you can

npm install --save-dev eslint-config-steelbrain

You do not need to install eslint base or any other deps, my preset is batteries included, now you can point to it in your config like

{
  "extends": "steelbrain"
}

and you should have almost everything including react, imports etc with fine configurations for some things working perfectly! If you have any further questions feel free to ask.


#4

Hi Steelbrain,

Thanks so much for commenting. I’m a real newbe at all of this and could use a little more help. I’m running a windows 10 64 bit machine. I’ve installed eslint but not sure where to place the .eslintrc.json file. I would like the lintner to work with every *.js file I open in atom.

secondly, do you use eslint-config-airbnb or eslint-config-steelbrain? or would you use both?

andd lastly, do I add:

{

“extends”: “eslint:recommended”
}

and

{
“extends”: “steelbrain”
}

to the .eslintrc.json file or does it go somewhere else?

Thanks again for your help.


#5

wow, this is really complicated! I’ve got jslint to work by placing the config file in the project root directory. Where do you place it so that it is used globally? Also, the ‘recommended’ extension isn’t really what I want. I notice that when I tried to use console.log() I had to go in and add both a global console variable and a no-console option.

I thought that would give me a good start but then I use const and it says it’s a reserved word. How the heck then do you declare a constant! Just doesn’t seem like this is worth the effort. Cloud9 much easier to use!!


#6

Hello again @rss81

Appreciate you being patient throughout this. It can be overwhelming for newbies but it’s so very rewarding in the long term. If you want the linter to work on every *.js file, you will have to install eslint configs and save them in each project that you work on. I personally don’t do eslint:recommended because it’s a little basic plus steelbrain config is a little more suited to my personal taste.

So yeah create a json file with { "extends": "steelbrain" } (again this is my personal opinion, you should only do this if you have a similar to me code taste) into your .eslintrc.json and make sure linter-eslint and linter are installed and you should start getting issues on your files. Best of luck :thumbsup:


#7

Thanks for the info. I will give it another go. I’m on a Windows 10 box so the only way I know to install is through the welcome screen install tag.

Do I need to do anything special to install
npm install --save-dev eslint-config-steelbrain ?

Not sure where the --save-dev flags are. Or do I just need to add “extends”:“steelbrains”


#8

Hi @rss81

To make things simpler, I’ve setup https://github.com/steelbrain/eslint-minimal-setup for you


#9

@steelbrain, really appreciate your help. So I figured out you use the windows cmd shell to install npm packages. So, I did that with the command: npm install --save-dev eslint-config-steelbrain but it seems to install them somewhere that ATOM doesn’t see. Do I need to install them to C:\Users\OldSalt.atom\packages where the other packages reside?

If I clone the eslint-minimal-setup does it matter where that’s cloned? I’m not really sure how to clone yet?

Based on your screenshot I’m not sure that the minimal approach is what I’m looking for as “var” is not covered.

all i’m looking for is a standard linter that covers the js language. so things like console.log, var , const, and the usual stuff you use in js are covered. This seems really complicated but I guess that’s the price of flexibility


#10

Hi @rss81 are you on the Atom slack by any chance? This conversation would have much less latency there. As this issue is very specific to you and the above instructions should be enough for future visitors. I am @steelbrain on Atom slack as well