VSCode and ES6 warnings - jshint

I keep on getting ES6 jshint warnings, for example:
''import' is only available in ES6 (use 'esversion: 6'). (W119)'
source: 'jshint'
code: 'W119'
I followed suggestions such as
Adding a .jshintrc file in the root with
{
"esversion": 6
}
Adding the following to the user and\or workspace settings:
"jshint.options":{
"esversion":6
}
But I still get the warning. Are there other things that I can do?
Thanks

Add a file .jshintrc into your project root, the warnings will disappear.
{
"esversion": 6
}

jsHint's ES6 warning can be solved easily by the following JSON code without creating any new file:
Paste the code inside the JSON editor of the "user settings".
"jshint.options": { "esversion": 6 },

jsconfig.json file which defines the JavaScript target to be ES6
I create a jsconfig.json file under my project directory and add codes in it:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

According to the JSHint documentation: https://jshint.com/docs/ "In addition to using configuration files you can configure JSHint from within your files using special comments. These comments start with a label such as jshint or globals..."
So, a /* jshint esversion: 6 */ comment will work on the top of each file targeting ES6.
This have the advantage of you can switch these directives on and off per file or per function: "These comments are function scoped meaning that if you put them inside a function they will affect only this function's code."

Related

Can't use SASS variables in Angular from global file, despite other styles working

