フォーマッタ
保存時にフォーマッタをかけたいので定番のESLintとPrettierを使用する。
まずは以下でそれぞれインストール。
# ESLint
npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
# Prettier
npm i --save-dev prettier eslint-config-prettier
# ESLint初期化
npx eslint --initESLint初期化で.eslintrc.jsが生成されるので以下の設定を追加する。
module.exports = {
//・・・略・・・
extends: [
//・・・以下を追加・・・
'prettier',
],
};続いてPrettierの設定を行う。.prettierrc.jsを作成して設定を行う。
設定できるオプションは公式を参照する。（以下は自分の設定）
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: true,
singleQuote: true,
};後はコード保存時に自動でフォーマッタをかけたい。
開発環境としてVSCodeを使っているのでフォーマッタの設定のためにそれぞれの拡張機能をインストールする。
インストール後、VSCodeのフォーマッタの指定と保存時にフォーマッタをかける設定を有効にする。（デフォルトフォーマッタを個別言語だけに設定したい場合は言語ごとの設定の中で指定する）
// ・・・省略・・・
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
// ・・・省略・・・以上で設定完了。