自己的vscode-settings.json配置詳解

vscode從插件庫裡安裝eslint和prettier
實現自動格式化
{ // 是否允許自定義的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默認啟用了根據文件類型自動設置tabsize的選項 "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // #每次保存的時候將代碼按eslint格式進行修復 "eslint.autoFixOnSave": true, "editor.fontWeight": "400", "editor.formatOnType": false, "workbench.iconTheme": "material-icon-theme", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, //eslint 代碼自動檢查相關配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "extensions": [ ".js", ".vue" ] }, // 添加 vue 支持 "eslint.validate": [ "javascriptreact", "vue", "javascript", { "language": "vue", "autoFix": true }, "html", { "language": "html", "autoFix": true } ], // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": false, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(名)和後面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "SynthWave '84", "editor.fontSize": 18, "search.followSymlinks": false, "workbench.sideBar.location": "right", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/synthwave84.css", "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/toolbar.css", "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/vscode-vibrancy-style.css", "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/enable-electron-vibrancy.js", ], // 高亮的顏色，emm暫時只支持這樣寫 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮組件 "wxmlConfig.activeDisable": false, // 是否開啟保存自動格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": true, "max_preserve_newlines": 1, "preserve_newlines": true, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的組件數組 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin" }
第二版本
{ // �Q行 "editor.wordWrap": "on", // 是否允許自定義的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默認啟用了根據文件類型自動設置tabsize的選項 不�z查�s�M，保存後�y一按�O置���碓O置 "editor.detectIndentation": false, // 重新設定tabsize 代碼縮進修改成4個空格 "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // #每次保存的時候將代碼按eslint格式進行修復 使用eslint �L格使用standard �M行代�a���t限制 "editor.fontWeight": "200", "editor.formatOnType": false, "workbench.iconTheme": "material-icon-theme", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, //eslint 代碼自動檢查相關配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "configFile": "D:/.eslintrc.js", "plugins": ["html"], "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": true, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(名)和後面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 html格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "Default Dark+", // 字�w大小 "editor.fontSize": 15, // �O置行高 "editor.lineHeight": 20, "search.followSymlinks": false, "workbench.sideBar.location": "right", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/vscode-transparent-glow/synthwave84.css", "file:///C:/vscode-transparent-glow/toolbar.css", "file:///C:/vscode-transparent-glow/vscode-vibrancy-style.css", "file:///C:/vscode-transparent-glow/enable-electron-vibrancy.js" ], // 高亮的顏色，emm暫時只支持這樣寫 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮組件 "wxmlConfig.activeDisable": false, // 是否開啟保存自動格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": false, "max_preserve_newlines": 1, "preserve_newlines": false, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的組件數組 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "terminal.integrated.rendererType": "dom", "vscode_vibrancy.opacity": 0.5 }
第一項 VS code編輯使用eslint的規則去格式化代碼
{ "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "eslint.validate": [ "javascript", "javascriptreact", "vue-html", { "language": "vue", "autoFix": true } ], "eslint.run": "onSave", "eslint.autoFixOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }
VS code還可以指定ESLint的格式文件
"eslint.options": { "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js", "plugins": ["html"] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ]
第二項 使用 Prettier - Code formatter 根據eslint的規則去格式化代碼
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "eslint.validate": [ "javascript", "javascriptreact", "vue-html", { "language": "vue", "autoFix": true } ], "eslint.run": "onSave", "eslint.autoFixOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "prettier.printWidth": 200, "prettier.requireConfig": true, "prettier.semi": false, "prettier.useEditorConfig": false, "prettier.useTabs": true,
{ // �Q行 "editor.wordWrap": "on", // 是否允許自定義的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默認啟用了根據文件類型自動設置tabsize的選項 不�z查�s�M，保存後�y一按�O置���碓O置 "editor.detectIndentation": false, // 重新設定tabsize 代碼縮進修改成4個空格 "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // #每次保存的時候將代碼按eslint格式進行修復 使用eslint �L格使用standard �M行代�a���t限制 "editor.fontWeight": "200", "editor.formatOnType": false, "workbench.iconTheme": "vscode-icons-mac", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, //eslint 代碼自動檢查相關配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "configFile": "D:/.eslintrc.js", "plugins": [ "html" ], "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": true, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(名)和後面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 html格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "SynthWave '84", // 字�w大小 "editor.fontSize": 15, // �O置行高 "editor.lineHeight": 20, "search.followSymlinks": false, "workbench.sideBar.location": "left", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/vscode-transparent/synthwave84.css", "file:///C:/vscode-transparent/toolbar.css", "file:///C:/vscode-transparent/vscode-vibrancy-style.css", "file:///C:/vscode-transparent/enable-electron-vibrancy.js" ], // 高亮的顏色，emm暫時只支持這樣寫 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮組件 "wxmlConfig.activeDisable": false, // 是否開啟保存自動格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": false, "max_preserve_newlines": 1, "preserve_newlines": false, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的組件數組 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "terminal.integrated.rendererType": "dom", "vscode_vibrancy.opacity": 1, "npm.fetchOnlinePackageInfo": false }