web-dev-qa-db-ja.com

Prettier / VSCode Eslintの奇妙なフォーマット/構文を壊すバグ

VSCodeを起動してJSファイルを保存すると、すべてがめちゃくちゃになることがあります。

例

から： enter image description here 宛先： enter image description here 保存時

私が見つけたもの：

VSCodeユーザー設定を変更すると（prettierプラグインに関連する何か|何か（通常はprettier.eslintIntegrationを変更しますが、設定を変更すると解決される可能性があります））保存時に壊れなくなります。

可能な関連環境の詳細

// 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拡張機能の容疑者：

dbaeumer.vscode-eslint
esbenp.prettier-vscode

他の（デバッグ）情報を提供する必要がある場合は、撮影してください。

visual-studio-codeeslintprettier
10
Bram z

ESLintとPrettierをVS Codeで一緒に使用すると、同様の問題が発生しました。何十通りもの方法を試した後、次の設定でうまくいきます。

ESLintとPrettierが私のマシンにグローバルにインストールされています。

私はこれらの拡張機能を使用しています：

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

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

私の.eslintrc.jsonファイルは次のようになります。

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

}

VSコードで、設定>設定>ユーザー設定に移動して、次の行を追加してください：

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

私はeslint-config-prettierまたはeslint-plugin-prettierをではなく使用しており、すべてがうまく機能しています。

重要：他の自動フォーマッタ（Prettier以外）拡張機能がインストールされていないことを確認してください。

4
Hamed

私にとっての問題は、 Beautify 拡張機能が.jsファイルがあり、JSX構文の処理方法がわかりませんでした。

解決策は、BeautifyがJavascriptファイルをフォーマットしないようにすることでした。

そのためには、VSCodeのユーザー設定に次の設定を追加する必要があります（ ctrl+shift+p Preferences: Open User Settings）：

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

VSCodeの更新後にこの問題が発生しました。私は以前のバージョンにダウングレードし、Prettierは再び正常に動作しました。

0
Astrotim

VSCode、Prettier、ESLintを同時に使用すると、競合するルールが異なる場合があります。

VSCodeとESLintで手動でルールを設定しても効果がない場合がありますが、そうするようにしてくださいfirst。また、Prettierの設定は独自の設定ファイル-.prettierrcなどに保存できます。

効果がない場合、その後これらを確認してください：

  1. 開発の依存関係では、適切なバージョンがインストールされています[eslint-config-prettier][1]

    React/Vue/other-3d-partyツールまたはソースを使用した場合は、NOT @vue/eslint-config-prettierバージョンを使用していることを確認する必要があります（package.jsonおよびlockファイルを参照）

  2. eslintrcファイルにはextends: ['prettier']があります。前のチェックと同じように、ライブラリに依存するバージョンが指定されていません。

0
SynCap

私にとっての問題は、VS CodeにPrettierとJS-CSS-HTML-formatterの両方をインストールしていたことです。 JS-CSS-HTML-formatterをアンインストールするとすぐに、問題は解消しました。

0
Felipe