今天基於vue-cli（2.9.3）構建一個新的專案。es6的程式碼格式要與公司格式相容。採用了vue-cli自帶的eslint後，有一些不統一的部分需要修改。

首先，在專案根目錄下找到.eslintrc.js，在rules節點下新增兩個配置項

// add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    
    // 以下是新增
    // segment mark,預設格式需要再行尾必須加分號
    'semi': [2, 'always'],
 

    // 預設空格4個
    'indent': ['error', 4, {'SwitchCase': 1}]
  }

現在執行

npm run dev

eslint會按照新的規則去檢查程式碼。問題是，我這個專案裡，已經有一些程式碼寫好了，格式是縮排兩個空格的。

那麼如果手動改，不僅效率低，而且還容易出錯。我就想找個外掛看一下，是不是有自動格式化的工具。在專案

根目錄下，我找到了editorconfig檔案，看到其中的indent_size後，我就修改了其中配置indent_size為4

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
 

end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

那麼這個配置檔案是幹嘛用的呢？我就上網查了，看到說是可以配合各個ide做程式碼格式化的。我當時在用sublime，就下載了sublime的EditorConfig外掛。發現sublime的確是按照新的格式在寫程式碼了，但是舊的程式碼還是沒有給格式化的能力。那麼我就不死心了。我就上網查檢視sublime的js格式化外掛。找了兩個：jsFormate，html/css/js Prettify,這兩個我都看了，他們對js的格式化，都是基於這個叫js Prettify的外掛。所以推薦是用後者，它們也可以通過簡單的配置，達到基礎的格式化功能。具體做法如下：

下載好外掛以後，開啟配置檔案Prettify Preferences Default,

配置中修改

        // Indentation size
        "indent_size": 4,

        // ...

        // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
        "space_after_anon_function": true,

再開啟配置檔案Plugin Options - Default, 修改

"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"],

這樣就可以給.vue格式的檔案做格式化了。

但是以為這樣就ok了？並不是，發現有個問題，格式化的時候，es6的方法簡寫會被誤認為方法呼叫：

{
    // 期待的格式化效果
    mounted () {},
    // 實際的格式化效果
    mounted() {}
}

然後看了好多文件，在這個jsPrettify裡也沒有這個配置可以進行修改。然後就吃午飯去了，中午吃飯聽同事說vscode可以解決這個問題。我下午回來就下載了一個，一試，果然不錯。

vscode會自動檢測我的檔案型別，給我推薦外掛下載，不需要我再去從網上搜外掛，這個功能很人性化。我一開啟.vue檔案,就推薦了，vetur外掛給我用了。我換了一下常用的快捷鍵，使用起來很方便。但是核心問題是，，，這個格式化，也沒有解決剛才的問題，也是少了那個空格。

然後從網上找了找答案，可以這樣配置：

在vscode中，開啟首選項，設定，搜尋vetur.format,再右側使用者設定裡，覆寫：

"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript", //預設是prettier

好了到此，es6方法的語法問題解決了。

然後還有一個問題，就是vue檔案中的css部分，語法預設不支援sass，postcss，需要自己配置。我這裡用了postcss：

在專案根目錄下，找到.postcsssrc.js新增一行如下：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        'postcss-cssnext': {}
    }
}

如果想用sass可以再webpack的配置檔案裡進行修改。

然後又一個問題，vscode裡，css程式碼沒有高亮，看了一下，需要在.vue檔案的style標籤裡，加入屬性：

<style lang="postcss">

然後高亮以後，發現vscode的css格式化，縮排還是兩個空格。

這裡得說一下，這個縮排是vetur外掛做的格式化，它格式化的方式使用的是另外一個外掛，叫prettier，如果想要配置prettier，可以在專案根目錄下建立一個配置檔案：.prettierrc.js

內容如下：

module.exports = {
    tabWidth: 4
};

這裡說下，prettier的配置功能很少，所以，之前修改es6語法，在prettier裡沒有配置，就直接換成了typescript去格式化。

這樣，整體用下來，vscode上手方便，使用便捷，使用者體驗好，量級輕，速度也不錯。再初始化的時候可以選擇你的開發環境，自動給你安裝好大部分常用外掛。我估計我以後就放不下它了。也同樣推薦給愛學習的你。

本文完。