@qhlab/eslint-plugin
English | ็ฎไฝไธญๆ
- Installation
- Use in React
- Use in Vue2
- Use in Vue3
- Use in Vanilla JS
- Use Prettier rules alone
- Use with typescript
- Config References
- License
Installation
You'll first need to install ESLint:
yarn add eslint -D
Next, install @qhlab/eslint-plugin
:
yarn add @qhlab/eslint-plugin -D
Use in React
Create a .eslintrc.json
file in your root dir.
{
"extends": ["plugin:@qhlab/react"]
}
Use in Vue2
Make 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 currently.
yarn add eslint@^7 -D
Create a .eslintrc.json
file in your root dir.
{
"extends": ["plugin:@qhlab/vue"]
}
Use in Vue3
Make 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 currently.
yarn add eslint@^7 -D
Create a .eslintrc.json
file in your root dir.
{
"extends": ["plugin:@qhlab/vue3"]
}
Use in Vanilla JS
You 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.
Create a .eslintrc.json
file in your root dir.
{
"extends": ["plugin:@qhlab/base"]
}
Use Prettier rules alone
You 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.
Create a .eslintrc.json
file in your root dir.
{
"extends": ["...your other rules", "plugin:@qhlab/prettier"]
}
Note: Make sure prettier is the last one so it won't be overriden.
Use with typescript
Typescript 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.
However, you may need to add parserOptions.project
to specify your tsconfig.json
file.
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.
For example
{
"extends": ["plugin:@qhlab/react"],
"parserOptions": {
"project": "./tsconfig.json"
}
}
Config References
config name | extends with | has customized? | rules from |
---|---|---|---|
plugin:@qhlab/prettier | plugin:prettier/recommended | eslint-plugin-prettier | |
plugin:@qhlab/base | / |
eslint official @typescript-eslint |
|
plugin:@qhlab/react | plugin:@qhlab/base plugin:@qhlab/prettier |
eslint-plugin-react | |
plugin:@qhlab/vue | plugin:@qhlab/base plugin:vue/recommended plugin:@qhlab/prettier |
no | eslint-plugin-vue |
plugin:@qhlab/vue3 | plugin:@qhlab/base plugin:vue/recommended plugin:@qhlab/prettier |
no | eslint-plugin-vue |
License
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฆโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฆโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