はじめに
yarnを使わずにnpmを使ってやります。
個人的に手順をまとめているだけなので、一般的にはイケてないかもしれません。
nodenv
インストール可能なバージョンを確認します。
% nodenv install -l
最新をインストールします。
% nodenv install 19.4.0
nodeのバージョンを設定します。
% nodenv local 19.4.0
確認します。
% nodenv versions % node -v
プロジェクトを作成する
以下のコマンドを実行します。
% npx create-next-app next_js_introduction --ts
next_js_introduction の部分はプロジェクト名です。
% npx create-next-app {プロジェクト名} --ts
実行しますか？と聞かれるので y を入力してEnterします。
Need to install the following packages: create-next-app@13.1.2 Ok to proceed? (y) y
続けてESLintを使うか聞かれたので、Yesを選択しました。
? Would you like to use ESLint with this project? › No / Yes
srcディレクトリを使うか聞かれたので、Yesを選択しました。
Would you like to use `src/` directory with this project? › No / Yes
experimentalのappディレクトリを使うか聞かれたので、Noを選択しました。
Would you like to use experimental `app/` directory with this project? › No / Yes
dev serverを一度起動してみる
プロジェクトのディレクトリに移動します。
% cd next_js_introduction
起動してみます。
% npm run dev
ブラウザで以下のURLにアクセスして確認してみます。
control + c を押して一度止めます。
dev serverのportを変更する
railsとかで3000を使う場合は、package.jsonのscripts.devを以下の通り編集します。
"scripts": {
"dev": "next dev -p 3001",
〜略〜
},
pagesとstylesをsrcディレクトリに移動させる
以前は手でやっていたけど、今回はcreateしたときに生成された。
srcディレクトリを作成します。
% mkdir src/
srcディレクトリに移動させます。
% mv ./pages ./src % mv ./styles ./src
publicディレクトリは移動させません。
TSの絶対パスインポートの設定
これも以前は手でやっていたけど、今回はcreateしたときに生成された。
絶対パスインポートが使えるように、tsconfig.jsonのcompilerOptionsに設定を追加します。
"compilerOptions": {
〜省略〜
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
〜省略〜
},
typesyncをインストール
インストールします。
% npm install --save-dev typesync
package.jsonのscripts.typesyncを追加します。
"scripts": {
〜省略〜
"typesync": "typesync"
},
実行できるか確認します。
% npm run typesync
npm installしておきます。
% npm install
ESLintとPrettierをインストールして設定
package.jsonのeslint関連パッケージを確認
package.jsonを確認すると、eslint-config-nextが既にインストールされています。
.eslintrcの拡張子を変更
まず.eslintrc.jsonが生成されているので、.eslintrc.jsに拡張子を変更します。
.jsにするとexportする必要があるので、以下のように、module.exports = { にします。
module.exports = {
extends: "next/core-web-vitals",
};
eslint-config-nextの中身を確認
どのようなpluginが既に含まれているか、 node_modules/eslint-config-next/index.js を確認すると良いでしょう。
パッケージをインストール
prettier, eslint-config-prettier と その他のeslintパッケージをインストールします。
% npm install --save-dev prettier eslint-config-prettier eslint-config-airbnb @typescript-eslint/eslint-plugin
.eslintrc.jsの編集
extends
extendsを以下の通り編集します。各プラグインルールの推奨設定を適用しています。プラグインは読み込んだだけでは有効化されないので、有効化したいものをextendsで指定します。
module.exports = {
extends: [
'airbnb',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'next/core-web-vitals',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'prettier',
],
};
plugin:import については「 eslint-plugin-import - npm 」を参照。
parserOptionsの設定を追加する
.eslintrc.jsにperserOptionsを追加します。
module.exports = {
〜省略〜
parserOptions: {
project: './tsconfig.eslint.json',
tsconfigRootDir: __dirname,
},
};
.eslintrc.jsと同じディレクトリ内に、tsconfig.eslint.jsonを新規作成します。
% vim tsconfig.eslint.json
以下の通り記述します。
{
"extends": "./tsconfig.json",
"include": [
"src/**/*.js",
"src/**/*.jsx",
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
plugins
.eslintrc.jsにpluginsを追加します。pluginsの配列に加えることで、ルールが使用可能になります。
module.exports = {
〜省略〜
plugins: [
'@typescript-eslint',
],
};
root: trueにする
frontendプロジェクトのrootディレクトリなので、root: true,にしておきます。
module.exports = {
〜省略〜
root: true,
};
rulesで少し調整する
このままだと src/pages/index.tsx などでeslintのエラーが出ているのでrulesで少し調整します。
module.exports = {
〜省略〜
rules: {
'react/function-component-definition': [
2,
{ namedComponents: 'arrow-function' },
],
'react/jsx-filename-extension': [
'error',
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
],
'react/jsx-props-no-spreading': 'off',
},
};
.eslintignoreの作成
.eslintrc.jsと同じ階層に.eslintignoreを作成します。
% vim .eslintignore
以下の通り記述します。環境によってはディレクトリパスを少し調整する必要があるかもしれません。
build/ public/ **/coverage/ **/node_modules/ **/*.min.js *.config.js .*lintrc.js
.prettierrcの作成
デフォルト設定だとダブルクォートだったりするので、.prettierrcを作成して少し設定を変更します。
% vim .prettierrc
以下の通り記述します。
{
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "auto"
}
eslintとprettierのルールが衝突していないか確認
以下のコマンドで確認できます。
% npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'
stylelintをインストールして設定
stylelintをインストール
% npm install --save-dev stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order
.stylelintrc.jsの作成
% vim .stylelintrc.js
以下の通り記述します。
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order',
],
plugins: [
'stylelint-order',
],
ignoreFiles: [
'**/node_modules/**',
],
rules: {
'string-quotes': 'single',
},
};
VSCodeの設定
親ディレクトリに移動する
Workspaceのrootに移動します。
% cd ../
VSCode用の.eslintignoreを作成する
VSCodeで.eslintrc.jsを開くとlintエラーが出ているのでWorkspaceのrootに.eslintignoreを作成します。
以下の通り記述して、Workspaceのrootに設置しました。pathはプロジェクトに合わせて適宜変更してください。
next_js_introduction/build/ next_js_introduction/public/ next_js_introduction/**/coverage/ next_js_introduction/**/node_modules/ next_js_introduction/**/*.min.js next_js_introduction/*.config.js next_js_introduction/.*lintrc.js
Prettierの拡張をVSCodeにインストールしていると、Prettierによるコード成形は動作しますが、ESLintによるチェックはしなくなるはずです。
.vscodeディレクトリの作成
% mkdir .vscode/
.vscode/settings.jsonの作成
% vim .vscode/settings.json
以下の通り記述します。（これらが何なのか理解不足なので後でちゃんと読む必要あり。）
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false,
"[graphql]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.formatOnSave": true
},
"[json]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.formatOnSave": true
},
"editor.lineNumbers": "on",
"editor.rulers": [
80
],
"editor.wordWrap": "on",
"eslint.packageManager": "yarn",
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"npm.packageManager": "yarn",
"typescript.enablePromptUseWorkspaceTsdk": true
}
.vscode/extensions.jsonの作成
% vim .vscode/extensions.json
以下の通り記述します。
{
"recommendations": [
"CoenraadS.bracket-pair-colorizer-2",
"dbaeumer.vscode-eslint",
"donjayamanne.githistory",
"esbenp.prettier-vscode",
"msjsdiag.debugger-for-chrome",
"oderwat.indent-rainbow",
"stylelint.vscode-stylelint",
"VisualStudioExptTeam.vscodeintellicode",
"vscode-icons-team.vscode-icons",
"wix.vscode-import-cost"
],
"unwantedRecommendations": []
}
package.jsonのscriptsを編集する
scriptsに以下の行を追加...とりあえずしないですが、後で様子を見ながらするかもしれません。
"scripts": {
〜省略〜
"fix": "npm run -s format && npm run -s lint:fix",
"format": "prettier --write --loglevel=warn 'src/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}'",
"lint": "npm run -s lint:style; npm run -s lint:es",
"lint:fix": "npm run -s lint:style:fix && npm run -s lint:es:fix",
"lint:es": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
"lint:es:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
"lint:conflict": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'",
"lint:style": "stylelint 'src/**/*.{css,less,sass,scss}'",
"lint:style:fix": "stylelint --fix 'src/**/*.{css,less,sass,scss}'",
〜省略〜
},
