typescript-eslint / typescript-eslint

:sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript
https://typescript-eslint.io
Other
15.02k stars 2.7k forks source link

Optional chaining syntax is still not supported #1144

Closed Nizarius closed 4 years ago

Nizarius commented 4 years ago

Hi, guys! Maybe I'm doing something wrong, but it seems like typescript-eslint/parcer can't still parce optional chaining syntax (although as I saw in other issues it should do).

tsc command on this syntax is working great and other packages (like jest, docz etc) support it, but not eslint.

What code were you trying to parse?

let test: any = null;

const test1 = test?.pest;

What did you expect to happen? Supporting optional chaining as part of 3.7 typescript.

What actually happened?

SyntaxError: Expression expected. (12:20)
  10 | let test: any = null;
  11 |
> 12 | const test1 = test?.pest;
     |                    ^

Versions

package version
@typescript-eslint/parser ^2.5.1-alpha.5
TypeScript ^3.7.1-rc
ESLint 5.7.0
npm 6.9.0
777PolarFox777 commented 4 years ago

Also in code like a?.b?.c eslint think that a, b and c is variables and gives an error "b is not defined" image

bradzacher commented 4 years ago

@777PolarFox777 see #1090, #1104, #1116, #1138

The base rules that rely upon scope analysis do not work correctly with optional chaining. This is a known bug.

bradzacher commented 4 years ago

We have full support for new 3.7 syntax within the parser.

Do you have some config? It's really hard to help you out without any information about your environment.

Help me to help you.

Nizarius commented 4 years ago

@bradzacher, thank you for the quick answer! I hope, it should help.

.eslintrc

{
  "extends": [
    "airbnb",
    "plugin:cypress/recommended",
    "prettier",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "flowtype",
    "react",
    "prettier",
    "@typescript-eslint"
  ],
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "comma-dangle": "error",
    "no-underscore-dangle": "off",
    "import/extensions": [
      "error",
      {
        "scss": "always"
      }
    ],
    "react/require-default-props": "off",
    "react/sort-comp": "off",
    "react/jsx-filename-extension": 0,
    "import/prefer-default-export": "off",
    "import/no-cycle": 0,
    "function-paren-newline": "off",
    "max-len": [
      "error",
      {
        "code": 100,
        "tabWidth": 2,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": [
          "Link"
        ],
        "specialLink": [
          "to",
          "hrefLeft",
          "hrefRight"
        ],
        "aspects": [
          "invalidHref"
        ]
      }
    ],
    "jsx-a11y/label-has-for": "off",
    "prettier/prettier": "error",
    "flowtype/define-flow-type": 1,
    "flowtype/use-flow-type": 1,
    "react/jsx-one-expression-per-line": 0,
    "react/destructuring-assignment": 0,
    "react/default-props-match-prop-types": 0,
    "react/jsx-wrap-multilines": 0,
    "jsx-a11y/label-has-associated-control": [ 2, {
      "controlComponents": ["Input"],
      "depth": 3
    }],
    "jsx-a11y/accessible-emoji": 0,
    "jsx-a11y/click-events-have-key-events": 0,
    "import/no-unresolved": [2, {
      "ignore": ["@storybook"]
    }]
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "legacyDecorators": true
    }
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "alias": {
              "$components": "js/components",
              "$containers": "js/containers",
              "$redux": "js/redux",
              "$constants": "js/constants",
              "$fixtures": "js/fixtures",
              "$libs": "js/libs",
              "$utils": "js/utils",
              "$config": "js/config",
              "$img": "img",
              "$styles": "scss",
              "$uikit": "ui-kit",
              "$features": "features",
              "$api": "js/api",
              "$helpers": "helpers",
              "$domains": "domains",
              "$module": "module",
              "$src": "src",
              "$helper": "helper",
              "$route": "route"
            },
            "extensions": [
              ".js",
              ".jsx",
              ".ts",
              ".tsx",
              ".scss"
            ],
            "modules": [
              "src",
              "node_modules"
            ]
          }
        }
      }
    }
  },
  "overrides": [
    {
      "files": [
        "**/*test.@(js|jsx)"
      ],
      "env": {
        "jest": true,
        "node": true
      },
      "settings": {
        "import/resolver": {
          "webpack": {
            "config": {
              "resolve": {
                "alias": {
                  "$api": "src/js/api",
                  "$components": "src/js/components",
                  "$config": "src/js/config",
                  "$constants": "src/js/constants",
                  "$containers": "src/js/containers",
                  "$domains": "src/domains",
                  "$fixtures": "src/js/fixtures",
                  "$img": "src/img",
                  "$libs": "src/js/libs",
                  "$module": "src/module",
                  "$redux": "src/js/redux",
                  "$src": "src",
                  "$styles": "src/scss",
                  "$utils": "src/js/utils",
                  "components": "src/js/components",
                  "config": "src/js/config",
                  "constants": "src/js/constants",
                  "containers": "src/js/containers",
                  "fixtures": "src/js/fixtures",
                  "img": "src/img",
                  "libs": "src/js/libs",
                  "redux": "src/js/redux",
                  "styles": "src/scss",
                  "utils": "src/js/utils"
                },
                "extensions": [
                  ".js",
                  ".jsx",
                  ".scss"
                ],
                "modules": [
                  "./",
                  "node_modules"
                ]
              }
            }
          }
        }
      }
    },
    {
      "files": [
        "stories/**/*.@(js|jsx)"
      ],
      "rules": {
        "import/no-extraneous-dependencies": "off",
        "react/forbid-prop-types": "off"
      }
    },
    {
      "files": [
        "postcss.config.js",
        "webpack.config.js"
      ],
      "env": {
        "node": true
      },
      "rules": {
        "import/no-extraneous-dependencies": [
          "error",
          {
            "devDependencies": true
          }
        ]
      }
    }
  ]
}

