vueのeslintに関する知識

1703 ワード

Eslintの応用はすでに各フロントエンドプロジェクトに深く入り込んでおり、最も成熟した規範はairbnb/javascriptである.
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
このテーマの先端に注目して、入門から走るまで、投稿を歓迎します.