Zenn
Closed10

Next.js + TypeScript (+ ESLint + Prettier + husky + EditorConfig) の環境構築

Next.js
TypeScript
ESLint
Prettier
editorconfig
lemonadernlemonadern

プロジェクト作成

yarn create next-app --typescript
lemonadernlemonadern

src ディレクトリをつくる

mkdir src して、そこに pages/ や styles/ を入れる

lemonadernlemonadern

パスのエイリアスを追加

tsconfig.json
{
  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "/*": ["*"]
+    },
  // 省略 
  }
}

@/でsrcから、/でトップからのパスを書ける

lemonadernlemonadern

tsconfig の設定

https://github.com/tsconfig/bases を使う
Next.js 用のものもあるが、それはstrict: falseなので論外

型チェックを厳しくするオプションが全て入っている、strictestを選ぶ

yarn add -D @tsconfig/strictest

tsconfig.json に追加

tsconfig.json
{
+ "extends": "@tsconfig/strictest/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    // 省略
  },
  // 省略
}

要らない設定を消す

tsconfig/bases と重複していて必要ない設定項目を削除しておく

tsconfig.json
{
  "extends": "@tsconfig/strictest/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "/*": ["*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
-   "skipLibCheck": true,
-   "strict": true,
-   "forceConsistentCasingInFileNames": true,
    "noEmit": true,
-   "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
lemonadernlemonadern

ESLint の設定

静的解析にESLint を利用する
Next にはデフォルトでESLint が入っているが .eslintrc.json は一旦削除

rm .eslintrc.json

対話式で設定を作成できるコマンドを利用する

yarn create @eslint/config

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
▸ React
  Vue.js
  None of these

? Does your project use TypeScript? ‣ No / Yes # Yes を選択

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

? How would you like to define a style for your project? … 
▸ Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? … 
  Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
▸ Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? … 
▸ JavaScript
  YAML
  JSON

Checking peerDependencies of eslint-config-google@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.0 @typescript-eslint/parser@latest
? Would you like to install them now with npm? ‣ No / Yes # No を選択

eslint 関連のものを yarn でインストールする

yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.0 @typescript-eslint/parser@latest

Next 用の設定を eslintrc.js に追加する

eslintrc.js
module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
  },
  'extends': [
    'plugin:react/recommended',
    'google',
+   'next/core-web-vitals',
  ],
  'parser': '@typescript-eslint/parser',
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true,
    },
    'ecmaVersion': 'latest',
    'sourceType': 'module',
  },
  'plugins': [
    'react',
    '@typescript-eslint',
  ],
  'rules': {
  },
};
lemonadernlemonadern

ESLint の設定 (2)

import 関連の設定が可能になる eslint plugin を導入する

yarn add -D eslint-plugin-import eslint-import-resolver-typescript @typescript-eslint/parser

import らへんの順番や改行、ルールを指定できる

eslintrc.js にplugin として追加

eslintrc.js
module.exports = {
  // 省略
  'plugins': [
    'react',
    '@typescript-eslint',
+    'import',
  ],
  // 省略
};

import order関連の好きな設定を追加する

eslint-plugin-imports のドキュメント
rules に書く

eslintrc.js
'rules': {
    'import/order': ['error', {
      'newlines-between': 'always', // グループ間に空白行が入る
      'alphabetize': {
        'order': 'asc', // アルファベットの昇順に並び替えられる
      },
    }],
  },
lemonadernlemonadern

Prettier の設定

コードフォーマットに Prettier を利用する。
ESLint にもコードをfixする機能はあるが、Prettierにはより細かいルールが多く、コードの見やすさと品質を保つために便利な機能が多い
もちろんeslint と競合しうるので、競合しないような設定にする必要がある

prettier と、eslint-config-prettier をインストールする

yarn add -D prettier eslint-config-prettier

eslintrc.js の extends の最後に prettierを追加する

eslintrc.js
  'extends': [
    'plugin:react/recommended',
    'google',
+   'prettier', // 最後に追加する
  ],

prettier の設定ファイルを作る

echo "module.exports = {}" > .prettierrc.js

好きな設定を追加する

prettierrc.js
{
+ trailingComma: 'es5',
+ tabWidth: 2,
+ semi: false,
+ singleQuote: true,
}

eslint と足並みを揃える

ESLint ではgoogleのスタイルガイドを指定しているので、やりたい設定やPrettierで指定した設定と競合してしまうことがある
Pretteirで指定したものにESLint のルールを合わせる

eslintrc.js
  'rules': {
    'react/react-in-jsx-scope': 'off'
    'semi': ['error', 'never'],
    'require-jsdoc': ['off'],
    // ...
  },
lemonadernlemonadern

VSCode 用の設定

VSCode でファイルを保存したときに自動でフォーマットされるようにする

.vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },
  "editor.formatOnSave": true
}

プロジェクト用に、推奨の拡張機能を設定する

  • VSCode で入れておいてほしい拡張機能を開き、Cmd Shift Pでコマンドパレットを開く
  • Extensions: Add Extension to Workspace Folder Recommendations を選択する

.vscode/extensions.json にreccomendationsが追加される

.vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

これで、このプロジェクト推奨の拡張機能として設定できた

lemonadernlemonadern

git commit 時に自動で lint / format される設定

husky および lint-staged を利用する
インストール

yarn add -D husky lint-staged

初期設定

yarn husky install

設定を追加

yarn husky add .husky/pre-commit "yarn lint-staged"

.lintstagedrc.json を作成し、以下のようにする

.lintstagedrc.json
{
  "*.{ts,tsx}": "eslint --fix",
  "*.{ts.tsx,json,md}": "prettier --write"
}

これでコミット時にフォーマットされるようになる

lemonadernlemonadern

EditorConfig の設定

EditorConfig を利用すると、改行コードや文字コード、インデントのスタイルなどを指定できる。
VSCode に限らず あらゆるエディタで EditorConfig のプラグインを使えば、統一したスタイルを利用できる。(プラグイン一覧)

.editorconfig
root = true 

[**/*.{js,jsx,ts,tsx,css,html,md,yml,yaml,json}]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2

VSCode ユーザのために、推奨の拡張機能を追加しておく

.vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
+   "editorconfig.editorconfig"
  ]
}
このスクラップは2022/04/25にクローズされました