I am trying to use husky with lint-staged for pre commit git hooks in angular5. Prettier formats only the staged files. But when I run ng lint command it runs on all the changed files instead of running on only staged files(I have 4 files modified, but only 2 files added to staging area using git add command. But all 4 files are checked for linting which is not what I expect)
Here is the configuration in .lintstagedrc
"*.{ts,json}": [
"prettier --write",
"ng lint myProjName --files",
"git add"
],
"*.less": [
"prettier --write",
"npm run stylelint",
"git add"
]
}```
I debugged the issue to some extent. --files takes only the files which have been staged into the account. But still when the linters task completes, I get errors for non staged files as well.
Angular CLI comes with a built in caching mechanism for ng lint via a --cache flag. I recommend using this instead. As it maintains and monitors your changed files without having to setup something like lint staged.
ng lint --cache
The --files flag was added in Angular v7 (maybe v7.1.2, I cannot find any reference in changelogs except this comment).
Versions before v7 do not support that flag, or at least it's not documented.
Related
let's say, I have following project structure:
back/package.json
back/lib/Content/*.js
front/package.json
slices/budget/back/package.json
slices/budget/back/lib/Content/*.js
slices/budget/front/package.json
slices/accounting/back/package.json
slices/accounting/back/lib/Content/*.js
slices/accounting/front/package.json
how do I?
cd back && eslint ./lib/**/*.js ../slices/**/lib/Content/*.js
specifically, I want to
install eslint one time as devDependencies
somewhere in /back of root module
config eslint one time somewhere in /back/package.json:eslint key of root module
add eslint config in /back/package.json of root module just one time
eslint entire tree of modules
not in each slice seperatly
run from ci cd
so I need a way to run from /back
and later - maybe someway to respect eslint config hierarchy
not change project directory structure at all
what I receive
cd back && npm run lint
> back#1.0.0 lint
> eslint ../
Oops! Something went wrong! :(
ESLint: 8.23.1
ESLint couldn't find a configuration file
reason: https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files
You can use the --ignore-path option to specify a file with patterns that should be ignored. The file should contain one pattern per line. For example, to ignore all files in the node_modules directory, you could create a .eslintignore file with the following contents:
node_modules
You can also use the --ignore-pattern option to specify a pattern that should be ignored. For example, to ignore all files in the node_modules directory, you could run:
eslint . --ignore-pattern node_modules
The error is probably because you haven't specified the eslint config file explicitly. To run eslint on all the modules, starting from the parent folder, run: eslint ../ -c .eslintrc.js (or whatever .eslintrc file you use in back). It seems like eslint is confused if it does not have the config file in the same directory it is running from hence you need to manually specify the path to it.
The correct way of solving this issue would be creating sharable config file with configuration you have in back right now:
module.exports = {
rules: {
semi: [2, "always"]
}
};
Then you publish it to public or private npm with a name #your-project/eslint-config and use it in .eslintrc.json that is the same in all your projects:
{
"extends": [
"#your-project/eslint-config"
]
}
This way gives you ability to configure CI in a simple and independent way if you have lots of repositories: just run eslint lib/*.js.
If you have all the repositories in one computer and want to lint all of them using one command, you can use one of my tools:
redfork, install eslint and redfork globally and run:
redfork 'eslint lib/*.js'
But maybe you need to have some changes in project structure.
runny, if you don't want to make changes in project structure, just add configuration file .runny.json:
{
"command": "eslint lib/*.js",
"directories": [
"~/one",
"~/two",
"~/three"
]
}
It will run the same command for any directory you need.
I had a similar issue and the following has solved my problem.
I guess you haven't specified the eslint config file explicitly.
To run eslint on all the modules
run: eslint ../ -c .eslintrc.js
It seems like eslint is confused if it does not have the config file in the same directory it is running from, so you need to manually specify the path to it.
no real answer, except to create .eslintignore, .eslintrc, package.json at project root
I'm using Jest to test a NestJS application and I'm trying to create a git hook with husky that will not allow a commit if tests coverage are under 95%, I haven't tried anything yet cause I really don't know how to even describe my question properly.
But just to be more clear, what I need is a git hook just like this:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run format
npm run lint
npm run test
git add -u
create a git hook with husky that will not allow a commit if tests coverage are under 95%
It seems you already have a test hook on husky, and if that npm run test is using Jest as I'm assuming it does, all you need to do is add a Jests configuration to your package.json.
Open package.json and search for a property like:
"jest": {
That's where you put your Jest configuration parameters.
Just add the following properties to it:
"collectCoverage": true,
"coverageThreshold": {
"global": {
"lines": 95
}
}
You're going to want to change lines property value to whatever percentage you want.
As a side note, I'm pretty sure this is default Jest configuration, but you also need to select the folders and files you want to run test coverage analysis on, since you already have a test hook you probably already have this, but just to make sure:
"collectCoverageFrom": [
"./src/**/*.(t|j)s"
],
This will run a coverage test on every file, .JS or .TS, inside /src directory.
Now whenever you commit something, or try to run npm run test, it will also run test coverage and block commit if it's below the selected value.
Right now I have a package.json scripts section that looks like this:
"scripts": {
"views": "cp -r ./src/views/ ./dist/views/",
"dev": "tsc-watch --onSuccess \"./run.sh\"",
"prod": "./run.sh",
"test": "jest --coverage --verbose"
}
Inside run.sh I have:
npm run views && node ./dist/server.js
When I run npm run dev I expect it to compile .ts files within ./src/ to .js files within ./dist/ then copy everything (.html) within ./src/views/ to ./dist/views/ then wait for any changes to .ts files, once a .ts file change occurs tsc-watch would rerun the process.
However, tsc-watch somehow detects changes when cp -r ./src/views/ ./dist/views/ is run, despite it not changing any .ts files. This results in an infinite loop when running npm run dev where it compiles the .ts to .js then copies views, detects changes, and loops forever.
It appears a request for exactly what I'm trying to do was requested but shot down for some reason here.
So, with or without tsc-watch, how do I...
Watch for changes to any and all files.
When a change occurs, copy all files from src to dist, compiling any .ts to .js.
Do so with as little overhead as possible and without any infinite loops.
I have a git repository which has 2 projects in it, a loopback app (named app), and a react app created with create-react-app (named client).
And the directory structure is as follows;
├─┬app
│ ├──node_modules
│ ├─┬client
├─node_modules
the loopback project (app) uses eslint, has eslint in devDependencies, client does not have eslint in package.json.
Client app is created with create-react-app, so when I run react-scripts, it finds eslint in the upper directory, and complains about its version, if I delete the app\node_modules everything works fine.
So how does react-scripts find the eslint in upper directory, is there a way of telling it not to check any other node_modules folder, it should only check in the current folder.
react-scripts tells me that I can put SKIP_PREFLIGHT_CHECK=true in my .env file, is it safe to do this, does it run the eslint 3.x on the upper level folder, or does it run the required 5.6.0 version installed in client\node_modules folder?
I will setup a deployment toolchain for this project so I need make sure that it works fine all the time.
EDIT:
The config entry in my client\package.json
"eslintConfig": {
"extends": "react-app",
"root": true
},
EDIT2:
Steps to reproduce problems:
my node version is: 8.11.3
npx loopback-cli app (accept default options when prompted)
cd app
npm i
npx create-react-app client
cd client
npm i
npm run start (you should see the errors after this)
EDIT3:
I ended up ejecting react-scripts.
Try creating a .eslintrc file in your client folder, include the following content:
.eslintrc
{
"extends": "react-app"
}
Alternatively, this should work according to the docs:
{
"root": true
}
By default, ESLint will look for configuration files in all parent folders up to the root directory. This can be useful if you want all of your projects to follow a certain convention, but can sometimes lead to unexpected results. To limit ESLint to a specific project, place "root": true inside the eslintConfig field of the package.json file or in the .eslintrc.* file at your project’s root level. ESLint will stop looking in parent folders once it finds a configuration with "root": true.
I have to migrate from CircleCI 1.0 to 2.0. After I have changed the old configuration to the new one, build failed because of eslint-plugin-prettier reported prettier spacing violations.
MyProject - is my GitHub repo and it contains a folder client which has all front-end code which I want to build on CI. In client folder there are
.eslintrc.json
...
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
...
.prettierrc
{
"tabWidth": 4,
"trailingComma": "all",
"singleQuote": true
}
.gitattributes (I work on Windows 10) with the following code:
*.js text eol=crlf
*.jsx text eol=crlf
and of course package.json
New CircleCI configuration:
version: 2
jobs:
build:
working_directory: ~/MyProject
docker:
- image: circleci/node:6.14.3-jessie-browsers
steps:
- checkout
- run:
name: Install Packages
command: npm install
working_directory: client
- run:
name: Test
command: npm run validate
working_directory: client
Old CircleCI configuration:
## Customize dependencies
machine:
node:
version: 6.1.0
# Remove cache before new build. It takes much time
# but fixing a build which is broken long time ago (and not detected because of cache)
# is even more time consuming
dependencies:
post:
- rm -r ~/.npm
## Customize test commands
test:
override:
- npm run validate
general:
build_dir: client
The build fails due to linting problems (all are about the number of spaces):
So, what could cause these errors? I am out of ideas here. I first thought it might be because .prettierrc was not found. However, when I deleted it for an experiment and run locally I got errors in all files in total more than 1000. While on CI with .prettierrc in place there are were only 188 in few files.
I have finally figured it out.
My package.json file contained the following dependency on the Prettier:
"prettier": "^1.11.1".
I had to learn hard way the meaning of this little symbol ^. It allows installing any version of Prettier which is compatible with 1.11.1. In my case on CircleCI 2.0 it installed 1.14.2 which adds new features to Prettier.
I believe it did not break on CircleCI version 1.0 and locally because of cached node_modules which contained earlier Prettier versions compatible with 1.11.1
Here is nice video about semantic versioning.
In my case the problem was with the pattern.
The eslint src/**/*.{ts,tsx} command failed in GitLab CI, but not on local.
When I changed it to eslint src it failed both on local and CI.