logo
/
Typescript-ReactのLint・Format設定
2022-10-28
Loading...

Format

prettier
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all", // これは必須でもデフォルトも多分これ
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

Lint

eslint

Import

上の階層の相対インポートは可読性を禁止

{
	rules: {
	    "no-restricted-imports": ["error", { "patterns": ["../"] }],
	}
}

imports/order

{
	rules: {
	    "import/order": [
	      "warn",
	      {
	        "groups": [
	          "builtin",
	          "external",
	          "internal",
	          "parent",
	          "sibling",
	          "index",
	          "object",
	          "type"
	        ],
	        "pathGroups": [
	          {
	            "pattern": "{next,next/**,react,react-dom/**,react-router-dom}",
	            "group": "builtin",
	            "position": "before"
	          }
	        ],
	        "pathGroupsExcludedImportTypes": ["builtin"],
	        "alphabetize": {
	          "order": "asc"
	        },
	        "newlines-between": "always-and-inside-groups"
	      }
	    ]
	}
}

依存関係のチェック(strict-dependencies)

Loading...

index.ts以外からは禁止

Loading...
{
    rules: {
        'no-restricted-imports': [
            'error',
            {
                patterns: ['@/features/*/*'],
            },
        ],
    // ...rest of the configuration
}

overrides

設定というよりは機能の一部で、「この種類のファイルにはこのルール当てなくていいんだよなー」っていうのをeslint-disabledコメントでオフにするのではなく設定する
"overrides": [
  {
    "files": ["*.stories.tsx", "src/pages/**/*"],
    "rules": {
      "import/no-default-export": "off",
    }
  },
  {
    "files": ["*.test.ts", "*.mock.ts"],
    "rules": {
      "max-lines": "off",
    }
  }
],

参考

取り入れたい

タグ