When I apply the following SASS in my component's style, it works as supposed to.
$test-color: pink;
div{ background-color: $test-color; }
However, when I move the definition to styles.scss, it doesn't. I've tried adding the (now, apparently, deprecated) #import "../styles.scss"; and also the currently recommended #use "../styles.scss";. I even tried to put the color definition in colors.scss and add that reference to angular.json. The styles for classes declared in styles.scss work (even without importing/using, due to it being references in the assets). But the variable, doesn't.
According to this suggestion, it should work with #include. In this docs, it's shown how to assign the values. I found this linking to this but I can't see how that differs from my case. I tried to understand this blog but couldn't see any relevant hints on what I'm doing wrong. I also tried adding the following (as shown here).
"stylePreprocessorOptions": { "includePaths": [ "src" ] }
I still get the error below, though.
ERROR in ./src/app/.../some.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
14 │ background-color: $test-color;
___ │ _________________ ^^^^^^^^^^^^
src\app...\some.component.scss 14:23 root stylesheet
Googling the actual error gave me this saying that the variable isn't there. But as far I can tell, it is! A related, although a bit different, question was asked here but with no relevant answer.
What am I missing and how do I investigate it further?
The error is due to wrong syntax as pointed out. It needs to reference the source of the colors.
background-color: colors.$test-color;
Furthermore, the import is required but needs to be done by reference to the module and not to the file.
#use "colors";
In a wholesome code base, one should put the following in the file src\colors.scss.
$test-color: pink;
Then you could use it like this.
#use "colors";
div{ background-color: colors.$test-color; }
In the config file angular.json, the following needs to be set.
"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },
Also, it's should be noted that files prefixed by an underscore are subject to a different processing and as such, _colors.scss is preferred. While it's valid and working to place the auxiliary files directly in /src (as is the case with styles.scss, the convention dictates to place them in /src/assets/styles, altering the pre-processor's options as below.
"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }

My LESS sourceMap file is missing the "file" when run through grunt

When I run lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in the command line, everything is working. The styles.map file ends in:
...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"}
However, when I run grunt less, the styles.map is missing the "file" part and just ends in:
...AV2rEF;EAAiB,aAAA"}
This stops the SourceMap from working. What could be going wrong? My less config is as follows:
less: {
dist: {
options: {
sourceMap: true,
sourceMapFilename: 'styles.map'
},
files: [{
src : 'assets/less/00_style.less',
dest: 'dest/assets/prod.css'
}]
}
}
Short answer:
Add the following additional option to your less Task in Gruntfile.js:
...
options: {
...
sourceMapURL: '../../styles.map'
},
...
Long answer:
When running the lessc command via the CLI, (as per your example), notice the the following comment is written to the resultant prod.css:
/*# sourceMappingURL=../../styles.map */
However, when running the grunt task, (using your current config), the following comment is written into the resultant prod.css:
/*# sourceMappingURL=styles.map */
Note the missing ../../ - therefore prod.css can't find styles.map
This is why your SourceMap isn't working and not so much to do with the "file:" missing in styles.map when run via grunt. The .css file ultimately points to the .map file - not vice versa.
Even after running the lessc command via the CLI then deleting the "file:" part from styles.map you will find that the SourceMap still works in the browser. Indicating that the "file:" part, whether included in the .map file or not, has no effect on preventing the SourceMap from working.
Besides, as noted in the most recent proposed SourceMap spec (v.3) the "file:" part is optional:
Line 3: An optional name of the generated code that this source map is associated with.
Explicitly defining the sourceMapURL in your grunt Task options will entail having to keep a flat folder structure inside the dest/assets/ directory if you intend on using multiple .less files. (I.e. You'll need to avoid saving any resultant .css files in subfolders)

Sublime ignores eslint settings

I am using the standard linter via the SublimeLinter-contrib-eslint package and it seems to ignore these entries in both SublimeLinter.sublime-settings and ~/.eslintrc:
{
"globals": {
"describe": true,
"it": true,
"expect": true,
"angular": true
}
}
I am still getting these globals as undefined.
Any other way to declare them?
I'm not sure about SublimeLInter.sublime-settings, but ~/.eslintc file will only be used if no other eslint config files are found. Since you are using standard, I assume that you have another .eslintrc file somewhere. You will have to add those globals there.

grunt build or bower adds a useless dependency for highstocks

I'm using yeoman, grunt and bower and highstock library.
When I build my app (grunt build) this generate these 3 lines
<script src="bower_components/highstock/js/highcharts.src.js"></script>
<script src="bower_components/highstock/js/highstock.src.js"></script>
<script src="bower_components/highstock/js/highcharts-more.src.js"></script>
BUT, as highstock includes high charts this line should not be there and this makes errors
<script src="bower_components/highstock/js/highcharts.src.js"></script>
the error is http://www.highcharts.com/errors/16
How to remove this line in the build ?
Thanks for your help.
I believe this is grunt-bower-install at work. gbi is a task that looks through the dependencies in your project's bower.json, and injects their appropriate references into your HTML. In order for it to work, each Bower package needs to specify a main property in its bower.json file.
So, the bower.json file for highcharts looks like this:
{
"name": "highcharts",
"version": "v3.0.10-modified",
"main": [
"js/highcharts.src.js",
"js/highcharts-more.src.js",
"js/modules/exporting.src.js"
],
"ignore": [
"errors",
"exporting-server",
"gfx",
"lib",
"samples",
"studies",
"test",
"tools",
"utils",
"ant",
"build.md",
"build.properties",
"build.xml"
]
}
Because it lists 3 different files, gbi is interpreting that as "you need these three files to make this Bower package work." I have no familiarity with highcharts, but if you know that to be false-- in other words, you only need one of those files for it to work-- then it would be helpful to you and others to send a pull request correcting their bower.json file.
As far as a fix for now, you can specify an overrides property in your project's bower.json, that lists only the file you need, such as:
{
"name": "your-project",
"dependencies": {
"highcharts": "~3.0.0"
},
"overrides": {
"highcharts": {
"main": "js/highcharts.src.js"
}
}
}
The next time you run grunt bowerInstall, it will sort itself out.
Note: Make sure you're using the latest grunt-bower-install to use the new overrides feature.

How could I specify output file name based on input file name?

How could I specify output file name based on input file name?
I'm specifically trying to use grunt task (grunt-closure-tools or grunt-closure-compiler) to compile (minify) multiple javascript files, let's say all satisfying '/source/**/*.js' and want to output them in format $(original_file_path_without_extension).min.js
In all samples I've seen, the output is specified as single file only but I need to minify each file separately and into the same folder where the original file comes from.
Finally, I figured out the configuration. The trick is in building the files object dynamically (as described here). My configuration for grunt-closure-tools looks like this:
closureCompiler: {
options: {
// .. YOUR OPTIONS (ommited)
},
minify: {
files: [
{
expand: true,
src: ['source/**/*.js', '!source/**/*.min.js'],
ext: '.min.js'
}
]
}
}
Closure-compiler is designed to simultaneously compile all of your javascript into a single file to minimize requests. There are really only two use cases where separate output files are supported:
Multiple modules
In order to preserve renaming references, you'll have to compile your files simultaneously. The way to do that and maintain separate files is with modules. See How do I split my javascript into modules using Google's Closure Compiler?
Non-related Files
If your files don't have inter-dependencies, then you would simply run your grunt task multiple times - one for each file.

Resources