vscode從據說到使用，vetur，prettier，htmljscssPrettify踩坑指南。

今天基於vue-cli（2.9.3）構建一個新的項目。我用的sublime，es6的代碼格式要與公司格式兼容。採用了vue-cli自帶的eslint後，有一些不統一的部分須要修改。先看看sublime裏須要怎麼處理：

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

'semi': [2, 'always'],
    // 默認空格4個
    'indent': ['error', 4, {'SwitchCase': 1}]
  }// 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

indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = trueroot = 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,

配置中修改

4,

        // ...

        // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
        "space_after_anon_function": true,        // 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, 修改

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

這樣就能夠給.vue格式的文件作格式化了。

可是覺得這樣就ok了？並非，發現有個問題，格式化的時候，es6的方法簡寫會被誤認爲方法調用：

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

而後看了好多文檔，在這個jsPrettify裏也沒有這個配置能夠進行修改。而後就吃午餐去了，中午吃飯聽同事說vscode能夠解決這個問題。我下午回來就下載了一個，一試，果真不錯。

vscode會自動檢測個人文件類型，給我推薦插件下載，不須要我再去從網上搜插件，這個功能很人性化。我一打開.vue文件,就推薦了，vetur插件給我用了。我換了一下經常使用的快捷鍵，使用起來很方便。可是核心問題是，，，這個格式化，也沒有解決剛纔的問題，也是少了那個空格。

而後從網上找了找答案，能夠這樣配置：

在vscode中，打開首選項，設置，搜索vetur.format,再右側用戶設置裏，覆寫：

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

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

而後還有一個問題，就是vue文件中的css部分，語法默認不支持sass，postcss，須要本身配置。我這裏用了postcss：

在項目根目錄下，找到.postcsssrc.js新增一行以下：

'postcss-cssnext': {}
    }
}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上手方便，使用便捷，用戶體驗好，量級輕，速度也不錯。再初始化的時候能夠選擇你的開發環境，自動給你安裝好大部分經常使用插件。我估計我之後就放不下它了。也一樣推薦給愛學習的你。

本文完。