web-dev-qa-db-fra.com

VSCode Linter ES6 ES7 Babel linter

Comment utiliser le code Visual Studio pour peloter un fichier JavaScript basé sur les règles babel/ES7 stage-0?

Je n'ai besoin que de peloter du code. J'ai déjà webpack transpilant le fichier Js.

javascriptbabeljsvisual-studio-codeeslintecmascript-7
35
Damien Leroux

Comment je procède:

  • installer globalement eslint: npm install -g eslint
  • installez babel-eslint: npm install --save-dev babel-eslint
  • installez eslint-plugin-react: npm install --save-dev eslint-plugin-react
  • créer .eslintrc fichier dans votre répertoire racine. voici ma config:
{
"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
    }
}
  • Dans VSC, appuyez sur F1, puis écrivez "extension", sélectionnez "installer les extensions" puis, écrivez "eslint" et validez. vous devrez relancer VSC
  • Dans le code VSC, ouvrez les paramètres utilisateur (settings.json) et écris:
{
    //disable default javascript validator replaced by eslint
    "javascript.validate.enable" : false 
}

Maintenant, il devrait peloter comme souhaité votre code ES7. S'il y a un problème avec VSC lors de la lecture de la configuration eslint, vous pouvez le voir dans la console VSC (Ctrls ShiftU).

En conséquence, le code ES7 (opérateur de propagation dans les objets par exemple) est bien pelucheux: enter image description here

PS: peut être mon .eslintrc utilise des données supplémentaires inutiles pour les peluches ES7 alors n'hésitez pas à les supprimer :)

63
Damien Leroux

Étant donné que l'extension ESLint peut utiliser babel-eslint, installez-la et désactivez le linting intégré de vscode dans les paramètres utilisateur/espace de travail.

Voici un exemple de configuration utilisant Create React Config eslint de l'application + chaînage optionnel:

.vscode/settings.json:

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

.eslintrc:

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

.babelrc:

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

Voici tous les packages npm à installer pour cette configuration:

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

Pour les nouveaux utilisateurs de React ou babel, à moins que vous n'utilisiez réellement Create React App, vous aurez besoin de beaucoup plus de config babel. Veuillez utiliser uniquement ce qui précède) comme info supplémentaire et commentaire si vous avez besoin d'aide.

0
Matt Black