vueではeslintを使って、vscodeの操作に協力します。
多くの人が協力しても、個人プロジェクトでも、コード規範は重要です。このようにすれば、基本的な文法エラーを大きく回避するだけでなく、コードの可読性も保証されます。これは仕事をよくしようということで、まずその器を利して、個人的にはeslint+vscodeを紹介してvueを書きにきます。
保存するたびに、vscodeはeslintルールに合わないところを表示します。同時に簡単な自己修正もします。設置手順は以下の通りです。
まず、eslintプラグインをインストールします。
ESLintのインストールと配置が完了したら、引き続きVCodeに戻って拡張設定を行い、ファイルの優先順位を順次クリックします。設定はVCodeの設定ファイルを開き、下記の構成を追加します。
知識を補充します:v scodeはeslintを配置してvue足場を組み合わせて急速にコードの品質を実現して書きます。
私達は会社で足場を使う時にはeslintを使ってコードの品質測定を行うかもしれませんが、コードを書く時には常にこれらの「標準」を覚えなければいけません。最後にセミコロンを付けずに引用符を使って最初の行に2つのスペースを詰めていくなど、ちょっと辛いかもしれません。
この時、私達はコードを書いて保存するたびに、自動的に標準に合うコードに整理してくれると思います。
そうです。vscodeにはこのような機能があります。
相変わらず直接にステップとコードを入れました。
1.このような条件を実現する(vue足場を設置する時はeslint+prettierというオプションを選択する必要があります)
vscodeに三つのプラグインeslintコード品質検出プラグインprettierルールをインストールすると、vetur vueコードがカスタマイズできます。
2.ファイルに入る=>オプション=>設定=>ユーザー=>拡張=>eslint>seeting.jsonファイルで次のコードを追加して作成します。
開いています。eslintrc.jsファイルはrulesの中に次のように入れば、私達のカスタムルールです。
私達の足場の入り口の書類を見ました。メール・jsはすべての引用符がシングルクォーテーションマークになっていますか?まだセミコロンがありません。
私達は適当にコードを修正して保存します。彼も自動的にeslintの標準フォーマットに合うコードに調整してくれます。とても快適ですか?みんなはすぐに試してみてください。
以上の本はvueの中でeslintを使っています。vscodeと協力する操作は小編が皆さんに提供した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。
保存するたびに、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と協力する操作は小編が皆さんに提供した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。