eslint, husky, audit-ci – Configuration

Setup eslint React Native

Setup eslint-plugin-react-native

yarn add eslint --dev
yarn add eslint-plugin-react --dev
yarn add eslint-plugin-react-native --dev

Create .eslintrc.json

{
    "env": {
        "browser": true,
        "react-native/react-native": true,
        "es6": true,
        "node": true
    },
    "extends": "plugin:react/recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-native"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        "react-native/no-unused-styles": 2,
        "react-native/split-platform-components": 2,
        "react-native/no-inline-styles": 2,
        "react-native/no-raw-text": 2,
        "no-trailing-spaces": "error",
        "no-undef": "error"
    }
}

Basic

How to completely uninstall eslint?

// For Mac/Linux
rm -rf ~/.vscode/extensions

//For Windows 
rmdir %USERPROFILE%\.vscode\extensions /s

How to resolve path to module ‘@components/some-module’.(import/no-unresolved)

eslint-import-resolver-typescript

Install packages

yarn add eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript --dev

Fix .eslintrc.js

...

  settings: {
    ...

    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`

        // use <root>/path/to/folder/tsconfig.json
        "project": ".",
      }
    }
  },

...

Rules

Turn off prop-types

"react/prop-types": "off",

Ignore end of line colon

This is to fix the conflict between typescript definition and other normal code

yarn add eslint-config-prettier --dev

"prettier/prettier": ["error", { endOfLine: "off" }],

How to setup husky?

• Install dependencies

yarn add --dev husky
yarn add --dev lint-staged // Optional!!

• Add script in package.json

...

"scripts": {
    ...

    "prepare": "husky install",

    ...
}

• Run it once

yarn prepare

• Add pre-commit hook

npx husky add .husky/pre-commit "npx lint-staged"

• Add pre-push hook

npx husky add .husky/pre-push "yarn test"

How to setup audit-ci?

audit-ci

• Install dependencies

yarn add -D audit-ci

• Create audit-ci.jsonc file

{}

• Add script

...

"scripts": {
    ...

    "audit:ci": "audit-ci --config ./audit-ci.jsonc",

    ...
}