React-Native 应用程序中的 ESLint / Prettier / Husky 缩进问题答案

【问题标题】：ESLint / Prettier / Husky indent problems in React-Native appReact-Native 应用程序中的 ESLint / Prettier / Husky 缩进问题
【发布时间】：2020-08-19 07:08:24
【问题描述】：

我有一个问题，当我提交时，我有 Husky 检查缩进错误/常见错误（如未使用道具......等）。我的应用是 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。

有什么想法吗？

【问题讨论】：

标签： typescript react-native eslint prettier

【解决方案1】：

Prettier documentation 声明

无论您希望集成什么 linting 工具，步骤都是大体相似。首先禁用您的任何现有格式规则 linter 可能与 Prettier 希望格式化您的代码的方式发生冲突。然后，您可以将扩展名添加到您的 linting 工具以进行格式化你的文件与 Prettier - 所以你只需要一个命令格式化一个文件，或者运行你的 linter 然后 Prettier 作为单独的步骤。

在你的情况下，我建议 1.在eslintrc的extends数组末尾添加prettier，禁用格式化规则

{
  "extends": ["prettier"]
}

然后，您可以将 husky 与 lint-staged 结合起来，为您的暂存文件运行预提交挂钩。例如：在package.json，定义哈士奇

“哈士奇”：{ “钩子”：{ “预提交”：“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 格式化您的代码。

【讨论】：

没用。显然，无论出于何种原因，这种奇怪的事件都发生在一个分支上。我只是让一位同事推送我为我编写的代码部分，然后我们合并，然后一切都很好。我们有相同的设置。

【解决方案2】：

因为你使用的是打字稿

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

您可以将 who 添加到脚本下的 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，而不是对整个项目进行 lint，这将花费大量时间。使用“prettier --write”，link-staged 将更正文件并将它们添加到暂存区域

【讨论】：