Developing a vue application with the eslint-plugin-vue, I am getting the following error when trying to use the comment shortcut in VS code over a template section that contains a nested comment:
Parsing error: nested-comment. eslint-plugin-vue
Is there a setting in the linter config file that I can change to allow commenting over nested comments or do I need to restart the linter somehow?
Update: it would appear if I added the following line to my .eslintrc.js file, from this site https://eslint.vuejs.org/rules/no-parsing-error.html#vue-no-parsing-error I should not be seeing this error:
'vue/no-parsing-error': ["error", {
'nested-comment': false
}]
However, it still remains. I do not have the option to run ESLint restart lint server in my command palette.
If you do have a .eslintrc.cjs file or anything alike, you could probably put that in there
/* eslint-env node */
module.exports = {
[...],
rules: {
'vue/html-comment-indent': 'off',
},
}
off is to say that you don't even want to hear about it anytime soon.
Otherwise, you can also use 'warn', if you want a warning.
Here is an official reference: https://eslint.vuejs.org/rules/html-comment-indent.html#vue-html-comment-indent
Related
I am currently working on a vue.js 2 project that uses vuetify pwa and vuex dependencies
When i try to build my project the cli throws the following error:
ValidationError: child "navigateFallbackWhitelist" fails because ["navigateFallbackWhitelist" at position 0 fails because [the value must be a RegExp]]
ValidationError: child "navigateFallbackWhitelist" fails because ["navigateFallbackWhitelist" at position 0 fails because [the value must be a RegExp]]
at Object.exports.process (C:\Users\BluRRayS\Documents\ProostWebApp\node_modules\#hapi\joi\lib\errors.js:202:19)
I already tried to reinstall all my NPM packages and to update them to their latest version.
I Also tried to pull my project freshly from github but that didn't work either.
Since I do not have much experience with webpack or front-end software engineering in general I really am a bit stuck so any help would be much appreciated.
What causes this error and how could I resolve it?
After a lot of fiddling around I found out that my vue.config.js wasn't valid after updating my npm packages.
module.exports = {
"pwa": {
// My Settings are in here
},
"workboxOptions": {
"navigateFallbackWhitelist": [
// Removed this empty object-> {}
]
}
},
"transpileDependencies": [
"vuetify"
],
}
I Had to remove the empty object from navigateFallbackWhitelist
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.
I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with
{
"presets": ["es2015"]
}
I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.
I thought the es2015 npm packages I have should be taking care of that ES6 syntax?
In the gulp file the task that I thought was suppose to take care of that is;
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.(jsx|js)')
.pipe(babel({
compact: false
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
The gulp task that is responsible for launching this is:
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
I am puzzled as to what could be wrong here?
Any ideas would be much much appreciated!
There are two problems:
Gulp seems like doesn't support you syntax for file extension mask:
gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working
You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working
Update
Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid
gulp.src('js/*.#(js|jsx)')
where # means match exactly one occurrence of pattern after #.
In your case there was no qualifier presented
Using IntelliJ/WebStorm if I run tsc from a FileWatcher, my compile errors are linked to the files in the editor, such that if I double-click on a compiler error, it opens that file and takes me to the offending line of code.
However if I run Grunt, either via the integrated Grunt console, or via a FileWatcher, the compile errors do not have links and I have to manually open the file and goto the offending line number.
Is there any way to get the compile errors comming from Grunt integrated as links, like the TypeScript FileWatcher's invocation of tsc does?
When running Grunt as a file watcher, you can set up filters to make links clickable. You can use existing filters as example: open your file watcher settings, press Output Filters..., open the filter settings and copy the regular expression specified there. See http://www.jetbrains.com/webstorm/webhelp/add-filter-dialog.html
In Webstorm 8, it is not possible to apply regular expression filters on Grunt console output.
The way to go, as mentioned by lena, is to call Grunt directly via an External tool entry, and set up appropriate regex filters, such as:
For grunt-ts:
$FILE_PATH$\($LINE$,$COLUMN$\):.*
For grunt-tslint:
...$FILE_PATH$\[$LINE$,\s$COLUMN$\]:.*
Also see my comment above regarding a caveat for grunt-tslint in some environments.
I believe the '>>' added by grunt-typescript is throwing it off. Try grunt-ts (disclaimer : one of the authors) which is tested with webstorm https://github.com/grunt-ts/grunt-ts
I noticed in Webstorm 9, the built-in Grunt console was filtering/linking on typescript compile errors with grunt-typescript. I am not sure if this is a recent change or not, but it was linking this for example,
So, I went into grunt-tslint/node_modules/tslint/build/formatters, and copied proseFormatter.js to ./myproseFormatter.js. Then I tweaked it so the tslint output format would match the compile error format, by replacing square brackets with parens, and removing the whitespace between line and column number. Finally, I referenced my custom formatter in my gruntfile tslint config by adding the formatter and formattersDirectory properties:
tslint: {
options: {
configuration: grunt.file.readJSON('tslint.json'),
formatter: 'myprose',
formattersDirectory: './'
},
all: {
src: [ 'app/**/*.ts' ]
}
}
and it worked!
I have planned to use the Ext.ux.panel.PDF extension https://github.com/SunboX/ext_ux_pdf_panel for my app but cannot make it to work inside my Sencha Architect 3.0.
I have downloaded the files and put the js file in my project directory /ext/src/ux/panel/PDF.js. In the apllication I have put the require line on the top level under Application
Ext.application({
requires: [
'Ext.window.MessageBox',
'Ext.ux.panel.PDF'
], ...
But when I want to instantiate the pdf panel with the code from the example I keep getting this error:
Uncaught Error: The following classes are not declared even if their files have been loaded: 'Ext.ux.panel.PDF'. Please check the source code of their corresponding files for possible typos: 'ext/src/ux/panel/PDF.js
Please advise.
EDIT: I have tried using a loader but the error is still present
Ext.Loader.setConfig({
enabled: true,
paths: {
Ext: 'ext/src'
}
});
The error you get means, that the file ext/src/ux/panel/PDF.js does not contain valid javascript. I tested this extension, and I don't get that error.
It the file is empty, you will get this error only, if it contains invalid javascript, this should be the second error, while the first will complain about the syntax error.
If the file is missing, you'll get another error.
Have a close look at the file, maybe it got corrupted while downloading or unzipping the extension. Or you edited it by error and introduced an error.
try to add below code on top of your Ext.application({ ~~~ source
Ext.Loader.setPath({
'Ext.ux' : 'YOURPATH(ABSOLUTE OR RELATIVE)/ext/src/ux'
});