vscode中怎么開發(fā)一個vue應(yīng)用

今天就跟大家聊聊有關(guān)vscode中怎么開發(fā)一個vue應(yīng)用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

從安裝開始

為了準確起見，我們把vscode里所有插件全部禁用，把用戶設(shè)置清空，以讓它盡可能恢復(fù)成原始的樣子：

作為代碼潔癖患者，對于系統(tǒng)的版本要求一定也是最苛刻的，不管什么時候，都讓我們把所有的系統(tǒng)能升級的都升級到***版本：

npm install -g @vue/cli

然后，我們開始創(chuàng)建項目：

vue create hello-world

在這里，一定要選擇***項：babel +  eslint，這兩個是必不可少的。我見到有些人嫌eslint麻煩，居然在項目建立好之后手工把eslint關(guān)掉的，簡直無語。

安裝完畢：

我們先不急著執(zhí)行，執(zhí)行代碼是最容易的事情，我們先打開代碼看一下：

好吧，至少我們需要先安裝vetur插件。這幾乎已經(jīng)確定是開發(fā)vue項目的標配了，即使我不說，vscode也會強烈建議你安裝它。

裝上vetur以后多少有點人樣了。接下來我們來試一試能不能自動格式化，這部分才是潔癖患者的***。胡亂加幾個空格，然后保存試試看：

不能格式化，連個提示都沒有!

用lint格式化

就算vscode里的vetur不能幫我們自動格式化，好在package.json命令里還有一個lint命令，我們看看lint命令能不能幫我們自動格式化：

lint居然說沒有錯誤!明明就是多了很多空格的錯誤好吧，為什么?

這是因為缺省的vue-cli沒有為我們安裝@vue/prettier插件，我們先來手工安裝一下：

yarn add -D @vue/eslint-config-prettier

然后在package.json或者.eslintrc.js或者其它什么你設(shè)置eslint的地方，給它加上：

"extends": [  "plugin:vue/essential",  "eslint:recommended",  "@vue/prettier"  ],

特別是***這一個@vue/prettier，非常重要。然后再執(zhí)行yarn lint。多余的空格被自動干掉了，但是我們發(fā)現(xiàn)有一些地方同時也被篡改了：

所有的單引號被變成雙引號了，原本行尾沒有的分號被加上了分號。這是為什么呢?因為我們雖然引入了prettier，但是還沒有對prettier做設(shè)置，我們在項目的根目錄下創(chuàng)建一個.prettierrc.js文件，然后在其中加入：

module.exports = {  semi: false,  singleQuote: true  }

再次執(zhí)行yarn  lint，現(xiàn)在我們看到lint已經(jīng)能夠起作用了。它不但能把我們多余插入的空格刪掉，并且能按照規(guī)則把雙引號變成單引號，把行尾多余的分號刪掉。當然，關(guān)于行尾加不加分號這是一個哲學***，你可以根據(jù)你個人的喜好自行決定。在這里，我們權(quán)且按照vue-cli的標配執(zhí)行。

到這一步很關(guān)鍵，假設(shè)你拿到一個爛的不再爛的vue項目，里面有幾千個.vue文件，幾萬個各種格式錯誤，也都能通過yarn  lint這一行命令把它們?nèi)啃拚^來!

在vscode里格式化

事情還沒有完，我們注意到雖然yarn  lint命令能在編寫完代碼之后幫我們格式化，但是既然我們是用vscode進行開發(fā)，我們當然希望能在vscode里直接看到對于錯誤的標注。

這時候我們需要在vscode里再安裝一個插件eslint。

你以為安裝上eslint插件就行了嗎?不行的。因為eslint并不知道我們的.vue文件里面包含了js語法，所以還需要打開我們的vscode設(shè)置文件。

注意：這里一定要設(shè)置到項目的設(shè)置里，而不要只是設(shè)置到你自己個人的設(shè)置里，否則你團隊的小伙伴隨便一改又亂掉了。正確的方法是在你項目的文件夾下有一個.vscode文件夾，而vue最討厭的地方是它居然會把這個文件夾放到.gitignore里，這個錯誤你必須要糾正過來，也就是說從.gitignore文件里把.vscode刪掉。切切。

在你項目的settings.json里文件里添加以下代碼：

{  "eslint.autoFixOnSave": true,  "eslint.validate": [  "javascript",  "javascriptreact",  {  "language": "vue",  "autoFix": true  }  ],  }

這時候所有錯誤都被標注出來了，注意看左側(cè)，一定要讓這個settings.json文件是綠色的，而不能是灰色的，如果是灰色的，請檢查你的.gitignore文件：

因為我們在settings.json文件里設(shè)置了autoFixOnSave，所以不管多么亂的格式，只要一按Ctrl+S保存，自動就幫我們把代碼格式整理好了，是不是很方便呢?

和Prettier的沖突

有些時候我們的vscode里插件裝的比較多，譬如還安裝了prettier插件，因為我們不只開發(fā)vue項目，可能還有其它類型的js項目特別是傳統(tǒng)js項目，需要用到prettier進行美化，而prettier的一些功能是會和eslint相沖突的，比如說我們在全局設(shè)置了prettier的formatOnSave，這個功能就會和eslint的autoFixOnSave打架，為了避免這個矛盾，我們通常還會在本項目的settings.json文件里再多加幾個選項，類似于這樣：

"editor.tabSize": 2,  "editor.formatOnSave": false,  "prettier.semi": false,  "prettier.singleQuote": true

看完上述內(nèi)容，你們對vscode中怎么開發(fā)一個vue應(yīng)用有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。