vueではeslintを使って、vscodeの操作に協力します。


多くの人が協力しても、個人プロジェクトでも、コード規範は重要です。このようにすれば、基本的な文法エラーを大きく回避するだけでなく、コードの可読性も保証されます。これは仕事をよくしようということで、まずその器を利して、個人的にはeslint+vscodeを紹介してvueを書きにきます。
保存するたびに、vscodeはeslintルールに合わないところを表示します。同時に簡単な自己修正もします。設置手順は以下の通りです。
まず、eslintプラグインをインストールします。

ESLintのインストールと配置が完了したら、引き続きVCodeに戻って拡張設定を行い、ファイルの優先順位を順次クリックします。設定はVCodeの設定ファイルを開き、下記の構成を追加します。

"files.autoSave":"off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
   ],
   "eslint.options": {
    "plugins": ["html"]
   }
このように保存するたびに、ルートディレクトリの下で、eslintrc.jsによって構成されたeslint規則を確認し、簡単なfixを行うことができます。
知識を補充します:v scodeはeslintを配置してvue足場を組み合わせて急速にコードの品質を実現して書きます。
私達は会社で足場を使う時にはeslintを使ってコードの品質測定を行うかもしれませんが、コードを書く時には常にこれらの「標準」を覚えなければいけません。最後にセミコロンを付けずに引用符を使って最初の行に2つのスペースを詰めていくなど、ちょっと辛いかもしれません。
この時、私達はコードを書いて保存するたびに、自動的に標準に合うコードに整理してくれると思います。
そうです。vscodeにはこのような機能があります。
相変わらず直接にステップとコードを入れました。
1.このような条件を実現する(vue足場を設置する時はeslint+prettierというオプションを選択する必要があります)
vscodeに三つのプラグインeslintコード品質検出プラグインprettierルールをインストールすると、vetur vueコードがカスタマイズできます。

2.ファイルに入る=>オプション=>設定=>ユーザー=>拡張=>eslint>seeting.jsonファイルで次のコードを追加して作成します。

"editor.codeActionsOnSave": {     
    "source.fixAll.eslint": true
  }
//               eslint    
3.取り付けたばかりのVue足場があります。私のは@vue/cli 4.0バージョンです。

開いています。eslintrc.jsファイルはrulesの中に次のように入れば、私達のカスタムルールです。

rules: {
  'prettier/prettier': [
   'error',
   {
    semi: false,  //      false    true   
    singleQuote: true,  //     true    false   
    printWidth: 160   //                 160
   }
  ]
 }
4.運行テストは、私たちのパッケージ.jsonファイルの中のものです。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"  //           eslintrc.js                 
 }
私達はnpm run lintを起動して運転に成功しました。

私達の足場の入り口の書類を見ました。メール・jsはすべての引用符がシングルクォーテーションマークになっていますか?まだセミコロンがありません。
私達は適当にコードを修正して保存します。彼も自動的にeslintの標準フォーマットに合うコードに調整してくれます。とても快適ですか?みんなはすぐに試してみてください。
以上の本はvueの中でeslintを使っています。vscodeと協力する操作は小編が皆さんに提供した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。