仅为 TS/TSX 文件删除 CR - VSCode 1.46 上的 Prettier ESLint

Posted 2023-02-22

【中文标题】仅为 TS/TSX 文件删除 CR - VSCode 1.46 上的 Prettier ESLint

【英文标题】：Delete CR only for TS/TSX files - Prettier ESLint on VSCode 1.46

【发布时间】：2020-11-21 05:38:25

【问题描述】：

我使用 Create React Apps 的 Typescript 模板创建了一个 React 项目，为 ESLint 6.8.0 添加了必要的插件，并将 ESLint 和 prettier 配置在一起，但是每当我编辑 .ts 或 .tsx 文件时，我都会收到 ESLint 错误 @987654331 @␍⏎␍⏎``

我在 VSCode 中安装了 ESLint 和 Prettier 扩展

我查看了 SO 上的其他各种帖子，并尝试了提到的大部分设置，

我将此添加到我的 .eslintrc.json 文件中

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

这是我的.prettierrc

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

但当我在 .ts/.tsx 文件中创建新行时，我仍然会收到 lint 错误

我将 VSCode 设置中的所有内容都更改为使用 CRLF（我在 Windows 上）和 "files.eol": "\r\n",

即使我尝试使用不同的行尾，我也会遇到类似的错误。

如果我这样做

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

如果我设置 endOfLine : crlf 与 auto 相同的错误！

因为它的价值在于我的整个.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"
        
    

【问题讨论】：

这个运气好吗？

是的，哈哈，它显示了␍⏎␍⏎``，因为它是一个更漂亮的警告，您可以通过将"prettier/prettier": [ 设置为off 而不是error 来禁用。每当您输入新行或其他内容时，它都会向您显示错误并在您保存时消失，因为更漂亮然后对其进行格式化。因此，如果您已经设置了更漂亮的格式，那么这些错误将毫无用处

查看***.com/questions/53516594/…的更新

【参考方案1】：

由于这篇文章获得了一些流量，我通过将此规则添加到我的 eslint 配置中解决了这个问题

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

这里的关键部分是'off'，当您将其设置为'error' 默认情况下会显示此错误。将其关闭会禁用该检查。

【参考方案2】：

您还可以更改行尾的 VS 代码设置：

按 F1 选择“更改行尾序列” 选择“LF”而不是“CRLF”

瞧！