So I'm trying to get a Linter setup for this Vue2 app. I got it working locally, but so far I've been unable to get the GitHub action running correctly. It seems like it's finding ESLint, but then ESLint is saying it can't find the files to lint or something.
I'm using separate commands for local and pipeline linting, but that's because the command that I had configured for local didn't work on pipeline, so I separated them to troubleshoot the pipeline (and because I want local to have --fix and pipeline to not have --fix)
package.json:
...
"scripts": {
...
"pipeline-lint": "eslint ./** --config .eslintrc.json",
"lint": "eslint --fix ../src/**"
}
...
"devDependencies": {
"#babel/eslint-parser": "^7.19.1",
"#nuxtjs/eslint-config": "^11.0.0",
"eslint": "^8.25.0",
"eslint-plugin-vue": "^9.6.0",
"eslint-webpack-plugin": "^3.2.0",
...
}
...
lint.yml:
name: ESLint Checks
on:
pull_request:
branches: [ develop ]
defaults:
run:
working-directory: src
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Install modules
run: npm install
- name: Run linter
run: npm run pipeline-lint
Resulting output in GitHub action output:
2022-10-21T20:49:55.5002164Z added 1953 packages, and audited 1954 packages in 31s
2022-10-21T20:49:55.5003945Z
2022-10-21T20:49:55.5004429Z 148 packages are looking for funding
2022-10-21T20:49:55.5005385Z run `npm fund` for details
2022-10-21T20:49:55.5288453Z
2022-10-21T20:49:55.5290427Z 23 vulnerabilities (1 moderate, 19 high, 3 critical)
2022-10-21T20:49:55.5291227Z
2022-10-21T20:49:55.5291923Z To address issues that do not require attention, run:
2022-10-21T20:49:55.5293496Z npm audit fix
2022-10-21T20:49:55.5294719Z
2022-10-21T20:49:55.5295715Z To address all issues (including breaking changes), run:
2022-10-21T20:49:55.5297162Z npm audit fix --force
2022-10-21T20:49:55.5297773Z
2022-10-21T20:49:55.5298373Z Run `npm audit` for details.
2022-10-21T20:49:55.5643706Z ##[group]Run npm run pipeline-lint
2022-10-21T20:49:55.5644086Z [36;1mnpm run pipeline-lint[0m
2022-10-21T20:49:55.5705771Z shell: /usr/bin/bash -e {0}
2022-10-21T20:49:55.5706084Z ##[endgroup]
2022-10-21T20:49:55.9275958Z
2022-10-21T20:49:55.9278861Z > consumer-seller-frontend#1.0.0 pipeline-lint
2022-10-21T20:49:55.9279807Z > eslint ./** --config .eslintrc.json
2022-10-21T20:49:55.9280232Z
2022-10-21T20:49:56.7124756Z
2022-10-21T20:49:56.7125640Z Oops! Something went wrong! :(
2022-10-21T20:49:56.7125994Z
2022-10-21T20:49:56.7126306Z ESLint: 8.25.0
2022-10-21T20:49:56.7126513Z
2022-10-21T20:49:56.7128304Z No files matching the pattern "./app" were found.
2022-10-21T20:49:56.7129136Z Please check for typing mistakes in the pattern.
2022-10-21T20:49:56.7176966Z
2022-10-21T20:49:56.7345485Z ##[error]Process completed with exit code 2.
Turns out there's an issue with the Nuxt linter plugin - at least on the environment I'm using. This is the config that ended up working in the end:
...
"scripts": {
...
"pipeline-lint": "eslint . --ext .js,.vue",
"lint": "eslint --fix . --ext .js,.vue"
}
...
"devDependencies": {
"eslint": "^8.26.0",
"eslint-plugin-vue": "^9.6.0",
"webpack": "^4.46.0"
...
}
...
I had to specify the webpack version to prevent a build issue once the PR merged (shown in snippit), but otherwise this config solved the issue I was having.
Related
I am trying to upgrade from husky#4.8 and lint-staged#11.2 to husky#8.0 and lint-staged##13.1 for my Nx repo. It seems that the only configuration I used to need was the following in package.json:
"scripts: {
"lint:fix": "ng lint -- --fix && npm run prettier:fix",
}
"husky": {
"hooks": {
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.{ts,js,css,md,html}": "npm run lint:fix",
"relative": true
}
This no longer works with the new husky and lint-staged. I followed this tutorial and installed husky: npx husky-init && npm install, installed lint-staged: npm install --save-dev lint-staged, modified the .husky/pre-commit file:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
and added the .lintstagedrc.json file:
{
"*.ts": [
"prettier --write",
"eslint"
],
"*.html": [
"eslint",
"prettier --write"
],
"*.scss": "prettier --write"
}
When I make a new commit it seems to run. However it looks like this command either runs on every library or every staged file (I have a lot of libraries). When I change the file contents to:
{
"*.{js,ts,json,scss,md}": ["npm run lint:fix"]
}
it takes a while to run (though it seems to run and fix the linting) AND I don't get the output of my ng lint -- --fix command. If I go into the .husky/pre-commit file and change npx lint-staged to npm run lint:fix, it runs the ng lint -- --fix command, fixes what it can and prints out linting errors. However, the error doesn't prevent the commit and I have to commit any new changes that the linter fixed. With the old versions I didn't need to do this. Also I didn't need to commit a .husky/pre-commit file into my repo. (I see some workarounds that have a postinstall script that generates this file for the user).
How can I utilize lint-stage and husky newest versions to run my custom npm command so I can call ng lint like in the older versions and block commits on errors? Should I just use the older versions? Also what benefit do the newer versions provide?
I am learning microservices with docker and kubernetes by simple project, now I am trying to use local registry installed as a docker container with helm. I published my package/library in my local registry (I am using verdaccio) and successfully installed it on my current project with command "npm install #mycompany/mylibs --registry=http://localhost:4873". My problem is when I am trying to deploy my project to kubernetes via skaffold, it fails to download the packages from package.json config file. I tried both setting up .npmrc file to project's root folder and default registry on verdaccio conf file but all fail. Is there anyone has encountered same problem as mine and how to fix it. Somebody help please. Thank you
This is my project structure :
MyProject
|-auth (this service has dependency to #mycompany/mylibs)
| |-src
| |-Dockerfile
| |-package.json
|
|-infra/kube
| |-auth-depl.yaml
| |-ingress-srv.yaml
MySharedLibrary
| |-src
| |-package.json
auth's package.json :
{
"name": "auth",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "ts-node-dev src/index.ts",
"test": "jest --watchAll --no-cache"
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "node",
"setupFilesAfterEnv": [
"./src/test/setup.ts"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#mycompany/mylibs": "^1.0.3",
"#types/cookie-session": "^2.0.42",
"#types/express": "^4.17.9",
"#types/jsonwebtoken": "^8.5.0",
"cookie-session": "^1.4.0",
"express": "^4.17.1",
"express-async-errors": "^3.1.1",
"express-validator": "^6.7.0",
"jsonwebtoken": "^8.5.1",
"mariadb": "^2.5.1",
"mysql2": "^2.2.5",
"sequelize": "^6.3.5",
"ts-node-dev": "^1.0.0",
"typescript": "^4.1.2"
},
"devDependencies": {
"#types/jest": "^26.0.19",
"#types/supertest": "^2.0.10",
"jest": "^26.6.3",
"supertest": "^6.0.1",
"ts-jest": "^26.4.4"
}
}
I am using:
Windows 10 PC as main host for docker and where the project hosted.
docker version 19.03.13
npm version 6.14.6
verdaccio 4.12.0
helm 3.5.3
skaffold 1.13.0
The error message after I deploy my project with skaffold dev :
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#mycompany%2fmylibs - Not found
npm ERR! 404
npm ERR! 404 '#mycompany/mylibs#^1.0.3' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'app'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
I want my deployment process each container could find all required dependencies on local registry (http://localhost:4873) and when it couldn't find them, it should try to reach public npm (https://registry.npmjs.org or npmjs.com).
Thanks everyone for helping me, I solved this problem by reconfiguring my Dockerfile on auth service by adding line:
RUN npm config set registry http://<the_local_registry_container_IP>:4873
I am successful building the container but it raised new issues "request has been deprecated, see github.com/request/request/issues/3142" cause of I am using supertest. I don't know why I am still searching for the main problem. In another occasion if I build it with public npm repo, it doesn't raise that problem.
You need to associate the scope with your registry:
npm login --registry=http://localhost:4873 --scope=#mycompany
You can find the documenation here
After this npm install install package from you repository if the package is in the scope #mycompany
If I execute the following commands from the root of my Vue app (v. 2.6.12)
rm -rf node_modules
npm install
npm run serve
I get the following error
sh: vue-cli-service: command not found
If I manually add the following symlink to node_modules/.bin the error does not occur
vue-cli-service -> ../#vue/cli-service/bin/vue-cli-service.js
But I shouldn't have to do this manually, i.e. if this symlink is required, it should be created when the #vue/cli-service package is installed.
I'm using NPM version 7.0.3 and have the following declared in the devDependencies section of package.json
"#vue/cli-service": "^4.5.6"
You may be able to skirt the issue by using the following in your package.json:
"serve": "./node_modules/.bin/vue-cli-service serve"
OR
"serve": "node ./node_modules/#vue/cli-service/bin/vue-cli-service.js serve"
This is just a temporary fix, though, as it is most likely an issue with npm not setting the correct path or npm not installing the binary properly. Try upgrading npm and nvm. See #bravemaster's comment on the github issue, as this contains several potential fixes.
npm install worked for me in the past, but check the package.json, which should roughly like this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
"devDependencies": {
...
"#vue/cli-service": "~4.5.0",
...
},
Vue cli must be installed with global flag.
npm install -g vue-cli-service
If error try same command with sudo.
Vue-cli should not be in your package.json as a dependency (not even in dev-dependencies) because it is used only to generate a new project from scratch, not being necessary to run/server/build a project. (in dev or production), as the scripts are set in scripts section from package.json.
Replacing NPM with Yarn 1.X resolved this issue
What is needed to run npm run build?
I have project vue
I want to install it to a new server
Do I only need to run npm install?
Usually npm run build will create a production build.
The build process does a lot of things for you:
transpiles JS code
bundles code and assets
uses cache busting techniques for assets
removes dead code
Using the production build is the way to go for production.
Later edit:
You should install npm to be able to run npm commands. You should also run npm install before running npm run build.
you need package.json that contains :
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
}
and also must contains dependencies like this
"dependencies": {
"style-loader": "^1.1.4",
"vue": "^2.6.11",
"vuex": "^3.3.0"
},
I have the following package.json file and I am building using webpack:
{
"name": "web",
"private": true,
"scripts": {
"build": "webpack --config webpack.config.js --mode development"
},
"devDependencies": {
"webpack": "4.21.0",
"webpack-cli": "3.1.2"
},
"dependencies": {
"jquery": "3.4.1"
}
}
How can I pass a parameter when using npm run build to use verbose so I can see build errors?
Try the following:
npm run build --verbose
(you can pass any parameter via npm run <command> after --).
To be more clear with regards to the first answer, using npm run build --verbose does increase the log level of the npm process, as noted here https://docs.npmjs.com/cli/v8/using-npm/logging. This does not necessarily bump any log level in the Webpack process itself.
The first answer would incur additional logging for the npm process. The parenthetical note is slightly misleading -- if you want to pass a parameter to an npm script to pass to the underlying scripts, you need to add a primary "--". So, while that answer does increase npm logging, it doesn't necessarily alter the webpack logging verbosity.
For example, if you have a linter scripts in npm:
"jest-preview": "jest-preview",
"lint": "eslint ./src",
"build": "webpack --config webpack.config.js --mode development"
If you want to utilize the "--fix" parameter to pass to eslint, you would run this npm script as:
npm run lint -- --fix
As can be seen on https://webpack.js.org/api/cli/, there is no --verbose option for build in webpack-cli. There are some facilities for log output verbosity configuration for the loaders and plugins that can be implemented in the webpack config. I would check that documentation for further information.