【TypeScript用】es-lintでソースの自動整形を適用させる方法(vs code)

8226 ワード
prettier React VSCode ESLint React テキストリンク

教えてもらった内容のメモなのでこれだけで動作するかはわかりません、、
あとで検証して更新するのでゆるしてください
一応動くことが確認できました！

es-lintの公式でだいたいは書いてある？

プラグインの導入

今回は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