We Keep Coding

Eslint with ts-standard save issue

Its my first time using both Typescript and Eslint, I have an issue with the save fix, when I save my project it doesnt change the file with the settings I provide:
This is my eslintrc.js:
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
],
overrides: [],
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
},
plugins: ["react", "#typescript-eslint"],
rules: {
indent: ["error", 2],
"linebreak-style": ["error", "unix"],
quotes: [2, "single", { avoidEscape: true }],
semi: ["error", "never"],
},
};
And this is my package.json:
{
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "ts-node-dev src/index.ts",
"lint": "ts-standard",
"tsc": "tsc",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node build/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/express": "4.17.17",
"#types/node": "18.13.0",
"#types/validator": "13.7.12",
"#typescript-eslint/eslint-plugin": "^5.52.0",
"#typescript-eslint/parser": "^5.52.0",
"eslint": "8.34.0",
"eslint-plugin-react": "^7.32.2",
"ts-node-dev": "2.0.0",
"ts-standard": "12.0.2",
"typescript": "4.9.5"
},
"dependencies": {
"body-parser": "1.20.1",
"cookie-parser": "1.4.6",
"cors": "2.8.5",
"dotenv": "16.0.3",
"express": "4.18.2",
"morgan": "1.10.0",
"pg": "8.9.0",
"reflect-metadata": "0.1.13",
"sequelize": "6.28.0",
"sequelize-typescript": "2.1.5"
},
"eslintConfig": {
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"./node-modules/ts-standard/eslintrc.json"
]
}
}
To fix it I tried with commands on the console like:
./node-module/ts-standard/eslintrc.json --fix
Also this adding this to the package.json:
"#typescript-eslint/quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
]
I also fix this by simply changing the settings from simple to double but I want simple quotes for my config

VSCode: No auto-suggestion while importing modules in node express app

I am using babel, eslint, and prettier for Node Rest API. To use absolute path I am using a package called babel-plugin-module-resolver but when I do use ES6 imports, I noticed that there is no auto suggestions. However, when I use relative path, everything seems to work perfectly fine.
Relative Path (Desired behavior with ES6 import and Absolute path)
Absoulte Path (No suggestions)
Here are my configuration files
1. package.json
{
"name": "prod-js-starter",
"version": "1.0.0",
"description": "Production level starter for node.js based express RESTFull APIs",
"main": "src/server.js",
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"build": "npm run clean && babel ./src --out-dir build --copy-files",
"start": "NODE_ENV=production node build/server.js",
"dev": "nodemon --exec babel-node src/server.js",
"clean": "rm -rf build"
},
"dependencies": {
"dotenv": "^16.0.0",
"express": "^4.17.3",
"module-alias": "^2.2.2"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.9",
"#babel/node": "^7.16.8",
"#babel/preset-env": "^7.16.11",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.13.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.0.0",
"nodemon": "^2.0.15",
"prettier": "^2.6.2"
}
}
2. eslint.json
{
"env": {
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
// "func-names": "off",
"prettier/prettier": "error",
"no-unused-vars": "warn",
"no-console": "warn"
},
"plugins": ["prettier"],
"settings": {
"import/resolver": {
"babel-module": {}
}
}
}
3. .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"#src": "./src"
}
}
]
]
}
Please help me to get those suggestions working like before. Its a simple feature but quite efficient.

How to solve Eslint - Module.createRequire is not a function error?

