使用vue-cli3 建立vue項目，並配置VS Code 自動代碼格式化 vue語法高亮

首先確保安裝了 VS Code

使用到的插件：

• Vetur
  • 提供.vue的語法高亮支持，一個由Vue.js團隊的核心成員Pine Wu設計的插件。
• ESLint
• Prettier

安裝 Vetur

此時，咱們用 VS Code 打開項目，.vue 的文件是灰色的，這是由於 VS Code 沒有 .vue 文件的語法高亮。

因此就須要安裝 Vetur 這個插件幫助咱們。打開左側的插件市場。

而後搜索「Vetur」，在搜索結果中選擇它，而後單擊「install/安裝」。而後單擊「 Reload/從新加載」。

此時，咱們的.vue文件就有語法高亮了。

另外，Vetur 有一些代碼片斷，咱們在.vue文件中鍵入單詞「scaffold」並按Enter鍵，這將使用單個文件.vue組件的骨架或腳手架自動填充該文件。

安裝ESLint 和 Prettier

在擴展存儲中，咱們將搜索ESLint，而後繼續安裝它。Prettier也是同樣的步驟。安裝完畢，咱們會從新加載VS Code。

配置ESLint

在咱們項目根目錄的.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

咱們還能夠建立一個Prettier配置文件，根據咱們的我的風格或團隊的偏好添加一些特殊設置。
一樣在項目根目錄建立 .prettierrc.js

module.exports = {
    singleQuote: true,
    semi: false
}
複製代碼

這兩項設置是將雙引號轉換爲單引號，而且結尾不使用分號。

用戶設置

爲了進一步的優化VS Code的開發體驗，咱們將用戶設置添加一些配置。 首選項 >>> 設置 >>> 用戶設置，進入 settings.json文件中。
首先關閉Vetur的linting功能,添加：

"vetur.validation.template": false
複製代碼

如今咱們想告訴ESLint咱們但願它驗證哪些語言（vue，html和javascript）並設置autoFix爲true每一個語言：

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

而後，設置 ESLint autoFixOnSave。

"eslint.autoFixOnSave": true,
複製代碼

並設置咱們的編輯器自己formatOnSave。

"editor.formatOnSave": true,
複製代碼

至此，咱們設置就基本完成了，當咱們保存文件的時候，就能夠自動格式化代碼了。

更多設置

能夠設置VS Code 自動保存：

"files.autoSave": "onFocusChange", // 編輯器失去焦點時保存，還有其餘選項，請根據我的須要更改
複製代碼

使用 vue-cli 生成一個項目時選擇，ESLint + Prettier 配合上面的配置

安裝CLI

要使用CLI，您須要安裝Node.js版本8或更高版本（建議使用8.10.0+）。

在終端中運行如下命令:

npm i -g @vue/cli
複製代碼

建立 vue 項目

在終端中運行如下命令:

vue create xxx      // xxx爲項目名稱，例如 vue-project
複製代碼

而後，系統會提示咱們選擇默認預設或手動選擇功能。使用向下箭頭鍵，咱們手動選擇功能，而後按Enter鍵。

而後，咱們將看到一系列功能選項。使用向下箭頭鍵，咱們將向下移動並使用空格鍵選擇須要的功能，而後按回車鍵。

Linter / Formatter 就是代碼風格。 咱們將使用 ESLint + Prettier

咱們將在保存時添加Lint的附加功能。

咱們將選擇單獨的配置文件。

咱們能夠選擇是否將這些全部的設置保存起來，下次生成項目時，直接使用。這裏不須要，就選擇 N

若是你想儲存下來，這是設置會儲存在 .vuerc 用戶主目錄中指定的 JSON 文件中。

這裏咱們選擇 npm 做爲包管理器。

項目建立完成後，cd 進入項目根目錄， 例如：cd vue-project 而後，在根目錄運行命令：npm run serve 啓動項目，而後瀏覽器打開： localhost:8080 就能看到初始項目了。