Can prettier plugin get integrated into the web IDE when saving js files? - sap-web-ide

I would like to configure Prettier within the WebIDE, so far without success.
In my package.json file, I have the following settings:
"scripts": {
"format": "prettier --write \"webapp/**/*.{js,css,json}\""
},
"devDependencies": {
"prettier": "^1.14.3",
"eslint": "^5.7.0",
"eslint-plugin-prettier": "^3.0.0",
"eslint-config-prettier": "^3.1.0" //Here I get ESLint error cannot find module
}
Then, in my .eslintrc.json file:
"extends": ["eslint:recommended", "prettier"]
This is not really working, my goal is to format according to Prettier when I save a file (similar to the "beautify code" option in the web IDE code editor settings, which is now switched off).
I tried cleaning the npm folder and building again, but nothing happens.

Related

What happens if more than one Jest configuration is used simultaneously?

Jest's configuration states:
Jest's configuration can be defined in the package.json file of your
project, or through a jest.config.js file or through the --config <path/to/js|json> option.
What happens if a configuration setting is defined in two or more places? Are distinct configuration settings merged together or can they be silently ignored? If merging or ignoring, do they have a well defined or ad hoc precedence?
I inherited multiple projects with both a "jest" object in package.json and "jest.config.js" file, each with their specific configuration.
By playing (superficially) with the coverage threshold (which was < 97%), I came to the conclusion that jest.config.js is used, and the jest object in package.json is ignored. There doesn't seem to be any merging going on.
My tests:
#1: Which has priority ?
package.json: coverage 98%
jest.config.js: coverage 99%
=> "coverage threshold for statements (99%) not met"
Answer: jest.config.js
#2: Are they merged ?
package.json: coverage 98%
jest.config.js: (missing coverage key)
=> no coverage warnings
Answer: No
To answer a subset of the full problem (which may be too complicated for a meaningful set of tests as it's a lot of knobs to twiddle), if a jest command line --config (or -c) is provided, then package.json jest settings are ignored.
More specifically to come to this conclusion, firstly I tried jest -c jest/config.js with setupFilesAfterEnv in my jest/config.js:
module.exports = {
rootDir: '../',
setupFilesAfterEnv: ['./jest/global-setup.js'],
}
File jest/global-setup.js contains:
const Enzyme = require('enzyme')
const Adapter = require('enzyme-adapter-react-16')
require('jest-enzyme/lib/index.js')
Enzyme.configure({ adapter: new Adapter() })
Which here has the desired effect of running the enzyme setup. Commenting it out in the jest/config.js file and putting the equivalent into package.json is skipped/ignored:
"jest": {
"setupFilesAfterEnv": ["./jest/global-setup.js"],
},
Secondly I tried jest -c jest/config.js with a jest fileTransformer.js file and the following in my jest/config.js:
transform: {
'^.+\\.js$': 'babel-jest',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/jest/file-transformer.js',
},
Then the equivalent jest.transform setting of package.json is skipped/ignored:
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/file-transformer.js"
}
},
Thirdly, changing my npm scripts test command from jest -c jest/config.js to jest and my package.json to include the following causes the package.json settings to work as expected:
"jest": {
"setupFilesAfterEnv": ["./jest/global-setup.js"],
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/jest/file-transformer.js"
}
},
Tested with jest v24.9.0

Change Ember build directory (dist folder) without command line flags

I am trying to make my Ember project build to a directory outside of the project and for future builds I don't want to use command line flags each time.
ember build --output-path=/not-dist will work for me but I want Ember to add the flag automatically.
outputPaths: {
app: {
html: '../presentation/index.cfm',
css: {
'app': '../presentation/assets/ember-presentation-viewer.css'
},
js: '../presentation/assets/ember-presentation-viewer.js'
},
vendor: {
css: '../presentation/assets/vendor.css',
js: '../presentation/assets/vendor.js'
}
}
I have tried this as per the ember-cli documentation but ember-presentation-viewer.css was insisting on getting built in the dist directory with all the additional paths put there.
Is there a way to do this?
Go to package.json. Change scripts/build command:
"scripts": {
"build": "ember build --output-path=/not-dist"
},
From now on, run:
npm run build
You can configure your .ember-cli.js file to specify flags that should always be included in your command line builds (in lower camel case), as per this page in the Ember docs. To change the output directory you'll want to add the following line: "outputPath": "../../example-folder/presentation".
So your final .ember-cli.js should look like this:
{
/*
Ember CLI sends analytics information by default. The data is completely
anonymous, but there are times when you might want to disable this behavior.
Setting `disableAnalytics` to true will prevent any data from being sent.
*/
"disableAnalytics": false,
"outputPath": "../../example-folder/presentation"
}

