ESLintとPretierを知る

リンク:https://ssshooter.com/2020-06...

ESLintとPretierはそれぞれ何ですか?何の関係がありますか?

直接足場でESLINEのプロジェクトを生成します.一日中間違えましたか?とても愚かですか?

これらのものは一体どう配置されていますか?

読み終わったらこれらの疑問を解決できます.
ESLINE
まず何ですか?ESLINEはコードの品質とスタイルをチェックするツールです.ルールセットを配置すれば、コードの中でルールに合わないところを確認できます.一部の問題は自動修復をサポートします.
このような規則を使うと何に使いますか?シングル開発なら大丈夫ですが、一つのチームが二つのスタイルがあれば、フォーマットしてコードの衝突を処理するのは本当に大変です.統一コードのスタイルは本当に重要です.
(実は以前自分でプロジェクトをした時、会社のコンピュータと家庭のコンピュータのコードの配置が違っていて、家で残業する時もよくフォーマットしました.このように何回も違ったスタイルを繰り返して、diffは非常に混乱しています.)
どのように設定しますか
足場で生産する構成はpackage.jsonの中にあるかもしれません.個人的には.eslintrc.jsonファイルに分解することを勧めています.また、jsファイルexportまたはyamlフォーマットを使ってもいいです.
デフォルトのESLintにはルールがありませんが、"eslint:recommended"を使っていくつかの一般的なルール(上記のrulesページにチェックをつけたオプションを含む)を直接使用することができます.
以前にvue cliで作成した工事規則は"@vue/standard"です.

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": ["plugin:vue/essential", "@vue/standard"],
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "comma-dangle": ["error", "only-multiline"],
    "space-before-function-paren": ["error", "never"]
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

rules部分はいつものスタイルで自分で加えました.rulesの定義はextendsの構成グループの設定をカバーします.足場を使って構築されたプロジェクトに対して、チームや自分のコードスタイルに合わないところがあったら、別にrulesに配置することができます.
ユーティリティ
vscodeにESLINEプラグインをインストールした後、エラー文にマウスをかざすと、エラーの原因が分かります.リンクをクリックして設定の詳細ページに直行できます.

によるスタイルの説明

エラーと正しい使用事例

設定可能オプション

これらの情報により、rulesの構成を迅速に調整することができる.
ちなみに、例では配列で例を挙げることが多いが、単純なスイッチング構成は数字であれば良い.

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

もう一つの問題はESLINEフォーマットが面倒くさいです.どうすればいいですか?
以前からある人はどうして右ボタンフォーマットの中でESLINEというissueを選べないのかと言いました.中には多くのオプションがあります.私は次のようなものが好きです.keybindings.jsonファイルを修正して、一つのショートカットキーをeslint.executeAutofixに結び付ければいいです.もうそれらの悩みのerrorが見えません.
Pretier
ほとんどの人はPretierをプログラム的に使うことができないと推定されているので、以下の説明はすべてvscodeのPretierプラグインです.
Pretierはコードレイアウトに専念していますが、コードの品質には関心がありません.
ここでは、ESLintはすでにレイアウトに関する検査が含まれていますが、なぜPretierが必要ですか?
この三つの理由を考えます.一つはESLintの設置と配置が面倒で、lintの速度が速くないからです.Prettierを使うのはJavaScriptだけではなく、Pretierプラグインをインストールすれば、各種の流行語をフォーマットすることができます.第三は配置がそんなに目まぐるしくないです.
やはりコードフォーマットに拘わらず、Pretierのオプションは元々ESLintより少なくなりました.そして、形式だけでも、prettierはむやみにオプションを加える傾向がありません.この点については、特別にオプションの哲学にPretierのオプションの簡素化の原因を説明しました.
構成に戻ると、PretierはESLintと同様に、js、json、yamlフォーマットを使用してもよく、以下の例では依然として慣用的な.prettierrc.jsonを使用してもよい.
https://prettier.io/docs/en/o...
最も一般的な配置はこの4つです.タb幅、コンマ、セミコロンの有無、およびシングルクォーテーションマークの有無です.

{
  "tabWidth": 2,
  "trailingComma": "es5", // comma-dangle
  "semi": false, // semi
  "singleQuote": true // quotes
}

インデントにはチューブがないほか、3つのオプションに対応するESLintオプションがコメントに書いてあります.Prettierフォーマットの結果とESLint衝突はよくある問題であり、ウェブサイトIntegrating with Lintersの部分は、PretierにESLint構成を継承させる方法を提供しており、別のインストール依存性が必要である.でも、本当に必要ないと思います.実際のスタイルで自分で作ってもいいです.
この二つのものについては先にここに書きます.この二つのものを正しく区別してほしいです.
時代の涙
——次のいくつかの役に立つかどうかわからない情報は、見ないかを選ぶことができます.
下の二つのセグメントは、vscodeのsettings.jsonファイルです.

{
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "trailingComma": "es5",
      "singleQuote": true
    }
  }
}

昔からveturは上の構成のようにveturに入れ替える必要があったことをぼんやり覚えています.今資料を調べてやっと.prettierrc.jsonが配置されているということが分かりました.配置ファイルに準じて、直接にここの配置を無視します.今までveturを使っていたのを覚えていますが、中にprettier属性をセットするべきかどうかは分かりません.

{
  "prettier.semi": true,
  "prettier.trailingComma": "es5",
  "prettier.singleQuote": true
}

上のように全体のvscodeのスタイルを配置していますが、実際には今は使えません..prettierrc.jsonのような配置がなくても効果がありません.公式サイトではこのような配置方法について言及していません.
上の二つの構成は本文の主要な内容ではなく、ふと思い出しただけで、今はもう時代の涙になっているかもしれません.