web-dev-qa-db-ja.com

VSCode Linter ES6 ES7 Babel linter

Visual Studioコードを使用してbabel/ES7 stage-0ルールに基づいてJavaScriptファイルをリントする方法

コードをリントするだけです。 Jsファイルをトランスパックするwebpackを既に持っています。

javascriptbabeljsvisual-studio-codeeslintecmascript-7
35
Damien Leroux

私はどのように進むか：

  • eslintをグローバルにインストールします：npm install -g eslint
  • babel-eslintをインストールします：npm install --save-dev babel-eslint
  • eslint-plugin-reactをインストールします：npm install --save-dev eslint-plugin-react
  • ルートディレクトリに.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、「extension」と書き、「install extensions」を選択してから、「eslint」と書き、検証します。 VSCを再起動する必要があります
  • VSCコードで、ユーザーパラメーター（settings.json）を開き、次のように記述します。
{
    //disable default javascript validator replaced by eslint
    "javascript.validate.enable" : false 
}

これで、必要に応じてES7コードをリントする必要があります。 VSCがeslint configを読み取る際に問題がある場合は、VSCコンソールで確認できます（Ctrls ShiftU）。

その結果、ES7コード（オブジェクトのスプレッド演算子など）は適切にリントされています： enter image description here

PS：私の.eslintrcかもしれませんが、ES7リンティングのためにいくつかの無駄な余分なデータを使用しているので、お気軽に削除してください:)

63
Damien Leroux

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 Appを使用している場合を除き、さらに多くのbabel構成が必要です。上記のみを使用してください。補足情報やヘルプが必要な場合はコメントとして。

0
Matt Black