I am using Visual Studio Code with prettier for vue, and it is messing up my interpolations. Every time that I save it switches between having the curly braces on the new line with the content, or leaving them on the line with the tags and only putting the content on the new line.
For a while they would swap in unison, so I would just have to make sure it was in the correct state before committing to version control. Now, these two are on opposite cycles and therefore one of them is always wrong.
(I am using Bootstrap-Vue and i18n localization)
Save 1
<b-col>
<b-button type="button" v-on:click="done()">
{{ $t('Done') }}
</b-button>
</b-col>
<b-col>
<b-button type="button" v-on:click="cannotComplete()">{{
$t('CannotComplete')
}}</b-button>
</b-col>
Save 2
<b-row>
<b-col>
<b-button type="button" v-on:click="done()">{{
$t('Done')
}}</b-button>
</b-col>
<b-col>
<b-button type="button" v-on:click="cannotComplete()">
{{ $t('CannotComplete') }}
</b-button>
</b-col>
</b-row>
Prettier Config
module.exports = {
singleQuote: true,
semi: false
}
eslintConfig
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'plugin:prettier/recommended',
'#vue/prettier',
'prettier'
],
plugins: ['prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'prettier/prettier': ['error']
},
parserOptions: {
parser: 'babel-eslint'
}
}
The issue must have been something to do with conflicting formaters. I removed the Prettier plugin and changed some Visual Studio Code settings.
VS Code Settings:
{
...
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true
...
}
eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
Relevant SO Post
Related
I try to solve navigation swiper in vue, and I found this article to solve it. However, there's a problem with slot, I know that vue3 has v-slot to replace this function, but I don't know how to write it. Here is the link to the article. https://blog.csdn.net/qq_41838215/article/details/109106235
Version:
vue : 3.2.31
vue-awesome-swiper: 5.0.0
swiper: 6.8.4
eslint: 8.12.0,
<swiper
ref="mySwiper"
:options="swiperOption"
>
<swiper-slide v-for="(img, index) in images" :key="index">
<img :src="require(`#/assets/picture/${img}.jpg`)"/>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev" #click="prev"></div>
<div class="swiper-button-next" slot="button-next" #click="next"></div>
</swiper>
Besides, I found this maybe eslint problem, so I wrote eslint with this article
ionic - `slot` attributes are deprecated - eslint-plugin-vue
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/no-deprecated-slot-attribute': 'off',
"vetur.validation.template": false,
}
}
Thanks for your helping.
So i'm using vue js 3 and vue.config.js.
and this is what i have tried:
configureWebpack: {
optimization: {
minimizer: isProd
? [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true,
},
// sourceMap: true,
// comments: false,
},
}),
]
: [],
},
},
And it's working! But for some reason it doesn't show router-link and what is inside my router link:
<router-link :to="{name: 'project', params: {id: data.id.value}}">
<el-button type="primary">
<i class="fa el-icon-fa-sign-in"></i>
</el-button>
</router-link>
if i remove router link and use
<span>Then it will show my span</span>
Can you help me please to fix issue with the router-link when i'm running UglifyJsPlugin?
Do you know another way how can i remove debugger and console log from Production?
I have installed ESLint + Prettier in my Vuejs project. Saving files causes the prettier to throw the following warning. Much appreciated if someone could explain what causes this warning.
"Replace `·:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"·tag=\"button\">About</router-link` with `⏎········:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"⏎········tag=\"button\"⏎········>About</router-link⏎······`"
The vuejs file:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>|
<router-link
:to="{ name: 'About', query: { lang: $i18n.locale } }"
tag="button"
>
About
</router-link>
<p>{{ $route.query.lang }}</p>
<h2>{{ $i18n.locale }}</h2>
</div>
<router-view />
</div>
</template>
.prettierrc.js:
module.exports = {
singleQuote: true,
semi: false
}
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/prettier'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'prettier/prettier': ['error']
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
The line-wrapping you're observing is done by Prettier's core formatting. You can avoid it by setting the max line width (printWidth) to something longer than 80.
Configure Prettier with:
// <root>/.prettierrc.js
module.exports = {
printWidth: 200, // max number of characters per line (default: 80)
}
And configure ESLint's prettier/prettier options:
// <root>/.eslintrc.js
const prettierOptions = require("./prettierrc");
module.exports = {
rules: {
"prettier/prettier": ["error", prettierOptions],
},
};
Using Vuei18n and Vuetify make me confuse this point
This is my code (I noted the weird thing in-line):
<v-form #submit.prevent="login" v-model="valid" ref="form">
<v-text-field
prepend-icon="person"
name="login"
:label="$t('Login')" <-- This line is still translated automatically
type="email"
v-model="email"
:rules="[v => !!v || $t('E-mail is required')]" <-- This line is not translated automatically
></v-text-field>
...
</v-form>
How can I translate automatically the message under the input form?
Create a computed emailRules,
computed: {
emailRules() {
return [
v => !!v || $t('E-mail is required')
];
}
},
Then modify your line :rules in your "v-text-field"
:rules="emailRules"
I think vuetify takes the message when rule has just to fail.
I did this mixin based on update rules when locale has changed, in order to refresh rules message.
import Vue from 'vue'
export default Vue.extend({
data: () => ({
formActive: true,
}),
computed: {
requiredRules() {
return this.formActive
? [(val: string) => !!val || this.$t('errors.requiredField')]
: []
},
},
methods: {
updateLocale() {
this.formActive = false
this.$nextTick(() => {
this.formActive = true
})
},
},
})
<v-select
:items="getAllPriceGrups"
item-text="name"
#input="getPrices"
v-model="priceG"
filled
:rules="rulesRequired($t('global.needToFillOut'))"
return-object
></v-select>
methods: {
rulesRequired(role) {
return [value => !!value || role];
},
}
This works for me!
The solution of SteDeshain from this open github issue works for me:
template:
<v-text-field
v-model="userState.username"
:rules="[rules.required, rules.mail]"
>
<template #message="{ message }">
{{ $t(message) }}
</template>
</v-text-field>
js:
data () {
return {
show1: false,
rules: {
required: v => !!v || 'rules.notEmpty',
mail: v=> /^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,6})$/.test(v) || 'rules.mail'
}
};
},
I'm using the eslint-plugin-vue with my Vue project.
I have the following .prettierrc file:
// /.prettierrc
{
"arrowParens": "avoid",
"bracketSpacing": true,
"insertPragma": false,
"jsxBracketSameLine": false,
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
And the following .eslintrc.js file:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/recommended',
'#vue/prettier',
],
rules: {
'linebreak-style': ['error', 'unix'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/max-attributes-per-line': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'always',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
plugins: ['vue'],
parserOptions: {
parser: 'babel-eslint',
},
}
But unfortunately, prettier thinks that
<template>
<header> Home </header>
</template>
Is prettier than
<template>
<header>
<a href="/" class="logo">
Home
</a>
</header>
</template>
How can I tell prettier to preserve my vertical whitespace in the Vue template?
Are there any rules similar to what I want?
Your only option(workaround) is using ignore.
Ex Js files.
// prettier-ignore
Ex Html files.
<!-- prettier-ignore -->
https://prettier.io/docs/en/ignore.html
Here's the list of rules for vue in eslint: https://vuejs.github.io/eslint-plugin-vue/rules/
But if you disable a rule it will be applied to all your code then.
Also, it seems that you can tell Prettier to ignore a block: https://prettier.io/docs/en/ignore.html#html
Besides, I would argue that this is more 'readable', but that's my point of view :)
<template>
<header>
Home
</header>
</template>