プラグインの導入

今回はes-lintとprettierを併用して行きたいと思います。

下記のコマンドを実行します。
以下の2つはes-lintとprettierのフォーマットを競合させないように必要らしい

eslint-config-prettier
eslint-plugin-prettier

$ yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier -D

ソースコード側の設定

.vscodeディレクトリ内にextensions.jsonを用意します。

extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
  ]
}

.vscodeディレクトリ内settings.jsonに以下を追記します。

settings.json

{
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

eslintrc.jsと.prettierrcの設定は下記の通り、、
最低限の条件で適用しているのでその他のルールを追加したい場合はextendsに追記していくといいそうです。

rulesにはignoreする条件等を書きますがこちらは最低限にしないとlintの意味がなくなってしまうのでなるべく追加しないようにしたい。

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
    'prettier/react',
  ],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  env: { node: true, es6: true },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-function-return-type': 0,
    'no-restricted-imports': [
      'error',
      {
        patterns: ['../'],
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

..prettierrc

{
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

以上で~~できるはず...！~~ できた！！

追記

vs-codeの拡張機能で下記の2つを追加しないと自動でフォーマットはしてくれませんでした（そりゃそうだ）
・ESLint
・Prettier - Code formatter