tsconfig/eslint/prettier

いつも大体同じ

パッケージを作成するたびに、体大いつも同じようなtsconfig、eslint、prettierの設定をするので、コピペしやすいようにここに僕の設定を晒しておきます。

最初は個々の設定の意味を理解して設定したつもりなのですが、コピペしているとそのうち設定の意味が分からなくなるのは僕だけでしょうか？

インストールするパッケージ

npm i -D \
  typescript \
  eslint \
  eslint-config-google \
  eslint-config-prettier \
  eslint-import-resolver-typescript \
  eslint-plugin-import \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  prettier \
  @trivago/prettier-plugin-sort-imports

tsconfig.jsonの設定

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "outDir": "build",
    "sourceMap": true,
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

.eslintrc.yamlの設定

env:
  browser: true
  es6: true
extends:
  - 'eslint:recommended'
  - 'plugin:react/recommended'
  - 'plugin:react-hooks/recommended'
  - 'plugin:@typescript-eslint/recommended'
  - 'plugin:import/errors'
  - 'plugin:import/warnings'
  - 'plugin:import/typescript'
  - 'plugin:@typescript-eslint/recommended-requiring-type-checking'
  - 'plugin:@typescript-eslint/recommended'
  - 'prettier'
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  sourceType: 'module'
  project: './tsconfig.json'
settings:
  import/resolver:
    typescript:
      alwaysTryTypes: true
  react:
    version: 'detect'
rules:
  'react/prop-types': 'off'
  '@typescript-eslint/no-unused-vars':
    - 'error'
    - argsIgnorePattern: '^_'
      varsIgnorePattern: '^_'
  '@typescript-eslint/explicit-module-boundary-types':
    - 'warn'
    - allowArgumentsExplicitlyTypedAsAny: true
  '@typescript-eslint/prefer-optional-chain': 'error'
  '@typescript-eslint/prefer-nullish-coalescing': 'error'
  '@typescript-eslint/no-use-before-define': 'off'
  '@typescript-eslint/no-redeclare': 'off'
  '@typescript-eslint/strict-boolean-expressions': 'error'
  'import/no-named-as-default': 'off'
  'import/no-named-as-default-member': 'off'
  'import/order':
    - 'warn'
    - 'alphabetize':
        'order': 'asc'

.prettierrc.jsonの設定

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
  "importOrderSortSpecifiers": true
}