自己的vscode-settings.json配置詳解
阿新 • • 發佈：2020-05-11
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"
}第二版本
{
// 換行
"editor.wordWrap": "on",// 是否允許自定義的snippet片段提示
"editor.snippetSuggestions": "top",// vscode預設啟用了根據檔案型別自動設定tabsize的選項 不檢查縮排，儲存後統一按設定項來設定
"editor.detectIndentation": false,// 重新設定tabsize 程式碼縮進修改成4個空格
"editor.tabSize": 2,// #每次儲存的時候自動格式化
"editor.formatOnSave": false,// #每次儲存的時候將程式碼按eslint格式進行修復 使用eslint 風格使用standard 進行程式碼規則限制
"editor.fontWeight": "200","eslint.options": {
"configFile": "D:/.eslintrc.js","plugins": ["html"],"extensions": [
".js","eslint.validate": [
"javascript","javascriptreact","vue"
],// #讓prettier使用eslint的程式碼格式進行校驗
"prettier.eslintIntegration": true,// #去掉程式碼結尾的分號
"prettier.semi": true,// #使用帶引號替代雙引號
"prettier.singleQuote": true,// #這個按使用者自身習慣選擇 html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",// #讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript","workbench.colorTheme": "Default Dark+",// 字型大小
"editor.fontSize": 15,// 設定行高
"editor.lineHeight": 20,"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"
],"indent_with_tabs": false,"preserve_newlines": false,"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"
},"vue-html","eslint.run": "onSave","eslint.autoFixOnSave": true,}
VS code還可以指定ESLint的格式檔案
"eslint.options": {
"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js","plugins": ["html"]
},"vue"
]
第二項 使用 Prettier - Code formatter 根據eslint的規則去格式化程式碼
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"eslint.validate": [
"javascript",{
"language": "vue","autoFix": true
}
],"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},"prettier.printWidth": 200,"prettier.requireConfig": true,"prettier.semi": false,"prettier.useEditorConfig": false,"prettier.useTabs": true,
{
// 換行
"editor.wordWrap": "on","workbench.iconTheme": "vscode-icons-mac","plugins": [
"html"
],"vue"
],"workbench.sideBar.location": "left","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"
],"vscode_vibrancy.opacity": 1,"npm.fetchOnlinePackageInfo": false
}
到此這篇關於自己的vscode-settings.json配置的文章就介紹到這了,更多相關vscode-settings.json配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！