PrettierとESLintにゆるく入門！

はじめに

サバイバルTypeScriptを一通り勉強しました！
TypeScriptは軽くreactでさわっただけなので、基本的なことが改めて学べて良かったです。
特にPrettierとESLintは使ったことがなかったので、基礎の基礎が学べたので、まとめてみます。

Prettier

コードのフォーマットを自動整形するツール。

導入

yarn add -D 'prettier@^2'

yarn prettier -v

フォーマット項目

設定ファイル

prettier実行ディレクトリに以下のファイルを用意する。

.prettierrc

{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

設定項目は、上記ドキュメントのAPI Overrideに記載されている。

テスト

以下のファイルを用意

test/
├── node_modules/
└── src/
    └── test.ts
.prettierrc
package-lock.json
package.json
tsconfig.json
yarn.lock

src/test.ts

const test =                (name: string) => {
    console.
     log("Hello,World "
  + name)

}

.prettierrc

{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

チェックのみ実施してみる

yarn prettier src

yarn prettier src
yarn run v1.22.22
$ C:\work\test\node_modules.bin\prettier src
const test = (name: string) => {
console.log('Hello,World ' + name);
};
Done in 1.39s.

Tabが半スぺ4つ、行末にセミコロン、シングルクォートの使用が有効になっていることが確認できた！
（引用ブロックだと確認できてないが）

チェックを行い、自動整形させる

yarn prettier --write src

yarn prettier --write src
yarn run v1.22.22
$ C:\work\test\node_modules.bin\prettier --write src
src\test.ts 1041ms
Done in 2.58s.

対象のファイルが表示され、実際に変更されました！

ESLint

コードが設定したコーディング規約に従っているか確認するツール。

コーディング規約では、たとえば、次のようなことを決めます。

• 変数名はキャメルケースにしましょう。
• functionの中カッコは関数名と同じ行に書きましょう。(次の行に置いてはなりません)
• console.logは消しましょう。

ESLintはデフォルトではTypeScriptをサポートしていないので、別途ライブラリをインストールし機能を拡張する必要があります。

また、以下公式のドキュメントがかなり参考になりました。

導入

サバイバルTypeScriptではAirbnbをextendsするサンプルがあったが、シンプルに導入したかったので少し変えました。

yarn add -D \
  'eslint@^8' \
  '@typescript-eslint/parser@^5' \
  '@typescript-eslint/eslint-plugin@^5'

テスト

以下のファイルを用意

test/
├── dist/
├── node_modules/
├── src/
│   └── test.ts
├── .eslintrc.js
├── .prettierrc
├── package-lock.json
├── package.json
├── tsconfig.eslint.json
├── tsconfig.json
└── yarn.lock

.eslintrc.js

ESLintの設定ファイル。

.eslintrc.js

module.exports = {
    root: true,
    parser: "@typescript-eslint/parser",
    plugins: ["@typescript-eslint"],
    env: {
        browser: true,
        es2021: true,
    },
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        project: "./tsconfig.eslint.json",
        tsconfigRootDir: __dirname,
    },
    ignorePatterns: ["dist"],
    extends: [
        "plugin:@typescript-eslint/recommended",
    ],
    rules: {
        "import/prefer-default-export": "off",
        "@typescript-eslint/quotes": ["error", "double"],
        "no-console": "error",
        camelcase: ["error", { properties: "never" }],
        semi: ["error", "always"],
    },
};

上記したように、ESLintを拡張したり

    plugins: ["@typescript-eslint"],

ルールを定義したりしている。

    extends: [
        "plugin:@typescript-eslint/recommended",
    ],
    rules: {
        "import/prefer-default-export": "off",
        "@typescript-eslint/quotes": ["error", "double"],
        "no-console": "error",
        camelcase: ["error", { properties: "never" }],
        semi: ["error", "always"],
    },

tsconfig.json

TypeScriptのコンパイル設定ファイル。
あまりESLintには関係ない。

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist"
  },
  "include": [
    "src"
  ]
}

tsconfig.eslint.json

.eslintrc.jsから読み取られるファイル。
ESLintを実施するディレクトリやファイルを定義している。
./tsconfig.jsonを継承している。しなくてもよさそう。

tsconfig.eslint.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "allowJs": true
    },
    "include": [
        "src",
        ".*.js",
        "*.js"
    ]
}

チェックのみ実施してみる

npx eslint .

npx eslint .
C:\test\src\test.ts
1:14 error Identifier 'hello_world' is not in camel case camelcase
2:1 error Unexpected console statement no-console
✖ 2 problems (2 errors, 0 warnings)

camelcaseやconsole.logの規約違反が確認できました！

修正して実施

ソースを修正・・・

再度実行してみます

npx eslint . 

npx eslint .
(何も表示されず)

上手く動きました！
簡単で便利ですね。
ちなみにVSCodeとの連携もサクッと済みました。

おわりに

PrettierとESLintは使ったことがなかったのですが、ちゃんと勉強しないとなーと思っていたので、いい勉強になりました！
サバイバルTypeScriptは記載が優しく、こういった開発で避けることのない要素も取り上げられていてとても良かったです。