eslint-plugin-quasar

> ~~Currently, in this phase of development, eslint-plugin-quasar is concentrating on helping to convert legacy Quasar v0.17+ to v1 Quasar ONLY.~~

> Starting with 1.0.0-alpha.10, eslint-plugin-quasar now supports v1+ with the quasar/no-invalid-props rule. More information below...

> ** The rule quasar/check-valid-props has been deprecated. Use the rule quasar/no-invalid-props instead.

Help us test this plugin. If you see any issues, please file an issue.

Also, expect more to come. We have plans for even more Quasar support to help streamline your development efforts.

Install

Prerequisites: Node.js (>=8.10), npm (>=5.6.0), yarn (>=1.6.0)

``bash
$ yarn add --dev eslint-plugin-quasar

or

$ npm install --save-dev eslint-plugin-quasar
`

Usage


The following changes need to be made to your .eslintrc.js configuration file.

Modification to the plugins section:
`js
{
"plugins": [
"quasar"
]
}
`

$3

Modification to the extends section:
`js
{
"extends": [
"plugin:quasar/legacy"
]
}
`

Modification to the rules section:
`js
{
"rules": [
'quasar/no-legacy-components': "error",
'quasar/no-legacy-css': "error",
'quasar/no-legacy-directives': "error",
'quasar/no-legacy-properties': "error",
'quasar/no-legacy-plugins': "error"
]
}
`

$3

Modification to the extends section (for v1+):
`js
{
"extends": [
"plugin:quasar/standard"
]
}
`

Modification to the rules section:
`js
{
"rules": [
'quasar/no-invalid-props': "error",
'quasar/no-invalid-qfield-usage': "error"
]
}
`

$3

The number zero (0) above tells eslint to turn off the rule. To turn it on use the following numbers:
1. 1 - display output as a warning
2. 2 - display output as an error

Alternatively, you can use 'off', 'warn' or 'error' instead of the number values.

Make sure you save the configuration file.

A Note About ESLint


If you have eslint installed globally, then your eslint plugins must also be installed globally. For better control, it is best to install eslint locally and your plugins locally with it.

Testing

To test your eslint configuration against your legacy Quasar project, run this from the command-line:
`bash
./node_modules/eslint/bin/eslint.js src/**
`

$3

You may see results that look like this (for v.17):

`bash
/home/me/my-project/src/pages/About.vue
5:9 error 'q-card-title' has been replaced with 'q-card-section'
quasar/no-legacy-components
8:9 error 'q-card-separator' has been replaced with 'q-separator'
quasar/no-legacy-components
9:9 error 'q-card-main' has been replaced with 'q-card-section'
quasar/no-legacy-components

/home/me/my-project/src/pages/Archive.vue
3:5 error 'q-window-resize-observable' has been
removed quasar/no-legacy-components
12:17 error 'q-resize-observable' has been replaced with
'q-resize-observer' quasar/no-legacy-components
32:17 error 'q-progress' has been replaced with
'q-linear-progress' quasar/no-legacy-components
67:17 error 'q-progress' has been replaced with
'q-linear-progress' quasar/no-legacy-components
82:11 error 'q-progress' has been replaced with
'q-linear-progress' quasar/no-legacy-components
145:9 error 'q-resize-observable' has been replaced with
'q-resize-observer' quasar/no-legacy-components
261:19 error 'q-popover' has been replaced with
'q-menu' quasar/no-legacy-components
265:23 error 'q-list-header' has been replaced with
'q-item-label' quasar/no-legacy-components
266:23 error 'q-item-separator' has been replaced with
'q-separator' quasar/no-legacy-components
330:19 error 'q-datetime' has been replaced with 'q-date,
q-time' quasar/no-legacy-components
...
✖ 89 problems (89 errors, 0 warnings)
`

Fixing Issues


Currently, eslint-plugin-quasar can fix some issues for you (for v0.17), but not all. To do this, you have to use the --fix command-line option with eslint.

What will be fixed are any legacy css class usage to be converted to the new name as per the Quasar Docs Upgrade Guide. As well, it can also fix any legacy directive name changes as per the Quasar Docs Upgrade Guide.

Also, it should be noted that eslint-plugin-quasar currently has no support for legacy QField and as such, this should be a manual process.

Tests

If you are interested in the output of the testing, you can view the results below (for v.17 and v1.+):

`
$ yarn mocha tests --recursive
yarn run v1.22.4
$ .../eslint-plugin-quasar/node_modules/.bin/mocha tests --recursive


check-valid-props
valid
✓
(107ms)
✓

✓


✓
✓
✓
✓
✓
✓
✓

invalid
✓
✓
✓
✓

no-invalid-props
valid
✓

✓

✓


✓
✓
✓
✓
✓
✓
✓

invalid
✓
✓
✓
✓

no-invalid-qfield-usage
valid
✓
invalid
✓
✓

no-legacy-components
valid
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
invalid
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓

no-legacy-css
valid
✓
✓
invalid
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓

no-legacy-directives
valid
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
invalid
✓
✓

no-legacy-plugins
valid
✓

export default {
computed: {
buttonColor () {
return this.$q.screen.lt.md
? 'primary'
: 'secondary'
}
}
}

invalid
✓

export default {
computed: {
buttonColor () {
return this.$q.actionSheet
? 'primary'
: 'secondary'
}
}
}


no-legacy-properties
valid
✓
invalid
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓


270 passing (678ms)

Done in 1.07s.
``