add "import/extensions" eslint rule

Author: mvorisek

js/.eslintrc.js

@@ -15,18 +15,19 @@ module.exports = {
     plugins: [
         'vue',
     ],
+    settings: {
+        'import/resolver': 'webpack',
+    },
     rules: {
         indent: ['error', 4, { SwitchCase: 1 }],
         'object-shorthand': ['error', 'never'],
         'func-names': ['error', 'never'],
         'no-param-reassign': 'off',
         'class-methods-use-this': 'off',
-        'import/no-unresolved': 'off',
         'no-plusplus': 'off',
         'consistent-return': 'off',
         'no-nested-ternary': 'off',
         'default-case': 'off',
-        'import/prefer-default-export': 'off',
         'no-console': ['error', { allow: ['warn', 'error'] }],
         'no-underscore-dangle': 'off',
         'max-len': 'off',
@@ -43,6 +44,13 @@ module.exports = {
                 balanced: true,
             },
         }],
+        'import/no-unresolved': 'off',
+        'import/prefer-default-export': 'off',
+        'import/extensions': ['error', 'always', {
+            '': 'never',
+            js: 'never',
+            vue: 'never',
+        }],
         'vue/html-indent': ['error', 4],
         'jsdoc/require-param': 'off',
         'jsdoc/require-param-description': 'off',

js/package-lock.json

@@ -41,6 +41,7 @@
         "css-loader": "^6.7.1",
         "eslint": "^8.26.0",
         "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-import-resolver-webpack": "^0.13.2",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsdoc": "^39.3.25",
         "eslint-plugin-vue": "^9.6.0",

js/package.json

@@ -81,7 +81,7 @@ class VueService {
         app.component('AtkItemSearch', asyncComponentFactory('AtkItemSearch', () => import(/* webpackChunkName: 'atk-vue-item-search' */'../vue-components/item-search.component')));
         app.component('AtkMultiline', asyncComponentFactory('AtkMultiline', () => import(/* webpackChunkName: 'atk-vue-multiline' */'../vue-components/multiline/multiline.component')));
         app.component('AtkTreeItemSelector', asyncComponentFactory('AtkTreeItemSelector', () => import(/* webpackChunkName: 'atk-vue-tree-item-selector' */'../vue-components/tree-item-selector/tree-item-selector.component')));
-        app.component('AtkQueryBuilder', asyncComponentFactory('AtkQueryBuilder', () => import(/* webpackChunkName: 'atk-vue-query-builder' */'../vue-components/query-builder/query-builder.component.vue')));
+        app.component('AtkQueryBuilder', asyncComponentFactory('AtkQueryBuilder', () => import(/* webpackChunkName: 'atk-vue-query-builder' */'../vue-components/query-builder/query-builder.component')));
     }
 
     /**

js/src/services/vue.service.js

@@ -76,7 +76,7 @@
 </template>
 
 <script>
-import VueQueryBuilderGroup from 'vue-query-builder/src/components/QueryBuilderGroup.vue';
+import VueQueryBuilderGroup from 'vue-query-builder/src/components/QueryBuilderGroup';
 
 export default {
     name: 'QueryBuilderGroup',

js/src/vue-components/query-builder/fomantic-ui-group.component.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script>
-import VueQueryBuilderRule from 'vue-query-builder/src/components/QueryBuilderRule.vue';
+import VueQueryBuilderRule from 'vue-query-builder/src/components/QueryBuilderRule';
 import AtkDatePicker from '../share/atk-date-picker';
 import AtkLookup from '../share/atk-lookup';
 

js/src/vue-components/query-builder/fomantic-ui-rule.component.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import VueQueryBuilder from 'vue-query-builder/src/VueQueryBuilder.vue';
-import QueryBuilderGroup from './fomantic-ui-group.component.vue';
-import QueryBuilderRule from './fomantic-ui-rule.component.vue';
+import VueQueryBuilder from 'vue-query-builder/src/VueQueryBuilder';
+import QueryBuilderGroup from './fomantic-ui-group.component';
+import QueryBuilderRule from './fomantic-ui-rule.component';
 
 export default {
     name: 'QueryBuilder',

js/src/vue-components/query-builder/query-builder.component.vue

@@ -5,7 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const VueFomanticUi = require('vue-fomantic-ui');
 
 module.exports = (env) => {
-    const isProduction = env.production;
+    const isProduction = env === undefined ? false /* for eslint-import-resolver-webpack */ : env.production;
     const srcDir = path.resolve(__dirname, './src');
     const publicDir = path.resolve(__dirname, '../public');
     const libraryName = 'atk';
@@ -97,10 +97,7 @@ module.exports = (env) => {
                 srcDir,
                 'node_modules',
             ],
-            extensions: [
-                '.js',
-                '.vue',
-            ],
+            extensions: ['.js', '.vue'],
         },
         plugins: [
             new webpack.DefinePlugin({