package.json

{
  "name": "osome",
  "version": "2.148.0",
  "description": "Osome Agent Frontend",
  "main": "src/js/app.jsx",
  "author": "Osome Pte. Ltd.",
  "license": "Proprietary",
  "private": true,
  "scripts": {
    "start": "ENV=development webpack-dev-server --mode development --progress --colors",
    "test": "ENV=test jest",
    "test:watch": "jest --watch",
    "build": "ENV=production webpack --mode production  --progress --colors",
    "build:dev": "ENV=development webpack --mode production  --progress --colors",
    "build:stage": "ENV=stage webpack --mode production  --progress --colors",
    "build:prod": "ENV=production webpack --mode production  --progress --colors",
    "docz": "docz dev",
    "docz:build": "docz build",
    "github-dashboard": "git-stats-importer -e $(git config --local user.email) && git-stats",
    "dmc": "git-stats -a",
    "cypress:open": "cypress open",
    "cypress:ci": "cypress run --record --key $CYPRESS_KEY",
    "codecept": "codeceptjs run --steps",
    "precommit": "lint-staged",
    "eslint": "eslint --max-warnings=0 --cache --ext .js,.jsx,.ts,.tsx",
    "lint": "lint-staged",
    "lint:all": "eslint --max-warnings=0 --cache --ext .js,.jsx .",
    "lint:all:fix": "eslint --fix --ext .js,.jsx .",
    "generate-pipelines": "pneumatic-pipelines ./auto_pipelines/index.js",
    "tsc": "tsc --noEmit"
  },
  "browserslist": [
    "last 1 Chrome major versions",
    "last 1 Firefox major versions",
    "last 1 Safari major versions"
  ],
  "lint-staged": {
    "*.{js, jsx, ts, tsx}": [
      "./node_modules/.bin/eslint"
    ]
  },
  "dependencies": {
    "antd": "^3.13.6",
    "api-wrapper": "git+ssh://git@bitbucket.org/ooosome/api-wrapper.git#v1.31.0",
    "bootstrap": "3.3.7",
    "brace": "0.10.0",
    "bugsnag-js": "4.7.0",
    "bugsnag-react": "1.1.1",
    "bytes": "3.0.0",
    "classnames": "2.2.5",
    "crypto-js": "3.1.9-1",
    "empty": "^0.10.1",
    "fbemitter": "2.1.1",
    "final-form": "^4.11.1",
    "final-form-arrays": "^1.1.2",
    "font-awesome": "4.7.0",
    "history": "4.7.2",
    "i18n-iso-countries": "^3.7.3",
    "immutability-helper": "2.7.0",
    "lint-staged": "^9.4.1",
    "lodash": "4.17.10",
    "mime": "2.2.2",
    "moment": "2.22.2",
    "nanoid": "1.0.7",
    "normalize-wheel": "1.0.1",
    "notifyjs": "3.0.0",
    "osome-ui-kit": "git+ssh://git@bitbucket.org/ooosome/osome-ui.git#v0.18.0",
    "pneumatic-pipelines": "^1.4.1",
    "polished": "1.9.2",
    "prop-types": "15.6.2",
    "qs": "^6.5.2",
    "ramda": "0.25.0",
    "raw-loader": "^3.1.0",
    "react": "16.9.0",
    "react-ace": "5.10.0",
    "react-audioplayer": "0.3.1",
    "react-autosuggest": "9.4.3",
    "react-bootstrap": "0.31.5",
    "react-content-loader": "^4.2.2",
    "react-dom": "16.9.0",
    "react-dropzone": "4.2.9",
    "react-final-form": "^4.0.2",
    "react-final-form-arrays": "^2.0.1",
    "react-final-form-listeners": "^1.0.1",
    "react-fontawesome": "1.6.1",
    "react-formio": "^3.0.3",
    "react-html5video": "2.5.1",
    "react-jsonschema-form": "1.0.3",
    "react-linkify": "0.2.2",
    "react-maskedinput": "4.0.1",
    "react-onclickoutside": "6.7.1",
    "react-overlays": "0.8.3",
    "react-portal": "^4.1.5",
    "react-redux": "5.0.7",
    "react-redux-promise-listener": "^1.0.0",
    "react-router": "4.3.0",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.9",
    "react-spinner": "0.2.7",
    "react-svg-inline": "^2.1.1",
    "react-tap-event-plugin": "3.0.3",
    "react-telephone-input": "4.5.6",
    "react-textarea-autosize": "^7.0.4",
    "react-tiny-virtual-list": "2.1.4",
    "react-toastify": "^5.3.2",
    "react-transition-group": "1.2.1",
    "react-virtualized": "^9.21.0",
    "recompose": "^0.27.1",
    "redux": "3.7.2",
    "redux-act": "^1.7.4",
    "redux-persist": "4.10.2",
    "redux-promise-listener": "^1.1.0",
    "redux-reset": "^0.3.0",
    "redux-saga": "1.0.2",
    "reduxsauce": "0.7.0",
    "reselect": "^3.0.1",
    "socket.io-client": "2.1.1",
    "styled-components": "3.4.6",
    "throttle-debounce": "2.0.1",
    "url-regex": "4.1.1",
    "uuid": "3.2.1",
    "validator": "9.4.1",
    "weak-key": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@types/jest": "^24.0.20",
    "@types/node": "^12.11.7",
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.3",
    "@typescript-eslint/eslint-plugin": "^2.5.1-alpha.5",
    "@typescript-eslint/parser": "^2.5.1-alpha.5",
    "autoprefixer": "^9.6.1",
    "babel-core": "^7.0.0-0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-flow-react-proptypes": "24.0.1",
    "babel-plugin-styled-components": "1.7.1",
    "babel-plugin-transform-react-remove-prop-types": "0.4.13",
    "codeceptjs": "^2.3.0",
    "codeceptjs-assert": "^0.0.3",
    "css-loader": "0.28.11",
    "cssnano": "4.0.0-rc.2",
    "cypress": "3.4.1",
    "docz": "0.11.2",
    "docz-core": "0.11.2",
    "docz-theme-default": "0.11.2",
    "dotenv": "^6.0.0",
    "dotenv-webpack": "^1.5.7",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "eslint": "5.7.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-prettier": "3.1.0",
    "eslint-import-resolver-webpack": "0.10.1",
    "eslint-plugin-cypress": "^2.6.0",
    "eslint-plugin-flowtype": "3.0.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-prettier": "3.0.0",
    "eslint-plugin-react": "7.14.2",
    "file-loader": "1.1.11",
    "flow-bin": "0.77",
    "git-stats": "^2.10.11",
    "git-stats-importer": "^2.4.10",
    "html-webpack-plugin": "3.2.0",
    "husky": "^2.4.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "22.4.4",
    "mini-css-extract-plugin": "0.4.0",
    "moment-locales-webpack-plugin": "1.0.7",
    "node-fetch": "^2.6.0",
    "node-sass": "4.9.0",
    "optimize-css-assets-webpack-plugin": "4.0.2",
    "postcss-loader": "2.1.5",
    "prettier": "1.13.5",
    "puppeteer": "^1.19.0",
    "react-addons-test-utils": "16.0.0-alpha.3",
    "react-test-renderer": "16.0.0",
    "sass-loader": "7.0.2",
    "script-ext-html-webpack-plugin": "2.0.1",
    "sinon": "2.4.1",
    "start-server-and-test": "^1.10.0",
    "style-loader": "0.21.0",
    "svg-sprite-loader": "3.8.0",
    "ts-jest": "^24.1.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.1-rc",
    "uglifyjs-webpack-plugin": "1.2.5",
    "webpack": "4.10.2",
    "webpack-bugsnag-plugins": "1.1.1",
    "webpack-bundle-analyzer": "2.13.1",
    "webpack-cli": "3.0.1",
    "webpack-dev-server": "3.1.4",
    "webpack-merge": "4.1.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "sh ./bin/check_git_config_email && lint-staged && yarn generate-pipelines && git add bitbucket-pipelines.yml",
      "prepare-commit-msg": "sh ./scripts/append_issue_key_to_message $HUSKY_GIT_PARAMS",
      "post-checkout": "sh ./scripts/start_jira_issue_on_demand $HUSKY_GIT_PARAMS"
    }
  }
}
bradzacher commented 4 years ago
"prettier/prettier": "error",

As mentioned, prettier does not yet support 3.7, which is what is causing the errors.

https://github.com/prettier/prettier/pull/6657

Nizarius commented 4 years ago

@bradzacher thank you!

FDiskas commented 4 years ago

Prettier > 1.19 - already supports TypeScript 3.7