Zenn
👷‍♀️

[Next.js(Typescript)] プロジェクト作成とLinter,Formatterの基本設定

2022/10/31に公開
Next.js
TypeScript
Prettier
tech

Next.jsのプロジェクトを作成し、Linter,Formatterの設定をVSCodeで行う際の手順です。

プロジェクトの作成

作成

yarn create next-app {app-name}
cd {app-name}
yarn dev

正常に動けば（= ローカル環境で初期ページが表示されれば）OK

Typescriptを導入

touch tsconfig.json
yarn add -D typescript @types/react @types/node

デフォルトで作成されているjsファイルの拡張子を変更する

pages/_app.js → pages/_app.tsx へ変更
pages/index.js → pages/index.tsx へ変更

yarn dev

正常に動けば（= ローカル環境で初期ページが表示されれば）OK

Linter,Formatterの設定

prettierのインストール

yarn add -D prettier eslint-config-prettier

.eslintrc.jsonのextendに”prettier”を追加しprettierのルールを最優先とする
prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

{
 "extends": ["next", "prettier"]
}

package.jsonにフォーマットのルールを追加する（prettierの箇所。ルールの詳細はこちら。）

{
  "name": "grit-nft-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "prettier": {
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "printWidth": 100
  },
  
  ...

settings.jsonに設定を追加し、保存時にフォーマットが適用されるようにする

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

以上で、保存時に自動フォーマットされるプロジェクトが作成できていると思います。

参考

"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0"
"@types/node": "^18.11.7",
"@types/react": "^18.0.24",
"eslint": "8.26.0",
"eslint-config-next": "13.0.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"typescript": "^4.8.4"
GitHubで編集を提案

Discussion