Eslint allow extraneous dependencies in tests - ecmascript-6

In my test files I get eslint error on some imports like
'import/no-extraneous-dependencies': ["error", { devDependencies:
true, }],
this happens only in my second tests directory in some subfolder
in my root tests directory I don't get this errors
I didn't find any settings in package.json or .eslintrc which could cause differentiation.
Currently I have to use
/* eslint-disable import/no-extraneous-dependencies*/
in my test files which we don't like
If I add
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
to .eslintrc th rule is off everywhere not just in tests
How can I switch this rule of except of placing .eslintrc to the tests folder? which folders use devDependencies?

You can use an array of globs as follows, which will allow extraneous dependencies to be access from test files where file name matches **/*.test.js
"import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.js"]}]

You can create a .eslintignore file in the project root to disable ESLint for specific files or directories.
And put the following line into it:
test/*
Reference: http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
Edit:
If you want to ignore a specific rule for a particular directory, you can put another .eslintrc file in that directory.
Reference: http://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy

Related

Difference between tsconfig.json and tsconfig.app.json files in Angular

I'm a newbie in Angular. I used angular-cli to learn about angular and I found the files tsconfig.json and tsconfig.app.json. Both of these are typescript related and I found this link useful.
But why two such files has been used? Why can't the configurations in these two files be combined in one file? Please help me figure this out.
there is nothing that prevents you from getting rid of the tsconfig.app.json. it's just an additional config file that allows you to adjust your configuration on an app basis. this is e.g. useful when you have multiple apps in the same angular-cli workspace.
you could have the root folder with the tsconfig.json and then a sub folder app-a with a tsconfig.app.json file and another app in the sub-folder app-b with it's own tsconfig.app.json, which contains a variation of the global configuration.
the difference in configuration could e.g. be the output directory outDir or the includes or excludes used.
The difference is that tsconfig.app.json is a file that is related to the Angular App in particular, while tsconfig.json is a more general file that contains general typescript configuration. It's especially useful when you have a micro frontends system, where there are multiple Angular subprojects, each of them with its own tsconfig.app.json configuration. But if you want you could perfectly merge these two files into one, actually you surely noticed that tsconfig.app.json contains the line:
"extends": "./tsconfig.json"
which means that the whole App uses the configuration stated in tsconfig.app.json plus the configuration in tsconfig.json
Just want to add one more point.
It seems the tsconfig.app.json(App specific one) will override the tsconfig.json(global one).
My issue was with the types declaration from node not in scope of my Angular project and I was getting compile errors saying Buffer is not found.
I first added the types declaration in tsconfig.json thinking it will take effect in every app.
But I had to add it to my app-specific tsconfig.app.json file for it to take effect on my app.

How do you output multiple .js files to dist/ folder in angular 6 angular.json

In your angular.json, how would you output multiple .js files into your dist/ folder after running ng build. Seems like it would make sense to do something like:
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts”,
"something": "src/something/main.ts”,
"somethingElse": "src/somethingElse/main.ts",...
I end up with an error:
Data path "" should NOT have additional properties(something)
I would like my dist/ folder to have:
main.js
something.js
somethingElse.js
Can someone help me out with this one?
Turns out what I actually needed was to create multiple applications within one workspace.
Taken from the angular-cli wiki:
ng generate application my-other-app
The new application will be generated inside
projects/my-other-app
Now we can serve, build etc. both the apps by passing the project name with the commands:
ng serve my-other-app
Reference: https://github.com/angular/angular-cli/wiki/stories-multiple-projects
Hopefully this will help someone if they ever run across this problem.

Using gulp for compiling of changed files only

I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});

Gassetic looking for file with _0 added to file name

In my gassetic.yml file I have the following
files:
app.css: # This is the output filename
- src/someBundle/app.scss
However when gassetic runs, I get an error saying src/someBundle/app_0.scss is missing.
If I create this file and edit it, its this app_0.scss that is compiled.
Why does gassetic / gulp look for this file when its not specified in my yml file?
Thanks
It adds index of the file in the folder to avoid overwritting.
I think this is a bug but you can fix it by adding autoRenaming: false to the dev environment. See Multiple Environments setup

Exclude JSON files from r.js optimizer

I use a config.json file in my application to configure the application (big surprise) after deployment, pulling them in using the requirejs-text plugin. Ideally, I would like to keep this JSON file (among others) out of the optimized built file.
Here is my app hierarchy:
app/
data/
config.json
...
scripts/
main.js // require.config in here
controllers/
ctrl.js // Uses JSON files
My current build options (through gulp) for require.js are
{
baseUrl: 'app/scripts',
mainConfigFile: 'app/scripts/main.js',
name: 'main',
out: 'main.js'
}
Since these are just flat files I want to exclude and not modules, is there a way of keeping them out of the final file?
If you list it in the dependencies as 'text!config.json', you should be able to exclude it by listing it in exclude list as 'text!config.json'. I created a fake project to test it and it worked.
So:
{
baseUrl: 'app/scripts',
mainConfigFile: 'app/scripts/main.js',
name: 'main',
out: 'main.js',
exclude: ['text!config.json']
}