Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add linting rules for Vue components #70

Merged
merged 1 commit into from
Nov 11, 2021
Merged

feat: add linting rules for Vue components #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,15 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'),

eslint: {
target: [ '**/*.js', '!node_modules/**/*' ],
target: {
src: [ '**/*.js', '!node_modules/**/*' ],
},
fix: {
src: [ '**/*.js', '!node_modules/**/*' ],
options: {
fix: true,
},
},
},

});
Expand Down
198 changes: 198 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,23 @@

'use strict';

const vueRulesBase = require('eslint-plugin-vue/lib/configs/base').rules,
vueRulesEssentials = require('eslint-plugin-vue/lib/configs/essential').rules,
vue3RulesEssentials = require('eslint-plugin-vue/lib/configs/vue3-essential').rules,
vueRulesStronglyRecommended = require('eslint-plugin-vue/lib/configs/strongly-recommended').rules,
vue3RulesStronglyRecommended = require('eslint-plugin-vue/lib/configs/vue3-strongly-recommended').rules,
vueRulesRecommended = require('eslint-plugin-vue/lib/configs/recommended').rules,
vue3RulesRecommended = require('eslint-plugin-vue/lib/configs/vue3-recommended').rules;


module.exports = {

'extends': 'eslint:recommended',

'plugins': [
'@silvermine/eslint-plugin-silvermine', // Our custom rules
'@typescript-eslint', // TypeScript-specific rules
'vue', // Vue-specific rules
],

'parserOptions': {
Expand Down Expand Up @@ -334,5 +344,193 @@ module.exports = {
'@typescript-eslint/no-empty-interface': 'off',
},
},
{
files: [ '**/*.vue' ],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
},
env: {
browser: true,
},
rules: Object.assign(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran these rules against one of our projects and I'm seeing these errors for every file:

1:1   error  Definition for rule 'vue/no-deprecated-v-is' was not found             vue/no-deprecated-v-is
1:1   error  Definition for rule 'vue/no-invalid-model-keys' was not found          vue/no-invalid-model-keys
1:1   error  Definition for rule 'vue/no-this-in-before-route-enter' was not found  vue/no-this-in-before-route-enter
1:1   error  Definition for rule 'vue/require-emit-validator' was not found         vue/require-emit-validator

All of the other rules seem to be executing fine. Any idea why? FWIW, I used npm link to test so maybe that's causing a problem somehow?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we disable the vue/no-multiple-template-root rule? I think it's "on" by default, but multiple template roots are a new feature in Vue 3, are there are legitimate use cases for it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the other rules seem to be executing fine. Any idea why? FWIW, I used npm link to test so maybe that's causing a problem somehow?

Yeah, I remember having issues testing this with npm link. I think it's related to differing versions of eslint / eslint-plugin-vue that' only resolve correctly with a real install. If we can get this merged and cut a beta release, I'll work on a MR to test using it.

Can we disable the vue/no-multiple-template-root rule? I think it's "on" by default, but multiple template roots are a new feature in Vue 3, are there are legitimate use cases for it.

✅

{},
vueRulesBase,
vueRulesEssentials,
vue3RulesEssentials,
vueRulesStronglyRecommended,
vue3RulesStronglyRecommended,
vueRulesRecommended,
vue3RulesRecommended,
{
// The 'no-unused-vars' rules does not work with type definitions in .vue
// files.
'no-unused-vars': 'off',

// Priority B: Strongly Recommended
'vue/attribute-hyphenation': [ 'error', 'never' ],
'vue/component-definition-name-casing': [ 'error', 'PascalCase' ],
'vue/html-closing-bracket-newline': [
'error',
{
'singleline': 'never',
'multiline': 'never',
},
],
'vue/html-closing-bracket-spacing': [
'error',
{
'startTag': 'never',
'endTag': 'never',
'selfClosingTag': 'always',
},
],
'vue/html-end-tags': 'error',
'vue/html-indent': [
'error',
3,
{
'attribute': 1,
'baseIndent': 1,
'closeBracket': 0,
'alignAttributesVertically': true,
},
],
'vue/html-quotes': [ 'error', 'double' ],
'vue/html-self-closing': 'error',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'error',
'vue/mustache-interpolation-spacing': 'error',
'vue/no-multi-spaces': 'error',
'vue/no-spaces-around-equal-signs-in-attribute': 'error',
'vue/no-template-shadow': 'error',
'vue/one-component-per-file': 'error',
'vue/prop-name-casing': 'error',
'vue/require-default-prop': 'error',
'vue/require-prop-types': 'error',
'vue/singleline-html-element-content-newline': 'off',
'vue/v-bind-style': 'error',
'vue/v-on-style': 'error',
'vue/v-slot-style': 'error',

// Priority C: Recommended
'vue/attributes-order': 'off',
'vue/component-tags-order': [
'error',
{
'order': [ 'template', 'script', 'style' ],
},
],
'vue/no-lone-template': 'error',
'vue/no-multiple-slot-args': 'error',
'vue/no-v-html': 'off',
'vue/order-in-components': 'error',
'vue/this-in-template': 'error',

// Uncategorized
'vue/block-tag-newline': [
'error',
{
'singleline': 'always',
'multiline': 'always',
'maxEmptyLines': 0,
},
],
'vue/component-name-in-template-casing': 'error',
'vue/custom-event-name-casing': [ 'error', 'camelCase' ],
'vue/html-button-has-type': 'error',
'vue/html-comment-content-newline': 'error',
'vue/html-comment-content-spacing': 'error',
'vue/html-comment-indent': [ 'error', 3 ],
'vue/match-component-file-name': [
'error',
{
'extensions': [ 'vue' ],
'shouldMatchCase': true,
},
],
// 'vue/new-line-between-multi-line-property': 'off',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are these lines commented out?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's been long enough that I don't remember for sure. But I think my purpose with the commented out lines was to note that we've considered the rule and chosen not to turn it on (vs. a rule not being listed at all, meaning we haven't thought about it yet).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's been long enough that I don't remember for sure. But I think my purpose with the commented out lines was to note that we've considered the rule and chosen not to turn it on (vs. a rule not being listed at all, meaning we haven't thought about it yet).

// 'vue/next-tick-style': 'off',
// 'vue/no-bare-strings-in-template': 'off',
// 'vue/no-boolean-default': 'off',
'vue/no-deprecated-v-is': 'error',
'vue/no-duplicate-attr-inheritance': 'error',
// 'vue/no-empty-component-block': 'off',
'vue/no-invalid-model-keys': 'error',
'vue/no-multiple-objects-in-class': 'error',
'vue/no-multiple-template-root': 'off',
'vue/no-potential-component-option-typo': 'error',
'vue/no-reserved-component-names': [
'error',
{
'disallowVueBuiltInComponents': true,
'disallowVue3BuiltInComponents': true,
},
],
// 'vue/no-restricted-block': 'off',
// 'vue/no-restricted-call-after-await': 'off',
// 'vue/no-restricted-component-options': 'off',
// 'vue/no-restricted-custom-event': 'off',
// 'vue/no-restricted-props': 'off',
// 'vue/no-restricted-static-attribute': 'off',
// 'vue/no-restricted-v-bind': 'off',
// 'vue/no-static-inline-styles': 'off',
// 'vue/no-template-target-blank': 'TODO',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you open a ticket for us to address the TODO rules here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done: #72

'vue/no-this-in-before-route-enter': 'error',
// 'vue/no-unregistered-components': 'off',
// 'vue/no-unsupported-features': 'TODO',
// 'vue/no-unused-properties': 'TODO',
// 'vue/no-useless-mustaches': 'TODO',
// 'vue/no-useless-v-bind': 'TODO',
// 'vue/padding-line-between-blocks': 'TODO',
// 'vue/require-direct-export': 'TODO',
'vue/require-emit-validator': 'error',
// 'vue/require-name-property': 'TODO',
// 'vue/script-indent': 'TODO',
// 'vue/sort-keys': 'TODO',
// 'vue/static-class-names-order': 'TODO',
// 'vue/v-for-delimiter-style': 'TODO',
// 'vue/v-on-event-hyphenation': 'TODO',
// 'vue/v-on-function-call': 'TODO',
// 'vue/valid-next-tick': 'TODO',

// Extension Rules
// 'vue/array-bracket-newline': 'TODO',
// 'vue/array-bracket-spacing': 'TODO',
// 'vue/arrow-spacing': 'TODO',
// 'vue/block-spacing': 'TODO',
// 'vue/brace-style': 'TODO',
// 'vue/camelcase': 'TODO',
// 'vue/comma-dangle': 'TODO',
// 'vue/comma-spacing': 'TODO',
// 'vue/comma-style': 'TODO',
// 'vue/dot-location': 'TODO',
// 'vue/dot-notation': 'TODO',
// 'vue/eqeqeq': 'TODO',
// 'vue/func-call-spacing': 'TODO',
// 'vue/key-spacing': 'TODO',
// 'vue/keyword-spacing': 'TODO',
// 'vue/max-len': 'TODO',
// 'vue/no-constant-condition': 'TODO',
// 'vue/no-empty-pattern': 'TODO',
// 'vue/no-extra-parens': 'TODO',
// 'vue/no-irregular-whitespace': 'TODO',
// 'vue/no-restricted-syntax': 'TODO',
// 'vue/no-sparse-arrays': 'TODO',
// 'vue/no-useless-concat': 'TODO',
// 'vue/object-curly-newline': 'TODO',
// 'vue/object-curly-spacing': 'TODO',
// 'vue/object-property-newline': 'TODO',
// 'vue/operator-linebreak': 'TODO',
// 'vue/prefer-template': 'TODO',
// 'vue/space-in-parens': 'TODO',
// 'vue/space-infix-ops': 'TODO',
// 'vue/space-unary-ops': 'TODO',
// 'vue/template-curly-spacing': 'TODO',
}
),
},
],
};
114 changes: 107 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@silvermine/eslint-plugin-silvermine": "2.3.1",
"@typescript-eslint/eslint-plugin": "2.16.0",
"@typescript-eslint/parser": "2.16.0",
"eslint-plugin-vue": "7.11.1",
"typescript": "3.3.1"
},
"devDependencies": {
Expand Down