hedefalk/atom-vue

Vue component file syntax for Atom

Warning!

Maintenance Mode: While this package is no longer maintained by @hedefalk, this package is still receiving maintenance as needed. // @confused-Techie

Vue component support in Atom/Pulsar

Adds syntax highlighting and snippets to Vue component files in Pulsar.

Originally converted from vuejs/vue-syntax-highlight.

Working with SCSS/Sass

Since vue-loader redirects language=x to loader style!css!x and sass-loader is using SCSS as default, you need to remap them in webpack.config.js:

vue: {
  loaders: {
    sass: 'style!css!sass?indentedSyntax',
    scss: 'style!css!sass'
  }
}

This is so that this package can support both old Sass and new SCSS. Refer to hedefalk/atom-vue#5 and the official solution for more info.

atom-vue's Issues

Linter doesn't work

Hi.

Today I noticed eslint stopped working in tabs with opened .vue files. I'm pretty sure it worked before, and it still works for regular .jsfiles. Perhaps it has something to do with 1.4.1 update, although I'm not sure what packages this problem related to.

cssnext nested selector syntax highlighting

Is there a way to augment the syntax highlighting used between <style> tags if we want to use postcss-cssnext? I noticed the language-vue grammar doesn't highlight nested selectors:

main { /* 'main' is red */
    & button.foo { /* button and foo are dark grey, the dot is light grey, should be all be red */
        color: pink;
        & span.bar baz { /* span. is light grey, bar and baz are dark grey */
            background: blue;
        }
    }
}

How to add more snippets into ~/.atom/snippets.cson ?

I already installed language-vue, and try adding more snippet entries into my ~/.atom/snippets.cson.
Unfortunately these snippets aint working.

Do i have to add my own snippets into language-vue's snippets file ?

Please help

Using a number in a shortcut bind breaks highlighting slightly

Example

<template>
 <Component :question1URL="whatever" />
</template>

Expected: Entire

:question1URL

part is green.

Actual: everything after and including the number is white.

I tried looking into the code to help fix this but I've never looked at the grammar stuff before sorry...

SugarSS for PostCSS

I'm trying to get language-vue to highlight SugarSS syntax for PostCSS, but to no avail. The syntax is supported by language-postcss.

It's not super bad though, there's a bit of highlighting but color definitions gets a red block:

HTML code not highlighted

atom-typescript support

Is there a way to get atom-typescript working for <script lang="ts">?

Variable indentation

Not sure if i have missed it but is there a way to let atom switch between tab size in the different parts of the .vue file? For example: I want to use 2 spaces in my JS but four in my SASS.

Working with scopes

I'm trying to apply different indention rules to the HTML and JS portion of my vue files. When I log scope in the <template></template>, I get text.html.vue, while in the <script></script>, the scope is logged as text.html.vue and source.js.embedded.html.

Is it possible to target a combination of scopes in my config, so that I can apply 1 set of indentation rules to text.html.vue and another to text.html.vue + source.js.embedded.html, or something? If not, is there any chance we could add an additional scope that just targets the html/template portion of the file?

Incorrect syntax highlighting for ES6 script?

Non English Keyboard Issue

When using atom-vue and with a non English keyboard layout I can't insert a colon symbol anymore.
If I change to a English layout I don't have this problem. But since my keyboard is in this case portuguese it is an hassle. Instead of the colon (:) it inserts > > > >.

I can workound it by copy pasting the colon, but would be awesome to have this fixed.

Support for Ctrl-D in <template>

When using Ctrl-D in an ordinary HTML file, you can select the containing scope. You can press Ctrl-D multiple times to expand the scope further. This is quite handy in some cases, but sadly, this doesn't work in atom-vue. I'm not sure why it doesn't work, but can this be added?

Support SASS syntax correctly

There are two syntaxes available for Sass. The new one, known as SCSS (Sassy CSS) and recommanded by Sass, is an extension of the syntax of CSS and more widely used today. And the sass loader for Webpack, sass-loader, only processes .scss files as described in its document.

Thus we have to write styles like this in .vue files

<style lang="sass">
</style>

which should be highlighted in SCSS syntax, not in SASS syntax.

It's a little weird. So I open this issue for discussion instead of sending a PR to correct directly.

Can not install

it will show error
Installing “hedefalk/atom-vue” failed
Cannot read property 'getReferenceTarget' of null

Wrong highlighting in block comments

Hi, there's some odd highlighting in block comments:

Possibly because it thinks the 3rd word is the variable name, but that's not always the case when block commenting on non-methods.

The following example works, because it has a variable name:

Auto-closing tags problem

I apologize if this is the wrong place to ask this, but don't know where else.

I'm having trouble with the way atom closes html tags while I'm editing a .vue file.

I have my tag and within that I for instance create a

and then an .
When I go to type </ it auto-closes with

instead of .

Wondering if anyone else has this issue? Any ideas?

HTML attribute syntax highlighing in Vue Component Files

The HTML attributes in .vue component files are not highlighted which makes them difficult to read.
Are there any plans to add this feature to this package?
Thanks :-)

Atom freezes when opening vue-component with inline svg with inline styles of a certain length

Atom freezes often when trying to open slightly larger vue-component files. Package is up-to-date and was tested in Atom 1.8.0-beta3.

Any help would be greatly appreciated

support vue syntax highlighting custom extension

Is it possible to configure atom-vue to support syntax highlighting for an extension other than .vue?

For example, I'm using vue-markdown-loader to convert markdown files to Vue components. It'd be helpful to include highlighting for the script tags inside the markdown files.

