我想在我的模板字符串上贴上“靠背”。
IntelliJ每次尝试将它们围绕字符串包装时,都会删除它们。
有人知道为什么会发生这种事吗?怎么解决这个问题?
我在发生问题的.vue文件中添加了一个代码片段。想象一下,html、js和css写在一个组件(.vue)文件中,由唯一的标记(模板、脚本和样式标记)隔开。我使用的是带有Mac 10.5+键图的德国键盘布局。

import axios from "axios";
import 'vue-animate/dist/vue-animate.min.css';
export default {
name: 'hello',
data () {
return {
msg: `Service is <strong>ONLINE</strong> and <strong>READY</strong> to operate`,
clicked: false,
iconURL:"./../../static/img/meditate.svg",
meditationAction: this.activateMeditation,
backgroundImage: "",
room:"Bad"
}
},
methods:{
activateMeditation () {
this.clicked = !this.clicked;
axios.get(`http://localhost:5005/${this.room}/shuffle/on`).then(response => {
console.info("SUCCESSFULLY ACTIVATED SHUFFLE");
axios.get(`http://localhost:5005/${this.room}/volume/20`).then(response => {
console.info("SUCCESSFULLY SET VOLUME TO 20");
axios.get("http://localhost:5005/bad/sleep/900").then(response => {
console.info("SUCCESSFULLY SET SLEEP TIME TO 15 MINUTES");
axios.get("http://localhost:5005/bad/playlist/med").then(response => {
console.info("SUCCESSFULLY SET PLAYLIST TO MED");
this.iconURL = "./../../static/img/stop.svg";
this.meditationAction = this.pausePlayback;
axios.get("http://localhost:5005/bad/state").then(response => {
console.info("SUCCESSFULLY RETRIEVED STATE");
console.log(response);
//FIXME: USE IMAGE OF CURRENT TRACK INSTEAD OF NEXT TRACK
this.backgroundImage = response.data.nextTrack.absoluteAlbumArtUri;
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
});
})
.catch((error)=>{
console.log(error);
this.iconURL = "./../../static/img/attention.svg";
this.meditationAction = this.resetButton;
});
},
pausePlayback() {
axios.get("http://localhost:5005/bad/pause").then(response => {
console.info("SUCCESSFULLY PAUSED PLAYBACK");
this.iconURL = "./../../static/img/meditate.svg";
this.meditationAction = this.activateMeditation;
this.backgroundImage = "";
})
.catch((error)=>{
console.log(error);
});
},
resetButton() {
this.iconURL = "./../../static/img/meditate.svg";
this.meditationAction = this.activateMeditation;
}
}
} * {
box-sizing: border-box;
}
.logo {
max-width:50%;
}
.svg {
height:5em;
z-index:100;
}
.option .svg .st0 {
fill: white;
stroke: white;
}
.options__container {
display:flex;
justify-content: center;
align-items: center;
width:100%;
}
.option {
display:flex;
justify-content: center;
align-items: center;
height:3em;
width:3em;
position:relative;
background-size:cover;
padding:3em;
border-radius:100%;
background-color:white;
border-top:3px solid black;
border-bottom:5px solid #303030;
border-left:3px solid black;
border-right:7px solid #303030;
transition: all 300ms ease-in;
}
.option__background-image {
position:absolute;
background-color:white;
opacity:0.8;
top:0;
left:0;
height:100%;
width:100%;
border-radius: 100%;
}
.option:hover {
border:3px solid black;
} <div class="hello">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Sonos_2015-Logo.png"/>
<h2 v-html="msg"></h2>
<div class="options__container">
<a class="option" v-on:click="meditationAction" v-bind:class="{'animated flash' : clicked}" :style="{backgroundImage: 'url(' + backgroundImage +')'}" >
<div class="option__background-image" ></div>
<img class="svg" :src=iconURL>
</a>
</div>
</div>
发布于 2019-03-09 01:17:53
我也有同样的问题。我通过禁用Preferences -> Editor -> General ->智能键中的“插入对引号”选项来解决这个问题。
当然,它禁止为所有类型的引号插入对引号,包括单引号和双引号。这是一个暂时的解决办法,但就我个人而言,我更希望能够使用JS的模板字符串,尽管每次都要输入这对引号。
发布于 2020-12-22 01:10:19
另一个解决办法是在另一个位置写一个反勾,然后在模板周围复制/粘贴它。
发布于 2021-10-01 14:03:14
禁用insert对引号选项是一个糟糕的解决方法,更好的解决方法是创建一个带有backticks的活动模板。
只需转到Preferences -> Editor -> Live模板,创建一个包含->的快捷词(form )的自定义模板,并在代码中使用它--只需键入tpl+Tab键并完成
https://stackoverflow.com/questions/43525756
复制相似问题