@bitfactory/eslint-config 1.1.4 → 1.2.2

package/README.md

@@ -1,21 +1,25 @@
 # @bitfactory/eslint-config
 
-<p>
-    <a href="https://www.npmjs.com/package/@bitfactory/eslint-config"><img src="https://img.shields.io/npm/v/@bitfactory/eslint-config.svg?sanitize=true" alt="Version"></a>
+<p align="center">
+    <img src="https://img.shields.io/badge/release-1.2.x-orange?style=for-the-badge" alt="Release">
+    <img src="https://img.shields.io/badge/eslint-%5E7.x-8080F2?style=for-the-badge" alt="ESLint">
+    <a href="https://www.npmjs.com/package/@bitfactory/eslint-config"><img src="https://img.shields.io/npm/v/@bitfactory/eslint-config.svg?style=for-the-badge" alt="NPM version"></a>
 </p>
 
 This is a shareable config for [ESLint](https://eslint.org). All the rules and configurations are already set. Rules can be overridden if needed.
 
-- [Installing](#installing)
+- [@bitfactory/eslint-config](#bitfactoryeslint-config)
+  - [:package: Installing](#package-installing)
     - [Vue.js projects](#vuejs-projects)
     - [TypeScript projects](#typescript-projects)
     - [Vue.js, TypeScript and regular JavaScript together](#vuejs-typescript-and-regular-javascript-together)
-- [CLI usage](#cli-usage)
-- [Editor / IDE integration](#editor--ide-integration)
-    - [PhpStorm](#phpstorm)
+  - [:rocket: CLI usage](#rocket-cli-usage)
+  - [:pencil2: Editor / IDE integration](#pencil2-editor--ide-integration)
     - [Visual Studio Code](#visual-studio-code)
+      - [Additional Extensions](#additional-extensions)
+    - [PhpStorm](#phpstorm)
 
-## Installing
+## :package: Installing
 
 Include the config into your project:
 
@@ -37,12 +41,14 @@ module.exports = {
 };
 ```
 
+---
+
 ### Vue.js projects
 
 To use this config with a Vue.js project also install the following packages:
 
 ```shell
-npm install eslint-plugin-vue --save-dev --save-exact
+npm install eslint-plugin-vue eslint-plugin-vuejs-accessibility --save-dev --save-exact
 ```
 
 And set the following extend in `.eslintrc.js`:
@@ -53,6 +59,8 @@ module.exports = {
 };
 ```
 
+---
+
 ### TypeScript projects
 
 To use this config with a TypeScript project also install the following packages
@@ -69,44 +77,28 @@ module.exports = {
 };
 ```
 
+---
+
 ### Vue.js, TypeScript and regular JavaScript together
 
-To use this config with all three types together, we need some custom settings:
+To use this config with a Vue.js, TypeScript and regular JavaScript project also install the following packages
+
+```shell
+npm install eslint-plugin-vue eslint-plugin-vuejs-accessibility @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev --save-exact
+```
+
+And set the following extend in `.eslintrc.js`:
 
 ```js
-const config = require('@bitfactory/eslint-config/index');
-
-config.overrides = [
-    {
-        files: ['**/*.ts', '**/*.tsx'],
-        parser: '@typescript-eslint/parser',
-        extends: [
-            'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-        ],
-        parserOptions: {
-            ecmaFeatures: { jsx: true },
-            ecmaVersion: 2018,
-            sourceType: 'module',
-        },
-    },
-    {
-        files: ['**/*.vue'],
-        parser: 'vue-eslint-parser',
-        extends: [
-            'plugin:vue/essential', // Official eslint plugin for Vue.js
-        ],
-        parserOptions: {
-            ecmaFeatures: { jsx: true },
-            ecmaVersion: 2018,
-            sourceType: 'module',
-        },
-    },
-];
-
-module.exports = config;
-```
-
-## CLI usage
+module.exports = {
+    extends: [
+        '@bitfactory/eslint-config/vue',
+        '@bitfactory/eslint-config/typescript',
+    ],
+};
+```
+
+## :rocket: CLI usage
 
 To use ESLint in the command-line, add the following scripts to your projects `package.json`:
 
@@ -142,10 +134,31 @@ npm run eslint
 npm run eslint:fix
 ```
 
-## Editor / IDE integration
+## :pencil2: Editor / IDE integration
 
 For ESLint to work, you need to set up your editor / IDE.
 
+### Visual Studio Code
+
+1. Install the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension
+2. Add the following settings via `Code` → `Preferences` → `Settings`
+3. Get linting :rocket:
+
+```json
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
+}
+```
+
+#### Additional Extensions
+- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) to get inline error messages
+
+> :warning: If you have the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension enabled, make sure to **disable** the extension for your project's workspace. This is because Prettier's rules will conflict with ours.
+
+---
+
 ### PhpStorm
 
 Go to [Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint](jetbrains://PhpStorm/settings?name=Languages+%26+Frameworks--JavaScript--Code+Quality+Tools--ESLint) and set it to `Automatic ESLint configuration`
@@ -166,7 +179,7 @@ Working directory: $ProjectFileDir$
 
 You can also select JavaScript, Vue.js or TypeScript files for `File type`, and copy the watcher for each needed file to only check those files
 
-Or import the followinging xml file:
+Or import the following xml file:
 
 ```xml
 <TaskOptions>
@@ -192,22 +205,3 @@ Or import the followinging xml file:
     </TaskOptions>
 </TaskOptions>
 ```
-
-### Visual Studio Code
-
-1. Install the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension
-2. Add the following settings via `Code` → `Preferences` → `Settings`
-3. Get linting :rocket:
-
-```json
-{
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    }
-}
-```
-
-#### Additional Extensions
-- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) to get inline error messages
-
-> :warning: If you have the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension enabled, make sure to **disable** the extension for your project's workspace. This is because Prettier's rules will conflict with ours.

package/index.js

@@ -1 +1,41 @@
-module.exports = require('./.eslintrc');
+/* eslint-disable unicorn/prefer-module */
+
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:jsdoc/recommended',
+        'plugin:unicorn/recommended',
+        './rules/errors',
+        './rules/es6',
+        './rules/jsdoc',
+        './rules/practices',
+        './rules/style',
+        './rules/variables',
+    ],
+    ignorePatterns: [
+        '!.stylelintrc.js',
+        '/.nuxt/**',
+        '/dist/**',
+        '/static/sw.*',
+    ],
+    overrides: [
+        {
+            files: ['**/*.js'],
+            parser: '@babel/eslint-parser',
+        },
+    ],
+    parserOptions: {
+        ecmaVersion: 2021,
+        requireConfigFile: false,
+        sourceType: 'module',
+    },
+    plugins: [
+        'jsdoc',
+        'unicorn',
+    ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitfactory/eslint-config",
-  "version": "1.1.4",
+  "version": "1.2.2",
   "description": "ESLint sharable config for Bitfactory projects",
   "keywords": [
     "eslint",
@@ -11,8 +11,7 @@
   "author": "Bitfactory",
   "main": "index.js",
   "files": [
-    ".eslintrc.js",
-    "configs",
+    "rules",
     "index.js",
     "README.md",
     "typescript.js",
@@ -23,35 +22,20 @@
     "eslint:fix": "npm run eslint -- --fix",
     "update:interactive": "npx npm-check -uE"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "npm run eslint:fix",
-      "git add"
-    ],
-    "package.json": [
-      "npx sort-package-json",
-      "git add"
-    ]
-  },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/eslint-parser": "^7.12.1",
-    "eslint": "^7.14.0",
-    "eslint-plugin-jsdoc": "^30.7.8",
-    "eslint-plugin-unicorn": "^23.0.0",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.5.2"
+    "@babel/core": "7.17.10",
+    "@babel/eslint-parser": "7.17.0",
+    "eslint": "8.15.0",
+    "eslint-plugin-jsdoc": "39.2.9",
+    "eslint-plugin-unicorn": "42.0.0",
+    "lint-staged": "12.4.1",
+    "simple-git-hooks": "2.7.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/eslint-parser": "^7.0.0",
     "eslint": "^7.0.0",
-    "eslint-plugin-jsdoc": "^30.0.0",
-    "eslint-plugin-unicorn": ">=23.0.0"
+    "eslint-plugin-jsdoc": ">=39.0.0",
+    "eslint-plugin-unicorn": ">=42.0.0"
   }
 }

package/{configs → rules}/errors.js

@@ -1,5 +1,6 @@
+/* eslint-disable unicorn/prefer-module */
+
 module.exports = {
-    extends: ['eslint:recommended'],
     rules: {
         'no-await-in-loop': 'error',
         'no-console': 'error',

package/{configs → rules}/es6.js

@@ -1,5 +1,6 @@
+/* eslint-disable unicorn/prefer-module */
+
 module.exports = {
-    extends: ['eslint:recommended'],
     rules: {
         'arrow-body-style': ['error', 'as-needed'],
         'arrow-parens': ['error', 'as-needed'],

package/{configs → rules}/jsdoc.js

@@ -1,6 +1,6 @@
+/* eslint-disable unicorn/prefer-module */
+
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:jsdoc/recommended'],
-    plugins: ['jsdoc'],
     rules: {
         'jsdoc/check-indentation': 'warn',
         'jsdoc/check-syntax': 'warn',

package/{configs → rules}/practices.js

@@ -1,6 +1,6 @@
+/* eslint-disable unicorn/prefer-module */
+
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:unicorn/recommended'],
-    plugins: ['unicorn'],
     rules: {
         'array-callback-return': 'error',
         'block-scoped-var': 'error',

package/{configs → rules}/style.js

@@ -1,5 +1,6 @@
+/* eslint-disable unicorn/prefer-module */
+
 module.exports = {
-    extends: ['eslint:recommended'],
     rules: {
         'array-bracket-newline': ['error', 'consistent'],
         'array-bracket-spacing': 'error',
@@ -17,7 +18,9 @@ module.exports = {
         'func-names': ['error', 'never'],
         'func-style': 'error',
         'implicit-arrow-linebreak': 'error',
-        'indent': ['error', 4],
+        'indent': ['error', 4, {
+            SwitchCase: 1,
+        }],
         'key-spacing': 'error',
         'keyword-spacing': 'error',
         'line-comment-position': 'error',
@@ -78,7 +81,24 @@ module.exports = {
             },
         ],
         'no-whitespace-before-property': 'error',
-        'object-curly-newline': 'off',
+        'object-curly-newline': ['error', {
+            ExportDeclaration: {
+                minProperties: 2,
+                multiline: true,
+            },
+            ImportDeclaration: {
+                minProperties: 4,
+                multiline: true,
+            },
+            ObjectExpression: {
+                minProperties: 1,
+                multiline: true,
+            },
+            ObjectPattern: {
+                minProperties: 4,
+                multiline: true,
+            },
+        }],
         'object-curly-spacing': ['error', 'always'],
         'object-property-newline': 'error',
         'one-var': ['error', 'never'],

package/{configs → rules}/variables.js

@@ -1,5 +1,6 @@
+/* eslint-disable unicorn/prefer-module */
+
 module.exports = {
-    extends: ['eslint:recommended'],
     rules: {
         'init-declarations': 'error',
         'no-label-var': 'error',

package/rules/vue.js

@@ -0,0 +1,27 @@
+/* eslint-disable unicorn/prefer-module */
+
+module.exports = {
+    rules: {
+        'vuejs-accessibility/media-has-caption': 'off',
+        'vue/block-tag-newline': [
+            'error',
+            {
+                multiline: 'always',
+                singleline: 'always',
+            },
+        ],
+        'vue/component-name-in-template-casing': [
+            'error',
+            'PascalCase',
+            {
+                registeredComponentsOnly: false,
+            },
+        ],
+        'vue/html-indent': ['error', 4],
+        'vue/no-empty-component-block': 'error',
+        'vue/no-template-target-blank': 'error',
+        'vue/padding-line-between-blocks': ['error', 'always'],
+        'vue/singleline-html-element-content-newline': 'off',
+        'vue/v-on-function-call': 'error',
+    },
+};

package/typescript.js

@@ -1,9 +1,17 @@
-const config = require('./.eslintrc');
+/* eslint-disable unicorn/prefer-module */
 
-// Specifies the ESLint parser
-config.parser = '@typescript-eslint/parser';
-config.extends = [
-    'plugin:@typescript-eslint/recommended',
-];
+const base = require('.');
 
-module.exports = config;
+module.exports = {
+    ...base,
+    overrides: [
+        ...base.overrides,
+        {
+            extends: [
+                'plugin:@typescript-eslint/recommended',
+            ],
+            files: ['**/*.ts'],
+            parser: '@typescript-eslint/parser',
+        },
+    ],
+};

package/vue.js

@@ -1,5 +1,22 @@
-const config = require('./.eslintrc');
+/* eslint-disable unicorn/prefer-module */
 
-config.extends.push('./configs/vue');
+const base = require('.');
 
-module.exports = config;
+module.exports = {
+    ...base,
+    overrides: [
+        ...base.overrides,
+        {
+            extends: [
+                'plugin:vue/recommended',
+                'plugin:vuejs-accessibility/recommended',
+                './rules/vue',
+            ],
+            files: ['**/*.vue'],
+            parser: 'vue-eslint-parser',
+            parserOptions: {
+                parser: '@babel/eslint-parser',
+            },
+        },
+    ],
+};

package/.eslintrc.js

@@ -1,29 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es6: true,
-        node: true,
-    },
-    extends: [
-        './configs/errors',
-        './configs/es6',
-        './configs/jsdoc',
-        './configs/practices',
-        './configs/style',
-        './configs/variables',
-    ],
-    ignorePatterns: [
-        '!.stylelintrc.js',
-    ],
-    overrides: [
-        {
-            files: ['**/*.js'],
-            parser: '@babel/eslint-parser',
-        },
-    ],
-    parserOptions: {
-        ecmaVersion: 2020,
-        requireConfigFile: false,
-        sourceType: 'module',
-    },
-};

package/configs/vue.js

@@ -1,20 +0,0 @@
-module.exports = {
-    overrides: [
-        {
-            extends: [
-                'eslint:recommended',
-                'plugin:vue/vue3-recommended',
-            ],
-            files: ['*.vue'],
-            parser: 'vue-eslint-parser',
-            parserOptions: {
-                ecmaVersion: 2020,
-                parser: '@babel/eslint-parser',
-                sourceType: 'module',
-            },
-            rules: {
-                'vue/html-indent': ['error', 4],
-            },
-        },
-    ],
-};