I'm using react app with Parcel bundler & TypeScript.
I'm trying to use ESLint but I get this error:
ESLint: Initialization error (ESLint). Module.createRequire is not a function.
versions:
IDE: Webstorm
Node Version: 16.6.2
NPM Version: 7.20.3
I don't have ESLint installed globally in my machine
This is my setup:
package.json:
{
"name": "app-boilerplate",
"version": "1.0.0",
"description": "",
"source": "public/index.html",
"scripts": {
"start": "parcel --port=3000 --open --lazy",
"build": "parcel build",
"lint": "eslint . --ext .tsx,.ts",
"lint:fix": "eslint . --ext .tsx,.ts --fix",
"test": "jest --coverage --passWithNoTests",
"test:watch": "jest --watchAll --coverage",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.7",
"#parcel/transformer-svg-react": "^2.2.0",
"#storybook/addon-actions": "^6.4.13",
"#storybook/addon-essentials": "^6.4.13",
"#storybook/addon-links": "^6.4.13",
"#storybook/react": "^6.4.13",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/jest": "^27.4.0",
"#typescript-eslint/eslint-plugin": "^5.9.1",
"#typescript-eslint/parser": "^5.9.1",
"babel-loader": "^8.2.3",
"eslint": "^8.7.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.5.5",
"husky": "^7.0.4",
"jest": "^27.4.7",
"parcel": "^2.2.0",
"prettier": "^2.5.1",
"ts-jest": "^27.1.3",
"typescript": "^4.5.4"
},
"dependencies": {
"#types/node": "^17.0.8",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"alias": {
"#hooks": "./src/hooks",
"#libs": "./src/libs"
}
}
.eslintrc.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"prettier",
"plugin:storybook/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint",
"jsx-a11y"
],
"rules": {
"import/extensions": [2, "never"],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", ".ts"] }],
"react/jsx-indent": [2, 2, {"checkAttributes": true, "indentLogicalExpressions": true}],
"react/react-in-jsx-scope": "off",
"no-console": "off"
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
The actual error inside Webstorm
How can I solve it, please?
Thank you.

I had the same issue. Tried in Webstorm terminal following commands:
nvm current (I use nvm) and node -v. Both of these commands returned 16.14.0.
But the issue only went away when I changed default used version of node in Webstorm editor itself. You can do this by pressing CTRL + ALT + S. Then select Languages & Frameworks and after that Node.js. Value for Node interpreter: was there 10 and I switched it there to 16.14.0. If you do not have this version od nodejs installed on your machine, I suggest you use nvm (node version manager).

Simply updating your node version will resolve the issue. You can try Node 14 or 16 version.
Although you are saying using Node 16.6.2 but definitely it's not been used when you are running the script.

It is the problem of Node version, just update the Node to the correct version.
https://eslint.org/docs/latest/user-guide/migrating-to-8.0.0
enter image description here

In my case the issue happened because I had created the project on WSL Ubuntu, so the solution was to (so adding on to Lazar's answer, in a way) change WebStorm's Node interpreter to WSL. Click on the ... and then + to add the Node/NPM installed on your WSL distros in case it doesn't show in the drop down list of interpreters.

How to make rollup.js build a react library on installing (yarn add ssh://git#my-repo-url)

I've created a private react library (git repo) with rollup.js, and it's installing correctly with the command yarn add ssh://git#my-repo-url but it's not building (creating build/dist in node_modules/library-folder) on installing. How can I fix it? What's the 'magic' behind the alternative create-react-library. Is npm behind this?
Here is my rollup.con.js:
import commonjs from "#rollup/plugin-commonjs";
import resolve from "#rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "#rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import packageJson from "./package.json";
export default {
input: "./src/components/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript(),
postcss()
]
};
and my package.json:
{
"name": "my-ui-lib",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"main": "./build/index.js",
"module": "./build/index.es.js",
"scripts": {
"test": "react-scripts test",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"build": "rollup -c",
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#rollup/plugin-commonjs": "^19.0.0",
"#rollup/plugin-node-resolve": "^13.0.0",
"#rollup/plugin-typescript": "^8.2.1",
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/node-logger": "^6.2.9",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.2.9",
"postcss": "^8.3.2",
"rollup": "^2.51.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}

You don't need any specialty packages/boilerplate code to install from a local/private github repo. Just follow these simple steps:
1.) Make sure you're using the correct github repo:
git+ssh://git#github.com/<github_username>/<github_repo>
<github_username> should be your github username
<github_repo> should be the name of your github repository
2.) Prep your package.json with the necessary fields, but most importantly add a prepare or prepublish script to your scripts in your package.json:
{
"name": "#example/my-package",
"version": "0.1.0",
"description": "My package description.",
// 'main' and 'module' are useful for bundlers (like webpack) to know which version to default import
"main": "index.js",
"module": "esm/index.mjs",
// 'sideEffects' is optional, let's bundlers (like webpack) know that it's tree-shakeable
"sideEffects": false,
"homepage": "https://github.com/<github_username>/<github_repo>#readme",
// 'files' is required to let your package manager know what should be installed in node_modules
"files": [
"index.js",
"index.d.ts",
"decrypt/index.js",
"decrypt/index.d.ts",
"encrypt/index.js",
"encrypt/index.d.ts",
"esm"
],
// 'types' is optional, but useful for typescript typings
"types": "./index.d.ts",
// 'exports' is optional, but useful for submodule imports
"exports": {
".": "./index.js",
"./decrypt": "./decrypt/index.js",
"./encrypt": "./encrypt/index.js",
"./esm": "./esm/index.mjs",
"./esm/decrypt": "./esm/decrypt/index.mjs",
"./esm/encrypt": "./esm/encrypt/index.mjs"
},
// 'scripts' will be leveraged by adding a 'prepare' or `prepublish` script to let the package manager know what to run during dependency installation
"scripts": {
"build": tsc --p ./ts/tsconfig.cjs.json && ts-node ./utils/compress.ts",
"build:esm": "rollup -c",
"lint": "eslint ./ --ext .ts,.js && tsd",
"prepare": "npm run build && npm run build:esm",
"test": "jest --config ./jest.json --coverage",
},
// 'repository' is optional, but useful to tell developers/remote websites (like npmjs) where your code resides
"repository": {
"type": "git",
"url": "git#github.<github_username>/<github_repo>.git"
},
"author": "Firstname Lastname",
"license": "MIT",
"bugs": {
"url": "https://github.com/<github_username>/<github_repo>/issues"
},
// 'engines' is highly recommended as it lets the package manager know which versions of node will be able to run the package without issues
"engines": {
"node": ">=12"
},
"devDependencies": { ... },
}
3.) Install the package using npm or yarn:
# with npm
npm install git+ssh://git#github.com/<github_username>/<github_repo>
# or with yarn
yarn add git+ssh://git#github.com/<github_username>/<github_repo>
4.) Import the package by the name specified in the package.json:
const example = require("#example/my-package");
// import example from "#example/my-package";
...etc
Example package repo:
https://github.com/mattcarlotta/example-env
Example using package repo:
https://github.com/mattcarlotta/example-using-repo
Result:

