web-dev-qa-db-ja.com

ESLintとPrettierを使用したVisual Studio Codeでの保存時に正しいオートフォーマットを取得できない

eSLintとPrettierを使用したVisual Studio Codeで.vueファイルを操作すると、vue/max-attributes-per-lineを正しく自動修正できないようです。

たとえば、vue/max-attributes-per-lineを 'off'に設定して手動で改行を追加しようとすると、81、120に関係なく、すべての要素が常に1行に収まるように修正されます、200以上の文字幅。 マークアップ要素を1行に強制しているものを理解するにはどうすればよいですか？

ESLintバージョン5.1.0とVisual Studio Code（Prettier Extensionなし）をPrettier 1.14.2と共に使用しています。

これが.vueファイルの例です-'vue/max-attributes-per-line': 'off'。保存するたびに、マークアップの長い行がすべて1行に表示されます。

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

'vue/max-attributes-per-line': 2、それはそのようにフォーマットされ、1つの改行があります（これもかなり間違っています）。

      <font-awesome-icon v-if="statusOptions.icon" 
:icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />

手動で再フォーマットしようとすると、保存時に上記に戻ります。

さらに、Ctrl + Sを押すと2回再フォーマットされるようです。最初に再フォーマットしてすべてを1行に配置し、次に0.5秒後に上記のフォーマットを実行します。 任意のアイデア？この奇妙な原因は何ですか？複数のリフォーマッターが実行されていますか？最初に無効にする方法は何ですか？

VS Codeワークスペース設定：

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.tabSize": 2
  },
  "[csharp]": {
    "editor.tabSize": 4
  },
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "vetur.validation.script": false,
  "vetur.validation.template": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "vue-html",
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "editor.rulers": [
    80,
    100
  ]
}

.eslintrc.js：

module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    jest: true
  },
  globals: {
    expect: true
  },
  extends: [
    'prettier',
    'plugin:vue/recommended',        // /base, /essential, /strongly-recommended, /recommended
    'plugin:prettier/recommended',   // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier. 
    'eslint:recommended'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': [            // customizing prettier rules (not many of them are customizable)
      'error',
      {
        singleQuote: true,
        semi: false,
        tabWidth: 2
      },
    ],
    'no-console': 'off'
  }
}

設定を変更せずに、ESLint --fixは確かに適切にフォーマットします。すべての.vueテンプレート要素を適切に多くの行に分割します。 だから、VSコードを形にする方法はありますか？上記の設定は役に立たなかったが、何が干渉しているのかさえわからない。何か案は？

強調すると、VS Codeで保存すると、長いHTML要素が1行に折りたたまれ、0.5秒後に2行に分割されます。代わりに、それを多くの行に分割することを期待しています。いくつかの保存が必要な場合でも問題ありませんが、最初の保存では、この動作とその後のすべての保存が表示されます。

vue.jsvisual-studio-codeeslintprettier
28
Patrick Szalapski

短い答え：必要でした："editor.formatOnSave": false, "javascript.format.enable": false。

TwitterのWes Bosからのこのスレッド のおかげで、設定の魔法の組み合わせがようやく見つかりました。複数のフォーマッターが競合しているように見えるのではないかと疑っていました。実際のところはわかりませんが、次のようにしてeslint以外をすべてオフにすることができました。

VS Code設定では、次のものが必要です。

  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx" ]
  },
  "eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "javascriptreact", "autoFix": true }
  ]

.eslintrc.jsでは、元の投稿の設定を使用して、必要に応じて「vue/max-attributes-per-line」を変更することもできます。次に、VS CodeのESLintプラグインは、kenjiruが書いたように、保存するたびに一度に1ステップずつコードをフォーマットします。最後の問題：HMRはこれらの変更を認識しないため、ゼロから再構築します。

20
Patrick Szalapski

'vue/max-attributes-per-line': 'off'ルールが無効になっているため、VSCodeは自動保存で長い行を修正しようとしません。予想どおり、他のeslint修正が適用されます。

'vue/max-attributes-per-line': 1 VSCodeは、保存ごとに1つのエラーのみを修正します。これはvscode-eslintの既知の制限です

vscode-eslintは、プラグインによって生成される編集の量を最小限に抑えるために、単一のパスのみを実行します。目標は、可能な限り多くのマーカー（ブレークポイントなど）をファイルに保持することです。

VSCodeには、すべてのプラグインが保存時に変更セットを計算するのに1秒の時間制限があります。プラグインの1つが他のプラグインを3回続けて実行しない場合、それは無効になります。

eslint --fix lintingエラーがなくなるまで、すべてのルールをループで実行します。私はそれが最大10反復の制限を持っていると思います。

詳細については、次のリンクを参照してください。

この問題を示すために最小限の設定を作成しました。

2
kenjiru