EsLint の一般的なエラー
エラー判定：コードを書いて保存した後、プロジェクトがエラーを報告する. エラーメッセージがxxx-xxx-xxxこの、基本的にはESlintのエラーレポートであると結論付けることができます.
一般的なエラー メッセージは次のとおりです。 それぞれの意味は次のとおりです。
EsLint一般的な検証コード形式の構文規則は次のとおりです。
1.引用
意味: 文字列は一重引用符で囲む必要があります
2.キー間隔
意味: 属性とオブジェクトの値の間にスペースが必要です
3.コンマダングル
意味: オブジェクトまたは配列の終わり、余分なコンマは許可されません
4.複数空行なし
意味: 複数の空行は許可されません。大于等于2
5. 末尾スペースなし
手段: 行末に余分なスペースを入れない
6. eol-last
意味: ファイルの最後に空白行が必要です
7. 空白コメント
手段: コメント内の // または /* の後に一定のスペースを確保する
8.インデント
手段: 一貫したインデントを強制する
9.インポート/最初
手段: インポートされたモジュールのインポート ステートメントは、ファイルの先頭で宣言する必要があります。
10.関数の前の空白
意味: メソッドの仮パラメータの前にスペースが必要です
実際の開発では:
を押すと、ルールに合わせて自動的にフォーマットされるCtrl + Sように Eslint を構成します。Eslint
構成手順は次のとおりです。
まず、Vscode の設定を開き、tabsize を検索し、タブの既定の 4 つのスペースを 2 つのスペースに変更し、
Vscode に 2 つのプラグインをインストールして構成します。
プラグイン 1: EsLint作成者: Dirk baeumer
インストール後、Vscode 設定の右上隅にあるドキュメントで次のコードを構成します。
// EsLint 配置
"editor.codeActionsOnSave": {
"source.fixAll": true
},
プラグイン 2: prettier-Code forma t 作成者: Prettier
インストール後、Vscode 設定の右上隅にあるドキュメントで構成します: 次のコード:
// prettier 配置
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字合数超出此限制会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置.vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"trailingComma":"none",
"semi":false,
"singleQuote":true,
"arrowParens":"avoid",
"printWidth":300
},
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
}
}
設定はここにあり、最後のステップは短いです:
最後のステップ:
.prettierrc ファイルを C:\Users\Dell ディレクトリ、つまりシステム ファイル ディレクトリに置きます.
tips:コンピュータによってパスが異なります.
配置したら、Vscode 設定の右上隅にあるドキュメントで構成します。
"prettier.configPath":"C:\\Users\\Dell\\.prettierrc"
tips:ここではパスに二重スラッシュを使用しています。単一のスラッシュは使用しないでください
.prettierrcファイルはありません、プライベートチャット~~~
