成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用VS Code開發(fā)Vue應(yīng)用

zhaofeihao / 3140人閱讀

摘要：這是為什么呢因?yàn)槲覀冸m然引入了，但是還沒有對(duì)做設(shè)置，我們?cè)陧?xiàng)目的根目錄下創(chuàng)建一個(gè)文件，然后在其中加入再次執(zhí)行，現(xiàn)在我們看到已經(jīng)能夠起作用了。

摘要： 0錯(cuò)誤0警告應(yīng)該是每個(gè)程序員最基本的要求。

原文：用vscode開發(fā)vue應(yīng)用

作者：張京

Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。

現(xiàn)在用VSCode開發(fā)Vue.js應(yīng)用幾乎已經(jīng)是前端的標(biāo)配了，但很多時(shí)候我們看到的代碼混亂不堪，作為一個(gè)前端工程師，單引號(hào)雙引號(hào)亂用，一段有分號(hào)一段沒有分號(hào)，有的地方有逗號(hào)有的地方?jīng)]有逗號(hào)，空格回車都對(duì)不齊，還說自己做事認(rèn)真，這不是開玩笑的事情。

我們今天從頭開始，完整地講述一下一個(gè)重度代碼潔癖患者該如何用vscode開發(fā)vue，以及如何把一個(gè)已經(jīng)可以宣判死刑的全身各種格式錯(cuò)誤幾萬條的項(xiàng)目整容成標(biāo)準(zhǔn)美女。

從安裝開始

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

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

npm install -g @vue/cli

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

vue create hello-world

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

安裝完畢：

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

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

裝上vetur以后多少有點(diǎn)人樣了。接下來我們來試一試能不能自動(dòng)格式化，這部分才是潔癖患者的最愛。胡亂加幾個(gè)空格，然后保存試試看：

不能格式化，連個(gè)提示都沒有！

用lint格式化

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

lint居然說沒有錯(cuò)誤！明明就是多了很多空格的錯(cuò)誤好吧，為什么？

這是因?yàn)槿笔〉?b>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"
    ],

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

所有的單引號(hào)被變成雙引號(hào)了，原本行尾沒有的分號(hào)被加上了分號(hào)。這是為什么呢？因?yàn)槲覀冸m然引入了prettier，但是還沒有對(duì)prettier做設(shè)置，我們?cè)陧?xiàng)目的根目錄下創(chuàng)建一個(gè).prettierrc.js文件，然后在其中加入：

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

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

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

在vscode里格式化

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

這時(shí)候我們需要在vscode里再安裝一個(gè)插件eslint。

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

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

在你項(xiàng)目的settings.json里文件里添加以下代碼：

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

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

因?yàn)槲覀冊(cè)?b>settings.json文件里設(shè)置了autoFixOnSave，所以不管多么亂的格式，只要一按Ctrl+S保存，自動(dòng)就幫我們把代碼格式整理好了，是不是很方便呢？

和Prettier的沖突

有些時(shí)候我們的vscode里插件裝的比較多，譬如還安裝了prettier插件，因?yàn)槲覀儾恢婚_發(fā)vue項(xiàng)目，可能還有其它類型的js項(xiàng)目特別是傳統(tǒng)js項(xiàng)目，需要用到prettier進(jìn)行美化，而prettier的一些功能是會(huì)和eslint相沖突的，比如說我們?cè)谌衷O(shè)置了prettier的formatOnSave，這個(gè)功能就會(huì)和eslint的autoFixOnSave打架，為了避免這個(gè)矛盾，我們通常還會(huì)在本項(xiàng)目的settings.json文件里再多加幾個(gè)選項(xiàng)，類似于這樣：

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

有了這些設(shè)置，基本上prettier就不會(huì)和eslint打架了。

小結(jié)

以上就是用vscode開發(fā)vue程序的標(biāo)配，并不像網(wǎng)上有些文章說的那么簡(jiǎn)單，不是只需要配一個(gè)eslint就能解決的事情，這里還用到了vetur，eslint和prettier，把幾個(gè)工具綜合用好，才能真正達(dá)到我們的錯(cuò)誤隨時(shí)可見，保存自動(dòng)修改，更正既往錯(cuò)誤的目的。希望每個(gè)前端工程師寫出的代碼都如出一人之手，漂亮簡(jiǎn)潔干凈。

