vscode中vue怎么格式化代码 vscode 中的beautify 插件怎么用
vscode中vue怎么格式化代码
PS:现在推荐使用vetur插件
win10崩溃,重装win7,结果sublime text插件无法安装,各种心塞,于是决定转战vscode。
与sublime text相比,vscode有不少优点:
中文输入法支持更好。在windows平台下,需要st支持中文输入需要安装各种插件,而且效果也是差强人意。
基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能,st每次都需要自己安装,浪费时间。
但是st插件更丰富,vscode插件相对较少,vue相关插件vscode更是只有一个,而且使用起来有不少问题,并且作者已经很久没有更新了,折腾了一下午,最终可以用来编写vue项目了。
vscode关于vue插件现在只有vscode-vue一个,安装完成代码提示并没有生效,这是因为vue文件的语言模式默认为html,需要在setting.json中设置:
"files.associations": {
"*.vue": "vue"
}
但是此时编写样式emmet插件不能正确识别,所以我后来也放弃了这种方式。
仔细思考,编写vue项目主要需要:
代码补全&代码片段
emmet正确生成html标签
emmet正确生成css、scss
代码高亮
其中2、3、4点,在html中都是可以做到的,而vue的代码补全与代码片段只需要自己编写就可以了,于是我将vue文件的语言模式还原为默认的html,在用户代码片段中加入vue文件需要的代码片段(文件-首选项-用户代码片段-html),最终效果还可以。
添加的代码片段(持续更新):
{
// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log($1)",
"$2"
],
"description": "Log output to console"
},
"Create vue template": {
"prefix": "vuec",
"body": [
"", "",
"",
"export default {",
" name: "${1:component_name}",",
" data () {",
" return {",
" }",
" }",
"}",
"",
""
],
"description": "Create vue template"
}
}
vscode 中的beautify 插件怎么用
安装Visual Assist X插件,支持JavaScript。有语法高亮。 如果不安装插件请使用VS2010或者VS2012。 VS2010有两个免费的插件JSEnhancements和JScript Editor Extensions 这两个插件用百度一搜就出来了,在MSDN上就可以下到
vscode开发vue有没有好的插件推荐
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库。今天我们要分享的就是开发 Element 的一些心得。