web-dev-qa-db-fra.com

Plus joli ne formatant pas les fichiers HTML dans VS Code

L'extension plus jolie sur mon code VS ne peut pas formater le HTML.

Au chargement du code VS, je reçois cette erreur dans ma console -

enter image description here

En essayant de formater, je vois ce message en bas -

enter image description here

Remarque - Les fichiers TS et SCSS sont formatés correctement. Il ne se brise que pour les fichiers HTML.

Voici mes paramètres basés sur le langage 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"
  }
}

Ce sont les extensions installées et activées -

enter image description here

Version plus jolie - 2.2.2

Version du code VS (de la section À propos du code 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

Veuillez me faire savoir comment résoudre ce problème. Veuillez laisser un commentaire si des informations supplémentaires sont nécessaires. Merci.

visual-studio-codeprettier
4
Nithin Kumar Biliya

J'ai eu beaucoup de problèmes pour obtenir le formatage de Prettier lors de la sauvegarde. Il s'est avéré être un problème avec les paramètres de délai d'attente par défaut dans VSCode. L'utilisation de ces paramètres a finalement fonctionné pour moi:

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

Pour référence, voici tous mes paramètres concernant le peluchage et le formatage:

{
    "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
    }
}

J'utilise les extensions suivantes (là encore limitées au peluchage/formatage):

  • ESLint (dbaeumer.vscode-eslint)
  • Plus joli (esbenp.prettier-vscode)
  • stylelint-plus (hex-ci.stylelint-plus)
  • HTMLHint (mkaufman.htmlhint)

Vous voudrez peut-être vous assurer que tous les packages npm nécessaires à vos extensions sont installés. Localement si possible.

J'espère sincèrement que cela vous aidera. La mise en place de linters et de formateurs est toujours une science à part entière.

P.S. J'obtiens une erreur comme votre message "impossible de formater" chaque fois que j'essaie de formater un fichier qui ne se trouve pas dans le répertoire de travail. Mais regarder le chemin dans votre message suggère que ce n'est pas un problème dans votre cas.

0
Nicolas Reibnitz