Highlighting data broken on hyphened props

Hi, thanks for this plugin!

The following code is getting hihglighted as expected:

:prop="[{
  bar: foo
}]"

While this one doesn't:

:prop-prop="[{
  bar: foo
}]"

It would be nice to support it as well :)

Emmet support

Emmet not support in <template> tag.
https://github.com/emmetio/emmet-atom

Auto formatting code

Hello, is there a way to beautify code in .vue files?
I currently use this package, can it be integrated somehow?
https://atom.io/packages/atom-beautify

Unexpected Token <

When I have a script tag inside a vue single file component, I get this error for the template tag part.

Anything I can do that atom/es-lint knows this is valid?

Feature request: syntax highlighting for "async" keyword on vue instance methods

Currently, when using async functions on a vue method, the async keyword has no syntax highlighting.
e.g :

  export default {
      methods: {
        async foo() {
           const result = await bar()
         }
      }
  }

Stylus syntax not colored with stylus package 2.1.2

Hi there,

many thanks for this great plugin. There seems to be an issue with the newest stylus atom package – version 2.1.2 – as the syntax coloring is completely disabled (running Atom Beta 1.5.0-beta3 on OS X).

Any help would be greatly appreciated.

Support highlighting embedded expressions inside vue directives

With the release of vue-syntax-higlight 3.0 allowing directives to be styled, it would be great to see this implemented

Source: https://twitter.com/vuejs/status/718910560297988096

Support for slm

Hi, how would I go about adding support for slm
https://github.com/slm-lang/slm

<template lang="slm">
</template>

Syntax Hightlight Error When Use Stylus

in version 0.21.2,it‘s working well

but when i update it to 0.23.0,the hightlight is broken.

Using lang="ts" and "default" breaks highlighting

support for pug

jade was renamed to pug.
Syntax highlighting doesn't work..

<template lang="pug">
div.class
</template>

I think support for jade should stay, for backwards compatibility.

support for <style lang="stylus">

I saw that you have it in the config, but somehow it's not working

syntax highlighting on functions

Is it possible to achive this:

I belive that is in phpstorm,

right now in my atom with this plugin it looks like this:

Autocomplete of Sass is broken

I just use l<style lang="sass">, there is no hint about property hint?

Support for linters

Will this support integration with linters? (Sorry, can't help as I'm not at all familiar with the code of atoms). I'm using tslint.

May I use the source code to create a new Atom Package?

Weex is something like Vue Navtive. It syntax also like Vue Component, but have some difference.
I wanna to create a Weex syntax package in Atom. Named language-weex.
So, may I use your source code ? ^_^

add support for async methods in component

I dont know how to add it myself, so adding this as a requested feature or if you could give me a hint how to add it myself. any nice resource to learn this?

right know it looks like this, would be nice to have it colored as in regular js files
https://dl.dropboxusercontent.com/s/slqq16vx9ztzwww/2017-05-15%20at%2000.00.png

Visibility of wrapping tags

I find the wrapping tags such as <template></<template> a bit distracting from the actual code. Is it possible to turn those slightly translucent?

problem with coloring

I think the last update introduced a bug.
Here is a screenshot:

Adjust comment syntax regex to enable language-todo highlighting

According to a language-todo maintainer, changing the match for comment.line.double-slash.js to specify both begin and end should allow TODO syntax highlighting to work.

Since the comment block syntax in vue-language specifies both a begin and an end, TODO highlighting does work correctly.

Current behavior:

Expected behavior:

Custom html tag does not work

See above, the tag base-view's colour and indent are incorrect.

`;` are considered syntax error under `sass` style tags

less works fine for example

config to allow custom file ending

As .vue files are almost valid HTML (with <!doctype html> and <title>).

Please allow to set a custom file extension such as .html or .vue.html, see also https://github.com/vuejs/vue-loader-example/issues/25

My property is still unable to highlight

Property is gray, let me in the development process it is difficult to find my settings properties

I need postcss-nested syntax hightlight

Could do you change this??

Cannot tab complete custom elements in .vue files

Not sure if this is should even be the job of this package, but tab completion for custom elements in .vue files, like <router-link> does not seem to be supported, so I have to manually create custom elements, which is not fun, to say the least. Just looking for a way to do this in atom, so I don't know if this package should support that, or if it should be the job of atom or another package.

Advantages over treating .vue file as .html file

Hey! Thanks for this package, I'm a long time user myself.

Today I got a fresh Atom install after some time and first tried to open .vue file as .html file (can be configured with file-types package too automate) and found out I get html, css and js highlighting and standard Atom code completion & snippets support.

I'm curious, is this something new for Atom or did they add this lately? Then I'm curious what atom-vue gives you in addition to that?

... not properly marking the file with a relevant scope

AtomLinter/linter-htmlhint#49 :

Looks like this is an issue with language-vue not properly marking the file with a relevant scope, as such Atom is attempting to guess the scope and giving it text.html.basic, which this linter says it can handle.

You should report this as an issue over on the language-vue package, [...]

Which I hereby do... Not sure how all this scoping works, but text.html.basic seems not to be the correct scope for vue files.

Ctrl + R doesn't work

Hi~
I used "ctrl + r" to find the method. but it doesn't work in the vue file

Keystroke	Command	Source	Selector
ctrl-r	symbols-view:toggle-file-symbols	Symbols View	platform-win32 atom-text-editor

Cannot use comment keyboard shortcut in <template>

Might be exclusive to me, but I'm seeing this behavior on Ubuntu Xenial

Not working with language-pug.

Not working with language-pug(was jade).