VSCode Linter ES6 ES7 Babel linter

Ответ 1

Как я продолжаю:

• установить глобально eslint: npm install -g eslint
• установить babel-eslint: npm install --save-dev babel-eslint
• установить eslint-plugin-реагировать: npm install --save-dev eslint-plugin-react
• создайте файл .eslintrc в .eslintrc корневом каталоге. вот мой конфиг:

{
"env": {
        "browser": true,
        "node": true,
        "es6": true,
        "jest": true,
        "jquery": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "arrowFunctions": true,
            "binaryLiterals": true,
            "blockBindings": true,
            "classes": true,
            "defaultParams": true,
            "destructuring": true,
            "forOf": true,
            "generators": true,
            "modules": true,
            "objectLiteralComputedProperties": true,
            "objectLiteralDuplicateProperties": true,
            "objectLiteralShorthandMethods": true,
            "objectLiteralShorthandProperties": true,
            "octalLiterals": true,
            "regexUFlag": true,
            "regexYFlag": true,
            "spread": true,
            "superInFunctions": true,
            "templateStrings": true,
            "unicodeCodePointEscapes": true,
            "globalReturn": true,
            "jsx": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "strict": 0
    }
}

• В VSC нажмите F1, затем напишите "расширение", выберите "установить расширения", а затем напишите "eslint" и подтвердите. вам придется перезапустить VSC
• В коде VSC откройте пользовательские параметры (settings.json) и напишите:

{
    //disable default javascript validator replaced by eslint
    "javascript.validate.enable" : false 
} 

Теперь он должен выровняться так, как хотел ваш код ES7. Если есть какая-либо проблема с чтением конфигурации VSC eslint, вы можете увидеть это в консоли VSC (Ctrl s Shift U).

В результате код ES7 (например, оператор распространения в объектах) хорошо обозначен:

PS: может быть, мой .eslintrc использует некоторые .eslintrc дополнительные данные для ES7 linting, поэтому смело удаляйте его :)

Ответ 2

Поскольку расширение ESLint может использовать babel-eslint, установите его и отключите встроенную привязку vscode в настройках пользователя/рабочей области.

Вот пример настройки с использованием Create React App eslint config + необязательная цепочка:

.vscode/settings.json:

{
  "javascript.validate.enable": false,
  "eslint.enable": true
}

.eslintrc:

{
  "extends": "react-app"
  "parser": "babel-eslint",
}

.babelrc:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Здесь все пакеты npm для установки:

npm install --save-dev eslint-config-react-app [email protected] @typescript-eslint/eslint-plugin @typescript-eslint/parser [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/core @babel/plugin-proposal-optional-chaining

Для новичков в React или babel, если вы на самом деле не используете приложение Create React, вам понадобится намного больше настроек для babel. Пожалуйста, используйте вышеперечисленное в качестве дополнительной информации и комментируйте, если вам нужна помощь.