merge develop

.eslintrc.js

@@ -1,9 +1,4 @@
-require('@babel/register', {
-  modules: true,
-  presets: [ '@babel/preset-env', {
-    modules: 'commonjs',
-  }],
-})
+require('@babel/register', require('./babel.config'))
 
 module.exports = {
   'extends':        [ require.resolve('./env/react.js') ],

README.md

@@ -1,17 +1,26 @@
 # @stackr23/config-eslint
 
+![Test and Lint](https://github.com/stackr23/config-eslint/actions/workflows/test_and_lint.yml/badge.svg)
+[![NPM Release](https://img.shields.io/npm/v/%40stackr23%2Fconfig-eslint.svg?style=flat)](https://www.npmjs.com/package/%40viewar%2Fconfig-eslint) [![Conventional Commits](https://img.shields.io/badge/✔-Conventional%20Commits-blue.svg)](https://conventionalcommits.org) [![Semantic Versioning](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-blue.svg)](https://github.com/semantic-release/semantic-release)
+
+<!-- badge-urls -->
+
+[semantic-img]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-blue.svg
+[semantic-url]: https://semver.org/
+
+<!-- /badge-urls -->
+
 - [Installation](#installation)
 - [Configuration](#configuration)
   - [NPM Lint Script](#npm-lint-script)
-  - [Integration (VsCode)](#integration-vscode)
+  - [DotFiles](#dotfiles)
+  - [VsCode Integration](#vscode-integration)
   - [Import Resolvers](#import-resolvers)
-    - [webpack](#webpack)
-    - [node](#node)
 
 ## Installation
 
 > **to skip installation and configuration,**  
-> **just run** `mrm --preset @stackr23/mrm lint`
+> **just run** `npx mrm --preset @stackr23/mrm lint`
 >
 > **see:** [lint Task of '@stackr23/mrm'](https://github.com/stackr23/mrm#lint)
 
@@ -20,97 +29,106 @@ _includes all eslint and prettier related plugins and shared configs_
 
 ## Configuration
 
-**eslint** (_either JS or JSON_)
+### NPM Lint Script
 
-**JS - {workspace}/.eslintrc.js:**
+`eslint --fix . --quiet --format pretty && prettier ./**/*.{css,scss,md,json,yml} --write`
 
-```js
-module.exports = { extends: [require.resolve('@stackr23/config-eslint')] }
-```
+### DotFiles
 
-**JSON - {workspace}/.eslintrc:**
+**EsLint** (_use **either** JS or JSON_)
 
-```json
-{ "extends": ["./node_modules/@stackr23/config-eslint/index.js"] }
+```js
+// NodeJS - {workspace}/.eslintrc.js
+module.exports = { extends: [require.resolve('@stackr23/config-eslint')] }
+// JSON - {workspace}/.eslintrc
+{ "extends": ["./node_modules/@stackr23/config-eslint"] }
 ```
 
-**prettier**
+**Prettier** _(optional for scss, md, json and yml)_
 
 ```js
 // {workspace}/prettier.config.js
 module.exports = require('@stackr23/config-eslint/prettier.config.js')
 ```
 
-### NPM Lint Script
-
-`"lint": "eslint --fix --ext \".js,.jsx,.ts,.tsx\" . --quiet --format pretty && prettier **/*.{css,scss,md,json} --write"`
-
-### Integration (VsCode)
+### VsCode Integration
 
 **install extensions:**
 
-- "dbaeumer.vscode-eslint"
-- "teeLang.vsprettier"
+- "[dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)" - official EsLint Extension from Microsoft
+- "[esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)" - official Prettier Extension from Prettier
 
-**configure vscode:**
+**JSON Config** - **'{workspace}/.vscode/settings.json'** or global as [User Settings](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations)
 
 ```javascript
-// {workspace}/.vscode/settings.json
 {
-  // PRETTIER
-  {
-  "editor.formatOnSaveTimeout": 500,
-
-  "editor.defaultFormatter": "teeLang.vsprettier",
-  "vsprettier.requireConfig": true,
-  "vsprettier.packageManager": "npm",
-  "vsprettier.useEsLint": false,
-  "vsprettier.useStyleLint": true,
-
-  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
-  "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ],
-  "eslint.alwaysShowStatus": true,
-  "eslint.run": "onType",
-  "eslint.lintTask.enable": true,
-  "eslint.workingDirectories": [{ "directory": ".", "changeProcessCWD": true }],
-
-  "javascript.implicitProjectConfig.checkJs": true,
-
+  ///// LINT / FORMAT SETTINGS
+  // disable vsCode's internal default formatter
   "javascript.validate.enable": false,
   "javascript.format.enable": false,
+  "typescript.validate.enable": false,
+  "typescript.format.enable": false,
+  // use prettier as default formatter (scss, json, md, yml, ...)
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // use ESLINT for these file types
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "eslint.run": "onType", // auto check on typing
+  "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // auto fix on save
+  "eslint.alwaysShowStatus": true, // 'IgorSbitnev.error-gutters'
+  "eslint.workingDirectories": [{ "directory": ".", "changeProcessCWD": true }],
+  // Multiple languages specific editor settings NOT AVAILABLE YET
+  // https://github.com/microsoft/vscode/issues/51935
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": false,
+    "editor.formatOnType": false
+  },
   "[javascriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnPaste": false,
     "editor.formatOnSave": false,
-    "editor.formatOnType": false,
-    "editor.formatOnSaveTimeout": 500
+    "editor.formatOnType": false
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": false,
+    "editor.formatOnType": false
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": false,
+    "editor.formatOnType": false
   },
 }
 
 ```
 
 ### Import Resolvers
 
-> enables absolute import paths  
+> enables absolute import paths for `eslint-plugin-import`  
 > like `import Header from 'components/Header'`
 
-#### webpack
+**Webpack Resolver**
 
-> applied to env 'react'
+> which is applied to the default env 'react'
 
 - **uses '[tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin#readme)'** to resolve import paths  
-  **requires:** workspaceRoot/tsconfig.json  
-  see [path-mapping for typescript](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping)
+  **requires** workspaceRoot/tsconfig.json  
+  **see** [path-mapping for typescript](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping)
 - **if tsconfig.json is not present** it won't use that plugin  
-  and uses the **default resolve config**:
+  and uses the **default resolve config**:  
+  _(paths.src can be overruled by the env var WEBPACK_PATH)_
 
   ```js
     resolve: {
       extensions: ['.jsx', '.js', '.ts', '.tsx', '.json'],
       // paths are relative to workspace root
       alias:      {
-        components: join(basename(CONSTANTS.paths.src), 'components'),
-        assets: CONSTANTS.paths.assets
+        components: join(basename(CONSTANTS.paths.src), 'components'), // ./src/components
+        assets: CONSTANTS.paths.assets // ./assets
       },
       modules: ['node_modules'],
     }
@@ -122,7 +140,7 @@ module.exports = require('@stackr23/config-eslint/prettier.config.js')
   - This config will also be used by '[@stackr23/webpack](https://github.com/stackr23/webpack)'
   - for more information see [webpack's resolve config](https://webpack.js.org/configuration/resolve/)
 
-#### node
+**Node Resolver**
 
 > applied to env 'browser' and 'node'
 

env/react.js

@@ -1,6 +1,7 @@
-// babelRegister needed for import resolver
-require('../utils/babelRegister')
 const getResolveConfigPath = require('../utils/getResolveConfigPath')
+// ? babelRegister needed for import resolver ?
+// require in .eslint.js should be enough
+// require('@babel/register', require('../babel.config'))
 
 module.exports = {
   env: {

package.json

@@ -17,20 +17,6 @@
   },
   "author": "Stefan Friedl <stefan_friedl@gmx.at>",
   "license": "MIT",
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "modules": "commonjs",
-          "targets": {
-            "esmodules": true
-          }
-        }
-      ],
-      "@babel/preset-react"
-    ]
-  },
   "engines": {
     "node": ">=10.0.0"
   },

prettier.config.js

@@ -9,12 +9,4 @@ module.exports = {
   bracketSpacing: true,
   proseWrap:      'preserve',
   quoteProps:     'as-needed',
-  overrides:      [
-    {
-      files:   '*.{js,jsx}',
-      options: {
-        parser: 'babel',
-      },
-    },
-  ],
 }