React-Native应用程序中的ESLint /漂亮/赫斯基缩进问题

Question

我有一个问题，当我提交的时候，我让赫斯基检查缩进错误/常见错误(比如没有使用道具...等)。我的应用程序是TypeScript React-Native应用程序。

我得到了以下信息：

  25:1   error  Expected indentation of 4 spaces but found 2      indent
  26:1   error  Expected indentation of 2 spaces but found 0      indent
  27:1   error  Expected indentation of 4 spaces but found 2      indent
  28:1   error  Expected indentation of 6 spaces but found 4      indent
  29:1   error  Expected indentation of 8 spaces but found 6      indent
  30:1   error  Expected indentation of 8 spaces but found 6      indent
  31:1   error  Expected indentation of 10 spaces but found 8     indent
  32:1   error  Expected indentation of 10 spaces but found 8     indent
  33:1   error  Expected indentation of 10 spaces but found 8     indent
  34:1   error  Expected indentation of 10 spaces but found 8     indent
  35:1   error  Expected indentation of 10 spaces but found 8     indent
  36:1   error  Expected indentation of 8 spaces but found 6      indent
  37:1   error  Expected indentation of 6 spaces but found 4      indent
  39:1   error  Expected indentation of 6 spaces but found 4      indent
  40:1   error  Expected indentation of 8 spaces but found 6      indent
  41:1   error  Expected indentation of 8 spaces but found 6      indent
  42:1   error  Expected indentation of 8 spaces but found 6      indent
  43:1   error  Expected indentation of 8 spaces but found 6      indent
  44:1   error  Expected indentation of 6 spaces but found 4      indent
  45:1   error  Expected indentation of 4 spaces but found 2      indent
  46:1   error  Expected indentation of 2 spaces but found 0      indent

我的VSCode设置为2个空格，

我的eslint.rc规则是"indent": ["error", 2]，而我的prettier.rc设置为"tabWidth": 2,。我不明白为什么它会给出错误，代码的格式应该是这样的。我甚至在Mac上运行了更漂亮的command-shift-f。

有什么想法吗？

Answer 1

Prettier documentation指出

无论您希望集成哪种linting工具，其步骤都大体相似。首先，禁用linter中的任何现有格式规则，这些规则可能会与漂亮程序希望如何格式化您的代码相冲突。然后你可以在你的linting工具中添加一个扩展名来格式化你的文件，这样你就只需要一个命令来格式化一个文件，或者单独运行你的linter，然后再运行Prettier。

在您的示例中，我建议1.将prettier添加到eslintrc中扩展数组的末尾，以禁用格式化规则

{
  "extends": ["prettier"]
}

然后，您可以将

1. 与lint-staged相结合，为您的暂存文件运行预提交钩子。例如:在package.json中，定义赫斯基

"husky"：{ "hooks"：{ "pre-commit"："lint-staged“} }

在根文件夹中创建.lintstagedrc.js

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint'],
  '*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)': ['prettier --write'],
};

它将运行eslint来检查linting错误，然后使用prettier格式化您的代码。

Answer 2

由于您使用的是typescript

extends: [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",

        //this will block eslint showing conflicting prettier errors. prettier will handle it
        "prettier",

        // if eslint-config-prettier version is before 8.0.0, include those two lines, if not exlude
        "prettier/@typescript-eslint",
        "prettier/react"
    ],

要使用此插件，请安装npm i -D eslint-config-prettier

您可以将其添加到脚本下的package.json中，而不是创建单独的文件：

 "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
      "src/**/*.{js,jsx,ts,tsx}": "eslint",
      "**/*.{js,jsx,json,ts,tsx}": "prettier --write"
  },

lint-staged将只对分段文件进行lint，而不是整个项目，这会花费很多时间。使用"prettier --write"，link- staging将更正文件并将它们添加到登台区域