Running husky/lint-staged hook for pre-commit formatting (working fine).
Having one strange bug where for some reason on one file it keeps formatting the file with a spacing of 1 tab instead of 2 spaces.
(husky/lint-staged seems to rewrite/reformat the entire file with tab spacing but just this file)
No idea why it is doing this, anyone encountered a issue like this before?
Any help on this greatly appreciated as I am pulling my hair out at this stage.
Kind regards,
UI
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,scss}": [
"prettier --write",
"git add"
]
},
Found solution to above issue.
Updated Prettier to V2.0.5 and added .prettierrc file.
Resolved all issues with Husky commits.
(Removed git add command as automatic with lint-staged V10)
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,scss}": [
"prettier --write"
]
},
Related
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'm using #babel/node package in my project
and when I run my project as:
npm run dev
I'm getting this message in cmd window:
> Using external babel configuration
> Location: "...(project folder path)\.babelrc"
And when I build my project jsx files, I received errors .
How to solve it?
Dev dependencies:
"devDependencies": {
"#babel/node": "^7.7.4",
"#babel/preset-env": "^7.7.6",
"babel-preset-env": "^1.7.0",
"nodemon": "^1.19.4"
}
.babelrc file:
{
"presets": ["next/babel", "#babel/preset-env"]
}
Had the same issue, removed "#babel/preset-env" in .babelrc file. Deleting this part solves the issue (worked for me).
My babel.rc for developing js apps using nodejs is like this:
{
"presets": [
["#babel/preset-env"],
],
"plugins": [
["#babel/transform-runtime"]
],
"env": {
"development": {
"sourceMaps": true,
"retainLines": true
}
}
}
And my dev script is like this:
"dev": "./node_modules/.bin/cross-env NODE_ENV=development ./node_modules/.bin/nodemon --exec ./node_modules/.bin/babel-node src/index.js | pino-pretty",
I use cross-env and pino, you can remove it.
I hope helpful.
I decided to delete the node modules folder, do a npm install then do a npm run serve it always gets stuck around 40% and stays there forever. When done from the UI it also gets stuck on a similar amount:
$ vue-cli-service serve --open --mode development --https --dashboard
INFO Starting development server...
40% building 118/134 modules 16 active
...tApp\node_modules\axios\lib\defaults.js
another time:
40% building 134/147 modules 13 active
...\node_modules\axios\lib\adapters\xhr.js
I notice Node.js process is constantly going at around 15%, but nothing happens if I wait and wait and wait.
Package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"#aspnet/signalr": "^1.1.4",
"axios": "^0.18.0",
"vue": "^2.6.10",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.6",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-e2e-cypress": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-plugin-unit-jest": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}
],
"keyword-spacing": [
"error",
{
"after": true
}
],
"semi": [
"error",
"always"
],
"indent": "off",
"vue/script-indent": [
"warn",
2,
{
"baseIndent": 1
}
]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/"
}
}
$ node --version v10.15.3
How do I recover from this?
Update:
There is something magic about the number 40, I removed all mentions of Axios and now I still get stuck at 40% but with a different thing:
40% building 133/146 modules 13 active
...abel\runtime-corejs2\core-js\promise.js
In my case:
It was an error into the template.
Make sure there is a container tag just after
<template><container_tag> ... your code ...</container_tag></template> it could be as simple as a <div>
Try running npm run lint and see if you've got some errors in your code.
I had accidentally left an v-bind:attribute empty, e.g. <el :items=""></el>. Once resolved, I was able to build/serve.
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
}
}
Link: https://cli.vuejs.org/guide/troubleshooting.html#running-installation-enter code herewith-sudo-or-as-root
In my case:
git conflicts left >>>>>> master in the component, which stopped it from compiling
I my case there was:
git conflict
a tag was not completely closed it was like <div> ..... </div but vs code was not showing this error. when I opened every component, it highlighted the error
Check all your components for merge conflicts.
If you're using vscode, try to search for the string >>>>> on your project folder.
This seems to be caused by an error in one of your project files which prevents compilation and also compresses any error message.
I was personally bothered by this today, and spent a lot of time unnecessarily debugging WSL before finding the error in one of my components.
Try to comment out or remove any components, in templates, component registrations and imports, until it starts loading again.
I ran a linter as a step before serve and noticed that it corrected one of the files. It still didn't run. But I decided to go through the file and noticed that there was one closing tag missing.
It will be tedious, but look through your components to see whether you have a missing closing tag.
I also found that checking the first place the numbers pause and using that as a way to narrow down the file with a problem helped me sort it out faster.
40% building 223/268 modules 45 active ...rders\List.vue?
In my case, one of the environment variables wasn't defined. After I defined it using Webpack DefinePlugin, it all started working again. It would be great to see an actual error in such a case instead of the build process hanging.
I solve this problem by add .eslintignore file. Because I use a big packed third-party module directly in project.
It is most likely due to an error in your source files. In my case I started by removing an import of a deleted component in the main.js, then I removed a few <style> tags from two components (vue prohibits tags that have side effects in template). It may also help to monitor the last files being processed to get a clue about where to look at.
I wasn't missing any tags, but I had copied from my data section in the script to a v-if tag (to ensure I spelled the data variable properly) and I accidentally left the : instead of changing it to an =.
If you are having this problem, it might be something else to check for. It was pretty hard to see! But by removing sections of the code a piece a a time I zeroed in on it.
i am trying to add prehook if there is any linting issue with the code fail to commit.what is correct approach to implement it.
tslint.sh
#!/bin/sh
sh ./npm-install.sh
if [ $? -ne 0 ]; then
echo "npm-install error, exiting.."
exit 1
fi
echo "Running ts lint"
npm run lint
if [ $? -ne 0 ]; then
echo "Unit tests error, exiting.."
exit 1
fi
I had a successful experience to implement this with:
husky => to specify git hook
lint-staged => run a command to staged files in git (so no need to run tslint to all files)
Reference:
https://github.com/okonet/lint-staged
https://www.npmjs.com/package/husky
in package.json, specify lint-staged and pre-commit in husky field:
"dependencies": ...,
"devDependencies": ...,
"scripts" ...,
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.ts": [ // target to all typescript files in staged stage in git
"npm run lint", // your lint command
"git add"
]
}
Here's one way: https://www.npmjs.com/package/pre-commit
pre-commit is a pre-commit hook installer for git. It will ensure that your npm test (or other specified scripts) passes before you can commit your changes. This all conveniently configured in your package.json.
package.json:
{
"name": "app name",
"version": "0.1.0",
"license": "MIT",
"author": "author",
"contributors": [
],
"description": "...",
"scripts": {
"ng": "ng",
"precommit": "lint-staged"
},
...,
"lint-staged": {
"*.{ts,js,sccs,json}": [
"ng lint app-name --fix",
"./node_modules/.bin/prettier --write",
"git add"
]
},
"dependencies": {
...
},
"devDependencies": {
...
"lint-staged": "^7.2.0",
"prettier": "^1.13.5",
"ts-node": "^6.1.2",
"tslint": "^5.10.0",
"typescript": "2.7.2"
}
}
I have a Nuxt.js project to which I added just a few components for now. It runs flawlessly if build local. I wanted to test it on Heroku, however I get some webpack related build errors, in which I bury already 3 days.
remote: ERROR in ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue
remote: Module not found: Error: Can't resolve '../components/Sidebar/_Sidebar.vue' in '/tmp/build_fe4d2e874dff634cf8c7db3886460988/layouts'
remote: # ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue 30:0-57
remote: # ./layouts/default.vue
remote: # ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
remote: # ./.nuxt/App.vue
remote: # ./.nuxt/index.js
remote: # ./.nuxt/server.js
I've also installed a fresh copy the nuxtjs.org starter theme but there is no error. It builds like charm.
This is my package.json
{
"name": "some-nuxt",
"version": "0.3.0",
"description": "nuxt-sandbox ",
"private": true,
"dependencies": {
"axios": "^0.15.3",
"nuxt": "^0.9.9",
"vue-touch": "^2.0.0-beta.4"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"heroku-postbuild": "npm run build"
},
"devDependencies": {
"ava": "^0.18.2",
"babel-eslint": "^7.1.1",
"eslint": "^3.16.0",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-promise": "^3.4.2",
"eslint-plugin-standard": "^2.0.1",
"jsdom": "^9.11.0",
"node-sass": "^4.5.0",
"sass-lint": "^1.10.2",
"sass-loader": "^6.0.2"
}
}
This is some customisations from my nuxt.config.js file.
css: [
// '~assets/css/main.css',
{ src: '~assets/scss/app.scss', lang: 'sass' } // scss instead of sass
],
...
alias: {
'hammerjs$': 'vue-touch/dist/hammer-ssr.js'
},
build: {
/*
** Run ESLINT on save
*/
vendor: ['axios', 'vue-touch'],
extend (config, { isClient }) {
if (isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
plugins: ['~plugins/vue-touch']
}
I found the reason that the case sensitive file system Linux of server of Heroku and insensitive system of mine are collided. When I renamed my sub components to uppercase, Github did not push the change to repo.
Neither npm run dev, nor npm run build has given any error in my computer. However when the Linux is looking for the exact names of the folder the problem occured.
This might be a precaution, working on a clean case sensitive formatted partition: https://coderwall.com/p/mgi8ja/case-sensitive-git-in-mac-os-x-like-a-pro
The title of the document explains the best. http://timnew.me/blog/2013/04/18/mac-os-x-case-insensitive-file-system-pitfall/
Adding up to what Gokhan Ozdemir's answer. I've faced a similar issue and realized I had changed a folder's name in a case-sensitive only way.
Example: from fonts to Fonts
It seems that it has to do with mac OS being a case insensitive environment.
I was able to solve it by following these steps:
git mv fonts fonts2
git mv fonts2 Fonts
git commit -m "changed case of dir"
Notice that I had to change to fonts2 initially so that the case-sensitive renaming takes place effectively.
Here's the SO answer explaining the solution to this problem.