web-dev-qa-db-ja.com

ESLintでVSCodeのHTMLファイルをリントするにはどうすればよいですか？

JavaScriptブラウザープロジェクトを複数のファイルに分割していて、ESLintでHTMLファイルのスクリプトタグを同じグローバルスコープでリントできないため、1つのファイルのクラスと関数の宣言と呼び出しが別のファイルで認識されるようにします。

これが私のプロジェクト構造です：

project structure

これはfoo.jsの内容です。

sayHello();

およびbar.js：

function sayHello() {
  console.log('Hello');
}

そして私はそれらを両方ともHTMLファイルでリンクしました：

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <script src="libraries/bar.js" type="text/javascript"></script>
    <script src="foo.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

これに対する解決策はeslint-plugin-htmlパッケージを使用することだと思っていましたが、うまくいかずに構成しようとしました。これらは、プロジェクトにローカルにインストールしたパッケージです。

Alexs-MacBook-Pro:Demo alexmcdermott$ npm list --depth=0
[email protected] /Users/alexmcdermott/GitHub/Demo
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

私はVSCodeエディターを使用していますが、ターミナルにも同じ問題がありました。

Alexs-MacBook-Pro:Demo alexmcdermott$ npx eslint --ext .js,.html .

/Users/alexmcdermott/GitHub/Demo/foo.js
  1:1  error  'sayHello' is not defined  no-undef

/Users/alexmcdermott/GitHub/Demo/libraries/bar.js
  1:10  error    'sayHello' is defined but never used  no-unused-vars
  2:3   warning  Unexpected console statement          no-console

✖ 3 problems (2 errors, 1 warning)

vSCodeでも同じ：

vscode error

これは私のESLint設定です：

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb-base",
    "plugins": [ "html" ]
}

また、VSCodeユーザー設定で次のオプションを使用してHTMLファイルでESLintを実行するようにVSCodeを構成しました。

{
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [ ".js", ".html" ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "html",
            "autoFix": true
        }
    ]
}

私は何か間違ったことをしている必要がありますか、それともeslint-plugin-htmlの要点を逃していますか？誰かが私が間違っていることやこれを修正する方法について何か意見を持っている場合、私はこれを何年もずっと続けてきたので、それを大いに感謝します。さらに情報を提供する必要がある場合はお知らせください。これは初めてです。

javascriptvisual-studio-codeeslintlint
10
Alex McDermott

これは<projectfolder>/.vscode/settings.jsonにあります

{
  "eslint.validate": [ "javascript", "html" ]
}

次のような.eslintrc.jsを使用しています

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "plugins": [
    "eslint-plugin-html",
  ],
  "extends": "eslint:recommended",
  "rules": {
  }
};

たくさんのルールを定義しましたが、上に貼り付けませんでした

結果：

enter image description here

4
gman
  • 開いた .htmlファイル
  • OUTPUTパネルを開く
  • ESLintチャネルを選択
  • エラーを確認して修正する

enter image description here

1
Alex
  1. ターミナルでnpm install eslint-plugin-html --save-devを実行します。
  2. .eslintrc.jsを開き、plugins: ["html"]の直後にmodule.exportsを追加します。 .jsonまたは.jsとは異なる形式の場合は、パターンに従い、同じネストレベルに同じ値を追加します。
  3. ターミナルで./node_modules/.bin/eslint --ext .html .を実行します。
0
Daniel Danielecki