Zenn
Closed8

TypeScriptプロジェクトの設定

TypeScript
ESLint
Prettier
YamahitsujiYamahitsuji

tsconfigについて

YamahitsujiYamahitsuji

exactOptionalPropertyTypesオプション

interfaceやtypeオブジェクトのオプショナルプロパティにundefinedを代入することができなくなる。
以下はエラーが起きる。

const newHuman = (name: string, age?: number) => {
  const human: Human = {
    name: name,
    age: age,
  };
  return human
};

type Human = {
  name: string;
  age?: number;
};

// Type '{ name: string; age: number | undefined; }' is not assignable to type 'Human' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
//   Types of property 'age' are incompatible.
//     Type 'number | undefined' is not assignable to type 'number'.
//       Type 'undefined' is not assignable to type 'number'.

undefinedを代入可能にするには、以下のようにプロパティの型に明示的にundefinedを記入する必要がある。

type Human = {
  name: string;
  age?: number | undefined;
};
YamahitsujiYamahitsuji

ESlintのセットアップ

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

で必要なパッケージをインストール。

eslint --initで対話形式にeslintを設定する。

$npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / 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
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

https://typescript-eslint.io/docs/linting/

.eslintignoreファイルを作成してeslintから除外するファイル、ディレクトリを設定。

dist
YamahitsujiYamahitsuji

ReactでHooksを使う場合はeslint-plugin-react-hooksもインストール。
npm install eslint-plugin-react-hooks --save-dev

.eslintrc.jsonに以下の設定を追加。

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

https://ja.reactjs.org/docs/hooks-rules.html#eslint-plugin

YamahitsujiYamahitsuji

Prettierのセットアップ

npm install --save-dev prettier

でprettierをインストール。
.prettierrc.jsonをルートに作成し、設定を記述。
今回は以下の設定を記述。

{
  "semi": false,
  "singleQuote": true
}

続いてeslintとのルールの重複を避けるため、eslint-config-prettierをインストール。

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

.eslintrc.jsonのextendsにprettierを追加する。

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

https://prettier.io/docs/en/install.html#eslint-and-other-linters

.prettierignoreファイルを作成し、フォーマッティングから除外するファイル、ディレクトリを作成する。

dist
*.md
YamahitsujiYamahitsuji

VSCodeでオートフォーマット実行の設定

VSCodePrettier Extensionをインストール。
.settings.jsonに以下の項目を追加。

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

以上でオートフォーマットが行われる。

このスクラップは2022/08/02にクローズされました