背景
由于當(dāng)前公司團隊在工程化和項目的一些標(biāo)準(zhǔn)流程還相差甚遠俱尼，在老大的分享和推進下，逐漸的完善一些團隊協(xié)作規(guī)范萎攒。意在提高效率遇八、高質(zhì)量的代碼輸出。保證最終產(chǎn)品的穩(wěn)定行耍休。
由于項目框架內(nèi)使用了ESLint代碼靜態(tài)檢測刃永，為了在開發(fā)時發(fā)現(xiàn)一些代碼格式的問題，所以有了接下來這個VS Code配置來實現(xiàn)實時eslint檢測羊精，保存時自動修復(fù)配置斯够。
-
Visual Studio Code 安裝插件
vscode.png -
快捷鍵 Ctrl + Shift + P 搜索Settings（JSON）文件并打開
settings.png
- 直接使用以下配置,也可以在已有配置后面添加以下配置
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// eslint 配置項
"eslint.enable": true, // 啟用ESLint
"eslint.run": "onType", // 運行l(wèi)inter的時間。 onSave/onType: 保存后/輸入時
"eslint.lintTask.enable": true, // 擴展是否為整個工作區(qū)文件夾提供lint任務(wù)喧锦。
"eslint.quiet": true, // 忽略警告
// 應(yīng)激活ESLint擴展名并嘗試驗證文件的語言標(biāo)識符數(shù)組
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown"
],
// 控制編輯器是否自動格式化粘貼的內(nèi)容读规。格式化程序必須可用，并且能針對文檔中的某一范圍進行格式化燃少。
"editor.formatOnPaste": true,
// 在保存時格式化文件束亏。格式化程序必須可用，延遲后文件不能保存阵具，并且編輯器不能關(guān)閉碍遍。
"editor.formatOnSave": false,
// 控制在保存時設(shè)置格式是設(shè)置整個文件格式還是僅設(shè)置修改內(nèi)容的格式定铜。僅當(dāng) "#editor.formatOnSave#" 為 "true" 時應(yīng)用。
// - file: 設(shè)置整個文件的格式怕敬。
// - modifications: 格式修改(需要源代碼管理)揣炕。
"editor.formatOnSaveMode": "file",
// 控制編輯器在鍵入一行后是否自動格式化該行。
"editor.formatOnType": false,
// 指定如何計算ESLint使用的工作目錄
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"eslint.codeAction.disableRuleComment": {
"enable": true, // 在快速修復(fù)菜單中顯示禁用lint規(guī)則东跪。默認(rèn)情況下為true祝沸。
"location": "separateLine" // 選擇在separateLine 或 sameLine上添加eslint disable注釋。默認(rèn)為separateLine
},
// 在保存時運行的代碼操作類型越庇。
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 控制在保存時運行代碼操作時修復(fù)哪些問題
// all : 通過重新驗證文件內(nèi)容修復(fù)所有可能的問題。這將執(zhí)行與在終端中使用--fix選項運行eslint相同的代碼路徑奉狈，因此可能需要一些時間卤唉。這是默認(rèn)值。
// problems : 僅修復(fù)當(dāng)前已知的可修復(fù)問題仁期，只要它們的文本編輯不重疊即可桑驱。此模式要快得多，但很可能只能解決部分問題跛蛋。
"eslint.codeActionsOnSave.mode": "all",
"eslint.format.enable": true, // 使用ESlint作為由ESlint驗證的文件的格式化程序
// 用于配置如何使用ESLint CLI引擎API啟動ESLint的選項熬的。默認(rèn)為空選項包。指向自定義.eslintrc.json文件的示例如下：
// "eslint.options": {
// "configFile": "C:/mydirectory/.eslintrc.json"
// }
}
