Closed8
TypeScriptプロジェクトの設定
Yamahitsujitsconfigについて
Yamahitsujiextends項目について。
他のtsconfigファイルを継承する設定。
他の項目を設定すると上書くことができる。
循環参照は行えない。
{
"extends": "./configs/base",
"files": ["main.ts", "supplemental.ts"]
}
以下パッケージを使うことで、記述量を少なく推奨設定を利用できそう。
YamahitsujiexactOptionalPropertyTypesオプション
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;
};
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
.eslintignoreファイルを作成してeslintから除外するファイル、ディレクトリを設定。
dist
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
}
}
YamahitsujiPrettierのセットアップ
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"
]
}
.prettierignoreファイルを作成し、フォーマッティングから除外するファイル、ディレクトリを作成する。
dist
*.md
VSCodeでオートフォーマット実行の設定
VSCodePrettier Extensionをインストール。
.settings.jsonに以下の項目を追加。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
以上でオートフォーマットが行われる。
Yamahitsuji参考資料
このスクラップは2022/08/02にクローズされました