I have the following scripts and eslint rules in my package.json:
"scripts": {
"build": "tsc",
"test": "jest tests/** --coverage",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet --fix",
"prettier": "prettier --check './**/*.ts'",
"prettier-format": "prettier --config .prettierrc './**/*.ts' --write"
...
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"prettier --config .prettierrc './**/*.ts' --write",
"prettier --check './**/*.ts'",
"eslint './src/**/*.{js,ts,tsx}' --quiet --fix"
]
},
"pre-commit": [
"lint-staged"
],
When I run npm run lint I do not get any errors. But when my pre-commit hook runs, I get an error on the .eslintrc.js file:
/.../api/.eslintrc.js
1:15 error Require statement not part of import statement #typescript-eslint/no-var-requires
The line of code it's referencing has the following:
const _path = require('path');
I know I can instrument the code to force eslint to ignore this. But I do not understand why eslint is parsing .eslintrc.js in the first place as it is not located in the src folder (it's on the root folder on the same level of package.json).
Related
I'm trying to create mintable NFT and while I was using metaplex sugar i see only one thing when using command "yarn start":
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
This is how "scripts" look like:
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",,
"lint": "prettier -c 'src/**/*.{ts,tsx}' && npm run lint:eslint",
"lint:eslint": "eslint 'src/**/*.{ts,tsx}'",
"lint:fix": "prettier --write 'src/**/*.{ts,tsx}' && eslint --fix 'src/**/*.{ts,tsx}'",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
I tried using different versions of Nodes but nothing helped me. I tried to replace "scripts" using thhis:
"scripts": {
"start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
"build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build"
}
but it still doesn't work.
I have this setup:
// package.json
...
"scripts": {
...
"lint": "eslint --fix {src,test}/**/*.{js,ts,jsx,tsx} --no-error-on-unmatched-pattern",
"style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
...
"lint-staged": {
"lint-staged": {
"{src,test}/**/*.{js,ts,jsx,tsx}": [
"npm run lint",
"npm run style"
],
"!**/*.{js,ts,jsx,tsx}": "npm run style"
},
}
...
The problem is that prettier will run no matter what file is matched by the glob, prettier will also double run on all files and rewrite all of them twice.
You can't use double glob expressions when using lint-staged, it will cause conflicts.
// package.json
...
"scripts": {
...
"lint": "eslint --fix {src,test}/**/*.{js,ts,jsx,tsx} --no-error-on-unmatched-pattern",
"style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
...
"lint-staged": {
"lint-staged": {
"{src,test}/**/*.{js,ts,jsx,tsx}": [
"eslint --fix",
"prettier --write -u"
],
"!**/*.{js,ts,jsx,tsx}": "prettier --write -u"
},
}
...
Just use prettier --write -u and eslint --fix when you're running lint-staged, don't run your custom scripts otherwise the globs with conflict with one another. Instead just run eslint and prettier directly on the glob matched by lint-staged.
I am fresher to Electron and TypeScript. I am able to run the simple electron app using Typescript.
Now I wanted to use Splash screen. When I manually copy the image to dist folder, the splash screen comes and all work fine. How can I build the application using yarn build command so that assets folder should be copied to dist folder. My lead said that the copy should work for all platform. I have tried with the following package.json file. It is not an Angular project. It is a simple project.
{
"name": "electron-quick-start-typescript",
"version": "1.0.0",
"description": "A minimal Electron application written with Typescript",
"scripts": {
"copy": "npm run copy:assets",
"copy:assets": "cp -r assets/* dist",
"build1": "tsc -p tsconfig.json && npm run copy",
"build": "tsc -p tsconfig.json",
"build:watch": "tsc -p tsconfig.json --watch",
"copy:assets1": "copy -R /assets dist/assets/",
"copy-files": "xcopy ./assets/*.* ./dist/assets",
"build11": "tsc",
"watch": "tsc -w",
"lint": "tslint -c tslint.json -p tsconfig.json",
"start": "npm run build && electron ./dist/main.js"
},
"repository": "https://github.com/electron/electron-quick-start-typescript",
"build": {
"extraResources": [
{
"from": "./src/assets/",
"to": "dist",
"filter": [
"**/*"
]
}
]
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo",
"typescript"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.0.4",
"tslint": "^6.1.2",
"typescript": "^3.9.5",
"#trodi/electron-splashscreen": "1.0.0",
"babel-cli": "^6.11.4",
"babel-preset-es2015": "^6.9.0",
"browser-sync": "^2.14.0"
}
}
I am aware of several tools like husky, lint-staged and prettier, currently I have a monorepo that is using yarn workspaces and lerna, before every push using git I want prettier to format my code and run a test script, it does not matter if this happens in every project but it would be nice to only run those scripts in the projects that are changed ofcourse, my question is what tools can really help me with this and how do I set them up? Do I set them up for each project individually or can I setup something in my root package.json? It currently looks like
{
"name": "orgname",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"build": "lerna run build",
"dev": "lerna run start --stream --parallel",
"test": "lerna run test --"
},
"husky": {
"hooks": {
"pre-commit": "npm test"
}
},
"prettier": {
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
},
"devDependencies": {
"lerna": "^3.22.1"
}
}
You can add lint: ... script inside package.json of every lerna packages, for example;
./packages/web/package.json
...
"scripts": {
"lint": "vue-cli-service lint --fix"
},
./packages/api/package.json
...
"scripts": {
"lint": "eslint --fix src",
}
and in the main package.json you can add a lint script that runs every lint command of packages.
Lastly add it to the husky pre-commit hook, so it will run every time before you commit.
./package.json
"scripts": {
"lint": "lerna run lint"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint && yarn test"
}
}
Added a comment to the selected answer about using the lint-staged package, basically it enables you to apply linting and other routines specifically to changed files, and not all the package. It may be useful, depending on how you're using the monorepo approach.
/packages/example-name/.lintstagedrc.json
{
"*.{js,ts}": ["eslint --fix", "git add"]
}
/packages/example-name/package.json
{
[...]
"scripts": {
"precommit": "lint-staged"
}
[...]
}
/package.json
{
[...]
"husky": {
"hooks": {
"pre-commit": "lerna run precommit --since HEAD"
}
},
[...]
}
For more information: https://github.com/okonet/lint-staged
I would like set new favicon in my Electron App and replace default Electron icon when my app is build.
I use electron-builder package. In the doc, i see the icons need to be placed in the build directory. So :
And when i build my app, i've this message :
Application icon is not set, default Electron icon will be used.
Anyone can help me ?
Part of my package.json :
"scripts": {
"postinstall": "install-app-deps && npmpd",
"pre-build": "./node_modules/.bin/electron-rebuild",
"build-bcrypt": "npm rebuild bcrypt --update-binary",
"develop": "npm run private:compile -- --source-maps true && run-p -r private:watch private:serve",
"test": "mocha -R spec --compilers js:babel-core/register test/**/*.spec.js",
"lint": "eslint --no-ignore scripts app test *.js",
"pack": "run-s private:clean private:compile private:build:all",
"pack:mac": "run-s private:clean private:compile private:build:mac",
"pack:win": "run-s private:clean private:compile private:build:win",
"pack:linux": "run-s private:clean private:compile private:build:linux",
"private:build:all": "build -mwl",
"private:build:mac": "build --mac",
"private:build:win": "build --win",
"private:build:linux": "build --linux",
"private:watch": "npm run private:compile -- --source-maps true --watch --skip-initial-build",
"private:serve": "babel-node scripts/serve.js",
"private:compile": "babel app/ --copy-files --out-dir build",
"private:clean": "rimraf build",
"private:cleandb": "rm -rf ./categories ./presentations ./slides ./users"
},
"build": {
"win": {
"icon": "build/icon.ico"
}
}
In package.json, under the win key, you also need to specify the icon path:
"build": {
"win": {
"icon": "build/app.ico"
}
}
Had similar issue, i added directories to my build
"build":{
"directories": {
"buildResources": "resources"
}
}
and inside the directories folder i had my icon.ico file
I encounter same issue with you, since I also use build directory for my output, here is my configuration:
"build": {
"directories":{
"output": "build"
},
"mac": {
"icon": "build/logo.icns",
},
"win": {
"icon": "build/logo.png"
}
},
instead of specifying your directory such as ./logo.png which make electron shows default Electron icon is used reason=application icon is not set
I managed to have my icon on windows with the following script in package.json:
"package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=Company --version-string.FileDescription=CE --version-string.ProductName=\"Product\""