一、ESlint+Vetur 實現ESlint程式碼規範

二、重點----舊版本（舊版本配置在setting.json 會出現警告）

{
“eslint.autoFixOnSave”: true,“eslint.validate”: [
“javascript”,{
“language”: “vue”,“autoFix”: true
},{
“language”: “html”,“autoFix”: true
}
]
}

三、新版配置----新版本

{
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},“eslint.probe”: [“javascript”,“vue”,“html”]
}

以下是對自己vscode-settings.json 做一個記錄（僅供參考）

{
 //設定文字大小
 "editor.fontSize": 18,//設定文字行高
 "editor.lineHeight": 24,//開啟行數提示
 "editor.lineNumbers": "on",// 在輸入時顯示含有引數文件和型別資訊的小面板。
 "editor.parameterHints.enabled": true,// 調整視窗的縮放級別
 "window.zoomLevel": 0,// 檔案目錄
 "workbench.iconTheme": "vscode-icons",// 設定字型
 "editor.fontFamily": "'Droid Sans Mono','Courier New',monospace,'Droid Sans Fallback'",// 自動換行
 "editor.wordWrap": "on",// 自定義vscode面板顏色
 "workbench.colorCustomizations": {
  "tab.activeBackground": "#253046",// 活動選項卡的背景色
  "activityBar.background": "#253046",//活動欄背景色
  "sideBar.background": "#253046",//側邊欄背景色
  "activityBar.foreground": "#23f8c8",//活動欄前景色(例如用於圖示)
  "editor.background": "#292a2c" //編輯器背景顏色
  // "editor.foreground":"#ff0000",//編輯器預設前景色
  // "editor.findMatchBackground":"#23f8c8",//當前搜尋匹配項的顏色
  // "editor.findMatchHighlightBackground":"#ff0000",//其他搜尋匹配項的顏色
  // "editor.lineHighlightBackground":"#ff0000",//游標所在行高亮文字的背景顏色
  // "editor.selectionBackground":"#ff0000",//編輯器所選內容的顏色
  // "editor.selectionHighlightBackground":"#ff0000",//與所選內容具有相同內容的區域顏色
  // "editor.rangeHighlightBackground":"#ff0000",//突出顯示範圍的背景顏色，例如 "Quick Open" 和“查詢”功能
  // "editorBracketMatch.background":"#ff0000",//匹配括號的背景色
  // "editorCursor.foreground":"#ff0000",//編輯器游標顏色
  // "editorGutter.background":"#ff0000",//編輯器導航線的背景色，導航線包括邊緣符號和行號
  // "editorLineNumber.foreground":"#ff0000",//編輯器行號顏色
  // "sideBar.foreground":"#ff0000",//側邊欄前景色
  // "sideBarSectionHeader.background":"#ff0000",//側邊欄節標題的背景顏色
  // "statusBar.background":"#ff0000",//標準狀態欄背景色
  // "statusBar.noFolderBackground":"#ff0000",//沒有開啟資料夾時狀態列的背景色
  // "statusBar.debuggingBackground":"#ff0000",//除錯程式時狀態列的背景色
  // "tab.activeForeground":"#ff0000",//活動組中活動選項卡的前景色
  // "tab.inactiveBackground":"#ff0000",//非活動選項卡的背景色
  // "tab.inactiveForeground":"#ff0000" // 活動組中非活動選項卡的前景色
 },// vscode預設啟用了根據檔案型別自動設定tabsize的選項
 "editor.detectIndentation": false,// 重新設定tabsize
 "editor.tabSize": 2,// #每次儲存的時候自動格式化
 "editor.formatOnSave": true,// #讓函式(名)和後面的括號之間加個空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #這個按使用者自身習慣選擇
 "vetur.format.defaultFormatter.html": "js-beautify-html",// #讓vue中的js按編輯器自帶的ts格式進行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",// 儲存時執行的程式碼ESLint操作型別。
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },// 新增emmet支援vue檔案
 "emmet.includeLanguages": {
  "wxml": "html","vue": "html"
 },// 兩個選擇器中是否換行
 "minapp-vscode.disableAutoConfig": true,//快速預覽（右側）
 "editor.minimap.enabled": true,// tab 程式碼補全
 "files.associations": {
  "*.wpy": "vue","*.vue": "vue","*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"
 },// 用來配置如何使用ESLint CLI引擎API啟動ESLint。 預設為空選項
 "eslint.options": {
  "extensions": [".js",".vue"]
 },// 在onSave還是onType時執行linter。預設為onType。
 "eslint.run": "onSave",// 啟用ESLint作為已驗證檔案的格式化程式。
 "eslint.format.enable": true,// 語言識別符號的陣列，為此ESLint擴充套件應被啟用，並應嘗試驗證檔案。
 "eslint.probe": ["javascript","javascriptreact","vue-html","vue","html"],//關閉rg.exe程序 用cnpm導致會出現rg.exe佔用記憶體很高
 "search.followSymlinks": false,// 給js-beautify-html設定屬性隔斷
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   "wrap_attributes": "force-aligned","max_preserve_newlines": 0
  }
 },// style預設偏移一個indent
 "vetur.format.styleInitialIndent": true,// 定義匿名函式的函式關鍵字後面的空格處理。
 "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,// 定義函式引數括號前的空格處理方式。
 "typescript.format.insertSpaceBeforeFunctionParenthesis": true,// 新版本訊息
 "vsicons.dontShowNewVersionMessage": true,// 控制資源管理器是否在把檔案刪除到廢紙簍時進行確認。
 "explorer.confirmDelete": true,// 使用eslint-plugin-vue驗證<template>中的vue-html
 "vetur.validation.template": false,// 指定用在工作臺中的顏色主題。
 "workbench.colorTheme": "One Dark Pro"
}

總結

到此這篇關於vscode配置setting.json檔案實現eslint自動格式程式碼的文章就介紹到這了,更多相關vscode 配置eslint自動格式化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！