[TIL]ESLint & Prettier

ESLintとPrettierは文法の誤りやコードの整理を行うツールです
VscodeやWebStormなどの複数のIDEと連携して使用可能

ESLint

ESLintはJS用のスタティックチェックツールです.
コードを実行する前にエラーを探したり、括弧やスペースを統一したりする使い方など.
似たようなツールはJSLint、JSHintなどがあります

特長

は、全ての検査規則

を自由に設定することができる.

は、自分のプロジェクトに基づいて簡単にカスタムルールを制定することができる

JSX構文サポート

使用方法

1.インストール

$ yarn add eslint

2.ESLintファイルの作成

$ node_modules/.bin/eslint --init実行後、いくつかの問題が発生します.項目の状況に応じて回答すればいいです

? How would you like to use ESLint?
    ❯ To check syntax and find problems
? What type of modules does your project use?
    ❯ None of these
? Which framework does your project use?
    ❯ None of these
? Does your project use TypeScript?
    ❯ No
? Where does your code run?
    ❯ browser
? What format do you want your config file to be in?
    ❯ JavaScript

.eslintrc.jsファイルが生成され、ESLintを設定できます.

3.ESLintファイルの作成

module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "rules": {
    }
};

環境(env):プロジェクトの使用環境を設定します.

拡張(extends):他のESLint設定を拡張して使用します.上記のファイルでは、ESLint推奨ルールを適用するように設定されています.実際のプロジェクトでは、上記のairbnbまたはprettyerを拡張して使用します.

解析オプション:ESLintをサポートするJavaScript言語オプションを設定できます.

ルール(rules):プロジェクトで自分で上書きするルールを定義します.

4.ESLintチェック

$ node_modules/.bin/eslint test.js次のコマンドで作成したファイルにエラーが発生していることを確認できます.
エラーの例

C:\code\test\test.js
  1:5   error  'foo' is assigned a value but never used  no-unused-vars
  1:11  error  'text' is not defined                     no-undef
  1:16  error  Unnecessary semicolon                     no-extra-semi

✖ 3 problems (3 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

検査命令プラス--fix自動批改no-extra-semi項
もちろん、vscodeに敷くと、合成画面内に自分で表示されます.

2. Prettier

prettier

prettierは、既存のコードに適用されるすべてのスタイルを無視し、所定のルールに従ってコードスタイルを自動的に整理するコードフォーマットです.ESLintで設定されたルールに従ってルールに合わないコードを教えるツールであれば、prettierは、設定されたルールに従ってコードを変更するツールと言える.ESLintは強制的ではありませんが、違いはprettierが強制的であることです.ESLintは、構文エラーを特定し、特定の構文要素に書き込むなど、コード品質に関連する問題を修正するために使用される.Prettierは、1行のコードの最大長さ、タブの長さ、引用符は単一引用符("")または二重引用符(""")などを使用し、コード品質よりも統一符号化スタイルに近いツールです.

特長

は複数のプログラミング言語をサポート

JavaScript

JSX

Flow

TypeScript

CSS, Less, SCSS

JSON

GraphQL

Markdown等

ESLintに接続して使用するのに適しています.

は、さまざまな編集/IDをサポートします.

使用方法

1.Prettierのインストール

$ yarn add prettier

2.Prettierの実行

$ yarn prettier test.jsこの操作を実行すると、

let dongtan=function 
				( 
                	)
    {
  let 
umjunsik  
			=		'text'
return     umjunsik}

厳密なコードは次のとおりです.

let dongtan = function () {
  let umjunsik = "text";
  return umjunsik;
};

これできれいに修正され、ターミナルウィンドウに出力されます
ファイル自体を変更する場合は、--writeを追加します.$ yarn prettier --write test.jsコマンドを入力するとファイル自体が変更されます
2つのツールを同時に使用するには、次の2つのモジュールを追加でインストールする必要があります.

eslint-config-prettier
eslint-plugin-prettier

$ yarn add eslint-plugin-prettier eslint-config-prettier -Dこのように取り付けます.

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

このように設定して使いましょう.
しかし、これらはすべてターミナルでチェックと修正がクレイジーなので、書いておきましょう.

Vscodeの使用方法

最後に、Vscodeで使用してみましょう.
Vscodeから最もよくダウンロードされるESLintとPrettier Extensionを検索
たくさんダウンロードしましたが、どうせいいです.
Vscode設定に入ります.設定に入ると、Search settings入力ウィンドウの下にUser(ユーザー)とWorkspace(ワークスペース)のエントリがあります.ユーザーはVscode自身の設定ですべてのプロジェクトに適用され、Workspaceは現在のプロジェクトにのみ適用されます.vscode/settings.jsonは構成項目を格納します.

ESLintとPrettiterの場合、設定はプロジェクトによって異なることが多いため、ワークスペースごとに設定ファイルを個別に管理することをお勧めします.jsonファイルに直接設定を入力し、右上隅の「設定を開く」(JSON)アイコンをクリックして設定できます.jsonファイルを開きます.

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

改行時間を減らすための設定です
saveのたびに、位置合わせ機能がtrueに設定されます.
prettyer extensionをdepartに設定
毎回saveが整列に設定されます

ESLint Style Guide

-ESLintはすべてを変えるのが難しいので、規定の母音がたくさんあります.
Airbnb Style GuideまたはGoogle Style Guideがある場合は、次のインストール先を特定してから使用しましょう
実はこのスタイリングガイドは反応を使って有名なのでNestを使いましたjsとMySqlが合うかどうか分かりません$ npm i -D eslint-config-airbnb

References

ESLint、Prettierを適用
「Back-end」ESLint，Prettierの設定