去我的个人博客观看体验更佳。
vue 的开发环境一般有两个。
- 第一种是直接在 HTML 中用
<script>
- 第二种是基于 Node.js 的 Vue-cli 开发模式。
HTML 代码中自动补全 Vue
这可能对一些新手比较有用，之后熟悉了 Node.js 的开发模式之后基本没用了。
我一开始安装了一个
VueHelper
插件来解决问题。
不过，现在我不再推荐使用
VueHelpr
了。因为插件
Vue 2 Snippets
比它更加强大，主要体现在这两个方面:
- 补全的指令更多。
- 指令还可以支持 vue 和 jade 文件的补全，而前者仅仅支持 js、ts、html。
直接在插件仓库中搜索
hollowtree.vue-snippets
，安装即可。
Mark一下，Vue 3 出了，应该很快会有 Vue 3 的代码补全，待更新。
Vue-cli 工程化文件里的代码补全
这方面
Vetur
已经做的很好了。
在插件仓库中搜索
octref.vetur
，安装即可。
使用快捷键
Ctrl+Shift+P
打开
settings.json
。
配置 .vue
.vue
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
},
通过
editor.defaultFormatter
，配置
.vue
的默认自动格式化插件。
通过
editor.formatOnSave
，支持保存的时候自动格式化。
通过
editor.formatOnPaste
，支持粘贴的时候自动格式化。
配置 vetur
上一步配置了
.vue
的默认格式化插件为
Vetur
。现在，我们需要配置一下
Vetur
，来支持 Vue 的各种补全。
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier-tslint",
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
// 一行的大小
"printWidth": 80,
// 是否使用单引号
"singleQuote": false,
// 对HTML属性排序
"sortAttributes": true
},
},
一个 Vue 文件中，可能用到的 CSS 处理器很多，像是
Sass
、
SCSS
、
Less
、
Stylus
，我们这里只配置了
CSS
、
SCSS
和
Less
，其他的基本上同理，改个后缀就行了。
接下来还有 js 和 ts。
当然还有 html。
这里需要用到另外一个插件，
Prettier
是一款非常强大的前端格式化插件，在插件仓库搜索
esbenp.prettier-vscode
，安装即可。
我们设置上面提到的所有的东西的默认格式化插件为
prettier
。
vetur.format.defaultFormatterOptions
是对你设置的默认格式化插件进一步设置一些细节，这里不过多做说明。
经过了这样的配置之后，在选择 Vue-cli 初始化的时候，那一项应该使用Linter / Formatter
。ESLint + Prettier
配置 ESLint
为了让 eslint 在
.vue
文件上起作用，还需要配置 validate:
eslint 的报错比较烦人，有时候也不知道怎么修复，这种情况下，可以尝试开启自动修复。
"editor.codeActionsOnSave": {
// 自动修复eslint
"source.fixAll.eslint": true
},
editor.codeActionsOnSave
是在代码保存的时候会触发的事件，
"source.fixAll.eslint": true
代表了执行了 eslint 的自动修复。
为了方便，我们干脆设置一个自动保存，这样就可以自动保存，不用快捷键保存了，并且从而引发自动修复。
afterDelay
代表每间隔一小段时间之后保存。
加上我们前面已经设置了
.vue
文件里面的，保存时自动 format。
现在加上了，保存的时候能自动修复 eslint。完美👍。
配置 Emmet
Emmet 这样效率神器要是缺席，实在说不过去。Emmet 命令是一种 HTML、CSS 代码的缩写，通过打少量的字可以生成大量重复性的代码。
在 VSCode 中已经内置了 Emmet，比如你在 HTML 中打一个
a*3
，可以生成:
<a href=""></a>
<a href=""></a>
<a href=""></a>
打一个
html:5
，直接帮你生成 HTML5 的模版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
更多关于 Emmet 的用法见官方文档: emmet.io
下面是在
settings.json
中的配置:
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
},
emmet.includeLanguage
让 emmet 在
vue
和
vue-html
中生效。
现在可以快乐的开始写 Vue 了。
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)