小編給大家分享一下如何使用vue-cli3 創(chuàng)建vue項(xiàng)目并配置VSCode自動(dòng)代碼格式化vue語(yǔ)法高亮問(wèn)題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家專(zhuān)注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃、微信小程序定制開(kāi)發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開(kāi)發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10年以來(lái)，已經(jīng)為成百上千家門(mén)窗定制各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的成百上千家客戶(hù)與我們一路同行，見(jiàn)證我們的成長(zhǎng)；未來(lái)，我們一起分享成功的喜悅。

vue是什么

Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

在終端中運(yùn)行以下命令:

vue create xxx   // xxx為項(xiàng)目名稱(chēng)，例如 vue-project

然后，系統(tǒng)會(huì)提示我們選擇默認(rèn)預(yù)設(shè)或手動(dòng)選擇功能。使用向下箭頭鍵，我們手動(dòng)選擇功能，然后按Enter鍵。

然后，我們將看到一系列功能選項(xiàng)。使用向下箭頭鍵，我們將向下移動(dòng)并使用空格鍵選擇需要的功能，然后按回車(chē)鍵。

Linter / Formatter 就是代碼風(fēng)格。 我們將使用 ESLint + Prettier

我們將在保存時(shí)添加Lint的附加功能。

我們將選擇單獨(dú)的配置文件。

我們可以選擇是否將這些所有的設(shè)置保存起來(lái)，下次生成項(xiàng)目時(shí)，直接使用。這里不需要，就選擇 N

如果你想儲(chǔ)存下來(lái)，這是設(shè)置會(huì)儲(chǔ)存在 .vuerc 用戶(hù)主目錄中指定的 JSON 文件中。

這里我們選擇 npm 作為包管理器。

項(xiàng)目創(chuàng)建完成后， cd 進(jìn)入項(xiàng)目根目錄， 例如： cd vue-project 然后，在根目錄運(yùn)行命令： npm run serve 啟動(dòng)項(xiàng)目，然后瀏覽器打開(kāi)： localhost:8080 就能看到初始項(xiàng)目了。

安裝 Vetur

此時(shí)，我們用 VS Code 打開(kāi)項(xiàng)目， .vue 的文件是灰色的，這是因?yàn)?VS Code 沒(méi)有 .vue 文件的語(yǔ)法高亮。

所以就需要安裝 Vetur 這個(gè)插件幫助我們。打開(kāi)左側(cè)的插件市場(chǎng)。

然后搜索“Vetur”，在搜索結(jié)果中選擇它，然后單擊“install/安裝”。然后單擊“ Reload/重新加載”。

此時(shí)，我們的 .vue 文件就有語(yǔ)法高亮了。

另外， Vetur 有一些代碼片段，我們?cè)?vue文件中鍵入單詞“scaffold”并按Enter鍵，這將使用單個(gè)文件.vue組件的骨架或腳手架自動(dòng)填充該文件。

安裝ESLint 和 Prettier

在擴(kuò)展存儲(chǔ)中，我們將搜索ESLint，然后繼續(xù)安裝它。Prettier也是一樣的步驟。安裝完畢，我們會(huì)重新加載VS Code。

配置ESLint

在我們項(xiàng)目根目錄的.eslintrc.js文件中，添加： 'plugin:prettier/recommended' ，這將在ESLint中啟用Prettier支持。

module.exports = {
   root: true,
   env: {
    node: true
   },
   'extends': [
    'plugin:vue/essential',
    'plugin:prettier/recommended', // we added this line
    '@vue/prettier'
   ],
   rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {
    parser: 'babel-eslint'
   }
  }

配置 Prettier

我們還可以創(chuàng)建一個(gè)Prettier配置文件，根據(jù)我們的個(gè)人風(fēng)格或團(tuán)隊(duì)的偏好添加一些特殊設(shè)置。

同樣在項(xiàng)目根目錄創(chuàng)建 .prettierrc.js

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

這兩項(xiàng)設(shè)置是將雙引號(hào)轉(zhuǎn)換為單引號(hào)，并且結(jié)尾不使用分號(hào)。

用戶(hù)設(shè)置

為了進(jìn)一步的優(yōu)化VS Code的開(kāi)發(fā)體驗(yàn)，我們將用戶(hù)設(shè)置添加一些配置。 首選項(xiàng) >>> 設(shè)置 >>> 用戶(hù)設(shè)置，進(jìn)入 settings.json文件中。

首先關(guān)閉Vetur的linting功能,添加：

"vetur.validation.template": false

現(xiàn)在我們想告訴ESLint我們希望它驗(yàn)證哪些語(yǔ)言（vue，html和javascript）并設(shè)置autoFix為true每個(gè)語(yǔ)言：

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

然后，設(shè)置 ESLint autoFixOnSave。

"eslint.autoFixOnSave": true,

并設(shè)置我們的編輯器本身formatOnSave。

"editor.formatOnSave": true,

以上是“如何使用vue-cli3 創(chuàng)建vue項(xiàng)目并配置VSCode自動(dòng)代碼格式化vue語(yǔ)法高亮問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！