Vue-cli で Eslint を使用して自動フォーマットを実装する方法

この記事では主に、vscode でコードを自動的に整形する Vue-cli Eslint の方法を紹介します。

エディターのもう 1 つの非常に重要な機能は、コードの書式設定です。VS Code は、.js、.html などの一般的なファイルの書式設定をデフォルトで提供します。

.vue ファイルの書式設定サポートを追加します

ここでは、.vue ファイルの書式設定サポートを追加します。

1. Vetur プラグインをインストールします
2. VS Code の設定に次のルールを追加します:

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

Vetur がデフォルトで使用する書式設定プラグインです。 このようにして、.vue ファイル内の html および javascript コードに対して書式設定のサポートが提供されます。

vue eslint コードの自動整形

1. vue-cli コードスタイルは JavaScript 標準スタイルであり、注意しないと実行されません。eslint の autoFixOnSave を使用してコードを自動整形します。

2. VSCode 拡張プラグインの推奨事項 (HTML、Node、Vue、React 開発に適用)
   

推奨読書:

1. vscode プラグインの推奨事項

2. JavaScript 標準スタイルコードスタイルの仕様
   

テキストの eslint 自動整形

設定環境:

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

パスの下にプロジェクトとファイルを作成します: .eslintrc | js

rrreええ

vscode 設定ファイルを追加します:

1. vscode に eslint プラグインを追加します
2. 設定を変更します。json

上記は、皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

vue-cli で webpack テンプレートを使用してプロジェクトの構築とパッケージ化パスの問題を解決する

vue の Bus global Event center (詳細なチュートリアル)

Angular の変更の詳細な解釈シリーズ 検出の問題

以上がVue-cli で Eslint を使用して自動フォーマットを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。