ESLint

5762 ワード
ESLint テキストリンク
ESLint
ECMAScriptコードを解析する印刷ツールの1つ
Lintとは?
  • lintはモコモコという意味
  • プログラミング分野とは、ソースコードを解析し、エラーやエラーのあるコードにタグを付けるためのツールです.
  • 文法上の誤りや逆パターンを探して、一貫したコードスタイルを保ち、可読性の高いコードを作成することを目指します.
    • ESLintの役割
  • フォーマット
  • コード品質
    • 書式設定
  • 一貫したコードスタイルを保ち、読みやすいコードを作る.
  • ex:)「インデントルール」、「コード線の最大幅ルール」など
    • コード品質
  • アプリケーションの潜在的なエラーまたはエラーのプロアクティブな予防
  • ex:)「変数を使用しない」「グローバルスキャンを勝手に使用しない」など
    • ESLintの利用
    設定
    $ npm i -D eslint
    .eslintrc.js
  • eslintプロファイル
    • 実行
  • eslintにはプロファイルが必要です.
    • 実行
  • ・ルール・リスト中左側にスパナマークが付いている--fixオプションで自動修正可能
    • $ npx eslint app.js // 검사할 파일


/*
--fix 옵션으로 자동으로 고쳐질수있는 코드한해서는 eslint가 수정해준다.
*/
$ npx eslint app.js --fix
    Rules
  • ESLintはコードチェックルールを予め定めている.
  • チェックルールのリスト
  • ESLintプロファイル(.eslintrc.js)にルールを作成
  • React推奨ルール
    • .eslintrc.js
    module.exports = {
  rules: {
    "no-unexpected-multiline": "error"
  }
}
  • ルールで設定されている値は3種類あります
  • 「off」または0:オフ
  • 「warn」または1:警告
  • 「error」または2:エラー
    • Extensible Config
  • 複数のルールが予め定められているeslint:推奨設定
  • ルール・リストこの設定で左側にマークを選択するルール
    • .eslintrc.js
  • extendsに設定を追加する必要がある
  • この設定以外にルールを追加したい場合はrules属性に拡張可能
    • module.exports = {
  extends: [
    "eslint:recommended"
  ]
}
    ESLintでの組み込み設定以外の共通ルール
    airbnb
  • airbnbスタイルガイドルールに従う母音
  • eslint-config-airbnb-baseパッケージ提供
    • .eslintrc.js
    module.exports = {
  extends: [
    "airbnb"
  ]
}
    standard
  • JavaScript標準スタイル使用
  • eslint-config-standardパッケージ提供
    • .eslintrc.js
    module.exports = {
  extends: [
    "standard"
  ]
}
    初期化
    ESLintプロファイル使用--initオプションで簡単に構成できます.
  • 通常はeslintを直接構成するのではなく、自動生成されたプロファイルを使用してカスタマイズする.
    • 実行
    $ npx eslint --init

? How would you like to use ESLint?
? What type of modules does your project use?
? Which framework does your project use?
? Where does your code run?
? How would you like to define a style for your project?
? Which style guide do you want to follow?
? What format do you want your config file to be in?
    自動化
  • ESLintはコード作成時に随時実行・チェックが必要なので自動化が望ましい.
    • 使用
  • 自動化方法에디터 확장 도구またはgit hooksの方法があります.
    • 拡張ツールの編集
  • コード作成時のリアルタイムチェックの編集方法
  • vs-codeの拡張またはintellijのplugin、eslintとprettyerの提供
    • vscodeの自動フォーマットの設定
    // setting.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
    git hooks
  • ソーストレーシングツールとして羽毛を使用する場合は、羽毛フックを使用することが望ましい.
  • 挿入式フック実行点を提供するフック
  • つまり、提出または転送前にリントチェックを行い、チェックを通過してこそプッシュが許可される方式
  • husky:フックを気軽に使えるツール
    • 設定
    $ npm i -D husky
    使用方法
    method swizzlingからcrash分析と解決へ
    開発者向けCSSコードの改良