web-dev-qa-db-fra.com

Prettier/VSCode Eslint: bug de format/syntaxe étrange

Parfois, lorsque je démarre VSCode et que je sauvegarde un fichier JS, tout se gâche.

exemple

De:  enter image description here À:  enter image description here Lors de la sauvegarde

Ce que j'ai découvert:

Lorsque je modifie un paramètre utilisateur VSCode (quelque chose lié au plugin plus joli | quelque chose (je change normalement le paramètre prettier.eslintIntegration mais il se peut que tout changement dans le paramètre le résolve)), il cesse de fonctionner correctement.

Détails possibles liés à l'environnement

// Part of .eslintrc
{
    parser: 'babel-eslint',
    extends: ['airbnb', 'prettier'],
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': 'error'
    }
    ...
}

// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always

// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"TypeScript.format.enable": false

// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",

VSCode Extension suspects:

dbaeumer.vscode-eslint
esbenp.prettier-vscode

Si d'autres informations (de débogage) doivent être fournies, veuillez filmer. 

visual-studio-codeeslintprettier
7
Bram z

J'ai eu des problèmes similaires en utilisant ESLint et Prettier ensemble dans VS Code. Après avoir essayé des dizaines de façons, la configuration suivante fonctionne pour moi.

ESLint et Prettier sont installés globalement sur ma machine.

J'utilise ces extensions:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Mon fichier .eslintrc.json ressemble à ceci:

{
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
    "sourceType": "module"
},
"rules": {
    "indent": ["error", 4],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-console": "off"
}

}

Dans votre code de système virtuel, accédez à Préférences> Paramètres> Paramètres utilisateur et ajoutez les lignes suivantes:

"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true

Je n'utilise pas en utilisant eslint-config-prettier ou eslint-plugin-prettier et tout fonctionne bien pour moi.

Important: Assurez-vous qu'aucune autre extension de formateur automatique (autre que Prettier) n'est installée.

3
Hamed

Pour moi, le problème était que l'extension Beautify effectuait le formatage dans les fichiers .js et ne savait pas comment gérer la syntaxe JSX.

La solution consistait à empêcher Beautify de formater des fichiers Javascript.

Pour ce faire, vous devez ajouter le paramètre suivant à vos paramètres utilisateur dans VSCode (accessible à l'aide de ctrl+shift+p et en sélectionnant Preferences: Open User Settings):

"beautify.ignore": [
    "**/*.js"
]
5
Mor Paz

J'ai eu ce problème après une mise à jour de VSCode. J'ai rétrogradé à la version précédente et Prettier a encore fonctionné normalement.

0
Astrotim