MVF ESLINT CONFIG FOR TYPESCRIPT

Package for MVF react typescript linting standards

Install MVF eslint config in your application

npm install -D @mvf/eslint-config-mvf-typescript-react
npx install-peerdeps --dev @mvf/eslint-config-mvf-typescript-react

or

yarn add -D @mvf/eslint-config-mvf-typescript-react
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Enable MVF linter

Create .eslintrc.js file in your root directory and paste the below:

module.exports = {
  ...require("@mvf/eslint-config-mvf-typescript-react").eslint,
};

Create .prettierrc.js file in your root directory and paste the below:

module.exports = {
  ...require("@mvf/eslint-config-mvf-typescript-react").prettier,
};

Install eslint vscode extension and paste the below to your vscode settings json:

{
    ...,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    ...
}

You can add the below scripts in the package.json to run the linter:

"lint": "eslint './src/**/*.ts'" // list lint issues without fixing them
"lint:fix": "npm run lint -- --fix" // fix lint errors automatically when possible and list remaining lint issues

You might need to restart VS Code to see the warnings and errors highlighted in your code.

Setup pre-commit checks, add the following to your package.json:

{
  "dependencies": { ... },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && tsc --noEmit && npm test"
    }
  },
  "lint-staged": {
    "*.{ts}": [
      "eslint --fix"
    ]
  }
}

Publish changes

After you have merged a PR to master, you need to rebuild and publish the components.

1. Checkout master git checkout master && git pull
2. Use one of the following make publish commands to publish changes:
   • make publish kind=patch - Use this if your change is a bug fix and is backwards compatible.
   • make publish kind=minor - Use this if your change adds new functionality and is backwards compatible.
   • make publish kind=major - Use this if your change is not backwards compatible.