一、安裝相關插件
更新於2020年4月19日18:07:34
一共要安裝四個插件：分別是ESLint、Vetur、VueHelper、Prettier - Code formatter
VueHelper是代碼自動提示的插件，我覺得用這個還是比較舒服的。
二、在settings中添加這三個插件的相關配置
插一嘴：記得寫注釋，不然你后期想改的時候再看腦瓜子會炸。
// Vetur插件的相關配置
// "vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatterOptions": {},
"emmet.syntaxProfiles": {
"vue-html":
"html",
"vue":
"html"
},
"vetur.validation.template":
false,
"window.zoomLevel":
0,
"liveServer.settings.donotShowInfoMsg":
true,
"git.enableSmartCommit":
true,
"editor.minimap.enabled":
false,
"editor.renderWhitespace":
"all",
"editor.renderControlCharacters":
true,
"breadcrumbs.enabled":
true,
"workbench.activityBar.visible":
true,
"explorer.confirmDelete":
false,
// Eslint的配置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": [
"html"
]
},
"editor.codeActionsOnSave": {
"source.fixAll":
true,
"source.fixAll.eslint":
false
},
// prettier相關配置
// tab 大小為2個空格
"editor.tabSize":
2,
// 100 列后換行
"editor.wordWrapColumn":
100,
// Ctrl + S 時格式化
"editor.formatOnSave":
true,
// prettier 設置強制單引號
"prettier.singleQuote":
true,
// prettier 設置語句末尾加分號
"prettier.semi":
false,
// 選擇 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html":
"prettyhtml",
// 讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis":
true,
// 讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js":
"vscode-typescript",
// vetur 的自定義設置
// Ctrl + Shift + F 快捷鍵設置（依照vetur格式化代碼）
"[vue]": {
"editor.defaultFormatter":
"octref.vetur"
}
三、在項目的根目錄下添加.prettierrc配置文件
在今天使用之后發現還是會有一些問題，在使用Ctrl + S之后會將字符串使用雙引號引起來，並且會在句尾加上分號，這也是不能通過ESLint校驗的。
解決方案：
.
在.prettierrc配置文件中寫入如下配置：表示在句尾不加分號，使用單引號。
{
"semi": false,
"singleQuote": true
}
四、在vue單文件組件中使用
在單文件組件中將代碼變得不符合規范：
想要變得規范的第一步：右鍵選擇使用我們安裝的插件（也就是Prettier - Code formatter）格式化vue組件中的代碼：
進行完格式化文檔的第一步之后還是會有一點問題：就是在方法名之后不會自動加空格，所以要進行第二步：Ctrl + S 快捷鍵保存文檔即可把方法名后面的空格加上。
也是接觸這個沒多久，目前感覺有的配置是多余的，后續遇到問題還會繼續更新。