ESLint+Prettier+EditorConfig+Type Scriptの設定

27319 ワード
ESLint front end Prettier editorconfig テキストリンク
プロジェクトコラボレーションでは、開発者ごとにコードスタイルが非常に異なります.したがって、TypeScriptでのESLint、Prettier、およびEditorConfigの応用を含む、コード品質を向上させる多くのライブラリが登場した.

基礎作業


まず、public/index.htmlパスで最もスケルトンのあるhtmlファイルを生成します.
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title> Formater </title> 
  </head> 
  <body> 
    <div id="root" />
  </body>
</html>
App.tsxおよびindex.tsxを生成する前に、関連するライブラリをインストールします.
npm install react react-dom @types/react @types/react-dom
yarn add react react-dom @types/react @types/react-dom
次に、src/App.tsxおよびsrc/index.tsxを生成する.
// App.tsx

import React from 'react';

const App = () => {
  return (
    <div>
      <h1> Formatter </h1>
    </div>
  );
}

export default App;
// index.tsx

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Editor Config設定


EditorConfigを使用する理由は,開発者ごとにコードを記述するIDEが異なるためである.この場合、.editorconfigファイルを使用してコードのフォーマットを管理できます.

私の環境はVisual Studioコードなので、対応する拡張子がインストールされています.
次に、EditorConfigをGlobalに設定します.
npm install -g editorconfig
yarn global add editorconfig
ファイルの作成を開始します.
一番上のルートフォルダに.editorconfigファイルを作成します.
# http://editorconfig.org
root = true

[*.{js,ts,tsx,json,yml,yaml}]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
最も主要な属性を見てみましょう.end_of_line:line-break設定indent_style:hard-tab(tab)、soft-tab(space)分離indent_size:間隔寸法insert_final_newline:最後に新しいローを追加trim_trailing_whitespace:行ヘッダーの空白文字を削除

Prettier設定


Prettierは、コードフォーマットを管理するためのライブラリです.Editor Configより豊富なFormatを設定できるので、一緒にPrettierを設定したほうがいいようです.
まず、次のように拡張します.

次にPrettierをインストールします.
npm install -D prettier
yarn add -D prettier
ファイルの作成を開始します.
ルートパス上に.prettierrc.jsonファイルを生成します.
{
  "printWidth": 150,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "jsxBracketSameLine": true,
  "jsxSingleQuote": false
}
上のルールは個人的に好きなルールです.しかし、誰もが、チームごとに自分が望んでいるコードルールを持っています.これは正式な書類を見て、一つ一つ設定することをお勧めします.

ESLint設定


ESLintは、コード品質を向上させるためのルールを定義してもよいし、複数のPluginや推奨されるルール、有名サイトのルールなどをコードに適用してもよい.ruleと一致しない箇所があれば、このオプションを確認して閉じることができますが、ruleを十分に考慮して閉じる必要があります.
まず、拡張機能は次のとおりです.

次に設定を行います.
npm install -g eslint
yarn global add eslint
Eslintをglobalにインストールするには、eslint --initコマンドを使用します.
このコマンドを実行し、次のように応答します.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
このコマンドを実行してインストールするライブラリ、TypeScript、Prettiter、および後で必要なLint設定のライブラリのパッケージは、次のようになります.
{
  "name": "formatter",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "@types/react": "^17.0.21",
    "@types/react-dom": "^17.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "editorconfig": "^0.15.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-react": "^7.25.2",
    "prettier": "^2.4.1",
    "typescript": "^4.4.3"
  }
}
その後生成された.eslintrc.jsonファイルは次のとおりです.
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}
ここでは多くの設定を追加しました.
1.Prettierのバインド
2.Typeスクリプトの使用
3.airbnb-baseに設定
4.index.tsxおよびApp.tsxファイルのエラーを削除
そのため、完了したESLintは以下のように設定されています.
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "ignorePatterns": ["node_modules/"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb-base",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "no-use-before-define": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}
ここはno-use-before-define閉鎖されています.これは.

React定義は正しく使用されていますが、エラーが発生しています.関連ルールを読んでみると、護衛問題を検討しているのですが、offを譲らないと不快なエラーが続き、letとconstでコードが書かれているのでoffと判断しても大丈夫です.
また、ファイルの読み込み時に拡張子を注意深く書き込むオプションとして、import/extensionsに対してOverrideを作成しました.拡張子の使用が苦手なスタイルの拡張子のチェックを変更しました.

の最後の部分


実際,ESLintとPrettierの設定は何度も試みたが,Editor Configを初めて導入した.最初はPrettierの性格に似ていたのではないでしょうか.という思いもありましたが、全く違う性格でワンピースの三大将のようにフロント環境設定に含めるべきでした.一緒に使うことをお勧めします.

リファレンス


ESLint公式文書
Prettier公式ドキュメント
EditorConfig公式ドキュメント
No-use-before-defineドキュメント
import/extensionsコメントブログ
画面解像度に基づいて調理中に移動するレイヤ位置(float&left)を決定する
メッセージ-作成者のアップグレード