PrettierとEslintを導入する。

JavaScript

既存のプロジェクトフォルダに移動する。

npm install --save-dev typescript
npx tsc --init

–save-devで開発用にtypescriptのコンパイラをインストールする。
続いてtypescriptの初期化をするため、tsc –initする。
これでtsconfig.jsonファイルが作成される。

続いてprettierのインストール。

npm install --save-dev prettier
npm install -d eslint-config-prettier

eslint等のlinterと一緒に使う場合には、以下のリンクのようにeslint-config-prettier等を使うように書いてあります。なのでこれらも一緒にインストールします。
インストールが終われば.prettierrcファイル（コンフィグ）も作成します。
そして.prettierignoreも作成します。gitignore的なやつですね。フォーマットから除外するファイルを指定します。ほとんどgitignoreと同じ内容を記述することになります。

// .prettierrc
{
    "printWidth": 450,
    "tabWidth": 4,
    "quoteProps": "as-needed",
    "semi": true,
    "singleQuote": true,
    "arrowParens": "avoid"
}
// .prettierignore
node_modules/
dist/
temp/
.vs/
src/content/js/lib/

*.html
package.json
package-lock.json

prettierを直接コマンドで実行できます。
package.jsonに以下のような感じで適当に登録します。

"scripts": {
  "fix": "prettier --write src/content/ts/",
  "lint": "prettier --check src/content/ts/"
},

prettier –checkコマンドは確認だけ。–writeにすると整形して保存してくれます。
ただし、わざわざ実行するのは面倒ですし、エディタに拡張機能がある場合が多いので後述しますがエディタ任せで実行します。

Install · Prettier
First,installPrettierlocally:
prettier.io
prettier/docs/integrating-with-linters.md at 554b15473dd4032a036d7db91a8f579e624c9822 · prettier/prettier
Prettierisanopinionatedcodeformatter.Contributetoprettier/prettierdevelopmentbycreatinganaccountonGitHub.
github.com

ESLINTのインストール

npm i -d eslint
npx eslint --init

eslintをインストールして–initすると、対話的に設定を作成できます。
.eslintrc.json形式の設定ファイルが生成されます。
この設定ファイルにprettierとeslintを併用するための設定を追記していきます。

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "prettier",
        "prettier/@typescript-eslint"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

追記するのはextendsの項目です。
私はtypescriptも利用するため、prettierとprettier/@typescript-eslintを追記しました。
下のリンクで書いてある通り、prettierに関する設定はextendsの一番下に書きましょう。

Then, add eslint-config-prettier to the “extends” array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
TurnsoffallrulesthatareunnecessaryormightconflictwithPrettier.-prettier/eslint-config-prettier
github.com

rulesは自作するのも楽しいのですが、オレオレ実装になってしまっては意味がありません。
extendsにairBnBとかGoogleとかメジャーな規約を入れましょう。

私は最初にairBnBを選択したのですが、ルールが厳しすぎるため”eslint:recommended”に変えました。
自分のコードの3割ほどが赤くなっちゃったので、、、
関数の宣言前に使うなっていう警告が大半だったけど、関数宣言はホイスティングされるんだから何も問題ないと個人的には思うんですけどねぇ。とくにC#とかでは関数自体は後ろに書いてあって、ほぼ先頭になるコンストラクタ等で関数を平気で呼び出しますし。
C# likeなjavascriptコード規約とかないのかな？

    "extends": [
        "eslint:recommended",
        // "airbnb-base",
  //これは個人開発では厳格すぎる。for ofも怒られるし。
        "prettier",
        "prettier/@typescript-eslint"
    ],

Editorにprettierとeslintの拡張機能をインストール

vscodeを使います。
特に何も考えずに拡張機能をインストールします。
Eslintは実行に許可が必要なのでVSCodeの右下のEslintマークが暗くなっていたらクリックして許可しましょう。


prettierに関してはVSCode上で右クリック等からフォーマットを行うと、どの方法でフォーマットするか聞かれます。ここでPrettierを選べばOKです。

便利な設定として、VSCodeのSettingからFormat On SaveをOnにしましょう。
保存時に自動的に整形されます。
チーム開発する場合はUser設定ではなく、WorkSpaceの設定としてFormatOnSaveをOnにして、.vsフォルダごとGitで管理してしまえばよいと思います。
コミット時に成形するようにするハックもあるようですが、保存時に都度整形した方が自分が書いてるコードがどう書き換えられているのかがすぐわかりますし、なにより設定が楽です。

関連記事

コメント