Next.js+TypeScript+ESLint(+Prettierいれたかった)で開発環境構築

ぼうびろく

一旦ざーーーっとかいちゃいます！
必要なファイルの中身は下にいけばあるはず〜🌸
これで最低限動くはず。。
自動でlintしてはくれないのでそこも導入したいきもち。。

# フォルダ作成
mkdir myapp
cd myapp

# npmのはじまり
npm init -y

# ワイの環境は6.7.0だったよ
npm -v

# reactさんこんにちわ🙇‍♀️
npm install react react-dom next

# TypeScriptさんこんにちわ🙇‍♀️
npm install @zeit/next-typescript && npm i -D @types/next @types/react @types/react-dom

# ESLintさんこんにちわ🙇‍♀️
npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier

# package.jsonに書きたそう　中身は下記参照
vim package.json

# tsconfig.jsonに書きたそう
vim tsconfig.json

# eslintrc.json
vim eslintrc.json

# ここにindexとかかちこんでいきましょ😏
mkdir pages
cd pages
vim index.tsx

---

書きたそう

package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "eslint src/index.ts",
    "lint:fix": "eslint --fix src/index.ts" 
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "env": { "node": true, "es6": true },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
  }
}

index.tsx

import * as React from "react";

const Index = () => {
  return (
    <div>
      <span>hello</span>
    </div>
  );
};

export default Index;

---

参考

ほぼコピペしてすみません。。

Next.jsチュートリアル翻訳
Next.js + TypeScript 環境を爆速で作る
脱TSLintして、ESLint TypeScript Plugin に移行する