1. 介绍css
VSCode下强大的vue工具,支持vue语法的高亮(完整的支持高亮的语法以下图)、代码片断、emmet(代码速写,VSCode自己自带有tab键对html5的代码进行快速开发,可是须要在settings.json文件中配置)、错误检测、格式化等,具体的使用能够参考官方文档html
vetur官方文档vue
2. 使用html5
1) emmet在vue中使用的配置git
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}复制代码
2)错误检测github
vetur默认使用eslint-plugin-vue@beta来检测template,若是不想使用linting,能够在settings.json中关闭web
修改此值为false便可typescript
3)格式化npm
vetur推荐使用两个空格来规定editor.tabSize和editor.insertSpace,json
对于html、css、less、scss、js格式使用js-beautify来规范,这个不须要再进行安装
3. 使用要点
须要在VSCode中安装vetur插件,其余都不须要安装
要点一: 保存文件的时候自动格式化的方法:
settings.json文件中添加:
"editor.formatOnSave": true复制代码
要点二: 保存文件的时候自动格式化的问题的解决:
可是这样格式化有一个问题,就会全部的js语句会自动带上分号和双引号
缘由就是由于vetur默认使用的有不少是prettier插件,以下图
prettier在VSCode中的插件- prettier 安装成功后VSCode默认的格式化就会被prettier代替,默认的快捷键是Ctrl + shift + F 。详细配置查看官方文档(此处仅供学习,咱们的基础配置中暂无需安装)
prettier只关注格式化,它没有检查代码语法的能力,因此常常会遇到搭配各类lint检查的时候出现各类冲突。
下面是解决保存时自动格式化出现添加双引号和分号的方法:
解决方式1:
在settings.json文件中添加:
把
"vetur.format.defaultFormatter.js": "prettier"复制代码
改成
"vetur.format.defaultFormatter.js": "vscode-typescript"复制代码
这种解决方式就用不了prettier这个插件了
解决方式2:(如今使用这种解决方式)
-- 在settings.json文件中新增
// 去除自动格式化时js加的分号与双引号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
}复制代码
解决方式3:
VSCode局部安装prettier插件
npm install --save-dev --save-exact prettier复制代码
--或者是全局安装
npm install --global prettier复制代码
若是安装npm包 须要进行如下操做:
--1. 新建.prettierrc.json配置文件在项目根目录下
-- 2 . prettierrc.json文件的配置以下
{
"singleQuote": true,
"semi": false
}复制代码
要点三: template内的标签格式化:
vetur默认不会对template内进行格式化,改进方法
在settings.json文件中添加:
// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html"复制代码
要点四: tab的空格数:
默认编辑器的tab空格是4个 改为2个
在settings.json文件中添加:
"editor.tabSize": 2,复制代码
2、其余配置
推荐安装的插件:
1. vscode-icons
是给VSCode下项目的文件加上图标,以区别文件,在settings.json中增长:
// 文件图标主题插件 安装vscode-icons后的配置
"workbench.iconTheme": "vscode-icons",复制代码
以下图所示:
2. vscode-fileheader
是给文件开始添加注释的插件。安装完毕以后在settings.json中添加配置:
"fileheader.Author": "zhangsan",
"fileheader.LastModifiedBy": "zhangsan",复制代码
F1或者Alt+Cmd+P而后输入fileheader回车便可添加
添加完以下
其余插件推荐 segmentfault.com/a/119000001…
3、完整settings.json配置文档
{
// 文件图标主题插件 安装vscode-icons后的配置
"workbench.iconTheme": "vscode-icons",
// 安装vscode-fileheader 给文件开头添加多行注释的配置 (F1或Alt+CMD+P后输入fileheader回车便可添加)
"fileheader.Author": "zhangsan",
"fileheader.LastModifiedBy": "zhangsan",
// 工做区主题色,自行安装本身喜欢的
"workbench.colorTheme": "One Dark Pro",
// 控制是否在打开文件时,基于文件内容自动检测 `editor.tabSize#` 和 `#editor.insertSpaces`
"editor.detectIndentation": false,
// 默认tab2个空格"editor.tabSize": 2,
// 使用tab键进行HTML5快速开发
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
// 保存时代码自动格式化
"editor.formatOnSave": true,
// 去除自动格式化时js加的分号与双引号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
},
// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 在输入时显示含有参数文档和类型信息的小面板。
"editor.parameterHints.enabled": true,
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 控制是否在键入时自动显示建议。
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}复制代码