Closed5
TypeScript+Prettier+ESLintの設定

Bunを使用する。

Prettier (Formatter)

ESLint (Linter)
bun eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ 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? · 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? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now? · No
@eslint/create-configBunに非対応なので手動で入れる。
bun install --dev \
typescript \
eslint \
eslint-plugin-promise \
eslint-plugin-import \
eslint-plugin-n \
@typescript-eslint/eslint-plugin \
eslint-config-standard-with-typescript
Prettierと競合するのでeslint-config-prettierを入れる。
bun install --dev eslint-config-prettier

TSConfig

VS Code
Settings
.vscode/settings.json
{
"[javascript][typescript][json][yaml][toml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true
}
Extensions
.vscode/extensions.json
{
"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}
このスクラップは2023/11/08にクローズされました