Eslint reporting in VSCode but not on the terminal - eslint

I'm using es-lint VScode extension and it is catching 5 linting errors, however when I run npm run lint from package.json It only lists 2 errors. I'm wondering why the terminal is not outputting all linting errors, so I can fix it with esw --fix on save.
Note: I'm using both prettier and airbnb config rules.
Here is my .eslintrc:
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"globals": { "document": false }
}
Here is pacjakge.json:
{
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"styled-components": "^2.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint --fix ./src",
"watch:lint": "node_modules/eslint-watch/bin/esw -w --fix"
},
"devDependencies": {
"eslint": "^4.12.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"prettier": "^1.9.1"
}

You are using the --fix option when running npm run lint, that means ESLint will only display errors/warnings it can't fix automatically.. everything else, it will just fix and not complain about.
If you want it to list all the errors/warning, you can remove --fix from your NPM script, and it will list all erros/warnings it finds (it will run eslint ./src). Later if you want to fix the errors as well, run npm run lint -- --fix, that will pass everything after -- directly to the script, i.e., will run eslint ./src --fix which will work correctly.

Related

I re-installed node_modules in Nuxt.js and suddenly Must use import to load ES Module:~ appeared

When I re-installed node_modules, I was suddenly told that ufo and node-fetch were missing. After adding them, I ran npm run dev and opened localhost in a browser and encountered this error.
This error also occurred when I cloned this project on another laptop, and I am at a loss as to how to fix it.
I tried to solve the problem by myself as much as possible, but I couldn't find a solution because the stackframe was somehow Missing stack frames and this error itself is an error in the library. I'm not very familiar with tack overflow questions, so please let me know if you find any problems.
error
Must use import to load ES Module: C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\node-fetch#3.2.6\node_modules\node-fetch\src\index.js require() of ES modules is not supported. require() of C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\node-fetch#3.2.6\node_modules\node-fetch\src\index.js from C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\vue-server-renderer#2.6.14\node_modules\vue-server-renderer\build.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\node-fetch#3.2.6\node_modules\node-fetch\package.json.
Stack frames
internal/modules/cjs/loader.js:1089:13
Module._extensions..js
internal/modules/cjs/loader.js:937:32
Module.load
internal/modules/cjs/loader.js:778:12
Module._load
internal/modules/cjs/loader.js:961:19
Module.require
internal/modules/cjs/helpers.js:92:18
require
webpack:/external "node-fetch":1:
Object.node-fetch
webpack/bootstrap:25:
__webpack_require__
.nuxt/server.js:1:
Module../.nuxt/server.js
webpack/bootstrap:25:
__webpack_require__
package.json
{
"name": "nuxt_main",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
"lint:prettier": "prettier --check .",
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lintfix": "prettier --write --list-different . && npm run lint:js -- --fix && npm run lint:style -- --fix",
"prepare": "husky install",
"test": "jest"
},
"lint-staged": {
"*.{js,vue}": "eslint --cache",
"*.{css,scss,sass,html,vue}": "stylelint",
"*.**": "prettier --check --ignore-unknown"
},
"dependencies": {
"#mdi/js": "^6.7.96",
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.19.3",
"csv-loader": "^3.0.3",
"csv-parse": "^5.2.0",
"fs": "0.0.1-security",
"node-fetch": "^3.2.6",
"nuxt": "^2.15.8",
"pnpm": "^7.4.0",
"ufo": "^0.8.4",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.3",
"#nuxtjs/eslint-config": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/stylelint-module": "^4.1.0",
"#nuxtjs/vercel-builder": "^0.22.1",
"#nuxtjs/vuetify": "^1.12.3",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.4.4",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-vue": "^8.2.0",
"husky": "^7.0.4",
"jest": "^27.4.4",
"lint-staged": "^12.1.2",
"postcss-html": "^1.3.0",
"prettier": "^2.5.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"vue-jest": "^3.0.4"
}
}
OS: Windows
Node: v14.17.4
Apparently it was due to pnpm not being able to install all the required packages.
Running pnpm install followed by npm install (or yarn install) solved the problem.

Husky Hook does not work properly with Test