configuration issue with npm-watch -- not hearing changes in some cases

I am working on a build script that uses rollup along with other tools to build stuff. Everything works well individully, but npm-watch is being very selective in what it listens to. I have confiured it to use four different eatches, but only one (watch:js) responds. Here is a link to the repo. Here is the package.json:
{
"name": "es6_rollup_seed",
"version": "1.0.0",
"description": "an npm build environment that implements rollup.js",
"main": "index.js",
"watch": {
"watch:html": {
"patterns": [
"src"
],
"extensions": "html"
},
"watch:js": {
"patterns": [
"src/js"
],
"extensions": "js"
},
"watch:img": {
"patterns": [
"src/img"
],
"extensions": "jpg,png,svg,gif"
},
"watch:css": {
"patterns": [
"src/scss"
],
"extensions": "scss"
}
},
"scripts": {
"test": "npm run test",
"start": "run-s init:*",
"init:create-folders": "mkdirp build/js build/css build/img",
"init:copy-content": "run-s copy-html",
"init:start": "run-p serve watch:*",
"serve": "lite-server -c bs-config.json",
"watch:html": "npm-watch copy-html",
"watch:js": "npm-watch compile-js",
"watch:img": "npm-watch copy-images",
"watch:css": "npm-watch compile-css",
"copy-html": "cpx src/*.html build",
"copy-images": "cpx src/img/*.* build/img",
"compile-js": "rollup -c",
"compile-css": "node-sass --output-style expanded --source-map true src/scss/app.scss --output build/css"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sean-olson/build_environments.git"
},
"keywords": [
"rollup",
"build",
"tool",
"npm"
],
"author": "Sean Olson",
"license": "MIT",
"bugs": {
"url": "https://github.com/sean-olson/build_environments/issues"
},
"homepage": "https://github.com/sean-olson/build_environments#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015-rollup": "^3.0.0",
"cpx": "^1.5.0",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"npm-watch": "^0.3.0",
"rollup": "^0.56.5",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.2.0",
"rollup-plugin-replace": "^2.0.0"
}
}

The solution is to use another module, in this case watch-cli