frontendディレクトリに移動
今回の手順はfrontendディレクトリで行なっていくので、移動します。
% cd frontend/
絶対パスインポートが使えるように、frontend/tsconfig.jsonのcompilerOptionsに設定を追加します。
"compilerOptions": {
〜省略〜
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
},
〜省略〜
},
typesyncをインストール
インストールします。
% yarn add -D typesync
実行できるか確認します。
% yarn typesync
% yarn install
package.jsonのscriptsにpreinstallを追記します。
"scripts": {
〜省略〜
"preinstall": "typesync || :"
},
ESLintとPrettierをインストールして設定
package.jsonのeslint関連パッケージを確認
package.jsonを確認すると、eslint-config-nextが既にインストールされています。
.eslintrcの拡張子を変更
まず.eslintrc.jsonが生成されているので、.eslintrc.jsに拡張子を変更します。
以下のように、module.exports = { にします。
module.exports = {
extends: "next/core-web-vitals",
};
eslint-config-nextの中身を確認
どのようなpuluginが既に含まれているか、 node_modules/eslint-config-next/index.js を確認すると良いでしょう。
パッケージをインストール
prettier, eslint-config-prettier と その他のeslintパッケージをインストールします。
% yarn add -D prettier eslint-config-prettier eslint-config-airbnb @typescript-eslint/eslint-plugin
.eslintrc.jsの編集
extends
extendsを以下の通り編集します。各プラグインルールの推奨設定を適用しています。プラグインは読み込んだだけでは有効化されないので、有効化したいものをextendsで指定します。
module.exports = {
extends: [
'airbnb',
'plugin:@typescript-eslint/recommended',
'next/core-web-vitals',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'prettier',
],
};
parserOptionsの設定を追加する
.eslintrc.jsにperserOptionsを追加します。
module.exports = {
〜省略〜
parserOptions: {
project: './tsconfig.eslint.json',
tsconfigRootDir: __dirname,
},
};
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で少し調整する
このままだと frontend/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の作成
% vim .eslintignore
以下の通り記述します。
build/
public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js
.prettierrcの作成
% vim .prettierrc
以下の通り記述します。
{
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "auto"
}
eslintとprettierのルールが衝突していないか確認
以下のコマンドで確認できます。
% npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'
stylelintをインストールして設定
stylelintをインストール
インストールします。
% yarn add -D 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',
},
};
docker-compose.ymlがある階層に移動します。
% cd ../
VSCode用の.eslintignoreの作成
% vim .eslintignore
以下の通り記述します。
frontend/build/
frontend/public/
frontend/**/coverage/
frontend/**/node_modules/
frontend/**/*.min.js
frontend/*.config.js
frontend/.*lintrc.js
Prettierの拡張をVSCodeにインストールしていると、Prettierによるコード成形は動作しますが、ESLintによるチェックは動作しなくなるはずです。
% mkdir .vscode/
% 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
}
% 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}'",
〜省略〜
},
