ESLintとPrettierの設定

[rensanrenren]

参考動画(上手くいった)

• 【ESlint/Prettier入門】自動コード整形と構文チェックで開発効率を爆上げしてみよう https://www.youtube.com/watch?v=TTutJJUGMbY

ESLint

• ESLintの公式ドキュメント https://eslint.org/docs/latest/use/getting-started
• JavaScriptのための静的検証ツール
• ファイル内のバグチェックやコーディングスタイルの一貫性を保つ

Prettier

• コードフォーマッター
• ルールに則ってソースコードを整形してくれる
• プロジェクトごとにルールを設定する
• これらをTypeScriptと組み合わせるとソースコードの品質が上がる。
• ファイル保存の時にフォーマットする場合やgitにプッシュ/コミットした時にフォーマットするなど設定ができる。

うまく動かないので違う文献/動画を参照する

• 【ESlint/Prettier入門】自動コード整形と構文チェックで開発効率を爆上げしてみよう https://www.youtube.com/watch?v=TTutJJUGMbY

[rensanrenren]

package.jsonの初期化をする

npm init -y これでpackage.jsonが作成される

npm i -D eslint -Dはdevelopment 開発環境でのみ動くようにする。

新しいファイルを作る .eslintrc を作って、自分の好きなルールを設定できる。eslintの公式ドキュメントを読んで必要な設定をしていく。https://eslint.org/docs/latest/use/getting-started

AirB&Bのeslintの設定を参考にして設定をするのがおすすめ

• サイト https://www.npmjs.com/package/eslint-config-airbnb

Prettier

• Prettierの公式ドキュメント https://prettier.io/docs/en/

git commit時に動くように設定(Husky)

gitにPush,commitするときに自動でeslintで走るようにhuskyを利用してチェックできるような設定をする。

• huskyのサイトhttps://typicode.github.io/husky/
  npm install husky lint-staged --save-dev
lint-stagedはstegeされたものに対してコマンド操作を行えるようにする。

vscodeプラグイン

• プラグインを入れることでコーディング時にerrorやwarningが発生した際に波線が表示される

vscode上の設定で保存した際に自動でeslintとprettierでコードを補正するようにする設定

• json形式で記述できるのでそこで以下の設定を記述する

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

[rensanrenren]

うまく動かない

パッケージのインストール

npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin husky lint-staged

• eslint-config-prettier: ESLintとPrettierを併用する際に使う。
• @typescript-eslint/parser: ESLintでTypeScriptのチェックを行うプラグイン。元々はESLintはJavaScript用だから。
• @typescript-eslint/eslint-plugin: ESLintでTypeScriptを解析できるようにする。
• husky: Gitコマンドをフックに別のコマンドを呼び出せる。
• lint-staged: commitしたファイル(stagingにあるファイル)にlintを実行することができる。

Prettierの設定

• 現代のPCはprintWidthは120で良さそう
• 文末のセミコロンは邪魔になりがちなのでfalse
• デフォルト値で良いものは書く必要ない
• singleQuoteはtrueにしておくと良い

.prettierrc

"printWidth": 120,
    "singleQuote": true,
    "semi": false

ESLintの設定

• prettierはextendsの最後に
• TypeScriptを解析するparserを指定
• tsconfig.jsonのパスに注意
• rootプロパティをtrueにした方が良い

.eslintrc.js :jsのファイルで書く場合

const eslintConfig = {
    env: {
        browser: true,
        es2021: true, //ES6の構文でチェックする
        node: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier", //Prettierのextendsは他のextendsより後に記述する。
    ],
    plugins: ["@typescript-eslint"],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaVersion: 2021, //ES2021の構文でチェックする
        sourceType: "module",
        project: "./tsconfig.json", // Update the path to your tsconfig.json file
    },
    root: true,
    rules: {},
};
module.exports = eslintConfig;

• "prettier/@typescript-eslint"の設定はprettierに統合されているので書かない。
• es2021を使用。時代によって変わる。

Package.jsonの設定

• コマンドの追加
  "lint-fix": "eslint --fix './src/**/*.{js,ts}' "
• srcにある全てのjsとtsのファイルをチェックする。
• **アスタリスク2つ並べると階層がどんなに深くなっても全てを対象とする。
• *アスタリスク1つは「ファイル名はなんでも良い」という意味。