![\"logo\"](\"logo-medium.png\")
\n\n \n
\n ![\"๐](\"https://github.com/iamyoki/qhlab-eslint-plugin/actions/workflows/release.yml/badge.svg?branch=main\"){kind=icon}
\n ![\"โ](\"https://github.com/iamyoki/qhlab-eslint-plugin/actions/workflows/test.yml/badge.svg\"){kind=icon}
\n
๐งช Eslint plugins for Qhlab
\n\n English | ็ฎไฝไธญๆ\n
\n\n- [Installation](#installation)\n- [Use in React](#use-in-react)\n- [Use in Vue2](#use-in-vue2)\n- [Use in Vue3](#use-in-vue3)\n- [Use in Vanilla JS](#use-in-vanilla-js)\n- [Use Prettier rules alone](#use-prettier-rules-alone)\n- [Use with typescript](#use-with-typescript)\n- [Config References](#config-references)\n- [License](#license)\n\n## Installation\n\nYou'll first need to install [ESLint](https://eslint.org/):\n\n```sh\nyarn add eslint -D\n```\n\nNext, install `@qhlab/eslint-plugin`:\n\n```sh\nyarn add @qhlab/eslint-plugin -D\n```\n\n## Use in React\n\nCreate a `.eslintrc.json` file in your root dir.\n\n```json\n{\n \"extends\": [\"plugin:@qhlab/react\"]\n}\n```\n\n## Use in Vue2\n\nMake sure the version of eslint you are using is latest v7, because some new rules depends on eslint v7 and [`@vue/cli` doesn't support `eslint` v8](https://github.com/vuejs/vue-cli/issues/6759) currently.\n\n```sh\nyarn add eslint@^7 -D\n```\n\nCreate a `.eslintrc.json` file in your root dir.\n\n```json\n{\n \"extends\": [\"plugin:@qhlab/vue\"]\n}\n```\n\n## Use in Vue3\n\nMake sure the version of eslint you are using is latest v7, because some new rules depends on eslint v7 and [`@vue/cli` doesn't support `eslint` v8](https://github.com/vuejs/vue-cli/issues/6759) currently.\n\n```sh\nyarn add eslint@^7 -D\n```\n\nCreate a `.eslintrc.json` file in your root dir.\n\n```json\n{\n \"extends\": [\"plugin:@qhlab/vue3\"]\n}\n```\n\n## Use in Vanilla JS\n\nYou don't need to use `plugin:@qhlab/base` along with `plugin:@qhlab/react` or `plugin:@qhlab/vue` or `plugin:@qhlab/vue3`, these have already added.\n\nCreate a `.eslintrc.json` file in your root dir.\n\n```json\n{\n \"extends\": [\"plugin:@qhlab/base\"]\n}\n```\n\n## Use Prettier rules alone\n\nYou don't need to use `plugin:@qhlab/prettier` along with `plugin:@qhlab/react` or `plugin:@qhlab/vue` or `plugin:@qhlab/vue3`, these have already added.\n\nCreate a `.eslintrc.json` file in your root dir.\n\n```json\n{\n \"extends\": [\"...your other rules\", \"plugin:@qhlab/prettier\"]\n}\n```\n\n> Note: Make sure prettier is the last one so it won't be overriden.\n\n## Use with typescript\n\nTypescript config is already built in with `base` config, so you don't need to worry about that, it will override `.ts, .tsx` files with typescript config rules.\n\nHowever, you may need to add `parserOptions.project` to specify your `tsconfig.json` file.\n> In most case, you won't need to do that, because it will automatically locate `tsconfig.json` file base on your current command line path, but if you aren't execute your command line in the same dir, it won't be found, so in that case you need specify mannually.\n\nFor example\n\n```json\n{\n \"extends\": [\"plugin:@qhlab/react\"],\n \"parserOptions\": {\n \"project\": \"./tsconfig.json\"\n }\n}\n```\n\n## Config References\n\n| config name | extends with | has customized? | rules **from** |\n| ---------------------- | ------------------------------------------------------------------------------ | --------------- | ---------------------------------------------------------------------------- |\n| plugin:@qhlab/prettier | plugin:prettier/recommended | โ | [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) |\n| plugin:@qhlab/base | / | โ | [eslint official](https://eslint.org/docs/rules/)