vue-cli 3.0 項目對.vue文件格式化失效問題

產生問題

VSCode中格式化vue文件時，js代碼中會被自動添加上分號

你可能會疑惑，明明已經在vscode編輯器安裝了prettier插件並且在setting.json進行配置（去除語句分號和單引號、默認縮進4空格），但是在腳手架生成的vue項目中.vue文件依舊不生效，怎么辦？

解決方法有2個：

解決方法1

根目錄.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    // '@vue/standard'    // 必需注釋 @vue/standard
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
}

你可能在vue-cli3.0 腳手架生成項目時無意中選擇了最多依賴的eslint配置，所以其生成項目在根目錄中存在.editorconfig文件其內容解釋如下：

[*.{js,jsx,ts,tsx,vue}]   // 該配置文件作用於*.文件后綴
charset = utf-8      // 編碼
indent_style = space     // 設置縮進風格(tab是硬縮進，space為軟縮進)
indent_size = 2      // 默認縮進為2個空格
trim_trailing_whitespace = true // 設為true表示會去除換行行首的任意空白字符。
insert_final_newline = true // 設為true表示使文件以一個空白行結尾

！！上面配置文件中要生效是不能存在注釋的，此處是為了講解

由於vscode插件商店安裝的prettier插件的setting.json配置與當前項目的.editorconfig文件配置產生沖突，本地項目依賴只會生效后者文件，所以刪除掉后者文件才能讓setting.json文件生效。

解決方法2

也許你不想刪除.editorconfig文件，因為有些配置是vscode插件商店的prettier插件沒有的，那么你就只需：

• 安裝當前項目依賴：yarn remove prettier
• 項目根目錄中新建：.prettierrc.json文件后添加下面內容配置即可正常格式化：

    "semi": false,   // false為去除語句分號
    "singleQuote": true,  // 單引號替代雙引號
    "tabWidth": 4,   // 縮進為4個空格
    "useTabs": false, // 縮進不使用tab，使用空格

EditorConfig有助於為跨越各種編輯器和IDE的同一項目的多個開發人員維護一致的編碼樣式。因為不同編輯器格式化代碼的風格是不一樣的，如果沒有配置editorconfig，執行的就是編輯器默認的代碼格式化規則；
具體配置參考