mizuko
0
0
Next.jsの開発環境設定周りまとめ
Next.jsの.vscode/setting.jsonの設定
3か月前
.vscode/setting.jsonを以下にして、saveと同時に自動反映
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.fixAll.stylelint": "explicit" }, "stylelint.validate": ["css", "javascriptreact"] }
Next.jsで使っているeslintの設定
3か月前
結構制約が厳しいstandard-with-typescriptをベースに、以下をカスタマイズしている
- tailwindcss/recommendedでクラスの並びを自動で成形させる
- 型定義はtypeを使用する(これはinterfaceへするか迷い中)
- import文の自動並び替え
- unused-importsで未使用のimport削除
{ "env": { "browser": true, "es2022": true }, "extends": [ "next/core-web-vitals", "standard-with-typescript", "prettier", "plugin:tailwindcss/recommended" ], "plugins": ["unused-imports", "tailwindcss"], "rules": { /* JSX・TSXファイルで import React from "react"; を記載しなくてもエラーとしない */ "react/react-in-jsx-scope": 0, /* ReactコンポーネントがdisplayNameプロパティを持たないことを許容する */ // "react/display-name": 0, /* 型定義はtypeを使用する */ "@typescript-eslint/consistent-type-definitions": ["error", "type"], /* import文の並び替え */ "import/order": [ "error", { "groups": [ "builtin", "external", "internal", ["parent", "sibling", "index"], "object", "type" ], "alphabetize": { "order": "asc", "caseInsensitive": true }, "newlines-between": "never", "pathGroupsExcludedImportTypes": ["react"], "pathGroups": [ { "pattern": "react", "group": "external", "position": "before" }, { "pattern": "react*", "group": "external", "position": "before" }, { "pattern": "next", "group": "external", "position": "before" }, { "pattern": "next*", "group": "external", "position": "before" }, { "pattern": "@/constants/**", "group": "internal", "position": "before" }, { "pattern": "@/helpers/**", "group": "internal", "position": "before" }, { "pattern": "@/utils", "group": "internal", "position": "before" }, { "pattern": "@/utils/**", "group": "internal", "position": "before" }, { "pattern": "@/hooks/**", "group": "internal", "position": "before" }, { "pattern": "@/features/**", "group": "internal", "position": "before" }, { "pattern": "@/components/**", "group": "internal", "position": "before" }, { "pattern": "@/components/ui-parts/**", "group": "internal", "position": "after" } ] } ], /* null assertion許可 */ "@typescript-eslint/no-non-null-assertion": "off", /* 未使用のimport削除 */ "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "off", "unused-imports/no-unused-imports": "error", "unused-imports/no-unused-vars": [ "warn", { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" } ], /* 改行ルール */ "padding-line-between-statements": [ "error", { "blankLine": "always", "prev": "*", "next": "return" }, { "blankLine": "always", "prev": "*", "next": "function" }, { "blankLine": "always", "prev": "*", "next": "if" }, { "blankLine": "always", "prev": "if", "next": "*" }, { "blankLine": "always", "prev": "*", "next": "block" }, { "blankLine": "always", "prev": "block", "next": "*" } ], /** カスタムクラスを許可 */ "tailwindcss/no-custom-classname": "off", /** handleSubmitのvoid returnを許可 */ /** https://github.com/orgs/react-hook-form/discussions/8622#discussioncomment-4060570 */ "@typescript-eslint/no-misused-promises": [ 2, { "checksVoidReturn": { "attributes": false } } ], /** falsyな値の暗黙的なチェックを許可 */ "@typescript-eslint/strict-boolean-expressions": "off" }, "parserOptions": { "ecmaVersion": 13 }, "ignorePatterns": ["**/*.js"] }
Next.jsで使っているprettierの設定
3か月前
.prettierrc
{ "singleQuote": true, "jsxSingleQuote": true, "tsxSingleQuote": true, "semi": true, "tabWidth": 2 }