KleoPetroff/react-webpack-boilerplate

eslintrc question

Closed this issue · 7 comments

hi, it's me again, I have looked at your eslintrc file and can you explain me please what these lines do:

"env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "ecmaFeatures": {
    "jsx": true,
    "es6": true,
    "classes": true
  }

i have searched in the eslint documentation but I can't understand. Thank you very much!

I have make you this question, first because I don't understand what these lines do, and second because for example here:

https://github.com/facebookincubator/create-react-app/blob/master/.eslintrc

they put es6 in the "env" array, you know why?

I think I have auto answered and the second comment, reading the eslint documentation:

Specifying Parser Options

ESLint allows you to specify the JavaScript language options you want to support. By default, ESLint expects ECMAScript 5 syntax. You can override that setting to enable support for other ECMAScript versions as well as JSX by using parser options.

Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn’t recognize. We recommend using eslint-plugin-react if you are using React and want React semantics. By the same token, supporting ES6 syntax is not the same as supporting new ES6 globals (e.g., new types such as Set). For ES6 syntax, use { "parserOptions": { "ecmaVersion": 6 } }; for new ES6 global variables, use { "env": { "es6": true } } (this setting enables ES6 syntax automatically). Parser options are set in your .eslintrc.* file by using the parserOptions property

So I think you have to use this: { "env": { "es6": true } } and this: { "parserOptions": { "ecmaVersion": 6 } }

Last comment of this issue 😄 I have read the eslint documentation and the ecmaFeatures key should go inside the parserOptions key. As you can read here: http://eslint.org/docs/user-guide/configuring#specifying-parser-options. And finally add the es6 env.

So for example:

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    “es6”: true
  }
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "es6": true,
      "jsx": true
      "modules": true
      "destructuring": true
      "classes": true
      "forOf": true
      "blockBindings": true
      "arrowFunctions": true
    }
  }
  "extends": "airbnb"
}

It seems my .eslintrc is using the old syntax. I will have a look at it.

Update: Also, if I set es6 to true in env, I wouldn't need any ecmaFeatures other than jsx. Looking at the ESLint's documentation:

es6 - enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6).

I've refactored the .eslintrc config in 8c0c49d and published a new quick fix release.

Great! :) why you remove also this "classes": true?

All ES6 ecmaFeatures are enabled by the ecmaVersion: 6 flag, so there is no need to explicitly set classes.