去我的個人部落格觀看體驗更佳。
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=)