COVID-19 自己検出システムの Web デザインおよび開発ドキュメント

Vue.js をベースにした Sylvan Ding の最初のプロジェクト。このプロジェクトで提供される情報は参照のみを目的としており、情報の正確性、有効性、適時性、完全性は保証されません。詳細については、国家衛生健康委員会委員会を参照してください。 Webサイト！
ドキュメントを参照する »

デモを表示する·バグを報告する·機能をリクエストする

ホームページ

Vue プロジェクトにおける ESLint と Prettier 間の競合を解決する

コードエディターに適切な拡張機能/プラグインをインストールする必要があります。の場合はVS Code、ESLintとPrettierをインストールします。これらのプラグインはそれぞれ数百万回ダウンロードされているため、VS Code 拡張機能マーケットプレイスでこれらを見逃すことは困難でしょう。これらをインストールしたら、適切に使用できるようにそれぞれを構成する準備が整います。

通常、リンターにはコード品質ルールだけでなく、スタイルルールも含まれます。Prettier を使用する場合、ほとんどのスタイルルールは不要ですが、さらに悪いことに、Prettier と競合する可能性があります。

幸いなことに、Prettier と競合するルールや不必要なルールをオフにするのは簡単です。パッケージは、eslint-config-prettierPrettier と競合する可能性のあるすべての ESLint ルールを除外できます。

開発環境

ノード	14.16.1
npm	8.18.0
ビュー-cli	2.9.6
ビュー	2.5.2

解決

eslint-config-prettier をインストールします。

npm install eslint-config-prettier --save-dev --legacy-peer-deps

最新の npm バージョン (v8) で NPM パッケージをインストールすると、アップストリームの依存関係の競合が発生する可能性があります。このエラーに対する効果的な解決策は、ピアの依存関係を無視してインストールを続行できるコマンドを--legacy-peer-depsnpm install に渡すことです。

eslintrc.jsセットアップが成功すると、構成ファイルを選択した形式に基づいたファイルが表示されるはずです。

次に、ファイル"prettier"内の「extends」配列に追加します.eslintrc.js。他の設定をオーバーライドできるように、必ず最後に配置してください。

{
    
    
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

.prettierrcPrettierの設定ファイルとしてJSONで書かれたファイルを作成します。

{
    
    
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

転載の際は出典を明記してください: ©️ Sylvan Ding 2022