最近新安裝了 vscode，對它進行一次全新的配置赞厕，之前都是隨便配了能用就行。
主要使用 ESLint + Premitter + Vetur + koroFileHeader炸卑。
最終效果：
新建文件：自動添加文件信息（auther亡蓉，createTime，lastUpdateTime 等）瞳浦；對函數(shù)一鍵注釋信息担映。
保存時自動格式化：去除分號；自動縮進叫潦；函數(shù)名后 括號前后自動加空格等蝇完。
一開始安裝了 beautify 和 vetur 進行格式化，但發(fā)現(xiàn)格式化的效果不盡如人意矗蕊，對 vue template 中的代碼效果不好短蜕。后面采用上面的前三個結(jié)合。
koroFileHeader 是對文件或函數(shù)頭進行注釋傻咖，具體文檔 kotoFileHeader
1 安裝插件
在 vscode 左側(cè) extensions 中朋魔，搜索以上插件。
2 打開配置選項
打開 vscode setting.json卿操。vscode 左下角 設(shè)置圖標(biāo) -> settings -> 右上角 open settins(JSON) 圖標(biāo)警检。
3 配置 setting.json
以下是我的配置項：
{
// 代碼文件頭部注釋
"fileheader.customMade": {
"Descripttion": "",
"Version": "1.0",
"Author": "pj",
"Date": "Do not edit",
"LastEditors": "pj",
"LastEditTime": "Do not edit"
},
// 函數(shù)注釋
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
"fileheader.configObj": {
"createFileTime": true,
"language": {
"languagetest": {
"head": "/$$",
"middle": " $ @",
"end": " $/",
"functionSymbol": {
"head": "/** ",
"middle": " * @",
"end": " */"
},
"functionParams": "js"
}
},
"autoAdd": true,
"autoAddLine": 100,
"autoAlready": true,
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
},
"headInsertLine": {
"php": 2,
"sh": 2
},
"beforeAnnotation": {
"文件后綴": "該文件后綴的頭部注釋之前添加某些內(nèi)容"
},
"afterAnnotation": {
"文件后綴": "該文件后綴的頭部注釋之后添加某些內(nèi)容"
},
"specialOptions": {
"特殊字段": "自定義比如LastEditTime/LastEditors"
},
"switch": {
"newlineAddAnnotation": true
},
"supportAutoLanguage": [],
"prohibitAutoAdd": ["json"],
"folderBlacklist": ["node_modules", "文件夾禁止自動添加頭部注釋"],
"prohibitItemAutoAdd": [
"項目的全稱, 整個項目禁止自動添加頭部注釋, 可以使用快捷鍵添加"
],
"moveCursor": true,
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"atSymbol": ["@", "@"],
"atSymbolObj": {
"文件后綴": ["頭部注釋@符號", "函數(shù)注釋@符號"]
},
"colon": [": ", ": "],
"colonObj": {
"文件后綴": ["頭部注釋冒號", "函數(shù)注釋冒號"]
},
"filePathColon": "路徑分隔符替換",
"showErrorMessage": false,
"writeLog": false,
"wideSame": false,
"wideNum": 13,
"functionWideNum": 0,
"CheckFileChange": false,
"createHeader": true,
"useWorker": false,
"designAddHead": false,
"headDesignName": "random",
"headDesign": false,
"cursorModeInternalAll": {},
"openFunctionParamsCheck": true,
"functionParamsShape": ["{", "}"],
"functionBlankSpaceAll": {},
"functionTypeSymbol": "*",
"typeParamOrder": "type param",
"customHasHeadEnd": {},
"throttleTime": 60000
},
// 代碼格式化
// vscode默認(rèn)啟用了根據(jù)文件類型自動設(shè)置tabsize的選項
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 4,
"vetur.format.options.tabSize": 4,
// #每次保存的時候自動格式化
"editor.formatOnSave": true,
// 添加 vue 支持
"eslint.validate": ["javascript", "html", "vue"],
// 去掉代碼結(jié)尾的分號
"prettier.semi": false,
"prettier.tabWidth": 4,
// 使用單引號替代雙引號
"prettier.singleQuote": true,
// 讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 這個按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// "vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatterOptions": {
// vue組件中html代碼格式化樣式
"js-beautify-html": {
// 對屬性進行換行。
// - auto: 僅在超出行長度時才對屬性進行換行害淤。
// - force: 對除第一個屬性外的其他每個屬性進行換行扇雕。
// - force-aligned: 對除第一個屬性外的其他每個屬性進行換行，并保持對齊窥摄。
// - force-expand-multiline: 對每個屬性進行換行镶奉。
// - aligned-multiple: 當(dāng)超出折行長度時，將屬性進行垂直對齊。
"wrap_attributes": "auto"
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"vetur.validation.template": false,
// 每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// 代碼是否按屏幕寬度換行
"editor.wordWrap": "on",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
fileHeader 是按照相關(guān)文檔配置腮鞍，不使用的話可以忽略值骇。
4 配置過程中遇到的點
- tabSize 習(xí)慣用4個空格，但把所有能搜到 tabSize 的值改為4移国，并且設(shè)置 "editor.tabSize": 4
和 "vetur.format.options.tabSize": 4 之后吱瘩，格式化出來還是2個空格。
原因：prettier 中 tabWidth 默認(rèn)是2迹缀。
解決方法：配置 "prettier.tabWidth": 4 使碾。且適配 vue 文件的話（如去掉分號，使用單引號）祝懂，需要在 vetur.format.defaultFormatterOptions 中單獨配置 prettier 相關(guān)屬性票摇。詳見配置。
"prettier.tabWidth": 4,
- 使用 eslint 后砚蓬，代碼中有聲明未使用的變量矢门，會報錯，又不想挨著刪除（嫌麻煩）灰蛙，選擇不讓他報錯祟剔。
配置方法：package.json 中配置
"eslintConfig": {
"rules": {
"no-unused-vars": "off"
}
},
- vue 中 html 格式化，總是固定第二個屬性開始換行對齊摩梧，且有的標(biāo)簽錯位物延，不好看。像現(xiàn)在這樣配置 js-beautiful-html 不管用仅父。
原因：之前安裝了 beautify 叛薯，選擇了默認(rèn)使用 beautify 格式化 vue 文件，js-beautiful-html 是 vetur 中的配置選項笙纤。
解決方法：將 vue 默認(rèn)格式化插件改為 vetur耗溜。
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
注：prettier 插件會優(yōu)先使用項目根目錄下的 editorconfig 配置文件，如果沒有 editorConfig 文件省容，會在根目錄下找 .prettierrc 文件强霎，并使用該文件中的配置。找不到 editorConfig 和 蓉冈。prettierrc 文件城舞，才會使用 setting.json 中的配置。如果有 setting.json 中配置不生效的情況寞酿，看看是否有前面兩個文件家夺。可在 setting 中配置不使用 editorConfig 的配置伐弹。settings -> 搜索 editorConfig -> Prettier: Use Edit Config拉馋，置為 false。
快捷鍵格式化 vue 文件的時候，會提示有兩個格式化插件煌茴，讓選一個随闺，應(yīng)選擇 vetur，才能與 setting.json 文件中的配置相適用（主要是 js-beautify-html）蔓腐。
