Почему IntelliJ продолжает удалять обратные кавычки из этой строки шаблона JavaScript?

Я хочу поставить «обратные кавычки» вокруг моих строк шаблона.

IntelliJ продолжает удалять их каждый раз, когда я пытаюсь обернуть их вокруг строки.

Кто-нибудь знает, почему это происходит и как это решить?

Я добавил небольшой фрагмент кода моего файла .vue, в котором возникла проблема. Представьте, что html, js и css записаны в одном файле компонента (.vue), разделенном уникальными тегами (шаблон, скрипт и тег стиля). Я использую немецкую раскладку клавиатуры с раскладкой Mac OS X 10.5+.

intelliJ удаляет обратные кавычки

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>


person Lucca    schedule 20.04.2017    source источник
comment
чем больше я смотрю на эту гифку, тем меньше понимаю, что происходит. Пожалуйста, не могли бы вы предоставить исходный фрагмент кода (в виде текста) и описать шаги для повторения? какая у вас системная раскладка клавиатуры?   -  person lena    schedule 20.04.2017
comment
Я добавил фрагмент кода для компонента, над которым работал, и добавил небольшое описание для дальнейшего объяснения структуры содержимого. Надеюсь, это поможет.   -  person Lucca    schedule 20.04.2017
comment
Итак, у вас в коде было axios.get(http://localhost:5005/${this.room}/shuffle/on).then(response => {, и вы пытались окружить localhost:5005/${this.room}/ перетасовать/включить обратными кавычками? Или пытались заменить кавычки обратными кавычками? Или? Какая у вас раскладка клавиатуры?   -  person lena    schedule 21.04.2017
comment
Да, я пытался окружить localhost:5005/${this.room}/shuffle/on обратными кавычками. Но замена двойных кавычек обратными кавычками тоже не сработала. Я использую раскладку клавиатуры QWERTZ.   -  person Lucca    schedule 28.04.2017
comment
может быть проблема youtrack.jetbrains.com/issue/WEB-21750; пожалуйста, следите за обновлениями   -  person lena    schedule 28.04.2017
comment
@лена Обновление? Ты должно быть шутишь. Последнее обновление было в 2016 году. JetBrains ничего не будет с этим делать. Я бы посоветовал вам перейти на VS Code. Гораздо более удобный интерфейс, открытый исходный код и бесплатный.   -  person connexo    schedule 09.03.2019


Ответы (2)


У меня точно такая же проблема. Я решил это, отключив параметр «Вставить парную цитату» в «Настройки» -> «Редактор» -> «Основные» -> «Смарт-ключи».

Разумеется, он отключает вставку парных кавычек для всех типов кавычек, включая одинарные и двойные. Это временный обходной путь, но лично я бы предпочел использовать строки шаблона JS, несмотря на то, что каждый раз приходится вводить пару кавычек.

person ballcue    schedule 09.03.2019
comment
Кажется, это лучшее решение на данный момент. Спасибо :) - person Lucca; 24.06.2019
comment
еще более сложное исправление было бы для реализации правильной функции формата строки в ES6 или 7. Как насчет подхода python с вызовом встроенной функции формата для каждой строки. Это самый быстрый способ форматирования строки, так как вам не нужно ничего менять, если вы хотите использовать форматирование. - person Macilias; 29.11.2019

Другой обходной путь — написать обратную галочку в другом месте и скопировать/вставить ее вокруг шаблона.

person vdsbenoit    schedule 22.12.2020