vueのeslintに関する知識
1703 ワード
Eslintの応用はすでに各フロントエンドプロジェクトに深く入り込んでおり、最も成熟した規範はairbnb/javascriptである.
vscode構成
vscodeはeslintのプラグインをインストールする必要があります.設定->プリファレンス->設定、setting.jsonは
構成後、ショートカットキー
折り返し
airbnbのjs仕様では、各行が100文字以内であることが要求され、コードは文字長の制限を超えやすい.htmlまたはテンプレートでは、カスタム属性に柔軟な改行が必要であり、読み取り可能性が大幅に増加します.
変更:
語意化ネーミング
コンポーネント名は、関数名と同様に分かりやすい意味化ルールを提示する必要があります.
eslintチェックの除去
ファイルがeslintルールの制限をスキップする必要がある場合
フレームレベルの修復
cli 2とcli 3は、eslintのヒントと自動修復を実現します.コマンドは次のとおりです.
実際にはeslintモジュールのコマンドを実行し、ディレクトリの指定と拡張子の指定に対して
gitコミット情報規範化
Last but not the least
このテーマの先端に注目して、入門から走るまで、投稿を歓迎します.
vscode構成
vscodeはeslintのプラグインをインストールする必要があります.設定->プリファレンス->設定、setting.jsonは
eslint.validate
を構成することができます.eslintのプラグインはデフォルトでjsとreactの検証のみを構成しているため、vueファイルタイプには追加の構成が必要です.{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
],
}
構成後、ショートカットキー
command + P
を押して、fix
を叩いて、Fix all autofixable Problem
に一部の規範化されていないコードの修復を実現するように提示します.折り返し
airbnbのjs仕様では、各行が100文字以内であることが要求され、コードは文字長の制限を超えやすい.htmlまたはテンプレートでは、カスタム属性に柔軟な改行が必要であり、読み取り可能性が大幅に増加します.
変更:
語意化ネーミング
コンポーネント名は、関数名と同様に分かりやすい意味化ルールを提示する必要があります.
eslintチェックの除去
ファイルがeslintルールの制限をスキップする必要がある場合
/* eslint-disable */
フレームレベルの修復
cli 2とcli 3は、eslintのヒントと自動修復を実現します.コマンドは次のとおりです.
npm run lint
実際にはeslintモジュールのコマンドを実行し、ディレクトリの指定と拡張子の指定に対して
--fix
が自動修復を開始します.eslint --ext .js,.vue src --fix
gitコミット情報規範化
feat: ;
fix: bug;
docs: ;
refactor: , bug;
build: , 、 ( webpack );
style: 、 , ;
perf: ;
chore: src test ;
test: ;
ci: ;
revert: ;
Last but not the least
このテーマの先端に注目して、入門から走るまで、投稿を歓迎します.