我們的目標(biāo)始終如一：0錯(cuò)誤0警告。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7256.html

相關(guān)文章

  • 2017 JavaScript 調(diào)查報(bào)告概述

    摘要：調(diào)查顯示，和目前有著最高的開發(fā)者滿意度。微軟正在反擊說到，絕對(duì)是文本編輯器領(lǐng)域最大的驚喜。雖然和類似是應(yīng)用，但微軟在提高性能方面下了很多的功夫。再加上的興起，看起來微軟在開發(fā)領(lǐng)域的發(fā)力還是很成功的。 showImg(https://segmentfault.com/img/bV12hB?w=600&h=380); 簡(jiǎn)評(píng)：最近一份超過 23,000 名開發(fā)者參與的關(guān)于 JavaScrip...

    winterdawn 評(píng)論0 收藏0

  • 我的VS CODE

    摘要：對(duì)文件提供語法高亮和自動(dòng)補(bǔ)全對(duì)小程序文件提供補(bǔ)全和語法高亮只需要鍵入就會(huì)有微信的提示使用做路徑感知當(dāng)我們?cè)陧?xiàng)目中集成的時(shí)候，經(jīng)常會(huì)使用。 在日常開發(fā)中，我使用的編輯器是 VS CODE。不僅界面簡(jiǎn)潔好看，而且插件豐富，是前端開發(fā)的首選工具之一。這些插件和工具的目的是為了提高我們的開發(fā)效率，下面就我日常開發(fā)切身使用到和感受到有幫助的插件和方法做個(gè)總結(jié)。 VS CODE 常用的個(gè)人在用的插...

    X1nFLY 評(píng)論0 收藏0

  • vue-cli安裝和vs code 的相關(guān)配置

    摘要：在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。的安裝一安裝的官網(wǎng)下載的安裝包。在或中執(zhí)行命令。以上，就是和的安裝與配置 在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。 node: node是js服務(wù)執(zhí)行的環(huán)境，通常我們使用node實(shí)現(xiàn)前端的工程化。前端工程化有很多工具可以實(shí)現(xiàn)，比如webpack、glup等，他們都是基礎(chǔ)node進(jìn)行開發(fā)的。 w...

    Loong_T 評(píng)論0 收藏0

  • 前端開發(fā) VS Code 上手使用

    摘要：如果想配置開發(fā)工具面向前端及開發(fā)人員的配置如果想配置開發(fā)工具配置及使用技巧所謂網(wǎng)紅編輯器，我覺得比來的更爽，因?yàn)榈乃胁僮骱筒寮?，?duì)于來說也就是一個(gè)插件就能無縫兼容。作為一個(gè)前端開發(fā)，開箱即用的代碼編輯高亮提示都十分友好。 如果想配置 sublime 開發(fā)工具 => 面向web前端及node開發(fā)人員的vim配置 如果想配置 vim 開發(fā)工具 => sublime配置及使用技巧 所謂網(wǎng)紅...

    Ocean 評(píng)論0 收藏0

  • 一個(gè)JAVA WEB偽全棧的VUE入坑隨筆，從零點(diǎn)零五學(xué)起

    摘要：開始時(shí)間日接觸，先在官網(wǎng)十目一行學(xué)完了基本特性，作為一個(gè)的偽全棧，用感受了一把雙向綁定，感覺比的要強(qiáng)悍不少，但這開發(fā)環(huán)境吧，不能寫個(gè)，就總覺得自己不能零距離接觸。 開始時(shí)間：3.26日接觸Vue，先在官網(wǎng)十目一行學(xué)完了基本特性：http://cn.vuejs.org/v2/guide/，作為一個(gè)JAVA WEB的偽全棧，用Myclipse感受了一把雙向綁定，感覺比JQUERY的JSRE...

    HmyBmny 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<