Zenn
Open8

フロント開発環境で良さげなlib・プラグイン

TypeScript
ESLint
Prettier
wwwywwwy

vscodeの.settings.json

prettierとeslintが自動で走るように

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
wwwywwwy

コミット時にlinterを走らせる

https://github.com/typicode/husky
https://github.com/okonet/lint-staged

🔽commitでstagingにあるファイルのみesLintが走る設定

package.json
{ 
  "scripts": {
    ....
    "lint-staged": "lint-staged"
  }
}
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-staged
.lintstagedrc.js
const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}
wwwywwwy

.eslintrc.json

.eslintrc.json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "prettier"
  ],
  "plugins": ["neverthrow"],
  "rules": {
    "neverthrow/must-use-result": "error",
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

neverthrow入れてる