Using decorator syntax doesn't pass eslint

alexyoubaifu commented 4 years ago

Intended outcome: I trired to start a new react native boilerplate project with mobX. After followed the steps to use decorators from document, expected to not see any error from eslint

Actual outcome: I got Parsing error: Unexpected character '@' from eslint

How to reproduce the issue:

Start a new react native project with bable 7

Versions

The configs in short:

package.json

"dependencies": {
    "mobx": "^5.15.4",
    "mobx-react": "^6.1.8",
    ...
  },
"devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/plugin-transform-flow-strip-types": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^24.9.0",
    "babel-preset-mobx": "^2.0.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^4.0.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-native": "^3.6.0",
    "eslint-plugin-standard": "^4.0.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "prettier": "^1.16.4",
    "react-native-rename": "^2.4.1",
    "react-test-renderer": "16.9.0"
  },

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-transform-runtime', {}],
  ],
};

.eslintrc

...
"parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "legacyDecorators": true
    },
    "sourceType": "module",
    "useJSXTextNode": false
  },
...

The example screen to use decorators

...
@inject('counter')
@observer
class ExampleScreen extends React.Component {
...
}

The errors

kaicataldo commented 4 years ago

babel-eslint@<11 doesn't read your Babel config. Please use the latest prerelease version of babel-eslint@11.

alexyoubaifu commented 4 years ago

babel-eslint@<11 doesn't read your Babel config. Please use the latest prerelease version of babel-eslint@11.

Hello @kaicataldo ,

I tried to use babel-eslint@11, it doesn't work.

kaicataldo commented 4 years ago

If you could make a repo with a minimal reproduction case, that would be really helpful.

alexyoubaifu commented 4 years ago

If you could make a repo with a minimal reproduction case, that would be really helpful.

Yes, here's the repo

kaicataldo commented 4 years ago

parser should be a sibling of parserOptions.

alexyoubaifu commented 4 years ago

parser should be a sibling of parserOptions.

@kaicataldo Thank you! It works now, sorry for my misplacing the parser

kaicataldo commented 4 years ago

Glad you got it working :)

babel / babel-eslint

Using decorator syntax doesn't pass eslint #822