I'm configuring Husky to block commits if the prettier or eslint accuses both an error or warn, and block the push if it doesn't pass the tests.
However, when running the test, the test CLI is displayed (it is in the image below), with this, no key works, but I can only finish by clicking with the shortcut ctrl+z, which suspends my push.
MY CODE IN .HUSKY FOLDER:
pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn prettier-check
yarn lint-check
pre-push
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn test
MY PACKAGE.JSON:
{
"name": "web-whatsapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prettier-check": "prettier --check 'src/**/*.{ts,tsx}'",
"prettier-fix": "prettier --write 'src/**/*.{ts,tsx}'",
"lint-check": "eslint 'src/**/*.{ts,tsx}'",
"lint-fix": "eslint --fix 'src/**/*.{ts,tsx}'",
"prepare": "husky install"
},
"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": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.2.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.3.5",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^4.0.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Well, what I had to do was this ..
Install the cross-env library in development mode. This library causes the terminal to clear the buffer at the end of the test run in order to continue with the pre-push Hook.
I inserted the following in the "test" scripts:
"test": "cross-env CI = true react-scripts test --passWithNoTests"
About CI = true
This environment variable, short for Continuous Integration, is commonly defined in various CI environments, such as Travis CI and Github Actions, among many others.
NOTE
Do not use the --watchAll flag, as it will "lock" the terminal.

How do I get lint-staged working with Husky version 6

I try to use Husky's pre-commit and lint-staged.
Those are installed:
"husky": "^5.1.3",
"lint-staged": "^10.5.4",
In package.json I have:
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"isready": "npm run format && npm run lint && npm run build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm test",
}
},
"lint-staged": {
"./src/*.{js,jsx,ts,tsx}": [
"npm run format",
"npm run lint",
"git add"
]
},
If I run npm run lint, currently I have 2 problems (1 error, 1 warning). So when I run git commit, I don't expect to be able to commit, right? But I can proceed and finish the commit.
What's wrong?
Update:
I downgraded husky to 4.3.8:
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
Inside package.json, in my scripts I have:
"prettier": "prettier '**/*.{js,jsx,ts,tsx}' --write",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
And:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{ts,tsx,js,jsx}": [
"npm run prettier",
"npm run lint",
"git add"
]
},
When I do a commit, Husky is still not fired off. What's wrong?
Update 2:
I couldn't get Husky 4 to work so I upgraded to version 6:
npm install husky#6 --save-dev \
&& npx husky-init \
&& npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
Now it works fine.
The only thing I can't get to work is lint-staged.
I added the hook npx husky add .husky/pre-commit "lint-staged"
But then I get .husky/pre-commit: line 4: lint-staged: command not found? How do I get lint-staged working with Husky version 6?
Making lint-staged working with Husky version 6 by adding:
// .husky/pre-commit
npm run pre-commit
and:
// package.json
{
"scripts": {
"pre-commit": "lint-staged"
}
}
Based on this husky github issue, just do these steps to make it work(we did it and it is working fine):
npx husky-init
yarn
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
yarn add #commitlint/config-conventional #commitlint/cli --dev
.commitlintrc.json:
{
"extends": ["#commitlint/config-conventional"]
}
.lintstagedrc:
{
"src/**/*.+(js|json|ts|tsx)": [
"eslint"
],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
}
.husky/pre-commit:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn pre-commit-lint
Finally, add pre-commit-lint script to package.json:
{
"name": "pwa-react-scaffold",
"version": "0.1.0",
"private": true,
"author": "SeyyedMahdi Hassanpour <SeyyedKhandon#gmail.com>",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "yarn build && source-map-explorer 'build/static/js/*.js'",
"lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
"check-types": "tsc",
"prettier": "prettier --ignore-path .gitignore \"src/**/*.+(js|jsx|json|ts|tsx)\"",
"format": "yarn prettier --write",
"check-format": "yarn prettier --list-different",
"validate": "npm-run-all --parallel check-types check-format lint build",
"prepare": "husky install",
"pre-commit-lint": "yarn check-types && yarn lint-staged"
},
"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": "^16.9.53",
"#types/react-dom": "^16.9.8",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"source-map-explorer": "^2.5.2",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.3",
"workbox-broadcast-update": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-expiration": "^5.1.3",
"workbox-google-analytics": "^5.1.3",
"workbox-navigation-preload": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-range-requests": "^5.1.3",
"workbox-routing": "^5.1.3",
"workbox-strategies": "^5.1.3",
"workbox-streams": "^5.1.3"
},
"devDependencies": {
"#commitlint/cli": "^12.1.1",
"#commitlint/config-conventional": "^12.1.1",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-jest-dom": "^3.8.0",
"eslint-plugin-testing-library": "^4.1.0",
"eslint-plugin-unused-imports": "^1.1.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1"
}
}
#meez As you install husky#^5.1.3 version, Husky changed the configuration step after 5.0.0.
Configure Husky#^5.0.0:
npm i husky
npx husky install
husky install .config/husky
husky add .config/husky/pre-commit "npm test"
Link: https://dev.to/typicode/what-s-new-in-husky-5-32g5
or you can simply degrade your husky version :)
another option: Use npx in the pre-commit config
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

