Open8
フロント開発環境で良さげなlib・プラグイン
![wwwy](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
eslint-tailwind
tailwindのクラス指定順序を整理してくれる
![wwwy](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
eslint-prettier
eslintとprettierを併用するときにprettierと重複しないようにするプラグイン。必須
![wwwy](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
import order
moduleの読み込み順序を整理してくれる
![wwwy](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
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](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
コミット時にlinterを走らせる
🔽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](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
typo check
![wwwy](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
.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入れてる
![wwwy](https://res.cloudinary.com/zenn/image/fetch/s--0wXjhbkw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4073a0d3c9.jpeg)
typescript-eslint
https://github.com/typescript-eslint/typescript-eslint
keyにもno-unused-varsがつくので入れる。
type hoge = { [key: string]: string }