web-dev-qa-db-ja.com

PrettierがVSコードでHTMLファイルをフォーマットしない

VSコードのよりきれいな拡張機能がHTMLをフォーマットできません。

VSコードのロード時に、コンソールでこのエラーが発生します-

enter image description here

フォーマットしようとすると、下部にこのメッセージが表示されます-

enter image description here

注-TSファイルとSCSSファイルは適切にフォーマットされています。 HTMLファイルでのみ機能しなくなります。

以下は私のHTML言語ベースの設定です-

{
  "tslint.rulesDirectory": "./node_modules/codelyzer",
  "TypeScript.tsdk": "node_modules/TypeScript/lib",
  "window.zoomLevel": 0,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "[TypeScript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.html": "html"
  }
}

これらはインストールされて有効になっている拡張機能です-

enter image description here

きれいなバージョン-2.2.2

VSコードバージョン（VSコードセクションから）：

Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 17.7.0

この問題を修正する方法を教えてください。さらに情報が必要な場合はコメントを残してください。ありがとう。

visual-studio-codeprettier
4
Nithin Kumar Biliya

保存時にPrettierでフォーマットするのに多くの問題がありました。 VSCodeのデフォルトのタイムアウト設定に問題があることが判明しました。これらの設定を使用すると、最終的に私にとってうまくいきました：

{
    ...
    "editor.codeActionsOnSaveTimeout": 100000,
    "editor.formatOnSaveTimeout": 100000,
    ...
}

参考までに、リントとフォーマットに関するすべての設定を以下に示します。

{
    "editor.codeActionsOnSave": { "source.fixAll": true },
    "editor.codeActionsOnSaveTimeout": 100000,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnSaveTimeout": 100000,
    "editor.formatOnType": true,
    "eslint.alwaysShowStatus": true,
    "eslint.enable": true,
    "html.format.enable": false,
    "htmlhint.enable": true,
    "prettier.requireConfig": false,
    "prettier.useEditorConfig": true,
    "stylelint.autoFixOnSave": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}

私は次の拡張機能を使用します（これもlinting/formattingに限定されています）：

  • ESLint（dbaeumer.vscode-eslint）
  • プリティエ（esbenp.prettier-vscode）
  • stylelint-plus（hex-ci.stylelint-plus）
  • HTMLHint（mkaufman.htmlhint）

拡張機能に必要なすべてのnpmパッケージがインストールされていることを確認したい場合があります。可能であればローカルに。

これがお役に立てば幸いです。リンターとフォーマッターの設定は、それ自体がまだ科学です。

追伸作業ディレクトリ内にないファイルをフォーマットしようとすると、「フォーマットできません」というメッセージが表示されます。しかし、メッセージのパスを見ると、これはあなたのケースでは問題ではないことがわかります。

0
Nicolas Reibnitz