Can I use ES6 syntax within my HTML file?

Hello all,

I'm using a custom file type .vue that combines CSS, HTML, and ES6 Javascript into one file. It looks something like this...

.red {
: #f00;

  <h2 class="red">{{msg}}</h2>

export default {
data () {
    return {
msg: 'Hello from Component D!'

When I set the File Type of *.vue files to be HTML, the <style> and <template> tags are recognized by Webstorm, but the Javascript within the <script> tag is not (expects ES5 Javascript instead). When I set the File Type to be ECMAScript 6, the Javascript within the <script> tag is recognized but everything else is not. Setting the Template Data Language to be either HTML or ECMAScript 6 for my *.vue files seems to have no effect.

My Javascript level is set to ECMAScript 6 on a project level.

What's the correct way of combining these three languages into one file so that Webstorm recognizes the syntax of each?

Edit: I've also tried setting the <script> tags into type="babel" or "ecmascript-6"... it gets rid of the errors, but as soon as I change anything in the Javascript, the red lines reappear.

Comment actions Permalink

now at least using type="text/babel" or type="text/ecmascript-6" it works. but it should work taking the settings from the project settings.


Please sign in to leave a comment.