Javascript errors not detected


#1

Hi im a newbie in Atom and i want to start developing in javascript, css and html…

I have installed many packages to make some tests but i dont find any solution… why is not telling me the errors i force in this simple script ?
I have atom-ide with ide-typescript, ide-html and ide-css.

To show the errors i have to install linter-jshint ( even if i install linter-eslint it doesnt show the errors).

But when i try to use linter is says that i have to choose between linter and atomic-ide-diagnostic… I choose atomic-ide and then disable linter, linter-ui and only activate linter-jshint… well really a mess…

Its there an “easy way” that Atom would act like mini-eclipse with errors and warnings and autocomplete using javascrpt ( id prefer to show errors both in .js files and inside html tags), html and css ??

Thanks in advance


#2

Also here:

So it doesnt work at all and in order to work more or less well i have to make a mix of lots of packages, possibly incompatible between them as linter and atomic-ide-diagnostic…


#3

You need atom-ide-ui to actually see what all those packages provide.

The errors in the window are referring to a different file. As for why it’s not happening in the HTML file, I don’t know if that’s supported or not. Try linter-eslint; this one has an option to lint HTMl as well.


#4

Linter es-lint doesnt work…it even dont show errors in the .js file… which are big ones…

I have installed atom-ide-ui and all the ide needed…but it doesnt work…i also have

With all the packages it should show me the errors…


#6

Thats the thing it doesn recognize i very easy error inside script…


#7

You’re going to have to be more specific. You seem to be saying it doesn’t work at all. I’m saying that’s because you need to configure it first. This now implies it’s working, but missing some things?


#8

If i activate linter-eslint and disable linter-jshint: None of the errors are displayed ( having atom-ide enabled with ide-typescript, ide-html and ide-css).

If i enable jshint at least shows errors in the js file. Not inside html.

Both cases i have linter and linter ui disabled, so in theory linter-jshint or whatever linter related package shouldn work…

Anybody with experience develping javascript, html and css could help with best packages that are working?


#9

Have you configured linter-eslint? Not just activate, but configure.


#10

Do you have an .eslintrc file in your project root (or eslintConfig in your package.json)? Otherwise, you need to create one (e.g. eslint --init in your project directory)


#11

You should also check the settings in ide-typescript. That’s what I use to find my errors.


#12

How i execute eslint --init ?

Im now centered in knowing why isnt working, so i have disabled all linters. So i have atom-ide with ide-html, ide-typescript and ide-css. So no warnings nor errors shown in diagnostic.


#13

Thats how i have it configured…

Im now centered in knowing why isnt working, so i have disabled all linters. So i have atom-ide with ide-html, ide-typescript and ide-css. So no warnings nor errors shown in diagnostic. Nor inline html nor in .js files… Very disapointed…


#14

You install the eslint CLI globally, then execute it using a Terminal inside your project folder. This might be the reason why linting didn’t work so far, it is described in the installation instructions for the linter-eslint package.

Otherwise, if you already installed eslint in your project, you can run it as follows:

./node_modules/.bin/eslint --init

From the linter-eslint README:

Note that recent versions of ESLint do not use any rules by-default. This means you have to specify a configuration file for your project!

To do this in a straightforward way run this:

eslint --init

Alternatively you can create the .eslintrc file by yourself. It is a good idea to have a look at the ESLint documentation, including the list of rules.


#15

Well as it seems easier to configure i use linter-jshint, but in settings i enable the option to show errors and warnings in html files inside but this actually doesnt work…As you can see the errors shown came from other file, and the errors are easy to spot…

Anybody has the same problem ? Users of es-lint work this feature for you
??


#16

Just about everything I described for eslint applies to jshint as well. It requires a .jshintrc with a rule-set (or jshintConfig in package.json).

Maybe you should get familiar with either linter’s basic concepts and try to get them running in the command-line before. When your setup works, it will also work in Atom.

If you don’t want to define rule-sets, you can use presets or use opionated linters, e.g. Standard JS or xo, instead.


#17

I have installed eslint successfully i think… i choosed the standard javascript configuration. Also installed the plugin for html …restart atom… and still doesnt work inside html…

linter-jshint is easier in my opinion as you only have to disable a setting that enables use of the linter without the .jshintrc config file you mention.

So seems a problem of atom with this version, if anyone could propose a solution…

Thanks again


#18

It would be helpful for others, if you could post the example from your screenshot as text.


#19

Sure i made this easy code

var z=
should give an error ( assignement and semi-colon as use Google Standard)


#20

I did not ask you to post another screenshot of your code, but the code itself. When you do, make sure to mark it as pre-formatted text (see the </> button in above the editor text field.


#21

Sorry… the code is very obvious but here it is. Just in case the errors are not shown after …

pd: my fomat is good :wink:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> El meu primer exemple</title>
  <script src="js/exterfile.js"></script>
  <script>
   var z=
  console.log(z)


  </script>
</head>

<body>
  <!--<h1> El meu primer exemple</h1>-->
  <p id="paragraf2"> Text original del paràgraf</p>
  <button type="button" onclick="this.innerHTML=Date()"> L'hora és </button>

  <p>



  </p>

</body>

</html>