CODEWITHSUNDEEP
javascriptintellij-ideaecmascript-6backtickstemplate-strings
Lucca
Lucca

Reputation: 1537

Why does IntelliJ keep removing backticks from this JavaScript template string?

I want to put "backticks" around my template strings.

IntelliJ keeps removing them every time I try the wrap them around the string.

Anyone's got a clue why its happening and how to solve this?

I added a little code snippet of my .vue file where the problem occurred. Imagine html, js and css written down in one component (.vue) file, separated by unique tags (template, script and style tag). I am using a german keyboard layout with the Mac OS X 10.5+ keymap.

intelliJ removing backticks

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>

Upvotes: 21

Views: 2954

Answers (4)

user2401814
user2401814

Reputation: 1

Just had this "feature" (five years later) and figured out a simple solution, just hit back-tick one more time that will get the closing back-tick to stick with no preference changed in v.2022.2.3

back-tick text text back-tick back-tick

Upvotes: 0

Yago Santos
Yago Santos

Reputation: 1

Disable the insert pair quote option is a bad workaround, a better approach to deal with this is creating a live template with backticks.

Just go to Preferences -> Editor -> Live templates, create a custom template with a shortcut word (form me is tpl) containing ``, and to use this in code just type tpl+Tab key and done

Upvotes: 0

vdsbenoit
vdsbenoit

Reputation: 360

Another workaround is to write a backtick in another location and copy/paste it around the template.

Upvotes: 0

ballcue
ballcue

Reputation: 166

I have the same problem. I solved it by disabling the "Insert pair quote" option in Preferences -> Editor -> General -> Smart Keys.

Of course, it disables the inserting of pair quotes for all types of quotes, including single and double. It's a temporary workaround, but personally I'd rather actually be able to use JS's template strings despite having to type in the pair of quotes every time.

Upvotes: 13

Related Questions