ESLint,Prettierで1行80文字までという設定をしています。

以下のような行を追加したら、89文字だったので、ESLintから警告がでています。

import SignUpTemplate from '../../../components/templates/authentication/SignUpTemplate';

修正しようと思い、以下のように改行をしたのですが、

import SignUpTemplate 
　from '../../../components/templates/authentication/SignUpTemplate';

ファイルを保存すると、

元の89文字の行に自動で修正されてしまいます。

エラーがでて、永遠と保存ができない状態です。。。

設定

以下のような設定を行っています。

.eslintrc

...
  rules: {
    'max-len': [2, { "code": 80 }],

    // eslint official
    'newline-before-return': 'error',
    'no-console': 'warn',
    'no-continue': 'off',
    'require-yield': 'error',
    // for react-app-env.d.ts (https://github.com/facebook/create-react-app/issues/6560)
    'spaced-comment': [
      'error',
      'always',
      {
        markers: ['/'],
      },
    ],

    // @typescript-eslint
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    indent: 'off',
    '@typescript-eslint/indent': 'off',
    '@typescript-eslint/no-unnecessary-type-assertion': 'error',

    // prefer-arrow
    'prefer-arrow/prefer-arrow-functions': [
      'error',
      {
        disallowPrototype: true,
        singleReturnOnly: true,
        classPropertiesAllowed: false
      }
    ],

    // react
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['jsx', 'tsx']
      }
    ],
    'react/jsx-props-no-spreading': [
      'warn',
      {
        custom: 'ignore',
      },
    ],
    'react/prop-types': 'off',
    'react/prefer-stateless-function': 'off',

    // react hooks
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'error',

    // import
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never'
      }
    ],
    'import/prefer-default-export': 'off',
  },
...

.prettierrc

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

package.json

 "devDependencies": {
    ...
    "@types/prettier": "^1.19.0",
    "@types/stylelint": "^9.10.1",
    "@typescript-eslint/eslint-plugin": "^3.0.2",
    "@typescript-eslint/parser": "^3.0.2",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jest": "^23.13.2",
    "eslint-plugin-prefer-arrow": "^1.2.1",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.5",
     ...
    "stylelint": "^12.0.0",
    "stylelint-config-prettier": "^8.0.0",
    "stylelint-config-standard": "^19.0.0",
    "stylelint-order": "^3.1.1"
  },

上記の状態なのですが、アドバイスいただけますでしょうか？

何回かこの状況で苦戦して、適当にいじったら解消されるというのを経験しているのですが、ちゃんと理解をして対処したいと考えています。。。よろしくお願いいたします。

#vc-code #code #teratail #eslint