I am using vuetify's datatable, i this we have different slots with some props for example below
<template #header.data-table-select="{ on, props }">
<v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
</template>
I am also using vue's eslint plugin to check for any errors/bad code / or any violation , but if i use above code snippet in my file it gives me error
'v-slot' directive doesn't support any modifier
as per this docs it is right https://eslint.vuejs.org/rules/valid-v-slot.html
but it don't have any example to how we handle this case
how can i remove this warning/or make it correct way , without making it exemption
Thanks
I don't see any v-slot in the code you provided so I can show you only my usecase.
With Eslint error:
<template v-slot:item.actions="{ item }">
Without error:
<template v-slot:[`item.actions`]="{ item }">
In eslint-plugin-vue#^7.1.0, you can use allowModifiers option in vue/valid-v-slot rule.
// .eslintrc.js
'vue/valid-v-slot': ['error', {
allowModifiers: true,
}],
vue/valid-v-slot #options
For me the following Entry in settings.json fixed the problem:
"vetur.validation.template": false
EDIT: As notified by the comments and Hexodus' (correct) answer, you can work around the linting warning by using dynamic slot names that return a string(template). 'Not enabling' is no longer recommended, as this is now a standard rule. Thus, I recommend using Hexodus' method over disabling the valid v-slot rule altogether.
Original Post:
You can't really fix this linting warning.
Vue syntax for modifiers use the dot to alter the way a
directive functions (e.g. v-model.number)
The way Vuetify dynamically names their slots uses a dot in order to
select a specific part of the component (#header.data-table-select).
ESLint can't distinguish whether you're trying to set a modifier on a slot (which is impossible), or if you have a slot name that contains a dot.
The easiest thing you can do is disable the rule. Since the 'valid-v-slot' rule isn't enabled by default by any of the base configurations of eslint-plugin-vue, you should be able to find it under "rules" in your eslint config.
I tried Hexodus' answer, but the template wasn't rendering at all in my case.
I got it to work perfectly with this, without any eslint rule modification:
<template #[`item.actions`]="{ item }">
Try this:
<template v-slot:item.createdDate="{ item }">
if you use the format vetur, add this option in vscode settings:
"vetur.validation.template": false
Maybe this isn't the answer, and you also may not buy into my solution but this is what I did.
ANS: I downgraded Vetur to version 0.23! It worked! (Waiting a new version release that addresses the issue.
Open the Extensions side panel on VSCode, right click Vetur and select install other versions.
Alternatively, if your code is working fine, a line before the vue-eslint-plugin error you can try <!-- eslint-disable-next-line vue/no-v-html --> to disable eslint for next line or <!-- eslint-disable --> to disable every disable linting below it.
Worked for some people but not for me and may not work for you. Either way, prefer Vetur downgrade
I am using laravel framework, and vuetify. Previous codes suddenly reported eslint errors with red lines - vue/valid-v-slot directive, adding multiple root nodes to the template, and so on without recommending any quick fix, yet they are all working fine. Answers I got from search never yielded any result till I downgraded, any other solution will be so welcomed!
It worked for me:
in .vue
<template v-slot:[getitemcontrols()]="props">
in .js
methods: {
getitemcontrols() {
return `item.controls`;
},
For me this config added to package.json worked
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/base"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
}
Related
I'm using the tailwind CSS intellisense vscode extension, and it seems to only work when typing inside a className property.
I'm using a package called cntl https://www.npmjs.com/package/cntl to help write more maintainable classNames, however, using this package, I lose the intelliSense support.
Is there any way to manually configure so that I get the intelliSense when writing my cntl?
const title = cntl`
text-3xl
// I'd like intellisense here
`
Here's how I solved it.
In VSCode settings.json add the following:
"tailwindCSS.experimental.classRegex": [
"cntl`([^`]*)", // cntl`...`
],
I realize this Q is old, but it still shows up in search so I wanted to share my workflow :)
Here's my VS Code settings.json to add Tailwind IntelliSense within objects and variables who's name ends with "Classes":
"tailwindCSS.experimental.classRegex": [
["Classes \\=([^;]*);", "'([^']*)'"],
["Classes \\=([^;]*);", "\"([^\"]*)\""],
["Classes \\=([^;]*);", "\\`([^\\`]*)\\`"]
],
Tailwind IntelliSense will now recognize all of the following strings:
const defaultClasses = `text-grey`;
const componentClasses = {
default: 'text-grey',
danger: `text-red`,
warning: "text-yellow",
};
Note: the regex matches code blocks that start with Classes = and ends with ; — you can replace Classes = with your own matcher, like. cntl :)
Linting is not supported yet as per: https://github.com/tailwindlabs/tailwindcss/issues/7553. Hover seem to be supported now though
For clsx
"tailwindCSS.experimental.classRegex": ["clsx\\(([^)]*)\\)"]
For classnames
"tailwindCSS.experimental.classRegex": ["classnames\\(([^)]*)\\)"]
None of the answer worked for me.
But it workes based on the guide from https://www.jussivirtanen.fi/writing/using-tailwind-intellisense-within-strings
If you're using VS Code and writing your Tailwind classes within a variable, you've probably noticed that Tailwind IntelliSense doesn't work. However, if you're using a consistent naming scheme, you can fix this issue.
I use a consistent naming scheme with the word Styles at the end. In this case, I can go to Tailwind IntelliSense settings and add .*Styles to the tailwindCSS.classAttributes array:
// settings.json within VS Code
{
// Add ".*Styles" (or whatever matches your naming scheme)
"tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Styles"]
}
example usage
const contentStyles = "py-1 bg-white dark:bg-gray-700"
This will detect a container consisting of className = [] string and its variants such as ButtonClassNamesXyz Classname and whatever is inside [ ] will be processed.
"tailwindCSS.experimental.classRegex": [
["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\s;,.])", "'([^']*)'"],
"return '(.*)'",
],
Adjust regex here https://www.debuggex.com/r/yhCYrsFdzXRWQEhP
v2 note
I have added detection for ] inside the actual classname string.
tailwindlabs
/
tailwindcss
: [IntelliSense] Custom class name completion contexts #7554
I understand this question has been answered, but I was still facing some trouble because I wanted to use Tailwind's intellisense with react's classnames library.
Here's what worked for me after adding it to VSC's settings.json:
"tailwindCSS.experimental.classRegex": ["classNames\\(([^)]*)\\)"],
is there an easy way (maybe tslint rule) to prevent us from using MyClass.name, or myFunction.name?
We're trying to make sure no Dev end up using this, as the minification process will change method names.
Thank you!
Untested, so mileage may vary from 0 to 100, but you can try the following. Inside a global/ambient ts file write:
declare global {
interface Function {
/** #deprecated Don't use this, think about the children!*/
readonly name: string;
}
}
Then set in your tslint config:
"rules": {
"deprecation": true
}
Perhaps this will warn the developer with a deprecation notice, but there is also a possibility it's ignored, because the lib typings do not have this comment
I'm new to the web app development, and work on a project using Vue cli, antd components, and it runs at IE11.
The IE11 seems not render the the component, it comment out the table.
IE11 element
also give the error at console:
[Vue warn]: Error in render: "TypeError: Object doesn't support property
or method 'entries'"
I do check tickets from ant-design-vue, it looks like no one have the same problem, so I assume it is polyfill or ES5 to ES6 setting problem.
below is my html for the page
<template>
<div id="detailDash">
<h1>{{id}}</h1>
<a-table
:columns="columns"
:dataSource="data"
style="padding: 50px;"
:bordered="true">
</a-table>
</div>
</template>
vuejs code
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
const columns = [...];
const innerColumns = [...];
export default {
data(){
return {
id: '',
status:'',
data:[....],
columns,
innerColumns,
}
},
created() {
this.id = this.$route.params.envID;
},
methods:{
checkStatus(){
this.state = 'success'
return status;
}
}
}
</script>
babel.config.js
// babel.config.js
module.exports = {
presets: [
['#vue/app',
{
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
]
}
I have been google all day about this typeError, but not one was giving a clean solution, I really need some help for this!!
You need to add polyfills to older browsers in order to have them execute code which is intended for modern browsers. Object.entries is an example of a function which does not exist on IE.
As explained in my answer to this question you can polyfill statically (in your case by editing babel.config.js), or dynamically (by using a service like polyfill.io). The advantage to using a dynamic polyfill is that the API only ships what the browser actually needs, which reduces your bundle size.
Because you are using Vue CLI, you'll need to add a script tag to your public/index.html like this:
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.entries%2CSymbol.iterator"></script>
I've included Object.entries and Symbol.iterator based on your comments above. You will likely need more. Use the builder to add additional features.
Finally, you'll need to continually test your app to see which features are needed for successful execution in a given browser. You may need to repeat this process several times until all of the errors go away. Make sure to test on multiple pages, as not all of your page bundles will have the same requirements.
I'm using babel 6 with the react plugin and followed the documentation instructions for setting up the transpile process. I've read to get react working I need to use es2015 and react preset. Initially everything worked fine using this both presets.
But when I've copied an example code from babel's website (Property initializers)
to test new language features I've got errors when code below was transpiled and so it wasn't possible anymore to transpile the code.
// The ES6+ way
class Video extends React.Component {
static defaultProps^= { // this is line 42 and ^ the column where error occurs
autoPlay: false,
maxLoops: 10,
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}
Warning: [...]components/sectorList.js: Unexpected token (42:24) Use --force to continue.
After a long while debuggin I've got this issue solved by loading also the stage-0 preset for babel. But it was just luck.
So my question where I can't find an answer for is:
How is the correct way to determine the correct preset collection.
Or is an unexpected token ... warning mostly a notification for an missing preset?
Thanks for any help
If you look at the babel pages for a preset, it lists all the included transformations. In this case, you're using class properties, which is currently at stage 1 and is therefore included in the stage 1 preset.
In ES2015, you'd use the constructor to set the defaults.
I have a Node application, which specifies babel with transform options and register in a main file, like so:
require('babel').transform('code', { stage: 1 });
require('babel/register')({ ignore: false });
require('../src/index');
Which does an excellent job of allowing me to use ES6 in ../src/index, and all subsequent files, but does not seem to allow me to use Decorators, as it should by declaring level 1 transform. I get instead a syntax error. Why is this not enabling decorator support? The actual decorator I'm trying to use is:
#test1
test Class() {
constructor() {
this.test = 'test';
}
}
function test1(obj) {
obj.test1 = 'test1';
}
That's not how you specify options, that first like does nothing. It compiles the JavaScript code code and does nothing with the result of the compilation.
require('babel/register')({
ignore: false,
stage: 1
});
require('../src/index');
Also generally ignore: false is a bad idea because some files should ignored.
Update
If you are using Babel 6, you'll want to download babel-plugin-transform-decorators-legacy rather than enabling stage: 1.
It's worth noting that the newest version of babel (v6) (over 1 month old) does not support decorators and the babeljs team has identified that they do not consider decorators to be a priority to fix -
https://twitter.com/sebmck/status/661501967412301824
As #jdanyow has mentioned in other answers you can track the issue here but beware if you choose to use Babeljs v6 that there is functionality from the previous release which is broken in the released v6 at the moment.
As #loganfsmyth points out in comments there is a plugin available babel-plugin-transform-decorators-legacy although it does mention that there are differences in the implementation, however I am not aware of them.