hedefalk / atom-vue Goto Github PK
View Code? Open in Web Editor NEWVue component file syntax for Atom
License: Other
Vue component file syntax for Atom
License: Other
it will show error
Installing “hedefalk/atom-vue” failed
Cannot read property 'getReferenceTarget' of null
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
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.
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
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
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.
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.
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()
}
}
}
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 |
Not working with language-pug
(was jade).
Hi, how would I go about adding support for slm
https://github.com/slm-lang/slm
<template lang="slm">
</template>
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 .js
files. Perhaps it has something to do with 1.4.1 update, although I'm not sure what packages this problem related to.
Property is gray, let me in the development process it is difficult to find my settings properties
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.
I find the wrapping tags such as <template></<template>
a bit distracting from the actual code. Is it possible to turn those slightly translucent?
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 :)
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
less
works fine for example
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.
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.
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?
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;
}
}
}
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:
Is there a way to get atom-typescript working for <script lang="ts">
?
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.
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
Wondering if anyone else has this issue? Any ideas?
With the release of vue-syntax-higlight 3.0 allowing directives to be styled, it would be great to see this implemented
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?
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 :-)
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 ? ^_^
Emmet not support in <template>
tag.
https://github.com/emmetio/emmet-atom
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.
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.
Might be exclusive to me, but I'm seeing this behavior on Ubuntu Xenial
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
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 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.
I saw that you have it in the config, but somehow it's not working
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.