Delete CR only for TS/TSX files - Prettier ESLint on VSCode 1.46

Question

I Created a React project using Create React Apps' Typescript template, added necessary plugins for ESLint 6.8.0 and configured ESLint and prettier together but whenever I am editing .ts or .tsx files I get the ESLint Error Delete ␍⏎␍⏎``

I have both ESLint and Prettier extensions installed in VSCode

I checked various other posts on SO and I tried most of the settings mentioned,

I added this to my .eslintrc.json file

"prettier/prettier": [
    "error",
    {
        "endOfLine": "auto"
    },
    { "usePrettierrc": true }
],

and here is my .prettierrc

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "useTabs": true,
    "semi": true,
    "singleQuote": true,
    "jsxBracketSameLine": false,
    "printWidth": 80,
    "endOfLine": "auto"
}

But Still I get a lint error whenver I create a new line in a .ts/.tsx file

I changed everything in my VSCode settings to use CRLF (I am on Windows) with "files.eol": "\r\n",

Even if I try with different line endings, I get similar errors.

If I do

"prettier/prettier": [
    "error",
    {
        "endOfLine": "lf"
    },
    { "usePrettierrc": true }
],

If I set endOfLine : crlf its the same error as auto!

For what its worth here is my entire .eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "jest": true
    },
    "extends": [
        "standard",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended",
        "plugin:jsx-a11y/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "__DEV__": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "project": "tsconfig.json",
        "tsconfigRootDir": "."
    },
    "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
    "rules": {
        "camelcase": "off",
        "no-unused-expressions": "off",
        "react/prop-types": "off",
        "react/jsx-one-expression-per-line": "off",
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".tsx"]
            }
        ],
        "@typescript-eslint/no-unused-vars": [
            "error",
            {
                "argsIgnorePattern": "_"
            }
        ],
        "@typescript-eslint/explicit-function-return-type": [
            "error",
            {
                "allowExpressions": true
            }
        ],

        // Remove after
        "@typescript-eslint/no-empty-interface": "off",
        "jsx-a11y/no-static-element-interactions": "off",
        "jsx-a11y/click-events-have-key-events": "off",
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "crlf"
            },
            { "usePrettierrc": true }
        ],

        // Remove After

        "jsx-quotes": "warn",
        "import/prefer-default-export": "off",
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "ts": "never",
                "tsx": "never"
            }
        ]
    },
    "settings": {
        "import/resolver": {
            "typescript": {}
        },
        "react": {
            "version": "detect"
        }
    }
}

Yeah lol, it shows the ␍⏎␍⏎`` because its a prettier warning, you can disable by setting with `"prettier/prettier": [ ` to `off` instead of `error`. Whenever you enter a new line or something, it will show you the error and vanishes when you save it because prettier then formats it. So those errors are nothing but useless if you have prettier formatting already setup — tHeSiD, Aug 22 '20 at 15:12
See update on https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier?r=SearchResults&s=1|315.4737 — Cláudio, Jan 23 '21 at 23:56

score 23 · Accepted Answer · answered Feb 17 '21 at 18:30

Since this post is getting some traffic, I solved this by adding this rule to my eslint config

rules: {
    'prettier/prettier': ['off', { singleQuote: true }],
}

The key part here is 'off' when you set it to 'error' by default this error shows up. Setting it off disables that check.

score 9 · Answer 2 · answered Dec 08 '21 at 15:43

9

You can also change the VS code setting for end of line:

press F1
select "Change End of Line Sequence"
select "LF" instead of "CRLF"

and voila !

answered Dec 08 '21 at 15:43

Florent Bouisset

962
1
5
11

Delete CR only for TS/TSX files - Prettier ESLint on VSCode 1.46

2 Answers2

Linked