React native package-lock.json duplicate dependencies/packages

Whenever I run npm i in my project base directory, the package-lock file is doubled in size. This seems to be happening because there is a "packages" part in the package-lock, which contains all project dependencies stated as "node_modules/somePackageName", but after all 10,000 of these lines there is a "dependencies" part which essentially has all of the same things but without the node_modules prefix part. Whenever anyone in my group runs npm i, nothing new is added but when I run it the 10,000 lines with node_modules/... are added.
I have tried deleting node_modules as well as the package lock, and then doing npm i again, but the same result happens. I understand the functionality of package-lock, but I don't know why it is adding everything twice with a different path.
Here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios --simulator=\"iPhone 11 Pro Max\"",
"web": "expo start --web",
"eject": "expo eject",
"lint": "eslint --ext .js,.jsx ./components --quiet",
"lint-autofix": "eslint --ext .js,.jsx ./components --quiet --fix"
},
"dependencies": {
"#expo-google-fonts/montserrat": "^0.1.0",
"#expo/vector-icons": "^10.2.1",
"#react-navigation/bottom-tabs": "^5.9.2",
"#react-navigation/native": "^5.7.6",
"expo": "^39.0.3",
"expo-font": "~8.3.0",
"expo-status-bar": "~1.0.2",
"firebase": "7.9.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-gesture-handler": "~1.7.0",
"react-native-paper": "^4.2.0",
"react-native-reanimated": "^1.13.1",
"react-native-screens": "~2.10.1",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.13.12",
"react-navigation-stack": "^2.10.1",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2"
},
"private": true
}
For anyone still facing this, I fixed this by downgrading my npm version to 6.14.5. (I was on 7 earlier)

How to start React App on Development machine as in specific environment?

We are using Microsoft Windows for both development and hosting.
npm version - 6.8.0
node version - 10.15.3
I would like to know how I can start my ReactApp locally on my development machine as in Production environment.
We have multiple environments at work such as Test, Staging, PreProd, Prod.... etc and we want to test the behaviour of the app without actual deployment to the target env.
We've got some logic statements in the source codes by using process.env.NODE_ENV to check the different environments.
I tried to update package.json scripts section as the following. But, it doesn't work.
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I tried both start-prod and start-prod2 . Even though it hosts the app successfully, it's always in development mode. Please see the following screenshots:
npm run start-prod
npm run start-prod2
If I use npm run build, it generates the build with production env. But it takes too much time to test.
Could you please guide me how I could simulate the various environment in my development machine?
P.S. I'm just using the default create-react-app script set up and I don't have any custom webpack config file.
Complete package.json file
{
"name": "react-workout-diary",
"version": "0.10.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.18",
"#fortawesome/free-brands-svg-icons": "^5.8.2",
"#fortawesome/free-regular-svg-icons": "^5.8.2",
"#fortawesome/free-solid-svg-icons": "^5.8.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"es6-object-assign": "^1.1.0",
"es6-promise": "^4.2.6",
"formik": "^1.5.7",
"has-value": "^2.0.2",
"is-empty": "^1.2.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-datepicker": "^2.6.0",
"react-delay": "^0.1.0",
"react-dom": "^16.8.6",
"react-moment": "^0.9.2",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.0.1",
"react-toastify": "^5.2.1",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2",
"redux-saga-routines": "^3.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"uuid": "^3.3.2",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"cross-env": "^5.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"enzyme-to-json": "^3.3.5",
"react-test-renderer": "^16.8.6",
"redux-saga-test-plan": "^4.0.0-beta.3"
}
}
You can't change the NODE_ENV variable:
You cannot override NODE_ENV manually. This prevents developers from
accidentally deploying a slow development build to production.
What you can do is to use different .env files:
From: React documentation
Files on the left have more priority than files on the right:
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)

Resources