From b0d71ac52a3e3f9431efc8c4cd8c2900c55c9132 Mon Sep 17 00:00:00 2001 From: DoubleU23 <5007050+DoubleU23@users.noreply.github.com> Date: Mon, 24 Jan 2022 22:04:14 +0100 Subject: [PATCH 1/4] config(prettier): remove overrides for JS files JS and TS files are handled by EsLint only --- prettier.config.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/prettier.config.js b/prettier.config.js index 3998bb0..cb61e5f 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -9,12 +9,4 @@ module.exports = { bracketSpacing: true, proseWrap: 'preserve', quoteProps: 'as-needed', - overrides: [ - { - files: '*.{js,jsx}', - options: { - parser: 'babel', - }, - }, - ], } From 0b882a55a1da889c8f02b85880b774bf83215d19 Mon Sep 17 00:00:00 2001 From: DoubleU23 <5007050+DoubleU23@users.noreply.github.com> Date: Mon, 24 Jan 2022 22:45:18 +0100 Subject: [PATCH 2/4] docs(README): update and format HOWTO --- README.md | 105 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 55 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 8c909b3..91f20b2 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,13 @@ - [NPM Lint Script](#npm-lint-script) - [Integration (VsCode)](#integration-vscode) - [Import Resolvers](#import-resolvers) - - [webpack](#webpack) - - [node](#node) + - [Webpack Resolver](#webpack-resolver) + - [Node Resolver](#node-resolver) ## 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,21 +20,16 @@ _includes all eslint and prettier related plugins and shared configs_ ## Configuration -**eslint** (_either JS or JSON_) - -**JS - {workspace}/.eslintrc.js:** +**EsLint DotFile** (_use **either** JS or JSON_) ```js +// NodeJS - {workspace}/.eslintrc.js module.exports = { extends: [require.resolve('@stackr23/config-eslint')] } +// JSON - {workspace}/.eslintrc +{ "extends": ["./node_modules/@stackr23/config-eslint"] } ``` -**JSON - {workspace}/.eslintrc:** - -```json -{ "extends": ["./node_modules/@stackr23/config-eslint/index.js"] } -``` - -**prettier** +**Prettier DotFile** ```js // {workspace}/prettier.config.js @@ -43,47 +38,58 @@ 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"` +`eslint --fix . --quiet --format pretty && prettier ./**/*.{css,scss,md,json,yml} --write` ### Integration (VsCode) **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 }, } @@ -91,26 +97,26 @@ module.exports = require('@stackr23/config-eslint/prettier.config.js') ### Import Resolvers -> enables absolute import paths +> enables absolute import paths for `eslint-plugin-import` > like `import Header from 'components/Header'` -#### webpack - -> applied to env 'react' +#### Webpack Resolver +> 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,8 +128,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' ```javascript From 1b5290c2beae148bb62a903015bf73fe1f0cfebc Mon Sep 17 00:00:00 2001 From: DoubleU23 <5007050+DoubleU23@users.noreply.github.com> Date: Tue, 25 Jan 2022 00:41:33 +0100 Subject: [PATCH 3/4] config(@babel/register): use workspace config --- .eslintrc.js | 7 +------ env/react.js | 5 +++-- package-lock.json | 2 +- package.json | 14 -------------- utils/babelRegister.js | 11 ----------- 5 files changed, 5 insertions(+), 34 deletions(-) delete mode 100644 utils/babelRegister.js diff --git a/.eslintrc.js b/.eslintrc.js index 6f6393a..65cb4b0 100644 --- a/.eslintrc.js +++ b/.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') ], diff --git a/env/react.js b/env/react.js index d8976f9..704fcbe 100644 --- a/env/react.js +++ b/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: { diff --git a/package-lock.json b/package-lock.json index d0e2fa2..94e543a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@stackr23/config-eslint", - "version": "2.0.3", + "version": "2.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1683d5b..ee3f3e8 100644 --- a/package.json +++ b/package.json @@ -17,20 +17,6 @@ }, "author": "Stefan Friedl ", "license": "MIT", - "babel": { - "presets": [ - [ - "@babel/preset-env", - { - "modules": "commonjs", - "targets": { - "esmodules": true - } - } - ], - "@babel/preset-react" - ] - }, "engines": { "node": ">=10.0.0" }, diff --git a/utils/babelRegister.js b/utils/babelRegister.js deleted file mode 100644 index fabb544..0000000 --- a/utils/babelRegister.js +++ /dev/null @@ -1,11 +0,0 @@ -require('@babel/register', { - presets: [ - [ - '@babel/preset-env', - { - modules: 'commonjs', - targets: { esmodules: true }, - }, - ], - ], -}) From 6e85b51f44f1410d0d5c905c23b3ee0016232de0 Mon Sep 17 00:00:00 2001 From: DoubleU23 <5007050+DoubleU23@users.noreply.github.com> Date: Tue, 25 Jan 2022 00:42:47 +0100 Subject: [PATCH 4/4] docs(README): add BADGES for CI status and NPM --- README.md | 41 +++++++++++++++++++++++++++-------------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 91f20b2..cbc3462 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,21 @@ # @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) + + + +[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/ + + + - [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 Resolver](#webpack-resolver) - - [Node Resolver](#node-resolver) ## Installation @@ -20,34 +29,36 @@ _includes all eslint and prettier related plugins and shared configs_ ## Configuration -**EsLint DotFile** (_use **either** JS or JSON_) +### NPM Lint Script + +`eslint --fix . --quiet --format pretty && prettier ./**/*.{css,scss,md,json,yml} --write` + +### DotFiles + +**EsLint** (_use **either** JS or JSON_) ```js // NodeJS - {workspace}/.eslintrc.js module.exports = { extends: [require.resolve('@stackr23/config-eslint')] } // JSON - {workspace}/.eslintrc -{ "extends": ["./node_modules/@stackr23/config-eslint"] } +{ "extends": ["./node_modules/@stackr23/config-eslint"] } ``` -**Prettier DotFile** +**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 - -`eslint --fix . --quiet --format pretty && prettier ./**/*.{css,scss,md,json,yml} --write` - -### Integration (VsCode) +### VsCode Integration **install extensions:** - "[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 -**JSON Config** - __'{workspace}/.vscode/settings.json'__ or global as [User Settings](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) +**JSON Config** - **'{workspace}/.vscode/settings.json'** or global as [User Settings](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) ```javascript { @@ -100,7 +111,8 @@ module.exports = require('@stackr23/config-eslint/prettier.config.js') > enables absolute import paths for `eslint-plugin-import` > like `import Header from 'components/Header'` -#### Webpack Resolver +**Webpack Resolver** + > 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 @@ -128,7 +140,8 @@ 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 Resolver +**Node Resolver** + > applied to env 'browser' and 'node' ```javascript