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

Viewed 11592

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

line error

eslint problem in vscode

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 }
],

eol lf

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"
        }
    }
}
2 Answers

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.

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 !

Related