格式化代碼時(shí)用到的插件
ESLint（代碼規(guī)范和錯(cuò)誤檢查工具）
Prettier（代碼格式化工具）
Vetur（識(shí)別 vue 文件）
EditorConfig for VS Code（定義項(xiàng)目的編碼規(guī)范伐割，編輯器的行為會(huì)與.editorconfig 文件中定義的一致，并且其優(yōu)先級(jí)比編輯器自身的設(shè)置要高，這在多人合作開發(fā)項(xiàng)目時(shí)十分有用而且必要）
Syncing（同步你的 VS Code 配置萨惑，在另一臺(tái)機(jī)器使用可以自動(dòng)同步配置，不需要重新慢慢配了）
Manta's Stylus Supremacy（使得 stylus 格式化更好看）
一仇矾、ESLint檢查與保存修復(fù)
如果項(xiàng)目使用
ESLint庸蔼，按以下設(shè)置保存自動(dòng)修復(fù)飄紅代碼
對(duì)vscode>1.41.0生效
ESLint官網(wǎng)
如果ESLint配置的完整，prettier加不加都可以贮匕，保存自動(dòng)修復(fù)不合規(guī)代碼
// -------------------- 配置eslint --------------------
//autoFixedOnSave 設(shè)置已廢棄姐仅，采用如下新的設(shè)置，新版(>1.41.0)配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
//autoFix默認(rèn)開啟刻盐，只需輸入字符串?dāng)?shù)組即可
"eslint.validate": [
"javascript",
"vue",
"html",
"javascriptreact",
"vue-html"
],
// -------------------- 配置eslint --------------------
二掏膏、格式化vue文件不自動(dòng)換行
1、vscode下載ESlint, Prettier, Vetur插件
2敦锌、打開vscode 選擇 文件->首選項(xiàng)->設(shè)置
3馒疹、搜索vetur.format.defaultFormatterOptions，之后在setting.json中編輯
4颖变、ctrl + s 保存 ，設(shè)置默認(rèn)Vetur
不足：vue中的js無法配置單雙引號(hào)肛走，句尾分號(hào)
settings.json：
// ---------------- 設(shè)置屬性、js不自動(dòng)換行 ----------------
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "aligned-multiple" //當(dāng)超出折行長度時(shí)，將屬性進(jìn)行垂直對(duì)齊
},
"prettyhtml": {
"printWidth": 100,//每行100字符
"singleQuote": false,//單引號(hào)強(qiáng)制轉(zhuǎn)雙引號(hào)
"wrapAttributes": false,
"sortAttributes": false
}
},
// 這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
// ---------------- 設(shè)置屬性、js不自動(dòng)換行 ----------------
在這里插入圖片描述
三、Vetur格式化
Vetur配置主要針對(duì)vue文件，包含vue文件折行設(shè)置，句尾分號(hào)铛纬，key是否使用單引號(hào)间雀，方法末尾是否加逗號(hào)進(jìn)行的配置
vue文件設(shè)置默認(rèn)格式化為Vetur
不足：vue中的js換行有點(diǎn)異常
// -------------------- vetur 配置 --------------------
// vue文件默認(rèn)格式化工具：vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// 這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// 讓vue中的js按prettier進(jìn)行格式化 用這個(gè)
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js": "prettier",
"js-beautify-html": {
"wrap_attributes": "aligned-multiple" //當(dāng)超出折行長度時(shí)连锯，將屬性進(jìn)行垂直對(duì)齊
},
"prettyhtml": {
"tabWidth": 4, // 會(huì)忽略vetur的tabSize配置
"printWidth": 100, //每行100字符
"singleQuote": true, //是否使用單引號(hào)
"semi": false, // 句尾是否加;
"wrapAttributes": false,
"sortAttributes": false
},
//vue中的js生效
"prettier": {
"semi": false, // 句尾是否加;
"singleQuote": true, //是否使用單引號(hào)
"trailingComma": "none" //禁止隨時(shí)添加逗號(hào)
}
},
// -------------------- vetur 配置 --------------------
三、Prettier格式化
因?yàn)関ue使用
Vetur配置，這里的prettier單獨(dú)配置主要針對(duì)js文件句尾分號(hào)鲁森，key是否使用單引號(hào)，方法末尾是否加逗號(hào)進(jìn)行的配置
發(fā)現(xiàn)設(shè)置不生效主要因?yàn)?code>Prettier默認(rèn)按.editorConfig配置為最高優(yōu)先級(jí)
js文件設(shè)置默認(rèn)格式化為Prettier
優(yōu)先級(jí)
1透罢、項(xiàng)目目錄的.prettierrc文件，支持json和分號(hào)格式（其實(shí)還有很多種）
2、項(xiàng)目目錄的.editorconfig文件（默認(rèn)配置)
3、vscode的配置文件（也有好幾個(gè)地方配置，包括vetur節(jié)點(diǎn)下面）
測試過程中發(fā)現(xiàn)一個(gè)插件可以不按以下配置直接對(duì)js文件格式化
Prettier-Standard - JavaScript formatter
// -------------------- prettier 配置(以下配置主要針對(duì).js) --------------------
"prettier.useEditorConfig": false, // 不使用editorConfig配置文件設(shè)置才生效
"prettier.semi": false, // 句尾是否加;
"prettier.singleQuote": true, //是否使用單引號(hào)
"prettier.trailingComma": "none", //禁止隨時(shí)添加逗號(hào)
// -------------------- prettier 配置 --------------------
完整的setting.json
{
"workbench.iconTheme": "vscode-icons",
// -------------------- 配置eslint --------------------
//autoFixedOnSave 設(shè)置已廢棄匣沼，采用如下新的設(shè)置倦沧，新版(>1.41.0)配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
//autoFix默認(rèn)開啟，只需輸入字符串?dāng)?shù)組即可
"eslint.validate": [
"javascript",
"vue",
"html",
"javascriptreact",
"vue-html"
],
// -------------------- 配置eslint --------------------
// 設(shè)置編輯器的默認(rèn)格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//方法括號(hào)之間插入空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// -------------------- vetur 配置 --------------------
// vue文件默認(rèn)格式化工具：vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// 這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// 讓vue中的js按prettier進(jìn)行格式化 用這個(gè)
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js": "prettier",
"js-beautify-html": {
"wrap_attributes": "aligned-multiple" //當(dāng)超出折行長度時(shí)轮傍，將屬性進(jìn)行垂直對(duì)齊
},
"prettyhtml": {
"tabWidth": 4, // 會(huì)忽略vetur的tabSize配置
"printWidth": 100, //每行100字符
"singleQuote": true, //是否使用單引號(hào)
"semi": false, // 句尾是否加;
"wrapAttributes": false,
"sortAttributes": false
},
//vue中的js生效
"prettier": {
"semi": false, // 句尾是否加;
"singleQuote": true, //是否使用單引號(hào)
"trailingComma": "none" //禁止隨時(shí)添加逗號(hào)
}
},
// -------------------- vetur 配置 --------------------
// -------------------- koro1FileHeader 配置 --------------------
// 頭部注釋
"fileheader.customMade": {
"Author": "AuthorName",
"Date": "Do not edit", // 文件創(chuàng)建時(shí)間(不變)
"LastEditors": "AuthorName", // 文件最后編輯者
"LastEditTime": "Do not edit", // 文件最后編輯時(shí)間
"Description": ""
// "FilePath": "only file name", // 只有文件名
// "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} AuthorName. All rights reserved.",
// "custom_string_obkoro1_date": "Do not edit" // 不帶Date前綴的時(shí)間
},
// 函數(shù)注釋
"fileheader.cursorMode": {
"description": "",
//"custom_string_obkoro1": "",
"param": "params",
"return": ""
},
// 插件配置項(xiàng)
"fileheader.configObj": {
"createHeader": false, // 新建文件自動(dòng)添加頭部注釋，默認(rèn)打開
"autoAdd": false, // 保存自動(dòng)添加頭部注釋首装，開啟才能自動(dòng)添加创夜，默認(rèn)開啟
"openFunctionParamsCheck": true, //函數(shù)注釋自動(dòng)提取函數(shù)的參數(shù)，默認(rèn)開啟
"createFileTime": true, // 默認(rèn)為此文件的創(chuàng)建時(shí)間仙逻，設(shè)為false更改為當(dāng)前生成注釋的時(shí)間
"dateFormat": "YYYY-MM-DD HH:mm:ss", // 默認(rèn)時(shí)間格式驰吓，修改影響所有時(shí)間字段
// 自定義注釋中的艾特和冒號(hào)：
"atSymbol": ["@", "@"], // 所有文件的頭部注釋和函數(shù)注釋的默認(rèn)值 @
"colon": [": ", ": "] // 所有文件的頭部注釋和函數(shù)注釋的默認(rèn)值 :
// 自定義特殊字段名，Date系奉、LastEditTime檬贰、LastEditors、Description缺亮、FilePath
// "specialOptions": {
// "Date": "since",
// "LastEditTime": "lastTime",
// "LastEditors": "LastAuthor",
// "Description": "message",
// "FilePath": "文件相對(duì)于項(xiàng)目的路徑"
// }
// 函數(shù)參數(shù)配置
// "functionParamsShape": "normal", // 正常
// "functionParamsShape": "no bracket", // 沒有方括號(hào)
// "functionParamsShape": "no type", // 沒有類型
// "functionParamsShape": [ "{", "}"], // 函數(shù)參數(shù)外形自定義翁涤，默認(rèn)值 {}
// "functionTypeSymbol": "*", // 參數(shù)沒有類型時(shí)的默認(rèn)值 *
// 函數(shù)設(shè)置不添加參數(shù)和類型 {*}
// "functionParamsShape": "no type", // 沒有類型
// "functionTypeSymbol": "" // 參數(shù)沒有類型時(shí)的默認(rèn)值 *
},
// -------------------- koro1FileHeader 配置 --------------------
// -------------------- prettier 配置(以下配置主要針對(duì).js) --------------------
"prettier.useEditorConfig": false, // 不使用editorConfig配置文件設(shè)置才生效
"prettier.semi": false, // 句尾是否加;
"prettier.singleQuote": true, //是否使用單引號(hào)
"prettier.trailingComma": "none", //禁止隨時(shí)添加逗號(hào)
// -------------------- prettier 配置 --------------------
"git.confirmSync": false,
"security.workspace.trust.untrustedFiles": "open"
}
