フロントエンドの開発環境を整える | Mac + Docker + Rails + Next.js その0037

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',
  },
};

VSCodeの設定

親ディレクトリに移動する

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によるチェックは動作しなくなるはずです。

.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}'",
    〜省略〜
  },