Closed5

TypeScript+Prettier+ESLintの設定

3w36zj63w36zj6

ESLint (Linter)

https://github.com/eslint/eslint

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を入れる。

https://github.com/prettier/eslint-config-prettier

bun install --dev eslint-config-prettier
3w36zj63w36zj6

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にクローズされました