eslint-tailwind

tailwindのクラス指定順序を整理してくれる

wwwy

eslint-prettier

eslintとprettierを併用するときにprettierと重複しないようにするプラグイン。必須

wwwy

import order

moduleの読み込み順序を整理してくれる

wwwy

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
  }
}

wwwy

コミット時に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],
}

wwwy

typo check

https://cspell.org/

wwwy

.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入れてる

wwwy

typescript-eslint

https://github.com/typescript-eslint/typescript-eslint

keyにもno-unused-varsがつくので入れる。
type hoge = { [key: string]: string }