可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
Sometimes when I startup VSCode and I save an JS file, everything gets messed up.
example
From: 
To: On save
What I found out:
When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.
Possible related environment details
// 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
If any other (debugging) information needs to be provided, please shoot.
回答1:
I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.
ESLint and Prettier are installed globally on my machine.
I am using these extensions:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
My .eslintrc.json file looks like this:
{ "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" }
}
In your VS Code, please go to Preference > Settings > User Settings and add the following lines:
"editor.formatOnSave": true, "prettier.tabWidth": 4, "prettier.eslintIntegration": true, "prettier.stylelintIntegration": true
I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.
Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.
回答2:
For me the issue was that the Beautify extension performed the formatting in .js files, and it didn't know how to handle JSX syntax.
The solution was to prevent Beautify from formatting Javascript files.
In order to do so you need to add the following setting to your User Settings in VSCode (reachable using ctrl+shift+p and selecting Preferences: Open User Settings):
"beautify.ignore": [ "**/*.js" ]
回答3:
I had this issue after a VSCode update. I downgraded to the previous version and Prettier worked normally again.
To: 
On save