CODEWITHSUNDEEP
typescriptreact-nativeeslintprettier
r00t -
r00t -

Reputation: 275

ESLint / Prettier / Husky indent problems in React-Native app

I have a problem, when I commit, I have Husky which checks for indentation errors / usual errors (like props are not used.... etc). My app is a TypeScript React-Native app.

I am getting the following:

  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

My VSCode is set to 2 spaces,

My eslint.rc rule is "indent": ["error", 2] and my prettier.rc is set to "tabWidth": 2, I don't understand why it's giving errors, the code is formatted as it should be. I even ran prettier myself command-shift-f on Mac.

Any ideeas?

Upvotes: 0

Views: 1204

Answers (2)

Yilmaz
Yilmaz

Reputation: 49301

since you are using 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"
    ],

To use this plugins, install npm i -D eslint-config-prettier

Instead of creating a separate file, you could add whose to package.json under scripts:

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

lint-staged will lint only the staged files, instead of entire project which would take a lot of time. With "prettier --write", link-staged will correct the files and add them to the staging area

Upvotes: 0

Binh
Binh

Reputation: 396

Prettier documentation states that

Whatever linting tool you wish to integrate with, the steps are broadly similar. First disable any existing formatting rules in your linter that may conflict with how Prettier wishes to format your code. Then you can either add an extension to your linting tool to format your file with Prettier - so that you only need a single command for format a file, or run your linter then Prettier as separate steps.

In your case, I would suggest 1. Add prettier to the end of the extends array in eslintrc to disable the formatting rules

{
  "extends": ["prettier"]
}

  1. Then you can combine husky with lint-staged to run pre-commit hooks for your staged files. For example: in package.json, define husky

    "husky": { "hooks": { "pre-commit": "lint-staged" } }

create .lintstagedrc.js in root folder

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

It will run eslint to check linting errors and then format your code with prettier.

Upvotes: 1

Related Questions