VSCode にて ESLintと Prettierの設定が競合します。。。|teratail

VSCode にて ESLintと Prettierの設定が競合します。。。|teratail

問題ESLint,Prettierで1行80文字までという設定をしています。以下のような行を追加したら、89文字だったので、ESLintから警告がでています。 import SignUpTemplate from '../../../components/templates/authenticat

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Static Code Analysis: What It Is? How to Use It?

Static code analysis is a method of debugging by examining source code before a program is run. It's done by analyzing a set of code against a set (or multiple sets) of coding rules. Static code analysis and static analysis are often used interchangeably, along with source code analysis.

How to Find the Stinky Parts of Your Code (Part II)

There are more code smells. Let’s keep changing the aromas. We see several symptoms and situations that make us doubt the quality of our development. Let's look at some possible solutions.

Installing and using ESLint on your existing JavaScript code

ESLINT helps to increase productivity, write your code according to standard and flag errors when your code base is breaking style guide…

Let's Talk About Selling Your Code

In this video, I'll be talking about when do I think code is ready to be sold. 🔴 Subscribe for more https://www.youtube.com/channel/UCMA8gVyu_IkVIixXd2p18NQ?...

Softagram - Making Code Reviews Humane

The story of Softagram is a long one and has many twists. Everything started in a small company long time ago, from the area of static analysis tools development. After many phases, Softagram is focusing on helping developers to get visual feedback on the code change: how is the software design evolving in the pull request under review.