error: Parsing error: Unexpected token ..
My lint gulp task is giving me issues on '.js' files, while '.jsx' are doing fine on ES6 syntax.
Notably, the "..." operator - for spread/rest etc.
Is there a way to get this to work? Here is part of my config. (I tried adding ".js: true", didn't help)
{
"parser":"espree",
"ecmaFeatures":{
"modules":true,
"jsx":true
},
You probably want to enable the experimentalObjectRestSpread parser option:
{
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"modules": true
}
}
Since Espree is already the default parser, you don't need to specify it unless you want to for clarity's sake.
Related
i have been trying to find documentation on this but i havent been able to. I use stylint in a project and we have the css order option activated. I haven't been able to set up VS code to show the errors and i haven't found a page with the information to actually know the order,so i always need to check on compile time if i have any mistakes in the CSS order properties, and it shows a huge error on screen.
this are the stylelint rules we have
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'if', 'else', 'include', 'extend']
}
],
'max-nesting-depth': 4,
indentation: 4,
// add your custom config here
// https://stylelint.io/user-guide/configuration
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
}
I dont see anything weird about it. It there a page where i can find the correct order? it is so annoying because when i get a stylelint order error, i usually have to find it in a few tries.
You are extending the stylelint-config-concentric-order community config. This config includes and configures the stylelint-order community plugin. You can find the order of the properties in the repo on GitHub.
You can see Stylelint errors in VS Code using the official Stylelint extension.
And you can have the extension automatically fix problems on save, which will include the order of your properties, using the editor.codeActionsOnSave configuration property:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "postcss","scss"],
"css.validate": false,
"scss.validate": false
}
Alternatively, you can run npx stylelint "**/*.scss" --fix" on the command line to automatically fix problems.
I just ran NPM update on a project that was working fine. Now, I am getting a Prettier "Friendly Error". I'm wondering if ESLint and Prettier are not playing well together in my config.
error Replace `⏎··················Coming·Soon!⏎················` with `Coming·Soon!`
I'm not really sure what is going on here, but it looks like it's a formatting issue telling me to add backticks. The errors are on HTML markup that does not even have qoutes on it. It's literally <span>Coming Soon</span>.
.eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'#nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: ['prettier'],
rules: {},
}
.prettierrc:
{
"semi": false,
"singleQuote": true,
"htmlWhitespaceSensitivity": "ignore"
}
The error isn't indicating the backticks. It's telling you the whitespace around Coming Soon! should be removed.
The config for htmlWhitespaceSensitivity can be confusing:
ignore - HTML whitespace is insignificant, so remove it
strict - HTML whitespace is significant, so ignore it
Thus you actually want to use strict. Configure ESLint as shown below (and restart IDE if using VS Code):
// .eslintrc.js
module.exports = {
rules: {
'prettier/prettier': {
htmlWhitespaceSensitivity: 'strict',
},
},
}
Note that htmlWhitespaceSensitivity config doesn't seem to have an effect in .prettierrc.
I can't figure out how to set the configuration in for the space between function parentheses. I've set it everywhere to true, but when I save a .vue file, the space is removed - after it is removed it is highlighted as error (Missing space between function parentheses). It happens in script section. In .js files spaces are added, but also highlighted as error, this time... Unexpected space between function parentheses?! There was some configuration of settings (which I'm not able to recreate now) when on save the space was added for a moment and then removed again in .vue files.
my settings.json
"vetur.format.defaultFormatter.js": "prettier", // tried both prettier and typescript
// "vetur.format.defaultFormatter.js": "vscode-typescript", // tried both prettier and typescript
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"spaceBeforeFunctionParen": true,
"eslintIntegration": true,
},
"vscode-typescript": {
"singleQuote": true,
"spaceBeforeFunctionParen": true,
"eslintIntegration": true,
}
},
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'#vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"space-before-function-paren": ["error", "always"], //setting this to 'never' removes the error highlight in vue files, not js files
},
parserOptions: {
parser: 'babel-eslint',
sourceType: "module"
}
}
I've read a zillion questions and set the space-between-function-parentheses in every possible setting that I found in the answers. Still the linting process finds a way to ignore all those settings and implement a different one. Not to mention that it highlights errors not consistent with the auto-formatting. Is there any other setting that I am still missing?
Try this:
npm install prettier#v1.19.1 --save-dev --save-exact
and then restart VS Code.
Prettier just recently updated to v2 and if your project doesn't have prettier installed locally it will use VS Code's version, which is most probably the latest version. In prettier v2 the space-before-function-paren has become a default and hence will be applied on all your projects that don't have a local version of prettier pre v2 installed. For me using any config combination didn't seem to work - it's like prettier just ignored all of them. Hope this helps.
Prior to Prettier v2, It seems to not support space-before-function-paren rule. So We should turn off the rule above to resolve conflict.
Try this
module.exports = {
rules: {
'space-before-function-paren': 'off'
}
}
in an ESLint configuration file(such as .eslintrc.js) located in root directory of project.
Then we should add following to settings.json in VS Code.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
Last but not least, Disabling Vetur extension in VS Code might be a better choice.
I also had same exact issue with vetur and ESLint extns. Following in settings.json fixed it. By default it was prettier.
"vetur.format.defaultFormatter.js": "prettier-eslint",
I´m trying to setup a build workflow using the aforementioned technologies, but I´m getting the following error, which seems very generic upon running tests on karma:
TypeError: 'undefined' is not an object (evaluating 'a.Sifter=b()')
This happens even without adding any ECMSA6 specific feature. The same workflow works fine without the transpiling phase in the workflow.
What I tried was to set the babeljs after a concatenation phase and before executing a uglifying on it, like the following snippet:
var defaultTasks = [
"sass:prod", // compile scss sources
"cleanAll", // clean folders: preparing for copy
"copyAll", // copying bower files
"cssmin:customVendor", // minify and concat 'customized from vendor' css
"concat:vendorStyles", // concat vendors's css + minified 'customized from vendor' and distribute as 'css/vendor.css'
"uglify:rawVendors", // minifies unminified vendors
"concat:vendorScripts", // concat vendors's scripts and distribute as 'scripts/vendor.js'
"ngAnnotate:app", // ng-annotates app's scripts
"concat:appScripts", // concat app's (customized from vendor's + ng-annotated + customer's)
"babel",// uses babeljs to convert brandnew ES6 javascript into ES5 allowing for old browsers
"uglify:app" // minify app script and distribute as 'scripts/app.js'
];
if (!skipTest) {
defaultTasks.push("karma:target"); // run tests on minified scripts
}
The imporant definitions are shown:
babel: {
options: {
"presets": ['es2015']
},
dist: {
files: {
"<%= concat.appScripts.dest %>": "<%= concat.appScripts.dest %>"
}
}
},
uglify: {
options: {
mangle: {
except: [
"jQuery", "angular", "tableau", "LZString", "moment", "Moment", "Modernizr",
"app", "modules"
]
}
},
app: {
files: [{
src: ["<%= concat.appScripts.dest %>"],
dest: "<%= app.dist %>/scripts/app.js"
}]
}
},
I´ve tested the transpile a bit, running the default logic from babel url, and it works well, converting basic stuff.
Is there any better workflow that I could use to still run the tests against the same code that would be executed for real?
Thanks
In the end, the workflow was correct.
I just need to modify the filesets a bit in order to avoid transpiling the selectize.js file (which wasn´t really needed).
However, not sure why it was breaking
That solved to me, so I´m closing the question, but perhaps might be useful for someone else.
We're using gulp-less to compile LESS files to css. The problem is that we have calc() statements in the less files which we want the less compiler to copy over to the css as-is, instead of evaluating them during compilation.
When invoking lessc from the command line, this is easily done using
lessc --strict-math=on
But how to do it from the gulp script?
I've tried adding the option to the task parameter, like so:
gulp.task('less', function() {
return gulp.src(<my less files>)
.pipe(less({
'strict-math': 'on', // this is what I tried to add
paths : [ <my less paths> ]
}))
.pipe(gulp.dest(<my css path>));
});
.. but to no avail. Is it possible? Any work-arounds or alternatives if not?
Dash separated named options are in camelCase in javascript, try this :
.pipe(less({
strictMath: 'on', // this is what you have to do
paths : [ <my less paths> ]
}))