I seem to have syntax highlighting in VS Code, without installing any specific Vue extensions (in fact, when I run code --disable-extensions). However from what I've seen around the web / friends, a vue extension is needed as VS Code does not support Vue out of the box.
Does it support Vue or not? I checked the release notes of the last few months, haven't found anything Vue related there. And if it does support Vue, why are there a few Vue extensions out there that provide syntax highlighting?
Disclaimer: Former VSCode intern. Working on vetur, a VSCode extension for vue:
https://github.com/octref/vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
Short answer: No.
Long answer:
VSCode has been use its html extension for vue SFC. That works fine with html/css/js, but not pug/sass/scss/less/stylus/typescript/coffee.
By "works fine", I mean VSCode has correct syntax highlighting, some IntelliSense, formatter and error checking, for html/css/js.
VSCode has no intention to add vue-specific support in its html extension, like scss support, etc. So I started to work on vetur. Initially I just wanted better syntax highlighting, but now I have reworked vue component's grammar and ported VSCode's html extension to support vue, so you get complete syntax highlighting, some IntelliSense, error-checking and formatting.
Here is a list of implemented features:
Basic IntelliSense for html/css/scss/less/js
Linting for css/scss/less/js
Syntax highlighting for:
html/jade/pug
css/sass/scss/less/stylus
js/ts
Embedded snippet support
Use vue snippet outside all regions
Use each language's snippet inside its region
emmet for html/css/sass/scss/less
Vue is just a javascript library so, yes, you can edit Vue code in VSCode. However, there's things like "Single File Components" that make using Vue much, much easier. VSCode can edit .vue files as well, but to process those you need something like webpack or Browserify to post-process them into browser-friendly code.
Related
I have a project where I use deck.gl to create web maps. It works fine, however, I need the functionality of drawing polygons and, for that, the deck.gl documentation tells me to use nebula.gl. The sample of the functionality that I need can be found here: https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs?file=/app.js
The problem that I have is that on the nebula.gl documentation there's no library compiled to be used on a <script> tag. They only work with the library installed through npm or yarn, then the only way I managed to make it work so far was by compiling the entire project with webpack... In my specific case, I'd like to avoid compiling the entire project and I'd prefer using a compiled js file with the <script> tag.
Is it possible to compile npm libraries with webpack into a single js file? Just so I can use this nebula.gl library with a <script> tag on my webpage? Or am I misinterpreting the way I should be using webpack?
I am using Vue CLI to create a Vue 2.0 project and one of the options is using Babel. I understand Babel is a transpiler but what exactly does it do? I created a project with it and another without it and I don't see the difference so what exactly is the pro/con of it ? I can't see offhand what it is doing.
You are correct. Babel is a transpiler. It transpiles your JavaScript code to one or more taget browsers, that does not support the lastest fetures. You will not see any difference, if using a newer browser.
Babal usually only makes sense if you need to support older browsers, like IE 11 or browsers from before 2017.
I'm using Spectacle 5 in an npm project, which itself uses Prism as a dependency. The CodePane component correctly highlights code for e.g. python, but for e.g. haskell, no highlighting is being performed (I verified the same code snippet worked at https://prismjs.com/test.html#language=haskell).
I don't see any errors in the web console to indicate an issue. I wonder if I still need to manually include CSS, or if this is perhaps an issue with Spectacle. Maybe a workaround would be to try to use something like the prism component loader? As far as I can tell, npm didn't have components for individual languages, and it seemed to be implied that the default is to load all language components.
I use lang="sass" in my .vue files in VS Code, but the autocomplete / IntelliSence is not working for css properties.
(I already have Vetur installed)
Does anyone have a working solution or know what settings to enable or change?
I'm not sure how Vetur handles CSS/SCSS, but I use Prettier and I manage the intelisense settings in the "extensions" settings group. There is a section specific to css preloaders within Prettier.
I know this is an old question but i am using vueter also and in the settings in vs code i found the sass to be formatted with sass-formatter. So i installed that plugin form vs code sidebar, i was then instructed to also install sass/sass/sass from the sass website. I accomplished this with brew. sass is now supporting auto completion in *.vue files
I am installing vue.js by CLI, and there i have found the command such as
vue init template-name project-name
Thus, I want to know that what are these templates and how many of these are there which will be appropriate for me?
Well, i looked up and researched and found that there are, different versions for templates in Vue, if you are using it by Cli.
Templates are such as:-
webpack
webpack-simple
pwa
simple
browserify
browserify-simple
in which webpack is used mostly. since it provides some css extraction and more features too
Generally developers who are new to any framework, mainly use webpack-simple that sets up all things for them regarding gulp, eslintrc and much more files.