vscode從插件庫(kù)里安裝eslint和prettier
實(shí)現(xiàn)自動(dòng)格式化
{
// 是否允許自定義的snippet片段提示
"editor.snippetSuggestions": "top",
// vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": false,
// #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
"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 代碼自動(dòng)檢查相關(guān)配置
"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的代碼格式進(jìn)行校驗(yàn)
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": false,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"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, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個(gè)選擇器中是否換行
"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暫時(shí)只支持這樣寫
"wxmlConfig.activeColor": {
"color": "#e5c07b"
},
// 是否禁用高亮組件
"wxmlConfig.activeDisable": false,
// 是否開(kāi)啟保存自動(dòng)格式化
"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"
},
// 高亮所忽略的組件數(shù)組
"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默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng) 不檢查縮進(jìn)，保存后統(tǒng)一按設(shè)置項(xiàng)來(lái)設(shè)置
"editor.detectIndentation": false,
// 重新設(shè)定tabsize 代碼縮進(jìn)修改成4個(gè)空格
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": false,
// #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù) 使用eslint 風(fēng)格使用standard 進(jìn)行代碼規(guī)則限制
"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 代碼自動(dòng)檢查相關(guān)配置
"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的代碼格式進(jìn)行校驗(yàn)
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": true,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶自身習(xí)慣選擇 html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"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, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個(gè)選擇器中是否換行
"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+",
// 字體大小
"editor.fontSize": 15,
// 設(shè)置行高
"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暫時(shí)只支持這樣寫
"wxmlConfig.activeColor": {
"color": "#e5c07b"
},
// 是否禁用高亮組件
"wxmlConfig.activeDisable": false,
// 是否開(kāi)啟保存自動(dòng)格式化
"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"
},
// 高亮所忽略的組件數(shù)組
"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
}
第一項(xiàng) VS code編輯使用eslint的規(guī)則去格式化代碼
{
"[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"
]
第二項(xiàng) 使用 Prettier - Code formatter 根據(jù)eslint的規(guī)則去格式化代碼
"[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,
{
// 換行
"editor.wordWrap": "on",
// 是否允許自定義的snippet片段提示
"editor.snippetSuggestions": "top",
// vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng) 不檢查縮進(jìn)，保存后統(tǒng)一按設(shè)置項(xiàng)來(lái)設(shè)置
"editor.detectIndentation": false,
// 重新設(shè)定tabsize 代碼縮進(jìn)修改成4個(gè)空格
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": false,
// #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù) 使用eslint 風(fēng)格使用standard 進(jìn)行代碼規(guī)則限制
"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 代碼自動(dòng)檢查相關(guān)配置
"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的代碼格式進(jìn)行校驗(yàn)
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": true,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶自身習(xí)慣選擇 html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"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, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個(gè)選擇器中是否換行
"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": 15,
// 設(shè)置行高
"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暫時(shí)只支持這樣寫
"wxmlConfig.activeColor": {
"color": "#e5c07b"
},
// 是否禁用高亮組件
"wxmlConfig.activeDisable": false,
// 是否開(kāi)啟保存自動(dòng)格式化
"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"
},
// 高亮所忽略的組件數(shù)組
"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
}
到此這篇關(guān)于自己的vscode-settings.json配置的文章就介紹到這了,更多相關(guān)vscode-settings.json配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- 解析VScode在Windows環(huán)境下c_cpp_properties.json文件配置問(wèn)題(推薦)
- 詳解如何在vscode里面調(diào)試js和node.js的方法步驟
- 利用vscode調(diào)試編譯后的js代碼詳解
- VSCode中如何利用d.ts文件進(jìn)行js智能提示
- VsCode新建VueJs項(xiàng)目的詳細(xì)步驟
- 利用types增強(qiáng)vscode中js代碼提示功能詳解
- 基于VSCode調(diào)試網(wǎng)頁(yè)JavaScript代碼過(guò)程詳解
