ESLint/Prettier

緒論

副刊の最後の項目では、ESLint/prettierを使用すると、コード会議を簡単に遵守できます.(エリンにESLint/prettierを知らせてくれてありがとう)
SAVEだけをすると自動的にスタイルが調整されるので、開発に専念するしかありません.
そこで、ESLint/prettierが何なのかを整理し、コードをすぐに修正する方法を学びたいと思います.

ESLint

ESLintは、ECMAScript/JavaScriptコードで見つかったパターンを識別およびレポートするためのツールです.多くの点でJSListやJSHintと似ていますが、いくつかの例外があります.
これでnpmページに説明があります.
すなわち,JavaScriptを用いてコード品質をチェックし,エラーやエラーを回避し,フォーマットによりコードスタイルを調整する.

使用方法

npm install eslint --save

インストール完了後eslint --initを実行すると、.eslintrcファイルが生成されます.これはESLintのプロファイルファイルで、ここでカスタマイズできます.これは、以下のプロジェクタで使用するコードによって詳細な使用方法を説明します.

Prettier

Prettierはユニークなコードフォーマットプログラムです.コードを分析し、必要に応じて最大行長に基づいてコードを再印刷し、パッケージコードのルールに合致させ、一貫したスタイルを適用します.
Prettierは、エディタの「保存」、「コミット前に接続」、または「CI」環境で実行して、コードコメントに関する短いコメントを開発者が再発行することなく、コードライブラリが一貫したスタイルであることを確認できます.
npmに書きます.
Prettierはコードを調整する役割を果たしています.

foo ( reallyLongArg ( ) ,  omgSoManyParameters ( ) ,  IShouldRefactorThis ( ) ,  isThereSeriouslyAnotherOne ( ) ) ;

このコード.

foo ( 
  reallyLongArg ( ) , 
  omgSoManyParameters ( ) , 
  IShouldRefactorThis ( ) , 
  isThereSeriouslyAnotherOne ( ) 
) ;

このようにコードを修正し、ルールに合致させ、可読性を高める

ESLint/prettierの使用例

実際のプロジェクトで使用した例で使用方法をまとめた.
私たちのグループはESLint/prettierと一緒に使用しているので、インストール方法は上と少し違います.

ESLint/prettierのインストール方法

# Prettier와 ESLint를 연결
npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Eslint-config-prettyerの使い方

eslint-config-prettierは、eslintとprettyerルールが衝突したときにprettyerルールを適用する役割です.
extendsに追加する必要があります.

// .eslintrc.js
{
  extends: [
    "eslint-config-prettier"
  ]
}

Eslint-plugin-prettyerの使い方

eslint-plugin-prettierはprettyerルールをeslintに追加する役割です.
2つを組み合わせるとprettyerルールを持つeslintを実行できます.
プラグインとルールを追加する必要があります.

// .eslintrc.js
{
  plugins: [
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  },
}

.eslintcコード

次は私たちのグループが書いたコードです.

# .eslintrc.json에 작성
{
  "extends": ["react-app","plugin:prettier/recommended","prettier"],
  "plugins": ["prettier"],
  "env": {
    "browser": true,
    "jest": true
  },
  "ignorePatterns": ["node_modules/"],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  },
  "rules": {
    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }]
  }
}

反応を書いたので

反応規則を適用する.

jsファイルでjsx構文を使用しても、エラーは発生しません.

保存時の自動チェック

Prettierは、編集保存、コミット前のフック、またはCI環境で実行し、チェックします.ただし、他の設定を行わない場合は、コミット前にチェックします.
リアルタイムチェックにはいくつかの設定が必要です.
まずeslintをインストールします.

次にvsコード設定に触れます.

#settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "editor.formatOnSave": true,
  
}

こう書くと、saveのたびにチェックし、変化に応じてコードを修正します.

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

以上のコードはeslint Extensionであり、リアルタイムのコード品質検査と記憶時に自動位置決めの役割を果たす."eslint.alwaysShowStatus": trueというコードは、"eslint.enable": trueと同様の機能を有しているようで、問題を自動的にチェック、表示、および修正することができる.
以上は私たちのグループが使ったESLint/prettier分解学習終了です!
注意:
https://velog.io/@wjd489898
https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html
https://velog.io/@gwangsuda/2019-09-25-1009-%EC%9E%91%EC%84%B1%EB%90%A8-bwk0ylejxj