Angular 2 Unit Tests: Cannot find name 'describe'

I'm following this tutorial from angular.io
As they said, I've created hero.spec.ts file to create unit tests:
import { Hero } from './hero';
describe('Hero', () => {
it('has name', () => {
let hero: Hero = {id: 1, name: 'Super Cat'};
expect(hero.name).toEqual('Super Cat');
});
it('has id', () => {
let hero: Hero = {id: 1, name: 'Super Cat'};
expect(hero.id).toEqual(1);
});
});
Unit Tests work like a charm. The problem is: I see some errors, which are mentioned in tutorial:
Our editor and the compiler may complain that they don’t know what it
and expect are because they lack the typing files that describe
Jasmine. We can ignore those annoying complaints for now as they are
harmless.
And they indeed ignored it. Even though those errors are harmless, it doesn't look good in my output console when I receive bunch of them.
Example of what I get:
Cannot find name 'describe'.
Cannot find name 'it'.
Cannot find name 'expect'.
What can I do to fix it?
I hope you've installed -
npm install --save-dev #types/jasmine
Then put following import at the top of the hero.spec.ts file -
import 'jasmine';
It should solve the problem.
With Typescript#2.0 or later you can install types with:
npm install -D #types/jasmine
Then import the types automatically using the types option in tsconfig.json:
"types": ["jasmine"],
This solution does not require import {} from 'jasmine'; in each spec file.
npm install #types/jasmine
As mentioned in some comments the "types": ["jasmine"] is not needed anymore, all #types packages are automatically included in compilation (since v2.1 I think).
In my opinion the easiest solution is to exclude the test files in your tsconfig.json like:
"exclude": [
"node_modules",
"**/*.spec.ts"
]
This works for me.
Further information in the official tsconfig docs.
You need to install typings for jasmine. Assuming you are on a relatively recent version of typescript 2 you should be able to do:
npm install --save-dev #types/jasmine
With Typescript#2.0 or later you can install types with npm install
npm install --save-dev #types/jasmine
then import the types automatically using the typeRoots option in tsconfig.json.
"typeRoots": [
"node_modules/#types"
],
This solution does not require import {} from 'jasmine'; in each spec file.
In order for TypeScript Compiler to use all visible Type Definitions during compilation, types option should be removed completely from compilerOptions field in tsconfig.json file.
This problem arises when there exists some types entries in compilerOptions field, where at the same time jest entry is missing.
So in order to fix the problem, compilerOptions field in your tscongfig.json should either include jest in types area or get rid of types comnpletely:
{
"compilerOptions": {
"esModuleInterop": true,
"target": "es6",
"module": "commonjs",
"outDir": "dist",
"types": ["reflect-metadata", "jest"], //<-- add jest or remove completely
"moduleResolution": "node",
"sourceMap": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
Solution to this problem is connected with what #Pace has written in his answer. However, it doesn't explain everything so, if you don't mind, I'll write it by myself.
SOLUTION:
Adding this line:
///<reference path="./../../../typings/globals/jasmine/index.d.ts"/>
at the beginning of hero.spec.ts file fixes problem. Path leads to typings folder (where all typings are stored).
To install typings you need to create typings.json file in root of your project with following content:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160807145350"
}
}
And run typings install (where typings is NPM package).
In my case, the solution was to remove the typeRoots in my tsconfig.json.
As you can read in the TypeScript doc
If typeRoots is specified, only packages under typeRoots will be included.
I'm up to the latest as of today and found the best way to resolve this is to do nothing...no typeRoots no types no exclude no include all the defaults seem to be working just fine. Actually it didn't work right for me until I removed them all. I had:
"exclude": [
"node_modules"
]
but that's in the defaults so I removed that.
I had:
"types": [
"node"
]
to get past some compiler warning. But now I removed that too.
The warning that shouldn't be is:
error TS2304: Cannot find name 'AsyncIterable'.
from node_modules\#types\graphql\subscription\subscribe.d.ts
which is very obnoxious so I did this in tsconfig so that it loads it:
"compilerOptions": {
"target": "esnext",
}
since it's in the esnext set. I'm not using it directly so no worries here about compatibility just yet. Hope that doesn't burn me later.
I'll just add Answer for what works for me in "typescript": "3.2.4" I realized that jasmine in node_modules/#types there is a folder for ts3.1 under the jasmine type so here are the steps:-
Install type jasmine npm install -D #types/jasmine
Add to tsconfig.json jasmine/ts3.1
"typeRoots": [
...
"./node_modules/jasmine/ts3.1"
],
Add Jasmine to the types
"types": [
"jasmine",
"node"
],
Note: No need for this import 'jasmine'; anymore.
Only had to do the following to pick up #types in a Lerna Mono-repo
where several node_modules exist.
npm install -D #types/jasmine
Then in each tsconfig.file of each module or app
"typeRoots": [
"node_modules/#types",
"../../node_modules/#types" <-- I added this line
],
In my case, I was getting this error when I serve the app, not when testing. I didn't realise I had a different configuration setting in my tsconfig.app.json file.
I previously had this:
{
...
"include": [
"src/**/*.ts"
]
}
It was including all my .spec.ts files when serving the app. I changed the include property toexclude` and added a regex to exclude all test files like this:
{
...
"exclude": [
"**/*.spec.ts",
"**/__mocks__"
]
}
Now it works as expected.
I had this error in an angular library. Turns out I accidentally included my .spec file in the exports in my public-api.ts. Removing the export fixed my issue.
Look at the import maybe you have a cycle dependency, this was in my case the error, using import {} from 'jasmine'; will fix the errors in the console and make the code compilable but not removes the root of devil (in my case the cycle dependency).
I'm on Angular 6, Typescript 2.7, and I'm using Jest framework to unit test.
I had #types/jest installed and added on typeRoots inside tsconfig.json
But still have the display error below (i.e: on terminal there is no errors)
cannot find name describe
And adding the import :
import {} from 'jest'; // in my case or jasmine if you're using jasmine
doesn't technically do anything, so I thought, that there is an import somewhere causing this problem, then I found, that if delete the file
tsconfig.spec.json
in the src/ folder, solved the problem for me. As #types is imported before inside the rootTypes.
I recommend you to do same and delete this file, no needed config is inside. (ps: if you're in the same case as I am)
If the error is in the .specs file
app/app.component.spec.ts(7,3): error TS2304: Cannot find name 'beforeEach'.
add this to the top of your file and npm install rxjs
import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';
Just add to your tsconfig.json, and be sure that you don't have "**/*.spec.ts"
in exclude
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
My working tsconfig.json

Trying to share Gulp project with a friend

I have made a gulp project and I am trying to share it with a friend.
Its a simple css grid with gulp tasks integrated.
You can download the package here:
https://www.dropbox.com/s/od1dsh75tegbq24/projectfolder.zip?dl=1
When you unzip the package and make sure you have node.js, ruby and gulp.js installed and try to run the gulpfile, it throws the following error:
Cannot find module "semver-regex"
After I install that (npm install --save semver-regex)
It throws the same kind of error with:
Cannot find module "array-uniq"
After I install that, the build proces works, but liveReload and watch tasks don't...
Is there a way to share Gulpfiles without all the hassle? I just want it to be downloaded and used :)
Package.json is in the root:
{
"devDependencies": {
"gulp-minify-css": "^0.3.10",
"gulp-concat": "^2.4.1",
"gulp-uglify": "^1.0.1",
"gulp-imagemin": "^1.0.1",
"imagemin-pngcrush": "^1.0.0",
"gulp-sass": "^1.0.0",
"gulp-html-replace": "^1.3.0",
"gulp-connect": "^2.0.6",
"gulp-open": "^0.2.8",
"run-sequence": "^1.0.0",
"streamqueue": "^0.1.1"
}
}

how to configure ember-qunit in karma

I am using requirejs plugin of karma to load all libraries required by app. then included app files and test cases in files section of karma.conf.js. i am getting following error.
Uncaught Error: Script error for: isolated-container http://requirejs.org/docs/errors.html#scripterror
i have included "ember-qunit/dist/amd/main" file using the following code in config file.
"shim": {
...
"ember-qunit": {
"exports": "ember-qunit"
}
...
}
"paths":{
...
"ember-qunit": "../lib/ember-qunit/dist/amd/main"
...
}
isolated-container.js file is located in amd/main folder. but failed to load.
ember-qunit/dist/amd/main.js is written in the following format.
define(
["ember","./isolated-container","./module-for","./module-for-component",
"./module-for-model","./test","./test-resolver","exports"],
function(__dependency1__, __dependency2__, __dependency3__, __dependency4__,
__dependency5__, __dependency6__, __dependency7__, __exports__) {
}
I am not very much familiar with requirejs. But as far i understood, main should be able load ./isolate-container.
Not sure why it is failing to load. Any help would be appreciated.
adding "ember-qunit" under packages solved the issue. raised an issue in github of ember-qunit(https://github.com/rpflorence/ember-qunit/issues/35) and got the answer
"packages": [{ "name": "ember-qunit", "location": "../../../app/lib/ember-qunit/dist/amd" }],